category selector

Billing.Shared/UI/ItemSelectPage.cs

@@ -1,44 +1,63 @@
 using Billing.Themes;
+using System;
 using System.Collections;
-
+using System.Collections.Generic;
 using Xamarin.Forms;
 
 namespace Billing.UI
 {
-    public class ItemSelectPage : ContentPage
+    public class ItemSelectPage<T> : ContentPage
     {
-        public ItemSelectPage(IList source)
+        public event EventHandler<T> ItemTapped;
+
+        public ItemSelectPage(IEnumerable<T> source)
         {
-            Content = new ListView
+            var content = new ListView
             {
                 ItemsSource = source,
-                ItemTemplate = new DataTemplate(() => new StackLayout
+                ItemTemplate = new DataTemplate(() => new ViewCell
                 {
-                    Orientation = StackOrientation.Horizontal,
-                    Padding = new Thickness(20, 0),
-                    Spacing = 10,
-                    Children =
+                    View = new StackLayout
                     {
-                        new Image
+                        Orientation = StackOrientation.Horizontal,
+                        Padding = new Thickness(20, 0),
+                        Spacing = 10,
+                        Children =
                         {
-                            WidthRequest = 22,
-                            HeightRequest = 22,
-                            Aspect = Aspect.AspectFit,
-                            VerticalOptions = LayoutOptions.Center
-                        }
-                        .Binding(Image.SourceProperty, "Icon"),
+                            new Image
+                            {
+                                WidthRequest = 22,
+                                HeightRequest = 22,
+                                Aspect = Aspect.AspectFit,
+                                VerticalOptions = LayoutOptions.Center
+                            }
+                            .Binding(Image.SourceProperty, "Icon"),
 
-                        new Label
-                        {
-                            VerticalOptions = LayoutOptions.Center,
-                            LineBreakMode = LineBreakMode.TailTruncation
+                            new Label
+                            {
+                                VerticalOptions = LayoutOptions.Center,
+                                LineBreakMode = LineBreakMode.TailTruncation
+                            }
+                            .Binding(Label.TextProperty, "Name")
+                            .DynamicResource(Label.TextColorProperty, BaseTheme.TextColor)
                         }
-                        .Binding(Label.TextProperty, "Name")
-                        .DynamicResource(Label.TextColorProperty, BaseTheme.TextColor)
                     }
                 })
             }
             .DynamicResource(BackgroundColorProperty, BaseTheme.WindowBackgroundColor);
+
+            // events
+            content.ItemTapped += List_ItemTapped;
+
+            Content = content;
+        }
+
+        private void List_ItemTapped(object sender, ItemTappedEventArgs e)
+        {
+            if (e.Item is T t)
+            {
+                ItemTapped?.Invoke(this, t);
+            }
         }
     }
 

Billing.Shared/UI/OptionsCells.cs

@@ -46,7 +46,7 @@ namespace Billing.UI
                 },
                 Children =
                 {
-                    new Image
+                    new TintImage
                     {
                         WidthRequest = 20,
                         HeightRequest = 20,
@@ -93,7 +93,7 @@ namespace Billing.UI
                 },
                 Children =
                 {
-                    new Image
+                    new TintImage
                     {
                         WidthRequest = 20,
                         HeightRequest = 20,

Billing.Shared/Views/AccountPage.xaml

@@ -54,7 +54,7 @@
                 </ui:GroupStackLayout.GroupHeaderTemplate>
                 <ui:GroupStackLayout.ItemTemplate>
                     <DataTemplate x:DataType="m:Account">
-                        <StackLayout Orientation="Horizontal" Padding="20, 0" HeightRequest="44" Spacing="10">
+                        <StackLayout Orientation="Horizontal" Padding="20, 0, 10, 0" HeightRequest="44" Spacing="10">
                             <Image Source="{Binding Icon}" HeightRequest="20" VerticalOptions="Center"/>
                             <Label Text="{Binding Name}" TextColor="{DynamicResource TextColor}"
                                    HorizontalOptions="FillAndExpand" VerticalOptions="Center"

Billing.Shared/Views/AccountPage.xaml.cs

@@ -1,5 +1,4 @@
 using System.Collections.Generic;
-using System.Collections.ObjectModel;
 using System.Linq;
 using Billing.Models;
 using Billing.UI;

Billing.Shared/Views/AddAccountPage.xaml.cs

@@ -108,15 +108,24 @@ namespace Billing.Views
             }
             using (Tap.Start())
             {
-                await Navigation.PushAsync(new ItemSelectPage(new List<SelectItem<AccountCategory>>
+                var source = new List<SelectItem<AccountCategory>>
                 {
                     new() { Icon = "sackdollar", Value = AccountCategory.Cash, Name = Resource.Cash },
                     new() { Icon = "creditcard", Value = AccountCategory.CreditCard, Name = Resource.CreditCard },
-                    new() { Icon = "", Value = AccountCategory.DebitCard, Name = Resource.DebitCard },
-                    new() { Icon = "", Value = AccountCategory.ElecAccount, Name = Resource.ElecAccount }
-                }));
+                    new() { Icon = "debitcard", Value = AccountCategory.DebitCard, Name = Resource.DebitCard },
+                    new() { Icon = "coins", Value = AccountCategory.ElecAccount, Name = Resource.ElecAccount }
+                };
+                var page = new ItemSelectPage<SelectItem<AccountCategory>>(source);
+                page.ItemTapped += Category_ItemTapped;
+                await Navigation.PushAsync(page);
             }
         }
+
+        private async void Category_ItemTapped(object sender, SelectItem<AccountCategory> e)
+        {
+            Category = e.Value;
+            await Navigation.PopAsync();
+        }
     }
 
     public class AccountEventArgs : EventArgs

Billing/Billing.iOS/Billing.iOS.csproj

@@ -97,6 +97,15 @@
     <BundleResource Include="Resources\sackdollar.png" />
     <BundleResource Include="Resources\sackdollar%402x.png" />
     <BundleResource Include="Resources\sackdollar%403x.png" />
+    <BundleResource Include="Resources\creditcard.png" />
+    <BundleResource Include="Resources\creditcard%402x.png" />
+    <BundleResource Include="Resources\creditcard%403x.png" />
+    <BundleResource Include="Resources\debitcard.png" />
+    <BundleResource Include="Resources\debitcard%402x.png" />
+    <BundleResource Include="Resources\debitcard%403x.png" />
+    <BundleResource Include="Resources\coins.png" />
+    <BundleResource Include="Resources\coins%402x.png" />
+    <BundleResource Include="Resources\coins%403x.png" />
   </ItemGroup>
   <ItemGroup>
     <ImageAsset Include="Assets.xcassets\AppIcon.appiconset\Contents.json">

Billing/Billing.iOS/Renderers/TintImageRenderer.cs

@@ -14,7 +14,16 @@ namespace Billing.iOS.Renderers
         {
             base.OnElementPropertyChanged(sender, e);
 
-            if (e.PropertyName == nameof(TintImage.PrimaryColor) && Control != null && Element is TintImage image)
+            if (Control == null)
+            {
+                return;
+            }
+
+            if (e.PropertyName == nameof(Image.Source))
+            {
+                Control.Image = Control.Image.ImageWithRenderingMode(UIKit.UIImageRenderingMode.AlwaysTemplate);
+            }
+            else if (e.PropertyName == nameof(TintImage.PrimaryColor) && Element is TintImage image)
             {
                 Control.TintColor = image.PrimaryColor?.ToUIColor();
             }
@@ -25,7 +34,11 @@ namespace Billing.iOS.Renderers
 
             if (Control != null && Element is TintImage image)
             {
-                Control.TintColor = image.PrimaryColor?.ToUIColor();
+                if (Control.Image != null)
+                {
+                    Control.Image = Control.Image.ImageWithRenderingMode(UIKit.UIImageRenderingMode.AlwaysTemplate);
+                    Control.TintColor = image.PrimaryColor?.ToUIColor();
+                }
             }
         }
     }