add account page layout

Billing.Shared/Billing.Shared.projitems

@@ -52,6 +52,7 @@
     <Compile Include="$(MSBuildThisFileDirectory)Views\SettingPage.xaml.cs">
       <DependentUpon>SettingPage.xaml</DependentUpon>
     </Compile>
+    <Compile Include="$(MSBuildThisFileDirectory)UI\OptionsCells.cs" />
   </ItemGroup>
   <ItemGroup>
     <EmbeddedResource Include="$(MSBuildThisFileDirectory)MainShell.xaml">

Billing.Shared/Themes/BaseTheme.cs

@@ -55,6 +55,14 @@ namespace Billing.Themes
                     new Setter { Property = Entry.FontFamilyProperty, Value = robotoRegularFontFamily }
                 }
             });
+            Add(new Style(typeof(OptionEditor))
+            {
+                Setters =
+                {
+                    new Setter { Property = Editor.FontSizeProperty, Value = Device.GetNamedSize(NamedSize.Small, typeof(Entry)) },
+                    new Setter { Property = Editor.FontFamilyProperty, Value = robotoRegularFontFamily }
+                }
+            });
             Add(new Style(typeof(Button))
             {
                 Setters =

Billing.Shared/UI/BillingDate.xaml

@@ -17,7 +17,7 @@
             <Setter Property="HorizontalOptions" Value="Center"/>
         </Style>
         <ControlTemplate x:Key="weekDay">
-            <Grid Padding="0, 8, 0, 0" RowDefinitions="Auto, 3" RowSpacing="0">
+            <Grid Padding="0, 8, 0, 0" RowDefinitions="Auto, 3" RowSpacing="{OnPlatform Android=0, iOS=4}">
                 <Grid.GestureRecognizers>
                     <TapGestureRecognizer Command="{Binding OnDayTapped, Source={x:Reference billingDate}}" CommandParameter="{TemplateBinding BillingDay}"/>
                 </Grid.GestureRecognizers>
@@ -32,7 +32,7 @@
             </Grid>
         </ControlTemplate>
         <ControlTemplate x:Key="weekEnd">
-            <Grid Padding="0, 8, 0, 0" RowDefinitions="Auto, 3" RowSpacing="0">
+            <Grid Padding="0, 8, 0, 0" RowDefinitions="Auto, 3" RowSpacing="{OnPlatform Android=0, iOS=4}">
                 <Grid.GestureRecognizers>
                     <TapGestureRecognizer Command="{Binding OnDayTapped, Source={x:Reference billingDate}}" CommandParameter="{TemplateBinding BillingDay}"/>
                 </Grid.GestureRecognizers>

Billing.Shared/UI/Converters.cs

@@ -38,4 +38,17 @@ namespace Billing.UI
             return value;
         }
     }
+
+    public class NotNullConverter : IValueConverter
+    {
+        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            return value != null;
+        }
+
+        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            return value;
+        }
+    }
 }

Billing.Shared/UI/CustomControl.cs

@@ -1,5 +1,4 @@
-using Billing.Themes;
+using System;
-using System;
 using Xamarin.Forms;
 
 namespace Billing.UI
@@ -30,126 +29,4 @@ namespace Billing.UI
             LongPressed?.Invoke(this, EventArgs.Empty);
         }
     }
-
-    public class OptionEntry : Entry { }
-
-    public abstract class OptionCell : ViewCell
-    {
-        public static readonly BindableProperty TitleProperty = BindableProperty.Create(nameof(Title), typeof(string), typeof(OptionCell));
-        public static readonly BindableProperty BackgroundColorProperty = BindableProperty.Create(nameof(BackgroundColor), typeof(Color), typeof(OptionCell));
-
-        public string Title
-        {
-            get => (string)GetValue(TitleProperty);
-            set => SetValue(TitleProperty, value);
-        }
-        public Color BackgroundColor
-        {
-            get => (Color)GetValue(BackgroundColorProperty);
-            set => SetValue(BackgroundColorProperty, value);
-        }
-
-        protected abstract View Content { get; }
-
-        public OptionCell()
-        {
-            View = new Grid
-            {
-                BindingContext = this,
-                Padding = new Thickness(20, 0),
-                ColumnDefinitions =
-                {
-                    new ColumnDefinition { Width = new GridLength(.3, GridUnitType.Star) },
-                    new ColumnDefinition { Width = new GridLength(.7, GridUnitType.Star) }
-                },
-                Children =
-                {
-                    new Label
-                    {
-                        LineBreakMode = LineBreakMode.TailTruncation,
-                        VerticalOptions = LayoutOptions.Center
-                    }
-                    .Binding(Label.TextProperty, nameof(Title))
-                    .DynamicResource(Label.TextColorProperty, BaseTheme.TextColor),
-
-                    Content.GridColumn(1)
-                }
-            }
-            .DynamicResource(VisualElement.BackgroundColorProperty, BaseTheme.OptionTintColor);
-        }
-    }
-
-    public class OptionTextCell : OptionCell
-    {
-        public static readonly BindableProperty DetailProperty = BindableProperty.Create(nameof(Detail), typeof(string), typeof(OptionTextCell));
-
-        public string Detail
-        {
-            get => (string)GetValue(DetailProperty);
-            set => SetValue(DetailProperty, value);
-        }
-
-        protected override View Content => new Label
-        {
-            HorizontalOptions = LayoutOptions.End,
-            VerticalOptions = LayoutOptions.Center
-        }
-        .Binding(Label.TextProperty, nameof(Detail))
-        .DynamicResource(Label.TextColorProperty, BaseTheme.SecondaryTextColor);
-    }
-
-    public class OptionSwitchCell : OptionCell
-    {
-        public static readonly BindableProperty IsToggledProperty = BindableProperty.Create(nameof(IsToggled), typeof(bool), typeof(OptionSwitchCell));
-
-        public bool IsToggled
-        {
-            get => (bool)GetValue(IsToggledProperty);
-            set => SetValue(IsToggledProperty, value);
-        }
-
-        protected override View Content => new Switch
-        {
-            HorizontalOptions = LayoutOptions.End,
-            VerticalOptions = LayoutOptions.Center
-        }
-        .Binding(Switch.IsToggledProperty, nameof(IsToggled), BindingMode.TwoWay);
-    }
-
-    public class OptionEntryCell : OptionCell
-    {
-        public static readonly BindableProperty TextProperty = BindableProperty.Create(nameof(Text), typeof(string), typeof(OptionEntryCell));
-        public static readonly BindableProperty KeyboardProperty = BindableProperty.Create(nameof(Keyboard), typeof(Keyboard), typeof(OptionEntryCell));
-        public static readonly BindableProperty PlaceholderProperty = BindableProperty.Create(nameof(Placeholder), typeof(string), typeof(OptionEntryCell));
-
-        public string Text
-        {
-            get => (string)GetValue(TextProperty);
-            set => SetValue(TextProperty, value);
-        }
-        public Keyboard Keyboard
-        {
-            get => (Keyboard)GetValue(KeyboardProperty);
-            set => SetValue(KeyboardProperty, value);
-        }
-        public string Placeholder
-        {
-            get => (string)GetValue(PlaceholderProperty);
-            set => SetValue(PlaceholderProperty, value);
-        }
-
-        protected override View Content => new OptionEntry
-        {
-            HorizontalOptions = LayoutOptions.Fill,
-            HorizontalTextAlignment = TextAlignment.End,
-            VerticalOptions = LayoutOptions.Center,
-            ReturnType = ReturnType.Next
-        }
-        .Binding(Entry.TextProperty, nameof(Text), BindingMode.TwoWay)
-        .Binding(InputView.KeyboardProperty, nameof(Keyboard))
-        .Binding(Entry.PlaceholderProperty, nameof(Placeholder))
-        .DynamicResource(Entry.TextColorProperty, BaseTheme.TextColor)
-        .DynamicResource(Entry.PlaceholderColorProperty, BaseTheme.SecondaryTextColor)
-        .DynamicResource(VisualElement.BackgroundColorProperty, BaseTheme.OptionTintColor);
-    }
 }

Billing.Shared/UI/Definition.cs

@@ -13,10 +13,10 @@ namespace Billing.UI
 
     public static class ExtensionHelper
     {
-        public static View Binding(this View view, BindableProperty property, string path, BindingMode mode = BindingMode.Default, IValueConverter converter = null)
+        public static T Binding<T>(this T obj, BindableProperty property, string path, BindingMode mode = BindingMode.Default, IValueConverter converter = null) where T : BindableObject
         {
-            view.SetBinding(property, path, mode, converter);
+            obj.SetBinding(property, path, mode, converter);
-            return view;
+            return obj;
         }
 
         public static View DynamicResource(this View view, BindableProperty property, string key)
@@ -36,6 +36,24 @@ namespace Billing.UI
             Grid.SetRow(view, row);
             return view;
         }
+
+        public static View GridColumnSpan(this View view, int columnSpan)
+        {
+            Grid.SetColumnSpan(view, columnSpan);
+            return view;
+        }
+
+        public static View GridRowSpan(this View view, int rowSpan)
+        {
+            Grid.SetRowSpan(view, rowSpan);
+            return view;
+        }
+
+        public static View Margin(this View view, Thickness margin)
+        {
+            view.Margin = margin;
+            return view;
+        }
     }
 
     public class Tap : IDisposable

Billing.Shared/UI/OptionsCells.cs

@@ -0,0 +1,286 @@
+using Billing.Themes;
+using Xamarin.Forms;
+
+namespace Billing.UI
+{
+
+    public class OptionEntry : Entry { }
+    public class OptionEditor : Editor { }
+
+    public abstract class OptionCell : ViewCell
+    {
+        public static readonly BindableProperty TitleProperty = BindableProperty.Create(nameof(Title), typeof(string), typeof(OptionCell));
+        public static readonly BindableProperty BackgroundColorProperty = BindableProperty.Create(nameof(BackgroundColor), typeof(Color), typeof(OptionCell));
+        public static readonly BindableProperty IconProperty = BindableProperty.Create(nameof(Icon), typeof(ImageSource), typeof(OptionCell));
+
+        public string Title
+        {
+            get => (string)GetValue(TitleProperty);
+            set => SetValue(TitleProperty, value);
+        }
+        public Color BackgroundColor
+        {
+            get => (Color)GetValue(BackgroundColorProperty);
+            set => SetValue(BackgroundColorProperty, value);
+        }
+        [TypeConverter(typeof(ImageSourceConverter))]
+        public ImageSource Icon
+        {
+            get => (ImageSource)GetValue(IconProperty);
+            set => SetValue(IconProperty, value);
+        }
+
+        protected abstract View Content { get; }
+
+        public OptionCell()
+        {
+            View = new Grid
+            {
+                BindingContext = this,
+                Padding = new Thickness(20, 0),
+                ColumnDefinitions =
+                {
+                    new ColumnDefinition { Width = GridLength.Auto },
+                    new ColumnDefinition { Width = new GridLength(.3, GridUnitType.Star) },
+                    new ColumnDefinition { Width = new GridLength(.7, GridUnitType.Star) }
+                },
+                Children =
+                {
+                    new Image
+                    {
+                        WidthRequest = 20,
+                        HeightRequest = 20,
+                        Aspect = Aspect.AspectFit,
+                        VerticalOptions = LayoutOptions.Center,
+                        Margin = new Thickness(6, 0)
+                    }
+                    .Binding(VisualElement.IsVisibleProperty, nameof(Icon), converter: new NotNullConverter())
+                    .Binding(Image.SourceProperty, nameof(Icon)),
+
+                    new Label
+                    {
+                        LineBreakMode = LineBreakMode.TailTruncation,
+                        VerticalOptions = LayoutOptions.Center
+                    }
+                    .GridColumn(1)
+                    .Binding(Label.TextProperty, nameof(Title))
+                    .DynamicResource(Label.TextColorProperty, BaseTheme.TextColor),
+
+                    Content.GridColumn(2)
+                }
+            }
+            .DynamicResource(VisualElement.BackgroundColorProperty, BaseTheme.OptionTintColor);
+        }
+    }
+
+    public abstract class OptionVerticalCell : OptionCell
+    {
+        public OptionVerticalCell()
+        {
+            View = new Grid
+            {
+                BindingContext = this,
+                Padding = new Thickness(20, 0),
+                ColumnDefinitions =
+                {
+                    new ColumnDefinition { Width = GridLength.Auto },
+                    new ColumnDefinition { Width = GridLength.Star }
+                },
+                RowDefinitions =
+                {
+                    new RowDefinition { Height = new GridLength(40) },
+                    new RowDefinition { Height = GridLength.Star }
+                },
+                Children =
+                {
+                    new Image
+                    {
+                        WidthRequest = 20,
+                        HeightRequest = 20,
+                        Aspect = Aspect.AspectFit,
+                        VerticalOptions = LayoutOptions.Center,
+                        Margin = new Thickness(6, 0)
+                    }
+                    .Binding(VisualElement.IsVisibleProperty, nameof(Icon), converter: new NotNullConverter())
+                    .Binding(Image.SourceProperty, nameof(Icon)),
+
+                    new Label
+                    {
+                        LineBreakMode = LineBreakMode.TailTruncation,
+                        VerticalOptions = LayoutOptions.Center
+                    }
+                    .GridColumn(1)
+                    .Binding(Label.TextProperty, nameof(Title))
+                    .DynamicResource(Label.TextColorProperty, BaseTheme.TextColor),
+
+                    Content.GridRow(1).GridColumnSpan(2)
+                }
+            }
+            .DynamicResource(VisualElement.BackgroundColorProperty, BaseTheme.OptionTintColor);
+        }
+    }
+
+    public class OptionTextCell : OptionCell
+    {
+        public static readonly BindableProperty DetailProperty = BindableProperty.Create(nameof(Detail), typeof(string), typeof(OptionTextCell));
+
+        public string Detail
+        {
+            get => (string)GetValue(DetailProperty);
+            set => SetValue(DetailProperty, value);
+        }
+
+        protected override View Content => new Label
+        {
+            HorizontalOptions = LayoutOptions.End,
+            VerticalOptions = LayoutOptions.Center
+        }
+        .Binding(Label.TextProperty, nameof(Detail))
+        .DynamicResource(Label.TextColorProperty, BaseTheme.SecondaryTextColor);
+    }
+
+    public class OptionSelectCell : OptionTextCell
+    {
+        public static readonly BindableProperty CommandProperty = BindableProperty.Create(nameof(Command), typeof(Command), typeof(OptionSelectCell));
+        public static readonly BindableProperty CommandParameterProperty = BindableProperty.Create(nameof(CommandParameter), typeof(object), typeof(OptionSelectCell));
+
+        public Command Command
+        {
+            get => (Command)GetValue(CommandProperty);
+            set => SetValue(CommandProperty, value);
+        }
+        public object CommandParameter
+        {
+            get => GetValue(CommandParameterProperty);
+            set => SetValue(CommandParameterProperty, value);
+        }
+
+        protected override View Content => new StackLayout
+        {
+            Orientation = StackOrientation.Horizontal,
+            HorizontalOptions = LayoutOptions.End,
+            Children =
+            {
+                new Label
+                {
+                    HorizontalOptions = LayoutOptions.End,
+                    VerticalOptions = LayoutOptions.Center
+                }
+                .Binding(Label.TextProperty, nameof(Detail))
+                .DynamicResource(Label.TextColorProperty, BaseTheme.SecondaryTextColor),
+
+                new TintImage
+                {
+                    HeightRequest = 20,
+                    VerticalOptions = LayoutOptions.Center,
+                    Margin = new Thickness(6, 0),
+                    Source = "right.png"
+                }
+            },
+            GestureRecognizers =
+            {
+                new TapGestureRecognizer()
+                    .Binding(TapGestureRecognizer.CommandProperty, nameof(Command))
+                    .Binding(TapGestureRecognizer.CommandParameterProperty, nameof(CommandParameter))
+            }
+        };
+    }
+
+    public class OptionSwitchCell : OptionCell
+    {
+        public static readonly BindableProperty IsToggledProperty = BindableProperty.Create(nameof(IsToggled), typeof(bool), typeof(OptionSwitchCell));
+
+        public bool IsToggled
+        {
+            get => (bool)GetValue(IsToggledProperty);
+            set => SetValue(IsToggledProperty, value);
+        }
+
+        protected override View Content => new Switch
+        {
+            HorizontalOptions = LayoutOptions.End,
+            VerticalOptions = LayoutOptions.Center
+        }
+        .Binding(Switch.IsToggledProperty, nameof(IsToggled), BindingMode.TwoWay);
+    }
+
+    public class OptionEntryCell : OptionCell
+    {
+        public static readonly BindableProperty TextProperty = BindableProperty.Create(nameof(Text), typeof(string), typeof(OptionEntryCell));
+        public static readonly BindableProperty KeyboardProperty = BindableProperty.Create(nameof(Keyboard), typeof(Keyboard), typeof(OptionEntryCell));
+        public static readonly BindableProperty PlaceholderProperty = BindableProperty.Create(nameof(Placeholder), typeof(string), typeof(OptionEntryCell));
+
+        public string Text
+        {
+            get => (string)GetValue(TextProperty);
+            set => SetValue(TextProperty, value);
+        }
+        public Keyboard Keyboard
+        {
+            get => (Keyboard)GetValue(KeyboardProperty);
+            set => SetValue(KeyboardProperty, value);
+        }
+        public string Placeholder
+        {
+            get => (string)GetValue(PlaceholderProperty);
+            set => SetValue(PlaceholderProperty, value);
+        }
+
+        protected override View Content => new OptionEntry
+        {
+            HorizontalOptions = LayoutOptions.Fill,
+            HorizontalTextAlignment = TextAlignment.End,
+            VerticalOptions = LayoutOptions.Center,
+            ReturnType = ReturnType.Next
+        }
+        .Binding(Entry.TextProperty, nameof(Text), BindingMode.TwoWay)
+        .Binding(InputView.KeyboardProperty, nameof(Keyboard))
+        .Binding(Entry.PlaceholderProperty, nameof(Placeholder))
+        .DynamicResource(Entry.TextColorProperty, BaseTheme.TextColor)
+        .DynamicResource(Entry.PlaceholderColorProperty, BaseTheme.SecondaryTextColor)
+        .DynamicResource(VisualElement.BackgroundColorProperty, BaseTheme.OptionTintColor);
+    }
+
+    public class OptionEditorCell : OptionVerticalCell
+    {
+        public static readonly BindableProperty TextProperty = BindableProperty.Create(nameof(Text), typeof(string), typeof(OptionEditorCell));
+        public static readonly BindableProperty FontSizeProperty = BindableProperty.Create(nameof(FontSize), typeof(double), typeof(OptionEditorCell), defaultValue: Device.GetNamedSize(NamedSize.Default, typeof(Editor)));
+        public static readonly BindableProperty KeyboardProperty = BindableProperty.Create(nameof(Keyboard), typeof(Keyboard), typeof(OptionEditorCell), defaultValue: Keyboard.Default);
+        public static readonly BindableProperty PlaceholderProperty = BindableProperty.Create(nameof(Placeholder), typeof(string), typeof(OptionEditorCell));
+
+        public string Text
+        {
+            get => (string)GetValue(TextProperty);
+            set => SetValue(TextProperty, value);
+        }
+        [TypeConverter(typeof(FontSizeConverter))]
+        public double FontSize
+        {
+            get => (double)GetValue(FontSizeProperty);
+            set => SetValue(FontSizeProperty, value);
+        }
+        public Keyboard Keyboard
+        {
+            get => (Keyboard)GetValue(KeyboardProperty);
+            set => SetValue(KeyboardProperty, value);
+        }
+        public string Placeholder
+        {
+            get => (string)GetValue(PlaceholderProperty);
+            set => SetValue(PlaceholderProperty, value);
+        }
+
+        protected override View Content => new OptionEditor
+        {
+            HorizontalOptions = LayoutOptions.Fill,
+            VerticalOptions = LayoutOptions.Fill
+        }
+        .Binding(Editor.TextProperty, nameof(Text), BindingMode.TwoWay)
+        .Binding(Editor.FontSizeProperty, nameof(FontSize))
+        .Binding(InputView.KeyboardProperty, nameof(Keyboard))
+        .Binding(Editor.PlaceholderProperty, nameof(Placeholder))
+        .DynamicResource(Editor.TextColorProperty, BaseTheme.TextColor)
+        .DynamicResource(Editor.PlaceholderColorProperty, BaseTheme.SecondaryTextColor)
+        .DynamicResource(VisualElement.BackgroundColorProperty, BaseTheme.OptionTintColor);
+    }
+}

Billing.Shared/Views/AddAccountPage.xaml

@@ -15,25 +15,34 @@
     </ContentPage.ToolbarItems>
 
     <ContentPage.Content>
-        <TableView Intent="Settings">
+        <TableView Intent="Settings" HasUnevenRows="True">
-            <TableSection>
+            <TableSection Title=" ">
-                <ui:OptionEntryCell Title="{r:Text AccountName}"
+                <ui:OptionEditorCell Title="{r:Text AccountName}" Height="120" FontSize="20"
-                                    Text="{Binding AccountName, Mode=TwoWay}"
+                                     Icon="pencil.png"
-                                    Keyboard="Text" Placeholder="{r:Text AccountNamePlaceholder}"/>
+                                     Text="{Binding AccountName, Mode=TwoWay}"
-                <ui:OptionTextCell Title="{r:Text Icon}"
+                                     Keyboard="Text" Placeholder="{r:Text AccountNamePlaceholder}"/>
-                                   Detail="{Binding AccountIcon}"/>
+                <ui:OptionSelectCell Title="{r:Text Icon}" Height="44" Icon="face.png"
+                                     Detail="{Binding AccountIcon}"/>
+                <ui:OptionSelectCell Title="{r:Text Category}" Height="44" Icon="project.png"
+                                     Detail="{Binding Category}"/>
             </TableSection>
             <TableSection>
-                <ui:OptionEntryCell Title="{r:Text Balance}"
+                <TableSection.Title>
+                    <OnPlatform x:TypeArguments="x:String" Android=" "/>
+                </TableSection.Title>
+                <ui:OptionEntryCell Title="{r:Text Balance}" Height="44" Icon="sackdollar.png"
                                     Text="{Binding Balance, Mode=TwoWay}"
                                     Keyboard="Numeric" Placeholder="{r:Text BalancePlaceholder}"/>
-                <ui:OptionTextCell Title="{r:Text Currency}"
+                <ui:OptionTextCell Title="{r:Text Currency}" Height="44" Icon="dollar.png"
                                    Detail="{r:Text CNY}"/>
             </TableSection>
             <TableSection>
-                <ui:OptionEntryCell Title="{r:Text Memo}"
+                <TableSection.Title>
-                                    Text="{Binding Memo, Mode=TwoWay}"
+                    <OnPlatform x:TypeArguments="x:String" Android=" "/>
-                                    Keyboard="Plain" Placeholder="{r:Text MemoPlaceholder}"/>
+                </TableSection.Title>
+                <ui:OptionEditorCell Title="{r:Text Memo}" Height="120" Icon="note.png"
+                                     Text="{Binding Memo, Mode=TwoWay}"
+                                     Keyboard="Plain" Placeholder="{r:Text MemoPlaceholder}"/>
             </TableSection>
         </TableView>
     </ContentPage.Content>

Billing.Shared/Views/AddAccountPage.xaml.cs

@@ -42,12 +42,16 @@ namespace Billing.Views
         private readonly Account account;
 
         public Command CheckAccount { get; }
+        public Command SelectIcon { get; }
+        public Command SelectCategory { get; }
 
         public event EventHandler<AccountEventArgs> AccountChecked;
 
         public AddAccountPage()
         {
             CheckAccount = new Command(OnCheckAccount);
+            SelectIcon = new Command(OnSelectIcon);
+            SelectCategory = new Command(OnSelectCategory);
             InitializeComponent();
         }
 
@@ -78,6 +82,16 @@ namespace Billing.Views
                 }
             });
         }
+
+        private void OnSelectIcon()
+        {
+
+        }
+
+        private void OnSelectCategory()
+        {
+
+        }
     }
 
     public class AccountEventArgs : EventArgs

Billing.sln

@@ -9,6 +9,8 @@ Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Billing.iOS", "Billing\Bill
 EndProject
 Project("{D954291E-2A0B-460D-934E-DC6B0785DB48}") = "Billing.Shared", "Billing.Shared\Billing.Shared.shproj", "{6AC75D01-70D6-4A07-8685-BC52AFD97A7A}"
 EndProject
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Svg2Png", "Svg2Png\Svg2Png.csproj", "{43BB5B21-61E0-42BB-ADF1-DBCD662E61E1}"
+EndProject
 Global
 	GlobalSection(SharedMSBuildProjectFiles) = preSolution
 		Billing.Shared\Billing.Shared.projitems*{5c4f1c35-6f66-4063-9605-a9f37fcabba8}*SharedItemsImports = 4
@@ -60,6 +62,18 @@ Global
 		{5C4F1C35-6F66-4063-9605-A9F37FCABBA8}.Release|iPhoneSimulator.ActiveCfg = Release|iPhoneSimulator
 		{5C4F1C35-6F66-4063-9605-A9F37FCABBA8}.Release|iPhoneSimulator.Build.0 = Release|iPhoneSimulator
 		{5C4F1C35-6F66-4063-9605-A9F37FCABBA8}.Release|iPhoneSimulator.Deploy.0 = Release|iPhoneSimulator
+		{43BB5B21-61E0-42BB-ADF1-DBCD662E61E1}.Debug|Any CPU.ActiveCfg = Debug|iPhoneSimulator
+		{43BB5B21-61E0-42BB-ADF1-DBCD662E61E1}.Debug|Any CPU.Build.0 = Debug|iPhoneSimulator
+		{43BB5B21-61E0-42BB-ADF1-DBCD662E61E1}.Debug|iPhone.ActiveCfg = Debug|iPhoneSimulator
+		{43BB5B21-61E0-42BB-ADF1-DBCD662E61E1}.Debug|iPhone.Build.0 = Debug|iPhoneSimulator
+		{43BB5B21-61E0-42BB-ADF1-DBCD662E61E1}.Debug|iPhoneSimulator.ActiveCfg = Debug|iPhoneSimulator
+		{43BB5B21-61E0-42BB-ADF1-DBCD662E61E1}.Debug|iPhoneSimulator.Build.0 = Debug|iPhoneSimulator
+		{43BB5B21-61E0-42BB-ADF1-DBCD662E61E1}.Release|Any CPU.ActiveCfg = Release|iPhoneSimulator
+		{43BB5B21-61E0-42BB-ADF1-DBCD662E61E1}.Release|Any CPU.Build.0 = Release|iPhoneSimulator
+		{43BB5B21-61E0-42BB-ADF1-DBCD662E61E1}.Release|iPhone.ActiveCfg = Release|iPhoneSimulator
+		{43BB5B21-61E0-42BB-ADF1-DBCD662E61E1}.Release|iPhone.Build.0 = Release|iPhoneSimulator
+		{43BB5B21-61E0-42BB-ADF1-DBCD662E61E1}.Release|iPhoneSimulator.ActiveCfg = Release|iPhoneSimulator
+		{43BB5B21-61E0-42BB-ADF1-DBCD662E61E1}.Release|iPhoneSimulator.Build.0 = Release|iPhoneSimulator
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE

Billing/Billing.Android/Billing.Android.csproj

@@ -78,6 +78,7 @@
     <Compile Include="Renderers\TintImageRenderer.cs" />
     <Compile Include="Resources\Resource.designer.cs" />
     <Compile Include="Properties\AssemblyInfo.cs" />
+    <Compile Include="Renderers\OptionEditorRenderer.cs" />
   </ItemGroup>
   <ItemGroup>
     <AndroidAsset Include="Assets\CascadiaCode-Bold.ttf" />
@@ -104,6 +105,102 @@
     <AndroidResource Include="Resources\mipmap-xxxhdpi\icon.png" />
     <AndroidResource Include="Resources\mipmap-xxxhdpi\launcher_foreground.png" />
     <AndroidResource Include="Resources\drawable\xamarin_logo.png" />
+    <AndroidResource Include="Resources\drawable\pencil.png">
+      <SubType></SubType>
+      <Generator></Generator>
+    </AndroidResource>
+    <AndroidResource Include="Resources\drawable\dollar.png">
+      <SubType></SubType>
+      <Generator></Generator>
+    </AndroidResource>
+    <AndroidResource Include="Resources\drawable\face.png">
+      <SubType></SubType>
+      <Generator></Generator>
+    </AndroidResource>
+    <AndroidResource Include="Resources\drawable\note.png">
+      <SubType></SubType>
+      <Generator></Generator>
+    </AndroidResource>
+    <AndroidResource Include="Resources\drawable\project.png">
+      <SubType></SubType>
+      <Generator></Generator>
+    </AndroidResource>
+    <AndroidResource Include="Resources\drawable\sackdollar.png">
+      <SubType></SubType>
+      <Generator></Generator>
+    </AndroidResource>
+    <AndroidResource Include="Resources\drawable-mdpi\dollar.png">
+      <SubType></SubType>
+      <Generator></Generator>
+    </AndroidResource>
+    <AndroidResource Include="Resources\drawable-mdpi\face.png">
+      <SubType></SubType>
+      <Generator></Generator>
+    </AndroidResource>
+    <AndroidResource Include="Resources\drawable-mdpi\note.png">
+      <SubType></SubType>
+      <Generator></Generator>
+    </AndroidResource>
+    <AndroidResource Include="Resources\drawable-mdpi\pencil.png">
+      <SubType></SubType>
+      <Generator></Generator>
+    </AndroidResource>
+    <AndroidResource Include="Resources\drawable-mdpi\project.png">
+      <SubType></SubType>
+      <Generator></Generator>
+    </AndroidResource>
+    <AndroidResource Include="Resources\drawable-mdpi\sackdollar.png">
+      <SubType></SubType>
+      <Generator></Generator>
+    </AndroidResource>
+    <AndroidResource Include="Resources\drawable-xhdpi\dollar.png">
+      <SubType></SubType>
+      <Generator></Generator>
+    </AndroidResource>
+    <AndroidResource Include="Resources\drawable-xhdpi\face.png">
+      <SubType></SubType>
+      <Generator></Generator>
+    </AndroidResource>
+    <AndroidResource Include="Resources\drawable-xhdpi\note.png">
+      <SubType></SubType>
+      <Generator></Generator>
+    </AndroidResource>
+    <AndroidResource Include="Resources\drawable-xhdpi\pencil.png">
+      <SubType></SubType>
+      <Generator></Generator>
+    </AndroidResource>
+    <AndroidResource Include="Resources\drawable-xhdpi\project.png">
+      <SubType></SubType>
+      <Generator></Generator>
+    </AndroidResource>
+    <AndroidResource Include="Resources\drawable-xhdpi\sackdollar.png">
+      <SubType></SubType>
+      <Generator></Generator>
+    </AndroidResource>
+    <AndroidResource Include="Resources\drawable-xxhdpi\dollar.png">
+      <SubType></SubType>
+      <Generator></Generator>
+    </AndroidResource>
+    <AndroidResource Include="Resources\drawable-xxhdpi\face.png">
+      <SubType></SubType>
+      <Generator></Generator>
+    </AndroidResource>
+    <AndroidResource Include="Resources\drawable-xxhdpi\note.png">
+      <SubType></SubType>
+      <Generator></Generator>
+    </AndroidResource>
+    <AndroidResource Include="Resources\drawable-xxhdpi\pencil.png">
+      <SubType></SubType>
+      <Generator></Generator>
+    </AndroidResource>
+    <AndroidResource Include="Resources\drawable-xxhdpi\project.png">
+      <SubType></SubType>
+      <Generator></Generator>
+    </AndroidResource>
+    <AndroidResource Include="Resources\drawable-xxhdpi\sackdollar.png">
+      <SubType></SubType>
+      <Generator></Generator>
+    </AndroidResource>
   </ItemGroup>
   <ItemGroup>
     <AndroidResource Include="Resources\drawable-xhdpi\wallet.png" />

Billing/Billing.Android/Renderers/OptionEditorRenderer.cs

@@ -0,0 +1,28 @@
+using Android.Content;
+using Android.Graphics.Drawables;
+using Billing.Droid.Renderers;
+using Billing.UI;
+using Xamarin.Forms;
+using Xamarin.Forms.Platform.Android;
+
+[assembly: ExportRenderer(typeof(OptionEditor), typeof(OptionEditorRenderer))]
+namespace Billing.Droid.Renderers
+{
+    public class OptionEditorRenderer : EditorRenderer
+    {
+        public OptionEditorRenderer(Context context) : base(context)
+        {
+        }
+
+        protected override void OnElementChanged(ElementChangedEventArgs<Editor> e)
+        {
+            base.OnElementChanged(e);
+
+            if (e.NewElement != null)
+            {
+                var drawable = new ColorDrawable(e.NewElement.BackgroundColor.ToAndroid());
+                Control.SetBackground(drawable);
+            }
+        }
+    }
+}

Billing/Billing.Android/Resources/Resource.designer.cs

@@ -16544,154 +16544,172 @@ namespace Billing.Droid
 			public const int design_snackbar_background = 2131165287;
 			
 			// aapt resource value: 0x7F070068
-			public const int ic_arrow_down_24dp = 2131165288;
+			public const int dollar = 2131165288;
 			
 			// aapt resource value: 0x7F070069
-			public const int ic_clock_black_24dp = 2131165289;
+			public const int face = 2131165289;
 			
 			// aapt resource value: 0x7F07006A
-			public const int ic_default = 2131165290;
+			public const int ic_arrow_down_24dp = 2131165290;
 			
 			// aapt resource value: 0x7F07006B
-			public const int ic_keyboard_black_24dp = 2131165291;
+			public const int ic_clock_black_24dp = 2131165291;
 			
 			// aapt resource value: 0x7F07006C
-			public const int ic_mtrl_checked_circle = 2131165292;
+			public const int ic_default = 2131165292;
 			
 			// aapt resource value: 0x7F07006D
-			public const int ic_mtrl_chip_checked_black = 2131165293;
+			public const int ic_keyboard_black_24dp = 2131165293;
 			
 			// aapt resource value: 0x7F07006E
-			public const int ic_mtrl_chip_checked_circle = 2131165294;
+			public const int ic_mtrl_checked_circle = 2131165294;
 			
 			// aapt resource value: 0x7F07006F
-			public const int ic_mtrl_chip_close_circle = 2131165295;
+			public const int ic_mtrl_chip_checked_black = 2131165295;
 			
 			// aapt resource value: 0x7F070070
-			public const int material_cursor_drawable = 2131165296;
+			public const int ic_mtrl_chip_checked_circle = 2131165296;
 			
 			// aapt resource value: 0x7F070071
-			public const int material_ic_calendar_black_24dp = 2131165297;
+			public const int ic_mtrl_chip_close_circle = 2131165297;
 			
 			// aapt resource value: 0x7F070072
-			public const int material_ic_clear_black_24dp = 2131165298;
+			public const int material_cursor_drawable = 2131165298;
 			
 			// aapt resource value: 0x7F070073
-			public const int material_ic_edit_black_24dp = 2131165299;
+			public const int material_ic_calendar_black_24dp = 2131165299;
 			
 			// aapt resource value: 0x7F070074
-			public const int material_ic_keyboard_arrow_left_black_24dp = 2131165300;
+			public const int material_ic_clear_black_24dp = 2131165300;
 			
 			// aapt resource value: 0x7F070075
-			public const int material_ic_keyboard_arrow_next_black_24dp = 2131165301;
+			public const int material_ic_edit_black_24dp = 2131165301;
 			
 			// aapt resource value: 0x7F070076
-			public const int material_ic_keyboard_arrow_previous_black_24dp = 2131165302;
+			public const int material_ic_keyboard_arrow_left_black_24dp = 2131165302;
 			
 			// aapt resource value: 0x7F070077
-			public const int material_ic_keyboard_arrow_right_black_24dp = 2131165303;
+			public const int material_ic_keyboard_arrow_next_black_24dp = 2131165303;
 			
 			// aapt resource value: 0x7F070078
-			public const int material_ic_menu_arrow_down_black_24dp = 2131165304;
+			public const int material_ic_keyboard_arrow_previous_black_24dp = 2131165304;
 			
 			// aapt resource value: 0x7F070079
-			public const int material_ic_menu_arrow_up_black_24dp = 2131165305;
+			public const int material_ic_keyboard_arrow_right_black_24dp = 2131165305;
 			
 			// aapt resource value: 0x7F07007A
-			public const int mtrl_dialog_background = 2131165306;
+			public const int material_ic_menu_arrow_down_black_24dp = 2131165306;
 			
 			// aapt resource value: 0x7F07007B
-			public const int mtrl_dropdown_arrow = 2131165307;
+			public const int material_ic_menu_arrow_up_black_24dp = 2131165307;
 			
 			// aapt resource value: 0x7F07007C
-			public const int mtrl_ic_arrow_drop_down = 2131165308;
+			public const int mtrl_dialog_background = 2131165308;
 			
 			// aapt resource value: 0x7F07007D
-			public const int mtrl_ic_arrow_drop_up = 2131165309;
+			public const int mtrl_dropdown_arrow = 2131165309;
 			
 			// aapt resource value: 0x7F07007E
-			public const int mtrl_ic_cancel = 2131165310;
+			public const int mtrl_ic_arrow_drop_down = 2131165310;
 			
 			// aapt resource value: 0x7F07007F
-			public const int mtrl_ic_error = 2131165311;
+			public const int mtrl_ic_arrow_drop_up = 2131165311;
 			
 			// aapt resource value: 0x7F070080
-			public const int mtrl_navigation_bar_item_background = 2131165312;
+			public const int mtrl_ic_cancel = 2131165312;
 			
 			// aapt resource value: 0x7F070081
-			public const int mtrl_popupmenu_background = 2131165313;
+			public const int mtrl_ic_error = 2131165313;
 			
 			// aapt resource value: 0x7F070082
-			public const int mtrl_popupmenu_background_dark = 2131165314;
+			public const int mtrl_navigation_bar_item_background = 2131165314;
 			
 			// aapt resource value: 0x7F070083
-			public const int mtrl_tabs_default_indicator = 2131165315;
+			public const int mtrl_popupmenu_background = 2131165315;
 			
 			// aapt resource value: 0x7F070084
-			public const int navigation_empty_icon = 2131165316;
+			public const int mtrl_popupmenu_background_dark = 2131165316;
 			
 			// aapt resource value: 0x7F070085
-			public const int notification_action_background = 2131165317;
+			public const int mtrl_tabs_default_indicator = 2131165317;
 			
 			// aapt resource value: 0x7F070086
-			public const int notification_bg = 2131165318;
+			public const int navigation_empty_icon = 2131165318;
 			
 			// aapt resource value: 0x7F070087
-			public const int notification_bg_low = 2131165319;
+			public const int note = 2131165319;
 			
 			// aapt resource value: 0x7F070088
-			public const int notification_bg_low_normal = 2131165320;
+			public const int notification_action_background = 2131165320;
 			
 			// aapt resource value: 0x7F070089
-			public const int notification_bg_low_pressed = 2131165321;
+			public const int notification_bg = 2131165321;
 			
 			// aapt resource value: 0x7F07008A
-			public const int notification_bg_normal = 2131165322;
+			public const int notification_bg_low = 2131165322;
 			
 			// aapt resource value: 0x7F07008B
-			public const int notification_bg_normal_pressed = 2131165323;
+			public const int notification_bg_low_normal = 2131165323;
 			
 			// aapt resource value: 0x7F07008C
-			public const int notification_icon_background = 2131165324;
+			public const int notification_bg_low_pressed = 2131165324;
 			
 			// aapt resource value: 0x7F07008D
-			public const int notification_template_icon_bg = 2131165325;
+			public const int notification_bg_normal = 2131165325;
 			
 			// aapt resource value: 0x7F07008E
-			public const int notification_template_icon_low_bg = 2131165326;
+			public const int notification_bg_normal_pressed = 2131165326;
 			
 			// aapt resource value: 0x7F07008F
-			public const int notification_tile_bg = 2131165327;
+			public const int notification_icon_background = 2131165327;
 			
 			// aapt resource value: 0x7F070090
-			public const int notify_panel_notification_icon_bg = 2131165328;
+			public const int notification_template_icon_bg = 2131165328;
 			
 			// aapt resource value: 0x7F070091
-			public const int plus = 2131165329;
+			public const int notification_template_icon_low_bg = 2131165329;
 			
 			// aapt resource value: 0x7F070092
-			public const int preference_list_divider_material = 2131165330;
+			public const int notification_tile_bg = 2131165330;
 			
 			// aapt resource value: 0x7F070093
-			public const int right = 2131165331;
+			public const int notify_panel_notification_icon_bg = 2131165331;
 			
 			// aapt resource value: 0x7F070094
-			public const int settings = 2131165332;
+			public const int pencil = 2131165332;
 			
 			// aapt resource value: 0x7F070095
-			public const int test_custom_background = 2131165333;
+			public const int plus = 2131165333;
 			
 			// aapt resource value: 0x7F070096
-			public const int tooltip_frame_dark = 2131165334;
+			public const int preference_list_divider_material = 2131165334;
 			
 			// aapt resource value: 0x7F070097
-			public const int tooltip_frame_light = 2131165335;
+			public const int project = 2131165335;
 			
 			// aapt resource value: 0x7F070098
-			public const int wallet = 2131165336;
+			public const int right = 2131165336;
 			
 			// aapt resource value: 0x7F070099
-			public const int xamarin_logo = 2131165337;
+			public const int sackdollar = 2131165337;
+			
+			// aapt resource value: 0x7F07009A
+			public const int settings = 2131165338;
+			
+			// aapt resource value: 0x7F07009B
+			public const int test_custom_background = 2131165339;
+			
+			// aapt resource value: 0x7F07009C
+			public const int tooltip_frame_dark = 2131165340;
+			
+			// aapt resource value: 0x7F07009D
+			public const int tooltip_frame_light = 2131165341;
+			
+			// aapt resource value: 0x7F07009E
+			public const int wallet = 2131165342;
+			
+			// aapt resource value: 0x7F07009F
+			public const int xamarin_logo = 2131165343;
 			
 			static Drawable()
 			{

Billing/Billing.iOS/Billing.iOS.csproj

@@ -79,6 +79,24 @@
     <BundleResource Include="Resources\RobotoCondensed-Bold.ttf" />
     <BundleResource Include="Resources\CascadiaCode-Bold.ttf" />
     <BundleResource Include="Resources\CascadiaCode-Regular.ttf" />
+    <BundleResource Include="Resources\dollar.png" />
+    <BundleResource Include="Resources\dollar%402x.png" />
+    <BundleResource Include="Resources\dollar%403x.png" />
+    <BundleResource Include="Resources\face.png" />
+    <BundleResource Include="Resources\face%402x.png" />
+    <BundleResource Include="Resources\face%403x.png" />
+    <BundleResource Include="Resources\note.png" />
+    <BundleResource Include="Resources\note%402x.png" />
+    <BundleResource Include="Resources\note%403x.png" />
+    <BundleResource Include="Resources\pencil.png" />
+    <BundleResource Include="Resources\pencil%402x.png" />
+    <BundleResource Include="Resources\pencil%403x.png" />
+    <BundleResource Include="Resources\project.png" />
+    <BundleResource Include="Resources\project%402x.png" />
+    <BundleResource Include="Resources\project%403x.png" />
+    <BundleResource Include="Resources\sackdollar.png" />
+    <BundleResource Include="Resources\sackdollar%402x.png" />
+    <BundleResource Include="Resources\sackdollar%403x.png" />
   </ItemGroup>
   <ItemGroup>
     <ImageAsset Include="Assets.xcassets\AppIcon.appiconset\Contents.json">