Improve properties makeup in Puppet

Apps/Contoso.Forms.Puppet/Contoso.Forms.Puppet/ModulePages/AnalyticsContentPage.xaml

@@ -5,21 +5,21 @@
              x:Class="Contoso.Forms.Puppet.AnalyticsContentPage">
     <TableView Intent="Form">
         <TableSection Title="Analytics Settings">
-            <SwitchCell Text="Analytics Enabled" On="true" x:Name="EnabledSwitchCell" OnChanged="UpdateEnabled"/>
+            <SwitchCell Text="Analytics Enabled" On="true" x:Name="EnabledSwitchCell" OnChanged="UpdateEnabled" />
         </TableSection>
         <TableSection Title="Tracking Events">
-            <EntryCell Label="Event Name" HorizontalTextAlignment="Start" x:Name="EventNameCell"/>
+            <EntryCell Label="Event Name" HorizontalTextAlignment="Start" x:Name="EventNameCell" />
             <ViewCell Tapped="PropertiesCellTapped">
                 <StackLayout Orientation="Horizontal" Margin="15,0,15,0">
                     <Label Text="Properties" HorizontalOptions="StartAndExpand" VerticalOptions="Center" />
-                    <Label Text="0" HorizontalOptions="EndAndExpand" VerticalOptions="Center" x:Name="NumPropertiesLabel" />
+                    <Label Text="0" HorizontalOptions="EndAndExpand" VerticalOptions="Center" TextColor="Gray" x:Name="NumPropertiesLabel" />
                 </StackLayout>
             </ViewCell>
             <ViewCell Tapped="AddProperty">
-                <Button Text="Add Property" Clicked="AddProperty" InputTransparent="true"/>
+                <Button Text="Add Property" Clicked="AddProperty" InputTransparent="true" />
             </ViewCell>
             <ViewCell Tapped="TrackEvent">
-                <Button Text="Track Event" InputTransparent="true" Clicked="TrackEvent"/>
+                <Button Text="Track Event" InputTransparent="true" Clicked="TrackEvent" FontAttributes="Bold" />
             </ViewCell>
         </TableSection>
     </TableView>

Apps/Contoso.Forms.Puppet/Contoso.Forms.Puppet/ModulePages/AnalyticsContentPage.xaml.cs

@@ -8,13 +8,14 @@ namespace Contoso.Forms.Puppet
 {
     public class Property
     {
+        public string Name { get; private set; }
+        public string Value { get; private set; }
+
         public Property(string propertyName, string propertyValue)
         {
             Name = propertyName;
             Value = propertyValue;
         }
-        public string Name;
-        public string Value;
     }
 
     [Android.Runtime.Preserve(AllMembers = true)]

Apps/Contoso.Forms.Puppet/Contoso.Forms.Puppet/ModulePages/CustomPropertiesContentPage.xaml

@@ -1,14 +1,14 @@
-<?xml version="1.0" encoding="UTF-8"?>
+<?xml version="1.0" encoding="UTF-8"?>
 <ContentPage Title="Custom Properties"
              xmlns="http://xamarin.com/schemas/2014/forms" 
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
              x:Class="Contoso.Forms.Puppet.CustomPropertiesContentPage">
     <StackLayout Orientation="Vertical">
         <ScrollView Orientation="Vertical">
-            <StackLayout Orientation="Vertical" x:Name="PropertiesContainer">
+            <StackLayout Orientation="Vertical" x:Name="PropertiesContainer" Padding="10">
             </StackLayout>
         </ScrollView>
-        <Button Text="Add property" Clicked="AddProperty_Clicked" x:Name="AddProperty"/>
-        <Button Text="Send" Clicked="Send_Clicked" x:Name="Send"/>
+        <Button Text="Add property" Clicked="AddProperty_Clicked" x:Name="AddProperty" Margin="0,20,0,0" />
+        <Button Text="Send" Clicked="Send_Clicked" x:Name="Send" FontAttributes="Bold" />
     </StackLayout>
 </ContentPage>

Apps/Contoso.Forms.Puppet/Contoso.Forms.Puppet/PropertiesContentPage.xaml

@@ -1,6 +1,18 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
-             x:Class="Contoso.Forms.Puppet.PropertiesContentPage">
-    <ListView x:Name="PropertyList" Margin="10"/>
+             x:Class="Contoso.Forms.Puppet.PropertiesContentPage"
+             Title="Event Properties">
+    <ListView x:Name="PropertyList">
+        <ListView.ItemTemplate>
+            <DataTemplate>
+                <ViewCell>
+                    <StackLayout Orientation="Horizontal" Padding="10">
+                        <Label Text="{Binding Name}" />
+                        <Label Text="{Binding Value}" TextColor="Gray" HorizontalOptions="EndAndExpand" />
+                    </StackLayout>
+                </ViewCell>
+            </DataTemplate>
+        </ListView.ItemTemplate>
+    </ListView>
 </ContentPage>

Apps/Contoso.Forms.Puppet/Contoso.Forms.Puppet/PropertiesContentPage.xaml.cs

@@ -1,5 +1,4 @@
 using System.Collections.Generic;
-
 using Xamarin.Forms;
 
 namespace Contoso.Forms.Puppet
@@ -9,17 +8,7 @@ namespace Contoso.Forms.Puppet
         public PropertiesContentPage(List<Property> EventProperties)
         {
             InitializeComponent();
-            Title = "Event Properties";
-
-            List<string> properties = new List<string>();
-
-            foreach (Property property in EventProperties)
-            {
-                string propertyString = property.Name + ": " + property.Value;
-                properties.Add(propertyString);
-            }
-
-            PropertyList.ItemsSource = properties;
+            PropertyList.ItemsSource = EventProperties;
         }
     }
 }

Apps/Contoso.Forms.Puppet/Contoso.Forms.Puppet/Views/CustomPropertyView.xaml

@@ -1,12 +1,21 @@
-<?xml version="1.0" encoding="UTF-8"?>
+<?xml version="1.0" encoding="UTF-8"?>
 <ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              x:Class="Contoso.Forms.Puppet.CustomPropertyView">
     <Frame OutlineColor="DarkGray">
         <StackLayout Orientation="Vertical">
-            <Entry x:Name="PropertyKey"/>
-            <Picker x:Name="PropertyType" SelectedIndexChanged="PropertyType_SelectedIndexChanged"/>
-            <StackLayout x:Name="PropertyValueHolder"/>
+            <StackLayout Orientation="Horizontal">
+                <Label Text="Key" HorizontalOptions="Start" VerticalOptions="Center" WidthRequest="60" />
+                <Entry HorizontalOptions="FillAndExpand" x:Name="PropertyKey" />
+            </StackLayout>
+            <StackLayout Orientation="Horizontal">
+                <Label Text="Type" HorizontalOptions="Start" VerticalOptions="Center" WidthRequest="60" />
+                <Picker HorizontalOptions="FillAndExpand" x:Name="PropertyType" SelectedIndexChanged="PropertyType_SelectedIndexChanged" />
+            </StackLayout>
+            <StackLayout Orientation="Horizontal" IsVisible="false" x:Name="PropertyValue">
+                <Label Text="Value" HorizontalOptions="Start" VerticalOptions="Center" WidthRequest="60" />
+                <StackLayout HorizontalOptions="FillAndExpand" x:Name="PropertyValueHolder" />
+            </StackLayout>
         </StackLayout>
     </Frame>
 </ContentView>

Apps/Contoso.Forms.Puppet/Contoso.Forms.Puppet/Views/CustomPropertyView.xaml.cs

@@ -24,7 +24,8 @@ namespace Contoso.Forms.Puppet
             {
                 properties.Clear(PropertyKey.Text);
             }
-            else {
+            else
+            {
                 View view = PropertyValueHolder.Children[0];
                 switch ((PropertyTypes)PropertyType.SelectedIndex)
                 {
@@ -38,7 +39,8 @@ namespace Contoso.Forms.Puppet
                         }
                         break;
                     case PropertyTypes.DateTime:
-                        DateTime date = new DateTime(DatePicker.Date.Year, DatePicker.Date.Month, DatePicker.Date.Day, TimePicker.Time.Hours, TimePicker.Time.Minutes, TimePicker.Time.Seconds);
+                        DateTime date = new DateTime(DatePicker.Date.Year, DatePicker.Date.Month, DatePicker.Date.Day,
+                                                     TimePicker.Time.Hours, TimePicker.Time.Minutes, TimePicker.Time.Seconds);
                         properties.Set(PropertyKey.Text, date);
                         break;
                     case PropertyTypes.String:
@@ -60,15 +62,18 @@ namespace Contoso.Forms.Puppet
         private void PropertyType_SelectedIndexChanged(object sender, EventArgs e)
         {
             PropertyValueHolder.Children.Clear();
+            PropertyValue.IsVisible = false;
             switch ((PropertyTypes) PropertyType.SelectedIndex)
             {
                 case PropertyTypes.Boolean:
                     PropertyValueHolder.Children.Add(new Switch());
+                    PropertyValue.IsVisible = true;
                     break;
                 case PropertyTypes.Number:
                     Editor NumberEditor = new Editor() { Keyboard = Keyboard.Numeric};
                     NumberEditor.TextChanged += NumberEditor_TextChanged;
                     PropertyValueHolder.Children.Add(NumberEditor);
+                    PropertyValue.IsVisible = true;
                     break;
                 case PropertyTypes.DateTime:
                     StackLayout DateTimeLayout = new StackLayout() { Orientation = StackOrientation.Vertical};
@@ -77,9 +82,11 @@ namespace Contoso.Forms.Puppet
                     TimePicker = new TimePicker() { Time = DateTime.Now.TimeOfDay };
                     DateTimeLayout.Children.Add(TimePicker);
                     PropertyValueHolder.Children.Add(DateTimeLayout);
+                    PropertyValue.IsVisible = true;
                     break;
                 case PropertyTypes.String:
                     PropertyValueHolder.Children.Add(new Editor());
+                    PropertyValue.IsVisible = true;
                     break;
             }
         }