icon select

Billing.Shared/Billing.Shared.projitems

@@ -51,6 +51,10 @@
     <Compile Include="$(MSBuildThisFileDirectory)Views\BillPage.xaml.cs">
       <DependentUpon>BillPage.xaml</DependentUpon>
     </Compile>
+    <Compile Include="$(MSBuildThisFileDirectory)Views\IconSelectPage.xaml.cs">
+      <DependentUpon>IconSelectPage.xaml</DependentUpon>
+      <SubType>Code</SubType>
+    </Compile>
     <Compile Include="$(MSBuildThisFileDirectory)Views\SettingPage.xaml.cs">
       <DependentUpon>SettingPage.xaml</DependentUpon>
     </Compile>
@@ -86,4 +90,9 @@
       <Generator>MSBuild:UpdateDesignTimeXaml</Generator>
     </EmbeddedResource>
   </ItemGroup>
+  <ItemGroup>
+    <EmbeddedResource Include="$(MSBuildThisFileDirectory)Views\IconSelectPage.xaml">
+      <Generator>MSBuild:UpdateDesignTimeXaml</Generator>
+    </EmbeddedResource>
+  </ItemGroup>
 </Project>

Billing.Shared/Languages/en.xml

@@ -31,4 +31,5 @@
 	<CreditCard>Credit Card</CreditCard>
 	<DebitCard>Debit Card</DebitCard>
 	<ElecAccount>Electronic Account</ElecAccount>
+	<IconSelector>Icon Selection</IconSelector>
 </root>

Billing.Shared/Languages/zh-CN.xml

@@ -31,4 +31,5 @@
 	<CreditCard>信用卡</CreditCard>
 	<DebitCard>储蓄卡</DebitCard>
 	<ElecAccount>电子账户</ElecAccount>
+	<IconSelector>图标选择</IconSelector>
 </root>

Billing.Shared/Themes/BaseTheme.cs

@@ -9,6 +9,7 @@ namespace Billing.Themes
         public const string CascadiaFontBold = nameof(CascadiaFontBold);
         public const string RobotoCondensedFontRegular = nameof(RobotoCondensedFontRegular);
         public const string RobotoCondensedFontBold = nameof(RobotoCondensedFontBold);
+        public const string BrandsFontRegular = nameof(BrandsFontRegular);
 
         public const string WindowBackgroundColor = nameof(WindowBackgroundColor);
         public const string OptionTintColor = nameof(OptionTintColor);
@@ -33,6 +34,7 @@ namespace Billing.Themes
             Add(CascadiaFontBold, Definition.GetCascadiaBoldFontFamily());
             Add(RobotoCondensedFontRegular, Definition.GetRobotoCondensedRegularFontFamily());
             Add(RobotoCondensedFontBold, Definition.GetRobotoCondensedBoldFontFamily());
+            Add(BrandsFontRegular, Definition.GetBrandsFontFamily());
 
             Add(PrimaryColor, PrimaryMauiColor);
             Add(SecondaryColor, SecondaryMauiColor);

Billing.Shared/UI/Converters.cs

@@ -1,6 +1,7 @@
 using Billing.Languages;
 using Billing.Models;
 using System;
+using System.Collections.Generic;
 using System.Globalization;
 using Xamarin.Forms;
 
@@ -95,4 +96,62 @@ namespace Billing.UI
             return value;
         }
     }
+
+    public class IconConverter : IValueConverter
+    {
+        public static readonly Dictionary<string, string> IconPreset = new()
+        {
+            { "alipay", "\uf642" },
+            { "appstore", "\uf370" },
+            { "apple-pay", "\uf416" },
+            { "btc", "\uf15a" },
+            { "jcb", "\uf24b" },
+            { "master-card", "\uf1f1" },
+            { "visa", "\uf1f0" },
+            { "g-pay", "\ue079" },
+            { "paypal", "\uf1ed" },
+            { "qq", "\uf1d6" },
+            { "steam", "\uf1b6" },
+            { "uber", "\uf402" },
+            { "weixin", "\uf1d7" },
+            { "youtube", "\uf167" }
+        };
+
+        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            if (value is ImageSource source)
+            {
+                return source;
+            }
+            if (value is string name)
+            {
+                if (name.StartsWith("#brand#"))
+                {
+                    var key = name[7..];
+                    if (!IconPreset.TryGetValue(key, out var glyph))
+                    {
+                        if (!int.TryParse(key, NumberStyles.HexNumber, CultureInfo.InvariantCulture, out int i))
+                        {
+                            return ImageSource.FromFile(BaseModel.ICON_DEFAULT);
+                        }
+                        glyph = char.ConvertFromUtf32(i);
+                    }
+                    return new FontImageSource
+                    {
+                        FontFamily = Definition.GetBrandsFontFamily(),
+                        Size = 20,
+                        Glyph = glyph,
+                        Color = Color.Black
+                    };
+                }
+                return ImageSource.FromFile(name);
+            }
+            return null;
+        }
+
+        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            return value;
+        }
+    }
 }

Billing.Shared/UI/Definition.cs

@@ -9,6 +9,7 @@ namespace Billing.UI
         public static partial string GetCascadiaBoldFontFamily();
         public static partial string GetRobotoCondensedRegularFontFamily();
         public static partial string GetRobotoCondensedBoldFontFamily();
+        public static partial string GetBrandsFontFamily();
     }
 
     public static class ExtensionHelper

Billing.Shared/UI/GroupStackLayout.cs

@@ -12,6 +12,8 @@ namespace Billing.UI
         public static readonly BindableProperty ItemTemplateProperty = BindableProperty.Create(nameof(ItemTemplate), typeof(DataTemplate), typeof(GroupStackLayout));
         public static readonly BindableProperty ItemsSourceProperty = BindableProperty.Create(nameof(ItemsSource), typeof(IList), typeof(GroupStackLayout), propertyChanged: OnItemsSourcePropertyChanged);
         public static readonly BindableProperty SpacingProperty = BindableProperty.Create(nameof(Spacing), typeof(double), typeof(GroupStackLayout), defaultValue: 4d);
+        public static readonly BindableProperty RowHeightProperty = BindableProperty.Create(nameof(RowHeight), typeof(double), typeof(GroupStackLayout), defaultValue: 32d);
+        public static readonly BindableProperty GroupHeightProperty = BindableProperty.Create(nameof(GroupHeight), typeof(double), typeof(GroupStackLayout), defaultValue: 24d);
 
         public DataTemplate GroupHeaderTemplate
         {
@@ -33,6 +35,16 @@ namespace Billing.UI
             get => (double)GetValue(SpacingProperty);
             set => SetValue(SpacingProperty, value);
         }
+        public double RowHeight
+        {
+            get => (double)GetValue(RowHeightProperty);
+            set => SetValue(RowHeightProperty, value);
+        }
+        public double GroupHeight
+        {
+            get => (double)GetValue(GroupHeightProperty);
+            set => SetValue(GroupHeightProperty, value);
+        }
 
         private static void OnItemsSourcePropertyChanged(BindableObject obj, object old, object @new)
         {
@@ -40,14 +52,14 @@ namespace Billing.UI
             stack.lastWidth = -1;
             if (@new == null)
             {
-                stack.cachedLayout.Clear();
+                //stack.cachedLayout.Clear();
                 stack.Children.Clear();
                 stack.InvalidateLayout();
             }
             else if (@new is IList list)
             {
                 stack.freezed = true;
-                stack.cachedLayout.Clear();
+                //stack.cachedLayout.Clear();
                 stack.Children.Clear();
                 var groupTemplate = stack.GroupHeaderTemplate;
                 var itemTemplate = stack.ItemTemplate;
@@ -91,7 +103,7 @@ namespace Billing.UI
             }
         }
 
-        private readonly Dictionary<View, Rectangle> cachedLayout = new();
+        //private readonly Dictionary<View, Rectangle> cachedLayout = new();
 
         private bool freezed;
         private double lastWidth = -1;
@@ -114,27 +126,40 @@ namespace Billing.UI
                 return;
             }
             var spacing = Spacing;
-            var lastHeight = 0.0;
+            var lastHeight = 0d;
+            var rowHeight = RowHeight;
+            var groupHeight = GroupHeight;
             foreach (var item in Children)
             {
-                var measured = item.Measure(width, height, MeasureFlags.IncludeMargins);
+                //var measured = item.Measure(width, height, MeasureFlags.IncludeMargins);
-                var rect = new Rectangle(
+                //var rect = new Rectangle(
-                    0, lastHeight, width,
+                //    0, lastHeight, width,
-                    measured.Request.Height);
+                //    measured.Request.Height);
-                if (cachedLayout.TryGetValue(item, out var v))
+                //if (cachedLayout.TryGetValue(item, out var v))
+                //{
+                //    if (v != rect)
+                //    {
+                //        cachedLayout[item] = rect;
+                //        item.Layout(rect);
+                //    }
+                //}
+                //else
+                //{
+                //    cachedLayout.Add(item, rect);
+                //    item.Layout(rect);
+                //}
+                double itemHeight;
+                if (item.BindingContext is IList)
                 {
-                    if (v != rect)
+                    itemHeight = groupHeight;
-                    {
-                        cachedLayout[item] = rect;
-                        item.Layout(rect);
-                    }
                 }
                 else
                 {
-                    cachedLayout.Add(item, rect);
+                    itemHeight = rowHeight;
-                    item.Layout(rect);
                 }
-                lastHeight += rect.Height + spacing;
+                var rect = new Rectangle(0, lastHeight, width, itemHeight);
+                item.Layout(rect);
+                lastHeight += itemHeight + spacing;
             }
         }
 
@@ -146,11 +171,21 @@ namespace Billing.UI
             }
             lastWidth = widthConstraint;
             var spacing = Spacing;
-            var lastHeight = 0.0;
+            var lastHeight = 0d;
+            var rowHeight = RowHeight;
+            var groupHeight = GroupHeight;
             foreach (var item in Children)
             {
-                var measured = item.Measure(widthConstraint, heightConstraint, MeasureFlags.IncludeMargins);
+                //var measured = item.Measure(widthConstraint, heightConstraint, MeasureFlags.IncludeMargins);
-                lastHeight += measured.Request.Height + spacing;
+                //lastHeight += measured.Request.Height + spacing;
+                if (item.BindingContext is IList)
+                {
+                    lastHeight += groupHeight + spacing;
+                }
+                else
+                {
+                    lastHeight = rowHeight + spacing;
+                }
             }
             lastSizeRequest = new SizeRequest(new Size(widthConstraint, lastHeight));
             return lastSizeRequest;

Billing.Shared/UI/ItemSelectPage.cs

@@ -1,6 +1,5 @@
 using Billing.Themes;
 using System;
-using System.Collections;
 using System.Collections.Generic;
 using Xamarin.Forms;
 
@@ -24,7 +23,7 @@ namespace Billing.UI
                         Spacing = 10,
                         Children =
                         {
-                            new Image
+                            new TintImage
                             {
                                 WidthRequest = 22,
                                 HeightRequest = 22,

Billing.Shared/UI/OptionsCells.cs

@@ -203,8 +203,9 @@ namespace Billing.UI
             HorizontalOptions = LayoutOptions.End,
             Children =
             {
-                new Image
+                new TintImage
                 {
+                    WidthRequest = 26,
                     HeightRequest = 20,
                     HorizontalOptions = LayoutOptions.End,
                     VerticalOptions = LayoutOptions.Center,

Billing.Shared/UI/WrapLayout.cs

@@ -8,8 +8,8 @@ namespace Billing.UI
     public class WrapLayout : Layout<View>
     {
         public static readonly BindableProperty ItemsSourceProperty = BindableProperty.Create(nameof(ItemsSource), typeof(IList), typeof(WrapLayout), propertyChanged: OnItemsSourcePropertyChanged);
-        public static readonly BindableProperty ColumnSpacingProperty = BindableProperty.Create(nameof(ColumnSpacing), typeof(double), typeof(WrapLayout), defaultValue: 5.0, propertyChanged: (obj, _, _) => ((WrapLayout)obj).InvalidateLayout());
+        public static readonly BindableProperty ColumnSpacingProperty = BindableProperty.Create(nameof(ColumnSpacing), typeof(double), typeof(WrapLayout), defaultValue: 4d, propertyChanged: (obj, _, _) => ((WrapLayout)obj).InvalidateLayout());
-        public static readonly BindableProperty RowSpacingProperty = BindableProperty.Create(nameof(RowSpacing), typeof(double), typeof(WrapLayout), defaultValue: 5.0, propertyChanged: (obj, _, _) => ((WrapLayout)obj).InvalidateLayout());
+        public static readonly BindableProperty RowSpacingProperty = BindableProperty.Create(nameof(RowSpacing), typeof(double), typeof(WrapLayout), defaultValue: 4d, propertyChanged: (obj, _, _) => ((WrapLayout)obj).InvalidateLayout());
 
         private static void OnItemsSourcePropertyChanged(BindableObject obj, object old, object @new)
         {
@@ -177,14 +177,14 @@ namespace Billing.UI
                 {
                     cellSize.Width = (width - columnSpacing * (columns - 1)) / columns;
                 }
-                if (double.IsPositiveInfinity(height))
+                //if (double.IsPositiveInfinity(height))
                 {
                     cellSize.Height = maxChildSize.Height;
                 }
-                else
+                //else
-                {
+                //{
-                    cellSize.Height = (height - RowSpacing * (rows - 1)) / rows;
+                //    cellSize.Height = (height - RowSpacing * (rows - 1)) / rows;
-                }
+                //}
                 layoutData = new LayoutData(visibleChildrenCount, cellSize, rows, columns);
             }
             else

Billing.Shared/Views/AccountPage.xaml

@@ -14,6 +14,7 @@
     <ContentPage.Resources>
         <ui:MoneyConverter x:Key="moneyConverter"/>
         <ui:MoneyConverter x:Key="money2Converter" MarkVisible="False"/>
+        <ui:IconConverter x:Key="iconConverter"/>
     </ContentPage.Resources>
 
     <ContentPage.ToolbarItems>
@@ -55,7 +56,8 @@
                 <ui:GroupStackLayout.ItemTemplate>
                     <DataTemplate x:DataType="m:Account">
                         <StackLayout Orientation="Horizontal" Padding="20, 0, 10, 0" HeightRequest="44" Spacing="10">
-                            <Image Source="{Binding Icon}" HeightRequest="20" VerticalOptions="Center"/>
+                            <ui:TintImage Source="{Binding Icon, Converter={StaticResource iconConverter}}"
+                                          WidthRequest="26" HeightRequest="20" VerticalOptions="Center"/>
                             <Label Text="{Binding Name}" TextColor="{DynamicResource TextColor}"
                                    HorizontalOptions="FillAndExpand" VerticalOptions="Center"
                                    FontSize="Default" FontAttributes="Bold"/>

Billing.Shared/Views/AddAccountPage.xaml

@@ -13,6 +13,7 @@
 
     <ContentPage.Resources>
         <ui:AccountCategoryConverter x:Key="categoryConverter"/>
+        <ui:IconConverter x:Key="iconConverter"/>
     </ContentPage.Resources>
 
     <ContentPage.ToolbarItems>
@@ -28,7 +29,7 @@
                                      Placeholder="{r:Text AccountNamePlaceholder}"/>
                 <ui:OptionImageCell Height="44" Icon="face.png"
                                     Title="{r:Text Icon}" 
-                                    ImageSource="{Binding AccountIcon}"
+                                    ImageSource="{Binding AccountIcon, Converter={StaticResource iconConverter}}"
                                     Command="{Binding SelectIcon}"/>
                 <ui:OptionSelectCell Height="44" Icon="project.png"
                                      Title="{r:Text Category}"

Billing.Shared/Views/AddAccountPage.xaml.cs

@@ -95,9 +95,23 @@ namespace Billing.Views
             }
         }
 
-        private void OnSelectIcon()
+        private async void OnSelectIcon()
         {
+            if (Tap.IsBusy)
+            {
+                return;
+            }
+            using (Tap.Start())
+            {
+                var page = new IconSelectPage(AccountIcon);
+                page.IconChecked += Account_IconChecked;
+                await Navigation.PushAsync(page);
+            }
+        }
 
+        private void Account_IconChecked(object sender, string icon)
+        {
+            AccountIcon = icon;
         }
 
         private async void OnSelectCategory()

Billing.Shared/Views/AddBillPage.xaml

@@ -1,6 +1,7 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <ui:BillingPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:ui="clr-namespace:Billing.UI"
+                xmlns:v="clr-namespace:Billing.Views"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 x:Class="Billing.Views.AddBillPage"
                 x:DataType="v:AddBillPage"

Billing.Shared/Views/IconSelectPage.xaml

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ui:BillingPage xmlns="http://xamarin.com/schemas/2014/forms"
+                xmlns:r="clr-namespace:Billing.Languages"
+                xmlns:ui="clr-namespace:Billing.UI"
+                xmlns:v="clr-namespace:Billing.Views"
+                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+                x:Class="Billing.Views.IconSelectPage"
+                x:Name="iconSelectPage"
+                x:DataType="v:IconSelectPage"
+                Title="{r:Text IconSelector}"
+                BindingContext="{x:Reference iconSelectPage}">
+
+    <ContentPage.Resources>
+        <ui:IconConverter x:Key="iconConverter"/>
+    </ContentPage.Resources>
+
+    <Grid RowDefinitions="*, Auto">
+        <ScrollView>
+            <ui:WrapLayout ItemsSource="{Binding IconsSource}" Margin="10">
+                <BindableLayout.ItemTemplate>
+                    <DataTemplate x:DataType="v:BillingIcon">
+                        <Grid WidthRequest="60" HeightRequest="60">
+                            <Grid.GestureRecognizers>
+                                <TapGestureRecognizer Command="{Binding IconCheck, Source={x:Reference iconSelectPage}}"
+                                                      CommandParameter="{Binding Icon}"/>
+                            </Grid.GestureRecognizers>
+                            <Grid BackgroundColor="{DynamicResource PromptBackgroundColor}"
+                                  IsVisible="{Binding IsChecked}"/>
+                            <ui:TintImage WidthRequest="20" HeightRequest="20" Aspect="AspectFit"
+                                          HorizontalOptions="Center" VerticalOptions="Center"
+                                          Source="{Binding Icon, Converter={StaticResource iconConverter}}"/>
+                        </Grid>
+                    </DataTemplate>
+                </BindableLayout.ItemTemplate>
+            </ui:WrapLayout>
+        </ScrollView>
+    </Grid>
+</ui:BillingPage>

Billing.Shared/Views/IconSelectPage.xaml.cs

@@ -0,0 +1,80 @@
+using Billing.Models;
+using Billing.UI;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using Xamarin.Forms;
+
+namespace Billing.Views
+{
+    public partial class IconSelectPage : BillingPage
+    {
+        public static readonly BindableProperty IconsSourceProperty = BindableProperty.Create(nameof(IconsSource), typeof(IList<BillingIcon>), typeof(IconSelectPage));
+
+        public IList<BillingIcon> IconsSource
+        {
+            get => (IList<BillingIcon>)GetValue(IconsSourceProperty);
+            set => SetValue(IconsSourceProperty, value);
+        }
+
+        public Command IconCheck { get; }
+
+        public event EventHandler<string> IconChecked;
+
+        private string iconChecked;
+
+        public IconSelectPage(string icon)
+        {
+            iconChecked = icon;
+            IconCheck = new Command(OnIconCheck);
+
+            InitializeComponent();
+
+            InitIcons();
+        }
+
+        private void InitIcons()
+        {
+            var source = new List<BillingIcon>
+            {
+                new() { Icon = BaseModel.ICON_DEFAULT },
+                new() { Icon = "wallet" }
+            };
+            source.AddRange(IconConverter.IconPreset.Select(icon => new BillingIcon { Icon = $"#brand#{icon.Key}" }));
+            foreach (var icon in source)
+            {
+                if (icon.Icon == iconChecked)
+                {
+                    icon.IsChecked = true;
+                }
+            }
+            IconsSource = source;
+        }
+
+        private async void OnIconCheck(object o)
+        {
+            if (o is string icon)
+            {
+                foreach (var ic in IconsSource)
+                {
+                    ic.IsChecked = ic.Icon == icon;
+                }
+                iconChecked = icon;
+                IconChecked?.Invoke(this, icon);
+                await Navigation.PopAsync();
+            }
+        }
+    }
+
+    public class BillingIcon : BindableObject
+    {
+        public static readonly BindableProperty IsCheckedProperty = BindableProperty.Create(nameof(IsChecked), typeof(bool), typeof(BillingIcon));
+
+        public bool IsChecked
+        {
+            get => (bool)GetValue(IsCheckedProperty);
+            set => SetValue(IsCheckedProperty, value);
+        }
+        public string Icon { get; set; }
+    }
+}

Billing/Billing.Android/Billing.Android.csproj

@@ -86,6 +86,7 @@
     <AndroidAsset Include="Assets\CascadiaCode-Regular.ttf" />
     <AndroidAsset Include="Assets\RobotoCondensed-Regular.ttf" />
     <AndroidAsset Include="Assets\RobotoCondensed-Bold.ttf" />
+    <AndroidAsset Include="Assets\fa-brands-400.ttf" />
     <None Include="Resources\AboutResources.txt" />
     <None Include="Assets\AboutAssets.txt" />
     <None Include="Properties\AndroidManifest.xml" />

Billing/Billing.Android/Definition.cs

@@ -6,5 +6,6 @@
         public static partial string GetCascadiaBoldFontFamily() => "CascadiaCode-Bold.ttf#CascadiaCode-Bold";
         public static partial string GetRobotoCondensedRegularFontFamily() => "RobotoCondensed-Regular.ttf#RobotoCondensed-Regular";
         public static partial string GetRobotoCondensedBoldFontFamily() => "RobotoCondensed-Bold.ttf#RobotoCondensed-Bold";
+        public static partial string GetBrandsFontFamily() => "fa-brands-400.ttf#FontAwesome6Brands-Regular";
     }
 }

Billing/Billing.Android/Renderers/TintImageRenderer.cs

@@ -18,9 +18,13 @@ namespace Billing.Droid.Renderers
         {
             base.OnElementPropertyChanged(sender, e);
 
-            if (e.PropertyName == nameof(TintImage.PrimaryColor) && Control?.Drawable != null && Element is TintImage image)
+            if (e.PropertyName == nameof(TintImage.PrimaryColor) ||
+                e.PropertyName == nameof(Image.Source))
             {
-                Control.Drawable.SetTint(image.PrimaryColor?.ToAndroid() ?? 0);
+                if (Control?.Drawable != null && Element is TintImage image)
+                {
+                    Control.Drawable.SetTint(image.PrimaryColor?.ToAndroid() ?? 0);
+                }
             }
         }
 

Billing/Billing.iOS/Billing.iOS.csproj

@@ -79,6 +79,7 @@
     <BundleResource Include="Resources\RobotoCondensed-Bold.ttf" />
     <BundleResource Include="Resources\CascadiaCode-Bold.ttf" />
     <BundleResource Include="Resources\CascadiaCode-Regular.ttf" />
+    <BundleResource Include="Resources\fa-brands-400.ttf" />
   </ItemGroup>
   <ItemGroup>
     <ImageAsset Include="Assets.xcassets\AppIcon.appiconset\Contents.json">

Billing/Billing.iOS/Definition.cs

@@ -6,5 +6,6 @@
         public static partial string GetCascadiaBoldFontFamily() => "CascadiaCode-Bold";
         public static partial string GetRobotoCondensedRegularFontFamily() => "RobotoCondensed-Regular";
         public static partial string GetRobotoCondensedBoldFontFamily() => "RobotoCondensed-Bold";
+        public static partial string GetBrandsFontFamily() => "FontAwesome6Brands-Regular";
     }
 }

Billing/Billing.iOS/Info.plist

@@ -44,6 +44,7 @@
 		<string>RobotoCondensed-Bold.ttf</string>
 		<string>CascadiaCode-Bold.ttf</string>
 		<string>CascadiaCode-Regular.ttf</string>
+		<string>fa-brands-400.ttf</string>
 	</array>
 	<key>UIFileSharingEnabled</key>
 	<true/>