category management

Billing.Shared/App.cs

@@ -34,6 +34,8 @@ namespace Billing
 
         public static void WriteBills() => StoreHelper.WriteBills(bills);
 
+        public static void WriteCategories() => StoreHelper.WriteCategories(categories);
+
         protected override void OnStart()
         {
             Helper.Debug($"personal folder: {StoreHelper.PersonalFolder}");

Billing.Shared/Billing.Shared.projitems

@@ -31,6 +31,7 @@
       <DependentUpon>BillingDate.xaml</DependentUpon>
     </Compile>
     <Compile Include="$(MSBuildThisFileDirectory)UI\BillingPage.cs" />
+    <Compile Include="$(MSBuildThisFileDirectory)UI\ColorPicker.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)UI\Converters.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)UI\CustomControl.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)UI\CustomEffect.cs" />
@@ -47,9 +48,21 @@
     <Compile Include="$(MSBuildThisFileDirectory)Views\AddBillPage.xaml.cs">
       <DependentUpon>AddBillPage.xaml</DependentUpon>
     </Compile>
+    <Compile Include="$(MSBuildThisFileDirectory)Views\AddCategoryPage.xaml.cs">
+      <DependentUpon>AddCategoryPage.xaml</DependentUpon>
+      <SubType>Code</SubType>
+    </Compile>
     <Compile Include="$(MSBuildThisFileDirectory)Views\BillPage.xaml.cs">
       <DependentUpon>BillPage.xaml</DependentUpon>
     </Compile>
+    <Compile Include="$(MSBuildThisFileDirectory)Views\CategoryPage.xaml.cs">
+      <DependentUpon>CategoryPage.xaml</DependentUpon>
+      <SubType>Code</SubType>
+    </Compile>
+    <Compile Include="$(MSBuildThisFileDirectory)Views\CategorySelectPage.xaml.cs">
+      <DependentUpon>CategorySelectPage.xaml</DependentUpon>
+      <SubType>Code</SubType>
+    </Compile>
     <Compile Include="$(MSBuildThisFileDirectory)Views\IconSelectPage.xaml.cs">
       <DependentUpon>IconSelectPage.xaml</DependentUpon>
       <SubType>Code</SubType>
@@ -99,4 +112,19 @@
   <ItemGroup>
     <Folder Include="$(MSBuildThisFileDirectory)Store\" />
   </ItemGroup>
+  <ItemGroup>
+    <EmbeddedResource Include="$(MSBuildThisFileDirectory)Views\CategoryPage.xaml">
+      <Generator>MSBuild:UpdateDesignTimeXaml</Generator>
+    </EmbeddedResource>
+  </ItemGroup>
+  <ItemGroup>
+    <EmbeddedResource Include="$(MSBuildThisFileDirectory)Views\AddCategoryPage.xaml">
+      <Generator>MSBuild:UpdateDesignTimeXaml</Generator>
+    </EmbeddedResource>
+  </ItemGroup>
+  <ItemGroup>
+    <EmbeddedResource Include="$(MSBuildThisFileDirectory)Views\CategorySelectPage.xaml">
+      <Generator>MSBuild:UpdateDesignTimeXaml</Generator>
+    </EmbeddedResource>
+  </ItemGroup>
 </Project>

Billing.Shared/Helper.cs

@@ -1,4 +1,5 @@
 using System;
+using System.Globalization;
 using Xamarin.Essentials;
 
 namespace Billing
@@ -53,5 +54,24 @@ namespace Billing
                 }
             }
         }
+
+        public const string DEFAULT_COLOR = "#183153";
+
+        public static string WrapColorString(string color)
+        {
+            if (color == null)
+            {
+                return DEFAULT_COLOR;
+            }
+            if (color.Length > 7)
+            {
+                var alpha = color[1..3];
+                if (int.TryParse(alpha, NumberStyles.HexNumber, CultureInfo.InvariantCulture, out int a) && a == 255)
+                {
+                    return "#" + color[3..];
+                }
+            }
+            return color;
+        }
     }
 }

Billing.Shared/Languages/Resource.cs

@@ -26,6 +26,11 @@ namespace Billing.Languages
         public static string AccountRequired => Text(nameof(AccountRequired));
         public static string NeedAccount => Text(nameof(NeedAccount));
         public static string AmountRequired => Text(nameof(AmountRequired));
+        public static string Income => Text(nameof(Income));
+        public static string Spending => Text(nameof(Spending));
+        public static string CategoryManage => Text(nameof(CategoryManage));
+        public static string AddCategory => Text(nameof(AddCategory));
+        public static string ConfirmDeleteCategory => Text(nameof(ConfirmDeleteCategory));
 
         #region Categories
         public static string Clothing => Text(nameof(Clothing));
@@ -36,9 +41,25 @@ namespace Billing.Languages
         public static string Entertainment => Text(nameof(Entertainment));
         public static string Learn => Text(nameof(Learn));
         public static string Medical => Text(nameof(Medical));
+        public static string OtherSpending => Text(nameof(OtherSpending));
         public static string Salary => Text(nameof(Salary));
         public static string Earnings => Text(nameof(Earnings));
         public static string Bonus => Text(nameof(Bonus));
+        public static string OtherIncome => Text(nameof(OtherIncome));
+        public static string Jewellery => Text(nameof(Jewellery));
+        public static string Cosmetics => Text(nameof(Cosmetics));
+        public static string Brunch => Text(nameof(Brunch));
+        public static string Dinner => Text(nameof(Dinner));
+        public static string Fruit => Text(nameof(Fruit));
+        public static string UtilityBill => Text(nameof(UtilityBill));
+        public static string PropertyFee => Text(nameof(PropertyFee));
+        public static string Rent => Text(nameof(Rent));
+        public static string Maintenance => Text(nameof(Maintenance));
+        public static string Bus => Text(nameof(Bus));
+        public static string LightRail => Text(nameof(LightRail));
+        public static string Taxi => Text(nameof(Taxi));
+        public static string Fitness => Text(nameof(Fitness));
+        public static string Party => Text(nameof(Party));
         #endregion
 
         static readonly Dictionary<string, LanguageResource> dict = new();

Billing.Shared/Languages/en.xml

@@ -58,11 +58,33 @@
 	<Entertainment>Entertainment</Entertainment>
 	<Learn>Learn</Learn>
 	<Medical>Medical</Medical>
+	<OtherSpending>Other spending</OtherSpending>
 	<Salary>Salary</Salary>
 	<Earnings>Earnings</Earnings>
 	<Bonus>Bonus</Bonus>
+	<OtherIncome>Other income</OtherIncome>
+	<Jewellery>Jewellery</Jewellery>
+	<Cosmetics>Cosmetics</Cosmetics>
+	<Brunch>Brunch</Brunch>
+	<Dinner>Dinner</Dinner>
+	<Fruit>Fruit</Fruit>
+	<UtilityBill>Utility bills</UtilityBill>
+	<PropertyFee>Property fee</PropertyFee>
+	<Rent>Rent</Rent>
+	<Maintenance>Maintenance</Maintenance>
+	<Bus>Bus</Bus>
+	<LightRail>Light rail</LightRail>
+	<Taxi>Taxi</Taxi>
+	<Fitness>Fitness</Fitness>
+	<Party>Party</Party>
 	<Yes>Yes</Yes>
 	<No>No</No>
 	<ConfirmDeleteAccount>Are you sure you want to delete the account?</ConfirmDeleteAccount>
 	<ConfirmDeleteBill>Are you sure you want to delete the billing?</ConfirmDeleteBill>
+	<Feature>Feature</Feature>
+	<CategoryManage>Category Management</CategoryManage>
+	<Detail>Detail</Detail>
+	<AddCategory>Add Category</AddCategory>
+	<ConfirmDeleteCategory>Are you sure you want to delete the category: {0}?</ConfirmDeleteCategory>
+	<SelectCategory>Select Category</SelectCategory>
 </root>

Billing.Shared/Languages/zh-CN.xml

@@ -58,11 +58,33 @@
 	<Entertainment>娱乐</Entertainment>
 	<Learn>学习</Learn>
 	<Medical>医疗</Medical>
+	<OtherSpending>其他支出</OtherSpending>
 	<Salary>工资</Salary>
 	<Earnings>收益</Earnings>
 	<Bonus>奖金</Bonus>
+	<OtherIncome>其他收入</OtherIncome>
+	<Jewellery>首饰</Jewellery>
+	<Cosmetics>化妆品</Cosmetics>
+	<Brunch>早午餐</Brunch>
+	<Dinner>晚餐</Dinner>
+	<Fruit>水果</Fruit>
+	<UtilityBill>水电费</UtilityBill>
+	<PropertyFee>物业费</PropertyFee>
+	<Rent>房租</Rent>
+	<Maintenance>维修保养</Maintenance>
+	<Bus>公交车</Bus>
+	<LightRail>轻轨</LightRail>
+	<Taxi>出租车</Taxi>
+	<Fitness>健身</Fitness>
+	<Party>聚会</Party>
 	<Yes>是</Yes>
 	<No>否</No>
 	<ConfirmDeleteAccount>是否确认删除该账户？</ConfirmDeleteAccount>
 	<ConfirmDeleteBill>是否确认删除该账单？</ConfirmDeleteBill>
+	<Feature>功能</Feature>
+	<CategoryManage>分类管理</CategoryManage>
+	<Detail>详细</Detail>
+	<AddCategory>新建分类</AddCategory>
+	<ConfirmDeleteCategory>是否确认删除该分类：{0}？</ConfirmDeleteCategory>
+	<SelectCategory>选择类别</SelectCategory>
 </root>

Billing.Shared/Models/Category.cs

@@ -1,4 +1,5 @@
-using System.Xml.Linq;
+using Xamarin.Forms;
+using System.Xml.Linq;
 
 namespace Billing.Models
 {
@@ -8,6 +9,7 @@ namespace Billing.Models
         public CategoryType Type { get; set; }
         public string Icon { get; set; } = ICON_DEFAULT;
         public string Name { get; set; }
+        public Color TintColor { get; set; } = Color.Transparent;
         public int? ParentId { get; set; }
 
         public override void OnXmlDeserialize(XElement node)
@@ -16,6 +18,11 @@ namespace Billing.Models
             Type = (CategoryType)Read(node, nameof(Type), 0);
             Icon = Read(node, nameof(Icon), ICON_DEFAULT);
             Name = Read(node, nameof(Name), string.Empty);
+            var color = Read(node, nameof(TintColor), string.Empty);
+            if (!string.IsNullOrEmpty(color))
+            {
+                TintColor = Color.FromHex(color);
+            }
             var parentId = Read(node, nameof(ParentId), -1);
             if (parentId >= 0)
             {
@@ -29,6 +36,10 @@ namespace Billing.Models
             Write(node, nameof(Type), (int)Type);
             Write(node, nameof(Icon), Icon);
             Write(node, nameof(Name), Name);
+            if (TintColor != Color.Transparent)
+            {
+                Write(node, nameof(TintColor), TintColor.ToHex());
+            }
             if (ParentId != null)
             {
                 Write(node, nameof(ParentId), ParentId.Value);

Billing.Shared/Store/StoreHelper.cs

@@ -59,19 +59,36 @@ namespace Billing.Store
             {
                 list = new List<Category>
                 {
-                    // TODO: sample categories
+                    // sample categories
                     new() { Id = 1, Name = Resource.Clothing, Icon = "clothes" },
                     new() { Id = 2, Name = Resource.Food, Icon = "food" },
-                    new() { Id = 3, Name = Resource.Drinks, Icon = "drink" },
                     new() { Id = 4, Name = Resource.Daily, Icon = "daily" },
                     new() { Id = 5, Name = Resource.Trans, Icon = "trans" },
                     new() { Id = 6, Name = Resource.Entertainment, Icon = "face" },
                     new() { Id = 7, Name = Resource.Learn, Icon = "learn" },
                     new() { Id = 8, Name = Resource.Medical, Icon = "medical" },
+                    new() { Id = 9, Name = Resource.OtherSpending, Icon = "plus" },
 
-                    new() { Id = 9, Type = CategoryType.Income, Name = Resource.Salary, Icon = "#brand#buffer" },
                     new() { Id = 10, Type = CategoryType.Income, Name = Resource.Earnings, Icon = "#brand#btc" },
-                    new() { Id = 20, Type = CategoryType.Income, Name = Resource.Bonus, Icon = "dollar" }
+                    new() { Id = 20, Type = CategoryType.Income, Name = Resource.OtherIncome, Icon = "plus" },
+
+                    // sub-categories
+                    new() { Id = 100, ParentId = 1, Name = Resource.Jewellery, Icon = "gem" },
+                    new() { Id = 101, ParentId = 1, Name = Resource.Cosmetics, Icon = "makeup" },
+                    new() { Id = 102, ParentId = 2, Name = Resource.Brunch, Icon = "brunch" },
+                    new() { Id = 103, ParentId = 2, Name = Resource.Dinner, Icon = "dinner" },
+                    new() { Id = 104, ParentId = 2, Name = Resource.Drinks, Icon = "drink" },
+                    new() { Id = 105, ParentId = 2, Name = Resource.Fruit, Icon = "fruit" },
+                    new() { Id = 106, ParentId = 4, Name = Resource.UtilityBill, Icon = "bill" },
+                    new() { Id = 107, ParentId = 4, Name = Resource.PropertyFee, Icon = "fee" },
+                    new() { Id = 108, ParentId = 4, Name = Resource.Rent, Icon = "rent" },
+                    new() { Id = 109, ParentId = 4, Name = Resource.Maintenance, Icon = "maintenance" },
+                    new() { Id = 110, ParentId = 5, Name = Resource.LightRail, Icon = "rail" },
+                    new() { Id = 111, ParentId = 5, Name = Resource.Taxi, Icon = "taxi" },
+                    new() { Id = 112, ParentId = 6, Name = Resource.Fitness, Icon = "fitness" },
+                    new() { Id = 113, ParentId = 6, Name = Resource.Party, Icon = "party" },
+                    new() { Id = 200, ParentId = 10, Type = CategoryType.Income, Name = Resource.Salary, Icon = "#brand#buffer" },
+                    new() { Id = 201, ParentId = 10, Type = CategoryType.Income, Name = Resource.Bonus, Icon = "dollar" },
                 };
                 Task.Run(() => WriteCategoriesInternal(list));
             }

Billing.Shared/UI/BillingPage.cs

@@ -8,6 +8,7 @@ namespace Billing.UI
         public BillingPage()
         {
             SetDynamicResource(BackgroundColorProperty, BaseTheme.WindowBackgroundColor);
+            Shell.SetTabBarIsVisible(this, false);
         }
     }
 }

Billing.Shared/UI/ColorPicker.cs

@@ -0,0 +1,137 @@
+using SkiaSharp;
+using SkiaSharp.Views.Forms;
+using System;
+
+using Xamarin.Forms;
+
+namespace Billing.UI
+{
+    public class ColorPicker : SKCanvasView
+    {
+        public static readonly BindableProperty ColorProperty = BindableProperty.Create(nameof(Color), typeof(Color), typeof(ColorPicker));
+
+        public Color Color
+        {
+            get => (Color)GetValue(ColorProperty);
+            set => SetValue(ColorProperty, value);
+        }
+
+        public event EventHandler<Color> ColorChanged;
+
+        private SKPoint? lastTouch;
+
+        public ColorPicker()
+        {
+            EnableTouchEvents = true;
+        }
+
+        protected override void OnPaintSurface(SKPaintSurfaceEventArgs e)
+        {
+            base.OnPaintSurface(e);
+            var skInfo = e.Info;
+            var skSurface = e.Surface;
+            var skCanvas = skSurface.Canvas;
+
+            var width = skInfo.Width;
+            var height = skInfo.Height;
+
+            skCanvas.Clear(SKColors.White);
+
+            using (var paint = new SKPaint())
+            {
+                paint.IsAntialias = true;
+                var colors = new SKColor[]
+                {
+                new SKColor(255, 0, 0),   // Red
+                new SKColor(255, 255, 0), // Yellow
+                new SKColor(0, 255, 0),   // Green (Lime)
+                new SKColor(0, 255, 255), // Aqua
+                new SKColor(0, 0, 255),   // Blue
+                new SKColor(255, 0, 255), // Fuchsia
+                new SKColor(255, 0, 0),   // Red
+                };
+
+                using var shader = SKShader.CreateLinearGradient(
+                    new SKPoint(0, 0),
+                    new SKPoint(width, 0),
+                    colors,
+                    null,
+                    SKShaderTileMode.Clamp);
+                paint.Shader = shader;
+                skCanvas.DrawPaint(paint);
+            }
+
+            using (var paint = new SKPaint())
+            {
+                paint.IsAntialias = true;
+                var colors = new SKColor[]
+                {
+                    SKColors.Transparent,
+                    SKColors.Black
+                };
+                using var shader = SKShader.CreateLinearGradient(
+                    new SKPoint(0, 0),
+                    new SKPoint(0, height),
+                    colors,
+                    null,
+                    SKShaderTileMode.Clamp);
+                paint.Shader = shader;
+                skCanvas.DrawPaint(paint);
+            }
+
+            if (lastTouch != null)
+            {
+                var touch = lastTouch.Value;
+                SKColor touchColor;
+                using (SKBitmap bitmap = new(skInfo))
+                {
+                    IntPtr dstPixels = bitmap.GetPixels();
+                    skSurface.ReadPixels(
+                        skInfo,
+                        dstPixels,
+                        skInfo.RowBytes,
+                        (int)touch.X, (int)touch.Y);
+                    touchColor = bitmap.GetPixel(0, 0);
+                }
+
+                using (SKPaint paintTouch = new())
+                {
+                    paintTouch.Style = SKPaintStyle.Fill;
+                    paintTouch.Color = SKColors.White;
+                    paintTouch.IsAntialias = true;
+
+                    skCanvas.DrawCircle(
+                        touch.X,
+                        touch.Y,
+                        18,
+                        paintTouch);
+
+                    paintTouch.Color = touchColor;
+                    skCanvas.DrawCircle(
+                        touch.X,
+                        touch.Y,
+                        12,
+                        paintTouch);
+                }
+
+                var color = touchColor.ToFormsColor();
+                Color = color;
+                ColorChanged?.Invoke(this, color);
+            }
+        }
+
+        protected override void OnTouch(SKTouchEventArgs e)
+        {
+            base.OnTouch(e);
+            lastTouch = e.Location;
+
+            var size = CanvasSize;
+            if ((e.Location.X > 0 && e.Location.X < size.Width) &&
+                (e.Location.Y > 0 && e.Location.Y < size.Height))
+            {
+                e.Handled = true;
+                InvalidateSurface();
+            }
+        }
+    }
+}

Billing.Shared/UI/Converters.cs

@@ -217,4 +217,21 @@ namespace Billing.UI
             throw new NotImplementedException();
         }
     }
+
+    public class SelectBackgroundColorConverter : IValueConverter
+    {
+        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            if (value is bool b && b)
+            {
+                return Application.Current.Resources[BaseTheme.PromptBackgroundColor];
+            }
+            return default(Color);
+        }
+
+        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            throw new NotImplementedException();
+        }
+    }
 }

Billing.Shared/UI/ItemSelectPage.cs

@@ -5,7 +5,7 @@ using Xamarin.Forms;
 
 namespace Billing.UI
 {
-    public class ItemSelectPage<T> : ContentPage
+    public class ItemSelectPage<T> : BillingPage
     {
         public event EventHandler<T> ItemTapped;
 

Billing.Shared/UI/OptionsCells.cs

@@ -190,6 +190,7 @@ namespace Billing.UI
     public class OptionImageCell : OptionSelectCell
     {
         public static readonly BindableProperty ImageSourceProperty = BindableProperty.Create(nameof(ImageSource), typeof(ImageSource), typeof(OptionImageCell));
+        public static readonly BindableProperty TintColorProperty = BindableProperty.Create(nameof(TintColor), typeof(Color?), typeof(OptionImageCell));
 
         [TypeConverter(typeof(ImageSourceConverter))]
         public ImageSource ImageSource
@@ -197,6 +198,12 @@ namespace Billing.UI
             get => (ImageSource)GetValue(ImageSourceProperty);
             set => SetValue(ImageSourceProperty, value);
         }
+        [TypeConverter(typeof(ColorTypeConverter))]
+        public Color? TintColor
+        {
+            get => (Color?)GetValue(TintColorProperty);
+            set => SetValue(TintColorProperty, value);
+        }
 
         protected override View Content => new StackLayout
         {
@@ -211,7 +218,8 @@ namespace Billing.UI
                     VerticalOptions = LayoutOptions.Center,
                     Margin = new Thickness(6, 0)
                 }
-                .Binding(Image.SourceProperty, nameof(ImageSource)),
+                .Binding(Image.SourceProperty, nameof(ImageSource))
+                .Binding(TintImage.PrimaryColorProperty, nameof(TintColor)),
 
                 new TintImage
                 {

Billing.Shared/Views/AccountPage.xaml

@@ -9,7 +9,8 @@
                 x:Name="accountPage"
                 x:DataType="v:AccountPage"
                 Title="{r:Text Accounts}"
-                BindingContext="{x:Reference accountPage}">
+                BindingContext="{x:Reference accountPage}"
+                Shell.TabBarIsVisible="True">
 
     <ContentPage.Resources>
         <ui:MoneyConverter x:Key="moneyConverter"/>

Billing.Shared/Views/AddBillPage.xaml.cs

@@ -177,22 +177,16 @@ namespace Billing.Views
             }
             using (Tap.Start())
             {
-                var source = App.Categories.Select(c => new SelectItem<int>
-                {
-                    Value = c.Id,
-                    Name = c.Name,
-                    Icon = c.Icon
-                });
-                var page = new ItemSelectPage<SelectItem<int>>(source);
-                page.ItemTapped += Category_ItemTapped;
+                var page = new CategorySelectPage(categoryId);
+                page.CategoryTapped += CategorySelectPage_Tapped;
                 await Navigation.PushAsync(page);
             }
         }
 
-        private void Category_ItemTapped(object sender, SelectItem<int> category)
+        private void CategorySelectPage_Tapped(object sender, UICategory e)
         {
-            categoryId = category.Value;
-            SetValue(CategoryNameProperty, category.Name);
+            categoryId = e.Category.Id;
+            SetValue(CategoryNameProperty, e.Name);
         }
 
         private async void OnSelectWallet()

Billing.Shared/Views/AddCategoryPage.xaml

@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ui:BillingPage xmlns="http://xamarin.com/schemas/2014/forms"
+                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+                xmlns:r="clr-namespace:Billing.Languages"
+                xmlns:ui="clr-namespace:Billing.UI"
+                xmlns:v="clr-namespace:Billing.Views"
+                x:Class="Billing.Views.AddCategoryPage"
+                x:Name="addCategoryPage"
+                x:DataType="v:AddCategoryPage"
+                BindingContext="{x:Reference addCategoryPage}">
+
+    <ContentPage.Resources>
+        <ui:IconConverter x:Key="iconConverter"/>
+    </ContentPage.Resources>
+
+    <ContentPage.ToolbarItems>
+        <ToolbarItem Order="Primary" IconImageSource="check.png" Command="{Binding CheckCategory}"/>
+    </ContentPage.ToolbarItems>
+
+    <ContentPage.Content>
+        <TableView Intent="Settings" HasUnevenRows="True">
+            <TableSection Title=" ">
+                <ui:OptionEditorCell Height="120" Icon="pencil.png" FontSize="20" Keyboard="Text"
+                                     Title="{r:Text Name}"
+                                     Text="{Binding CategoryName, Mode=TwoWay}"
+                                     Placeholder="{r:Text NamePlaceholder}"/>
+                <ui:OptionImageCell Height="44" Icon="face.png"
+                                    Title="{r:Text Icon}" 
+                                    ImageSource="{Binding CategoryIcon, Converter={StaticResource iconConverter}}"
+                                    TintColor="{Binding TintColor}"
+                                    Command="{Binding SelectIcon}"/>
+            </TableSection>
+            <TableSection>
+                <TableSection.Title>
+                    <OnPlatform x:TypeArguments="x:String" Android=" "/>
+                </TableSection.Title>
+                <ui:OptionEntryCell Height="44" Icon="color.png" Keyboard="Numeric"
+                                    Title="{r:Text PrimaryColor}"
+                                    Text="{Binding TintColorString, Mode=TwoWay}"/>
+                <ViewCell Height="120">
+                    <Grid BackgroundColor="{DynamicResource OptionTintColor}"
+                          ColumnDefinitions=".3*, .7*" Padding="10">
+                        <ui:ColorPicker Grid.Column="1" ColorChanged="ColorPicker_ColorChanged"/>
+                    </Grid>
+                </ViewCell>
+            </TableSection>
+        </TableView>
+    </ContentPage.Content>
+</ui:BillingPage>

Billing.Shared/Views/AddCategoryPage.xaml.cs

@@ -0,0 +1,137 @@
+using Billing.Languages;
+using Billing.Models;
+using Billing.Themes;
+using Billing.UI;
+using System;
+using System.Linq;
+using Xamarin.Forms;
+
+namespace Billing.Views
+{
+    public partial class AddCategoryPage : BillingPage
+    {
+        private static readonly BindableProperty CategoryNameProperty = BindableProperty.Create(nameof(CategoryName), typeof(string), typeof(AddCategoryPage));
+        private static readonly BindableProperty CategoryIconProperty = BindableProperty.Create(nameof(CategoryIcon), typeof(string), typeof(AddCategoryPage));
+        private static readonly BindableProperty TintColorProperty = BindableProperty.Create(nameof(TintColor), typeof(Color), typeof(AddCategoryPage));
+        private static readonly BindableProperty TintColorStringProperty = BindableProperty.Create(nameof(TintColorString), typeof(string), typeof(AddCategoryPage));
+
+        public string CategoryName
+        {
+            get => (string)GetValue(CategoryNameProperty);
+            set => SetValue(CategoryNameProperty, value);
+        }
+        public string CategoryIcon
+        {
+            get => (string)GetValue(CategoryIconProperty);
+            set => SetValue(CategoryIconProperty, value);
+        }
+        public Color TintColor
+        {
+            get => (Color)GetValue(TintColorProperty);
+            set => SetValue(TintColorProperty, value);
+        }
+        public string TintColorString
+        {
+            get => (string)GetValue(TintColorStringProperty);
+            set => SetValue(TintColorStringProperty, value);
+        }
+
+        public Command CheckCategory { get; }
+        public Command SelectIcon { get; }
+
+        public event EventHandler<Category> CategoryChecked;
+
+        private readonly int categoryId;
+        private readonly Category parent;
+
+        public AddCategoryPage(int id = -1, Category parent = null)
+        {
+            categoryId = id;
+            this.parent = parent;
+            var category = App.Categories.FirstOrDefault(c => c.Id == id);
+            Title = category?.Name ?? Resource.AddCategory;
+
+            if (category != null)
+            {
+                CategoryName = category.Name;
+                CategoryIcon = category.Icon;
+                if (category.TintColor == Color.Transparent ||
+                    category.TintColor == default)
+                {
+                    TintColor = (Color)Application.Current.Resources[BaseTheme.PrimaryColor];
+                }
+                else
+                {
+                    TintColor = category.TintColor;
+                }
+            }
+            else
+            {
+                TintColor = (Color)Application.Current.Resources[BaseTheme.PrimaryColor];
+            }
+            TintColorString = Helper.WrapColorString(TintColor.ToHex());
+
+            CheckCategory = new Command(OnCheckCategory);
+            SelectIcon = new Command(OnSelectIcon);
+
+            InitializeComponent();
+        }
+
+        private void ColorPicker_ColorChanged(object sender, Color e)
+        {
+            TintColor = e;
+            TintColorString = Helper.WrapColorString(e.ToHex());
+        }
+
+        private async void OnCheckCategory()
+        {
+            if (Tap.IsBusy)
+            {
+                return;
+            }
+            using (Tap.Start())
+            {
+                var category = App.Categories.FirstOrDefault(c => c.Id == categoryId);
+                if (category == null)
+                {
+                    CategoryChecked?.Invoke(this, new Category
+                    {
+                        Id = -1,
+                        Name = CategoryName,
+                        Icon = CategoryIcon,
+                        TintColor = TintColor,
+                        ParentId = parent?.Id ?? -1,
+                        Type = parent?.Type ?? CategoryType.Spending
+                    });
+                }
+                else
+                {
+                    category.Name = CategoryName;
+                    category.Icon = CategoryIcon;
+                    category.TintColor = TintColor;
+                    CategoryChecked?.Invoke(this, category);
+                }
+                await Navigation.PopAsync();
+            }
+        }
+
+        private async void OnSelectIcon()
+        {
+            if (Tap.IsBusy)
+            {
+                return;
+            }
+            using (Tap.Start())
+            {
+                var page = new IconSelectPage(CategoryIcon);
+                page.IconChecked += Category_IconChecked;
+                await Navigation.PushAsync(page);
+            }
+        }
+
+        private void Category_IconChecked(object sender, string icon)
+        {
+            CategoryIcon = icon;
+        }
+    }
+}

Billing.Shared/Views/BillPage.xaml

@@ -8,7 +8,8 @@
                 x:DataType="v:BillPage"
                 x:Name="billPage"
                 BindingContext="{x:Reference billPage}"
-                Title="{r:Text Bills}">
+                Title="{r:Text Bills}"
+                Shell.TabBarIsVisible="True">
 
     <ContentPage.Resources>
         <ui:TitleDateConverter x:Key="titleDateConverter"/>

Billing.Shared/Views/BillPage.xaml.cs

@@ -7,6 +7,7 @@ using System.Linq;
 using System.Threading.Tasks;
 using Xamarin.Essentials;
 using Xamarin.Forms;
+using Resource = Billing.Languages.Resource;
 
 namespace Billing.Views
 {
@@ -170,8 +171,9 @@ namespace Billing.Views
                 }
                 e.Id = maxId + 1;
                 App.Bills.Add(e);
-                Bills.Add(WrapBill(e));
-                billsLayout.Refresh(Bills);
+                var bills = Bills;
+                bills.Add(WrapBill(e));
+                Bills = bills.OrderBy(b => b.DateCreation).ToList();
             }
             else
             {

Billing.Shared/Views/CategoryPage.xaml

@@ -0,0 +1,47 @@
+<?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.CategoryPage"
+                x:Name="categoryPage"
+                x:DataType="v:CategoryPage"
+                BindingContext="{x:Reference categoryPage}">
+
+    <ContentPage.Resources>
+        <ui:IconConverter x:Key="iconConverter"/>
+    </ContentPage.Resources>
+
+    <ScrollView>
+        <ui:GroupStackLayout x:Name="groupLayout" ItemsSource="{Binding Categories}" Margin="0, 10, 0, 0"
+                             GroupHeight="36" RowHeight="44">
+            <ui:GroupStackLayout.GroupHeaderTemplate>
+                <DataTemplate x:DataType="v:CategoryGrouping">
+                    <StackLayout Orientation="Horizontal" Padding="10, 0" VerticalOptions="End">
+                        <Label Text="{Binding Key}" TextColor="{DynamicResource SecondaryTextColor}"/>
+                    </StackLayout>
+                </DataTemplate>
+            </ui:GroupStackLayout.GroupHeaderTemplate>
+            <ui:GroupStackLayout.ItemTemplate>
+                <DataTemplate x:DataType="v:UICategory">
+                    <ui:LongPressGrid Padding="20, 0" ColumnSpacing="10" ColumnDefinitions="Auto, *, Auto"
+                                      LongCommand="{Binding LongPressed, Source={x:Reference categoryPage}}"
+                                      LongCommandParameter="{Binding .}">
+                        <Grid.GestureRecognizers>
+                            <TapGestureRecognizer Command="{Binding Tapped, Source={x:Reference categoryPage}}"
+                                                  CommandParameter="{Binding .}"/>
+                        </Grid.GestureRecognizers>
+                        <ui:TintImage Source="{Binding Icon, Converter={StaticResource iconConverter}}"
+                                      PrimaryColor="{Binding TintColor}"
+                                      WidthRequest="26" HeightRequest="20" VerticalOptions="Center"/>
+                        <Label Grid.Column="1" Text="{Binding Name}" TextColor="{DynamicResource TextColor}"
+                               HorizontalOptions="FillAndExpand" VerticalOptions="Center"
+                               FontSize="Default" FontAttributes="Bold"/>
+                        <ui:TintImage Grid.Column="2" Source="right.png" HeightRequest="20"
+                                      IsVisible="{Binding IsTopCategory}"/>
+                    </ui:LongPressGrid>
+                </DataTemplate>
+            </ui:GroupStackLayout.ItemTemplate>
+        </ui:GroupStackLayout>
+    </ScrollView>
+</ui:BillingPage>

Billing.Shared/Views/CategoryPage.xaml.cs

@@ -0,0 +1,247 @@
+using Billing.Languages;
+using Billing.Models;
+using Billing.Themes;
+using Billing.UI;
+using System.Collections;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using Xamarin.Forms;
+
+namespace Billing.Views
+{
+    public partial class CategoryPage : BillingPage
+    {
+        private static readonly BindableProperty CategoriesProperty = BindableProperty.Create(nameof(Categories), typeof(IList), typeof(CategoryPage));
+        private static readonly BindableProperty IsTopCategoryProperty = BindableProperty.Create(nameof(IsTopCategory), typeof(bool), typeof(CategoryPage));
+
+        public IList Categories
+        {
+            get => (IList)GetValue(CategoriesProperty);
+            set => SetValue(CategoriesProperty, value);
+        }
+        public bool IsTopCategory => (bool)GetValue(IsTopCategoryProperty);
+
+        public Command LongPressed { get; }
+        public Command Tapped { get; }
+
+        private readonly int parentId;
+
+        public CategoryPage(int pid = -1)
+        {
+            parentId = pid;
+            var category = App.Categories.FirstOrDefault(c => c.Id == pid);
+            Title = category?.Name ?? Resource.CategoryManage;
+
+            if (category != null)
+            {
+                SetValue(IsTopCategoryProperty, false);
+                Categories = App.Categories.Where(c => c.ParentId == pid).Select(c => WrapCategory(c)).ToList();
+                ToolbarItems.Add(new ToolbarItem
+                {
+                    Order = ToolbarItemOrder.Primary,
+                    IconImageSource = "plus.png",
+                    Command = new Command(OnAddCategory)
+                });
+            }
+            else
+            {
+                SetValue(IsTopCategoryProperty, true);
+                Categories = new List<CategoryGrouping>
+                {
+                    new(Resource.Spending, App.Categories.Where(c => c.Type == CategoryType.Spending && c.ParentId == null).Select(c => WrapCategory(c))),
+                    new(Resource.Income, App.Categories.Where(c => c.Type == CategoryType.Income && c.ParentId == null).Select(c => WrapCategory(c)))
+                };
+            }
+
+            LongPressed = new Command(OnLongPressed);
+            Tapped = new Command(OnTapped);
+
+            InitializeComponent();
+        }
+
+        private UICategory WrapCategory(Category category)
+        {
+            return new UICategory(category)
+            {
+                Icon = category.Icon,
+                Name = category.Name,
+                IsTopCategory = IsTopCategory,
+                TintColor = category.TintColor == Color.Transparent || category.TintColor == default ?
+                    (Color)Application.Current.Resources[BaseTheme.PrimaryColor] :
+                    category.TintColor
+            };
+        }
+
+        private async void OnAddCategory()
+        {
+            if (Tap.IsBusy)
+            {
+                return;
+            }
+            using (Tap.Start())
+            {
+                var page = new AddCategoryPage();
+                page.CategoryChecked += OnCategoryChecked;
+                await Navigation.PushAsync(page);
+            }
+        }
+
+        private async void OnLongPressed(object o)
+        {
+            if (Tap.IsBusy)
+            {
+                return;
+            }
+            using (Tap.Start())
+            {
+                if (o is UICategory c)
+                {
+                    if (parentId < 0)
+                    {
+                        var page = new AddCategoryPage(c.Category.Id);
+                        page.CategoryChecked += OnCategoryChecked;
+                        await Navigation.PushAsync(page);
+                    }
+                    else
+                    {
+                        var result = await this.ShowConfirm(string.Format(Resource.ConfirmDeleteCategory, c.Category.Name));
+                        if (result)
+                        {
+                            Categories.Remove(c);
+                            groupLayout.Refresh(Categories);
+                            App.Categories.Remove(c.Category);
+                            _ = Task.Run(App.WriteCategories);
+                        }
+                    }
+                }
+            }
+        }
+
+        private async void OnTapped(object o)
+        {
+            if (Tap.IsBusy)
+            {
+                return;
+            }
+            using (Tap.Start())
+            {
+                if (o is UICategory c)
+                {
+                    if (parentId < 0)
+                    {
+                        var page = new CategoryPage(c.Category.Id);
+                        await Navigation.PushAsync(page);
+                    }
+                    else
+                    {
+                        var page = new AddCategoryPage(c.Category.Id);
+                        page.CategoryChecked += OnCategoryChecked;
+                        await Navigation.PushAsync(page);
+                    }
+                }
+            }
+        }
+
+        private void OnCategoryChecked(object sender, Category category)
+        {
+            if (category.Id < 0)
+            {
+                // add
+                int maxId;
+                if (App.Categories.Count > 0)
+                {
+                    maxId = App.Categories.Max(b => b.Id);
+                }
+                else
+                {
+                    maxId = -1;
+                }
+                category.Id = maxId + 1;
+                App.Categories.Add(category);
+                Categories.Add(WrapCategory(category));
+            }
+            else
+            {
+                foreach (var o in Categories)
+                {
+                    if (o is CategoryGrouping grouping)
+                    {
+                        var c = grouping.FirstOrDefault(c => c.Category == category);
+                        if (c != null)
+                        {
+                            UpdateCategory(c);
+                        }
+                    }
+                    else if (o is UICategory c && c.Category == category)
+                    {
+                        UpdateCategory(c);
+                        break;
+                    }
+                }
+            }
+            groupLayout.Refresh(Categories);
+
+            Task.Run(App.WriteCategories);
+        }
+
+        private void UpdateCategory(UICategory c)
+        {
+            c.Name = c.Category.Name;
+            c.Icon = c.Category.Icon;
+            c.TintColor = c.Category.TintColor;
+        }
+    }
+
+    public class UICategory : BindableObject
+    {
+        public static readonly BindableProperty IsCheckedProperty = BindableProperty.Create(nameof(IsChecked), typeof(bool), typeof(UICategory));
+        public static readonly BindableProperty IconProperty = BindableProperty.Create(nameof(Icon), typeof(string), typeof(UICategory));
+        public static readonly BindableProperty NameProperty = BindableProperty.Create(nameof(Name), typeof(string), typeof(UICategory));
+        public static readonly BindableProperty TintColorProperty = BindableProperty.Create(nameof(TintColor), typeof(Color), typeof(UICategory));
+        public static readonly BindableProperty IsTopCategoryProperty = BindableProperty.Create(nameof(IsTopCategory), typeof(bool), typeof(UICategory));
+
+        public bool IsChecked
+        {
+            get => (bool)GetValue(IsCheckedProperty);
+            set => SetValue(IsCheckedProperty, value);
+        }
+        public string Icon
+        {
+            get => (string)GetValue(IconProperty);
+            set => SetValue(IconProperty, value);
+        }
+        public string Name
+        {
+            get => (string)GetValue(NameProperty);
+            set => SetValue(NameProperty, value);
+        }
+        public Color TintColor
+        {
+            get => (Color)GetValue(TintColorProperty);
+            set => SetValue(TintColorProperty, value);
+        }
+        public bool IsTopCategory
+        {
+            get => (bool)GetValue(IsTopCategoryProperty);
+            set => SetValue(IsTopCategoryProperty, value);
+        }
+
+        public Category Category { get; }
+
+        public UICategory(Category category)
+        {
+            Category = category;
+        }
+    }
+
+    public class CategoryGrouping : List<UICategory>, IGrouping<string, UICategory>
+    {
+        public string Key { get; }
+
+        public CategoryGrouping(string key, IEnumerable<UICategory> categories) : base(categories)
+        {
+            Key = key;
+        }
+    }
+}

Billing.Shared/Views/CategorySelectPage.xaml

@@ -0,0 +1,72 @@
+<?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.CategorySelectPage"
+                x:Name="categorySelectPage"
+                x:DataType="v:CategorySelectPage"
+                BindingContext="{x:Reference categorySelectPage}"
+                Title="{r:Text SelectCategory}">
+
+    <ContentPage.Resources>
+        <ui:IconConverter x:Key="iconConverter"/>
+        <ui:SelectBackgroundColorConverter x:Key="backgroundConverter"/>
+    </ContentPage.Resources>
+
+    <Grid ColumnDefinitions=".5*, .5*">
+        <ScrollView>
+            <ui:GroupStackLayout ItemsSource="{Binding TopCategories}" Margin="0, 10, 0, 0"
+                                 GroupHeight="36" RowHeight="44">
+                <ui:GroupStackLayout.GroupHeaderTemplate>
+                    <DataTemplate x:DataType="v:CategoryGrouping">
+                        <StackLayout Orientation="Horizontal" Padding="10, 0" VerticalOptions="End">
+                            <Label Text="{Binding Key}"
+                                   TextColor="{DynamicResource SecondaryTextColor}"/>
+                        </StackLayout>
+                    </DataTemplate>
+                </ui:GroupStackLayout.GroupHeaderTemplate>
+                <ui:GroupStackLayout.ItemTemplate>
+                    <DataTemplate x:DataType="v:UICategory">
+                        <Grid Padding="20, 0, 10, 0" ColumnSpacing="10" ColumnDefinitions="Auto, *"
+                              BackgroundColor="{Binding IsChecked, Converter={StaticResource backgroundConverter}}">
+                            <Grid.GestureRecognizers>
+                                <TapGestureRecognizer Command="{Binding TapTopCategory, Source={x:Reference categorySelectPage}}"
+                                                      CommandParameter="{Binding .}"/>
+                            </Grid.GestureRecognizers>
+                            <ui:TintImage Source="{Binding Icon, Converter={StaticResource iconConverter}}"
+                                          PrimaryColor="{Binding TintColor}"
+                                          WidthRequest="26" HeightRequest="20" VerticalOptions="Center"/>
+                            <Label Grid.Column="1" Text="{Binding Name}" TextColor="{DynamicResource TextColor}"
+                                   HorizontalOptions="FillAndExpand" VerticalOptions="Center"
+                                   FontSize="Default" FontAttributes="Bold"/>
+                        </Grid>
+                    </DataTemplate>
+                </ui:GroupStackLayout.ItemTemplate>
+            </ui:GroupStackLayout>
+        </ScrollView>
+
+        <ScrollView Grid.Column="1">
+            <ui:GroupStackLayout ItemsSource="{Binding SubCategories}" Margin="0, 10, 0, 0" RowHeight="44" Padding="0, 36, 0, 0">
+                <ui:GroupStackLayout.ItemTemplate>
+                    <DataTemplate x:DataType="v:UICategory">
+                        <Grid Padding="20, 0, 10, 0" ColumnSpacing="10" ColumnDefinitions="Auto, *"
+                              BackgroundColor="{Binding IsChecked, Converter={StaticResource backgroundConverter}}">
+                            <Grid.GestureRecognizers>
+                                <TapGestureRecognizer Command="{Binding TapSubCategory, Source={x:Reference categorySelectPage}}"
+                                                      CommandParameter="{Binding .}"/>
+                            </Grid.GestureRecognizers>
+                            <ui:TintImage Source="{Binding Icon, Converter={StaticResource iconConverter}}"
+                                          PrimaryColor="{Binding TintColor}"
+                                          WidthRequest="26" HeightRequest="20" VerticalOptions="Center"/>
+                            <Label Grid.Column="1" Text="{Binding Name}" TextColor="{DynamicResource TextColor}"
+                                   HorizontalOptions="FillAndExpand" VerticalOptions="Center"
+                                   FontSize="Default" FontAttributes="Bold"/>
+                        </Grid>
+                    </DataTemplate>
+                </ui:GroupStackLayout.ItemTemplate>
+            </ui:GroupStackLayout>
+        </ScrollView>
+    </Grid>
+</ui:BillingPage>

Billing.Shared/Views/CategorySelectPage.xaml.cs

@@ -0,0 +1,120 @@
+using Billing.Languages;
+using Billing.Models;
+using Billing.Themes;
+using Billing.UI;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using Xamarin.Forms;
+
+namespace Billing.Views
+{
+    public partial class CategorySelectPage : BillingPage
+    {
+        private static readonly BindableProperty TopCategoriesProperty = BindableProperty.Create(nameof(TopCategories), typeof(List<CategoryGrouping>), typeof(CategorySelectPage));
+        private static readonly BindableProperty SubCategoriesProperty = BindableProperty.Create(nameof(SubCategories), typeof(List<UICategory>), typeof(CategorySelectPage));
+
+        public List<CategoryGrouping> TopCategories
+        {
+            get => (List<CategoryGrouping>)GetValue(TopCategoriesProperty);
+            set => SetValue(TopCategoriesProperty, value);
+        }
+        public List<UICategory> SubCategories
+        {
+            get => (List<UICategory>)GetValue(SubCategoriesProperty);
+            set => SetValue(SubCategoriesProperty, value);
+        }
+
+        public Command TapTopCategory { get; }
+        public Command TapSubCategory { get; }
+
+        public event EventHandler<UICategory> CategoryTapped;
+
+        private readonly int categoryId;
+        private readonly Color defaultColor;
+
+        public CategorySelectPage(int id)
+        {
+            categoryId = id;
+            defaultColor = (Color)Application.Current.Resources[BaseTheme.PrimaryColor];
+            TapTopCategory = new Command(OnTopCategoryTapped);
+            TapSubCategory = new Command(OnSubCategoryTapped);
+
+            TopCategories = new List<CategoryGrouping>
+            {
+                new(Resource.Spending, App.Categories.Where(c => c.Type == CategoryType.Spending && c.ParentId == null).Select(c => WrapCategory(c))),
+                new(Resource.Income, App.Categories.Where(c => c.Type == CategoryType.Income && c.ParentId == null).Select(c => WrapCategory(c)))
+            };
+
+            UICategory cat;
+            var category = App.Categories.FirstOrDefault(c => c.Id == categoryId);
+            if (category == null)
+            {
+                cat = TopCategories.Where(g => g.Count > 0).Select(g => g.First()).FirstOrDefault();
+            }
+            else if (category.ParentId == null)
+            {
+                cat = TopCategories.SelectMany(g => g).FirstOrDefault(c => c.Category == category);
+            }
+            else
+            {
+                cat = TopCategories.SelectMany(g => g).FirstOrDefault(c => c.Category.Id == category.ParentId);
+            }
+            OnTopCategoryTapped(cat);
+
+            InitializeComponent();
+        }
+
+        private UICategory WrapCategory(Category c)
+        {
+            return new UICategory(c)
+            {
+                IsChecked = c.Id == categoryId,
+                Icon = c.Icon,
+                Name = c.Name,
+                TintColor = c.TintColor == Color.Transparent || c.TintColor == default ? defaultColor : c.TintColor
+            };
+        }
+
+        private async void OnTopCategoryTapped(object o)
+        {
+            if (Tap.IsBusy)
+            {
+                return;
+            }
+            using (Tap.Start())
+            {
+                if (o is UICategory category)
+                {
+                    var many = TopCategories.SelectMany(g => g);
+                    foreach (var m in many)
+                    {
+                        m.IsChecked = m == category;
+                    }
+                    SubCategories = App.Categories.Where(c => c.ParentId == category.Category.Id).Select(c => WrapCategory(c)).ToList();
+                    if (SubCategories.Count == 0)
+                    {
+                        CategoryTapped?.Invoke(this, category);
+                        await Navigation.PopAsync();
+                    }
+                }
+            }
+        }
+
+        private async void OnSubCategoryTapped(object o)
+        {
+            if (Tap.IsBusy)
+            {
+                return;
+            }
+            using (Tap.Start())
+            {
+                if (o is UICategory category)
+                {
+                    CategoryTapped?.Invoke(this, category);
+                    await Navigation.PopAsync();
+                }
+            }
+        }
+    }
+}

Billing.Shared/Views/IconSelectPage.xaml.cs

@@ -39,12 +39,34 @@ namespace Billing.Views
             {
                 new() { Icon = BaseModel.ICON_DEFAULT },
                 new() { Icon = "wallet" },
+                new() { Icon = "dollar" },
                 new() { Icon = "creditcard" },
                 new() { Icon = "debitcard" },
                 new() { Icon = "cmb" },
                 new() { Icon = "rcb" },
                 new() { Icon = "yuebao" },
-                new() { Icon = "zhaozhaoying" }
+                new() { Icon = "zhaozhaoying" },
+                new() { Icon = "clothes" },
+                new() { Icon = "food" },
+                new() { Icon = "drink" },
+                new() { Icon = "daily" },
+                new() { Icon = "trans" },
+                new() { Icon = "face" },
+                new() { Icon = "learn" },
+                new() { Icon = "medical" },
+                new() { Icon = "gem" },
+                new() { Icon = "makeup" },
+                new() { Icon = "brunch" },
+                new() { Icon = "dinner" },
+                new() { Icon = "fruit" },
+                new() { Icon = "bill" },
+                new() { Icon = "fee" },
+                new() { Icon = "rent" },
+                new() { Icon = "maintenance" },
+                new() { Icon = "rail" },
+                new() { Icon = "taxi" },
+                new() { Icon = "fitness" },
+                new() { Icon = "party" },
             };
             source.AddRange(IconConverter.IconPreset.Select(icon => new BillingIcon { Icon = $"#brand#{icon.Key}" }));
             foreach (var icon in source)
@@ -59,15 +81,22 @@ namespace Billing.Views
 
         private async void OnIconCheck(object o)
         {
-            if (o is string icon)
+            if (Tap.IsBusy)
             {
-                foreach (var ic in IconsSource)
+                return;
+            }
+            using (Tap.Start())
+            {
+                if (o is string icon)
                 {
-                    ic.IsChecked = ic.Icon == icon;
+                    foreach (var ic in IconsSource)
+                    {
+                        ic.IsChecked = ic.Icon == icon;
+                    }
+                    iconChecked = icon;
+                    IconChecked?.Invoke(this, icon);
+                    await Navigation.PopAsync();
                 }
-                iconChecked = icon;
-                IconChecked?.Invoke(this, icon);
-                await Navigation.PopAsync();
             }
         }
     }

Billing.Shared/Views/SettingPage.xaml

@@ -8,21 +8,32 @@
                 x:Name="settingPage"
                 x:DataType="v:SettingPage"
                 Title="{r:Text Settings}"
-                BindingContext="{x:Reference settingPage}">
+                BindingContext="{x:Reference settingPage}"
+                Shell.TabBarIsVisible="True">
 
-    <TableView Intent="Settings" RowHeight="36">
+    <TableView Intent="Settings" HasUnevenRows="True">
         <TableSection Title="{r:Text About}">
-            <ui:OptionTextCell Title="{r:Text Version}"
+            <ui:OptionTextCell Height="36" Title="{r:Text Version}"
                                Detail="{Binding Version}"/>
         </TableSection>
+        <TableSection Title="{r:Text Feature}">
+            <ui:OptionSelectCell Height="36" Title="{r:Text CategoryManage}"
+                                 Detail="{r:Text Detail}"
+                                 Command="{Binding CategoryCommand}"/>
+        </TableSection>
         <TableSection Title="{r:Text Preference}">
-            <ui:OptionEntryCell Title="{r:Text PrimaryColor}"
-                                Text="{Binding Red, Mode=TwoWay}"
-                                Keyboard="Numeric"/>
-            <ui:OptionEntryCell Text="{Binding Green, Mode=TwoWay}"
-                                Keyboard="Numeric"/>
-            <ui:OptionEntryCell Text="{Binding Blue, Mode=TwoWay}"
-                                Keyboard="Numeric"/>
+            <ui:OptionEntryCell Height="36" Title="{r:Text PrimaryColor}"
+                                Text="{Binding PrimaryColor, Mode=TwoWay}"
+                                Keyboard="Text"/>
+            <ViewCell Height="120">
+                <Grid BackgroundColor="{DynamicResource OptionTintColor}"
+                      ColumnDefinitions=".3*, .7*" Padding="10">
+                    <!--<Label Text="" LineBreakMode="TailTruncation"
+                           VerticalOptions="Center"
+                           TextColor="{DynamicResource TextColor}"/>-->
+                    <ui:ColorPicker Grid.Column="1" ColorChanged="ColorPicker_ColorChanged"/>
+                </Grid>
+            </ViewCell>
         </TableSection>
     </TableView>
 </ui:BillingPage>

Billing.Shared/Views/SettingPage.xaml.cs

@@ -1,5 +1,6 @@
 using Billing.Themes;
 using Billing.UI;
+using System.Globalization;
 using Xamarin.Essentials;
 using Xamarin.Forms;
 
@@ -8,29 +9,20 @@ namespace Billing.Views
     public partial class SettingPage : BillingPage
     {
         private static readonly BindableProperty VersionProperty = BindableProperty.Create(nameof(Version), typeof(string), typeof(SettingPage));
-        private static readonly BindableProperty RedProperty = BindableProperty.Create(nameof(Red), typeof(byte), typeof(SettingPage));
-        private static readonly BindableProperty GreenProperty = BindableProperty.Create(nameof(Green), typeof(byte), typeof(SettingPage));
-        private static readonly BindableProperty BlueProperty = BindableProperty.Create(nameof(Blue), typeof(byte), typeof(SettingPage));
+        private static readonly BindableProperty PrimaryColorProperty = BindableProperty.Create(nameof(PrimaryColor), typeof(string), typeof(SettingPage));
 
         public string Version => (string)GetValue(VersionProperty);
-        public byte Red
+        public string PrimaryColor
         {
-            get => (byte)GetValue(RedProperty);
-            set => SetValue(RedProperty, value);
-        }
-        public byte Green
-        {
-            get => (byte)GetValue(GreenProperty);
-            set => SetValue(GreenProperty, value);
-        }
-        public byte Blue
-        {
-            get => (byte)GetValue(BlueProperty);
-            set => SetValue(BlueProperty, value);
+            get => (string)GetValue(PrimaryColorProperty);
+            set => SetValue(PrimaryColorProperty, value);
         }
 
+        public Command CategoryCommand { get; }
+
         public SettingPage()
         {
+            CategoryCommand = new Command(OnCategoryCommand);
             InitializeComponent();
 
             var (main, build) = Definition.GetVersion();
@@ -42,20 +34,35 @@ namespace Billing.Views
             base.OnAppearing();
 
             //SetValue(VersionProperty, $"{AppInfo.VersionString} ({AppInfo.BuildString})");
-            var colorString = Preferences.Get(Definition.PrimaryColorKey, "#183153");
-            var color = Color.FromHex(colorString);
-            Red = (byte)(color.R * 255);
-            Green = (byte)(color.G * 255);
-            Blue = (byte)(color.B * 255);
+            var colorString = Preferences.Get(Definition.PrimaryColorKey, Helper.DEFAULT_COLOR);
+            PrimaryColor = Helper.WrapColorString(colorString);
         }
 
         protected override void OnDisappearing()
         {
             base.OnDisappearing();
 
-            var color = Color.FromRgb(Red, Green, Blue);
-            Preferences.Set(Definition.PrimaryColorKey, color.ToHex());
-            Light.Instance.RefreshColor(color);
+            var color = PrimaryColor;
+            Preferences.Set(Definition.PrimaryColorKey, color);
+            Light.Instance.RefreshColor(Color.FromHex(color));
+        }
+
+        private async void OnCategoryCommand()
+        {
+            if (Tap.IsBusy)
+            {
+                return;
+            }
+            using (Tap.Start())
+            {
+                var page = new CategoryPage();
+                await Navigation.PushAsync(page);
+            }
+        }
+
+        private void ColorPicker_ColorChanged(object sender, Color e)
+        {
+            PrimaryColor = Helper.WrapColorString(e.ToHex());
         }
     }
 }

Billing.sln

@@ -68,8 +68,8 @@ Global
 		{6A012FCA-3B1C-4593-ADD7-0751E5815C67}.Debug|iPhone.Build.0 = Debug|Any CPU
 		{6A012FCA-3B1C-4593-ADD7-0751E5815C67}.Debug|iPhoneSimulator.ActiveCfg = Debug|iPhoneSimulator
 		{6A012FCA-3B1C-4593-ADD7-0751E5815C67}.Debug|iPhoneSimulator.Build.0 = Debug|iPhoneSimulator
-		{6A012FCA-3B1C-4593-ADD7-0751E5815C67}.Release|Any CPU.ActiveCfg = Release|iPhoneSimulator
-		{6A012FCA-3B1C-4593-ADD7-0751E5815C67}.Release|Any CPU.Build.0 = Release|iPhoneSimulator
+		{6A012FCA-3B1C-4593-ADD7-0751E5815C67}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{6A012FCA-3B1C-4593-ADD7-0751E5815C67}.Release|Any CPU.Build.0 = Release|Any CPU
 		{6A012FCA-3B1C-4593-ADD7-0751E5815C67}.Release|iPhone.ActiveCfg = Release|iPhoneSimulator
 		{6A012FCA-3B1C-4593-ADD7-0751E5815C67}.Release|iPhone.Build.0 = Release|iPhoneSimulator
 		{6A012FCA-3B1C-4593-ADD7-0751E5815C67}.Release|iPhoneSimulator.ActiveCfg = Release|iPhoneSimulator

Billing/Billing.Android/Billing.Android.csproj

@@ -65,6 +65,7 @@
     <Reference Include="System.Xml" />
   </ItemGroup>
   <ItemGroup>
+    <PackageReference Include="SkiaSharp.Views.Forms" Version="2.80.3" />
     <PackageReference Include="Xamarin.Forms" Version="5.0.0.2337" />
     <PackageReference Include="Xamarin.Essentials" Version="1.7.1" />
   </ItemGroup>
@@ -111,14 +112,17 @@
     <AndroidResource Include="Resources\mipmap-anydpi-v26\icon_round.xml" />
     <AndroidResource Include="Resources\values\icon_background.xml" />
     <AndroidResource Include="Resources\drawable\icon_foreground.xml" />
-    <AndroidResource Include="Resources\drawable\xamarin_logo.png" />
     <AndroidResource Include="Resources\values\strings.xml">
-      <SubType></SubType>
-      <Generator></Generator>
+      <SubType>
+      </SubType>
+      <Generator>
+      </Generator>
     </AndroidResource>
     <AndroidResource Include="Resources\values-zh-rCN\strings.xml">
-      <SubType></SubType>
-      <Generator></Generator>
+      <SubType>
+      </SubType>
+      <Generator>
+      </Generator>
     </AndroidResource>
   </ItemGroup>
   <ItemGroup>
@@ -343,7 +347,160 @@
     <AndroidResource Include="Resources\drawable-xxhdpi\trans.png" />
   </ItemGroup>
   <ItemGroup>
-    <Folder Include="Resources\values-zh-rCN\" />
+    <AndroidResource Include="Resources\drawable\color.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable-mdpi\color.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable-xhdpi\color.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable-xxhdpi\color.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable\brunch.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable\dinner.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable\fee.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable\fitness.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable\fruit.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable\gem.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable\maintenance.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable\makeup.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable\party.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable\rail.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable\rent.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable\taxi.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable-mdpi\brunch.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable-mdpi\dinner.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable-mdpi\fee.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable-mdpi\fitness.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable-mdpi\fruit.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable-mdpi\gem.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable-mdpi\maintenance.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable-mdpi\makeup.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable-mdpi\party.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable-mdpi\rail.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable-mdpi\rent.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable-mdpi\taxi.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable-xhdpi\brunch.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable-xhdpi\dinner.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable-xhdpi\fee.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable-xhdpi\fitness.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable-xhdpi\fruit.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable-xhdpi\gem.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable-xhdpi\maintenance.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable-xhdpi\makeup.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable-xhdpi\party.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable-xhdpi\rail.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable-xhdpi\rent.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable-xhdpi\taxi.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable-xxhdpi\brunch.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable-xxhdpi\dinner.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable-xxhdpi\fee.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable-xxhdpi\fitness.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable-xxhdpi\fruit.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable-xxhdpi\gem.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable-xxhdpi\maintenance.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable-xxhdpi\makeup.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable-xxhdpi\party.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable-xxhdpi\rail.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable-xxhdpi\rent.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable-xxhdpi\taxi.png" />
   </ItemGroup>
   <Import Project="..\..\Billing.Shared\Billing.Shared.projitems" Label="Shared" />
   <Import Project="$(MSBuildExtensionsPath)\Xamarin\Android\Xamarin.Android.CSharp.targets" />

Billing/Billing.Android/Resources/values/styles.xml

@@ -13,7 +13,7 @@
 		<!--<item name="colorPrimaryDark">#1976D2</item>-->
 		<!-- colorAccent is used as the default value for colorControlActivated
          which is used to tint widgets -->
-		<!--<item name="colorAccent">#FF4081</item>-->
+		<item name="colorAccent">#696969</item>
 	</style>
 	<style name="MainTheme.Splash" parent="Theme.AppCompat.DayNight.NoActionBar">
 		<item name="android:windowBackground">@drawable/splash_screen</item>

Billing/Billing.iOS/Billing.iOS.csproj

@@ -132,14 +132,6 @@
     <ImageAsset Include="Assets.xcassets\AppIcon.appiconset\Icon20.png">
       <Visible>false</Visible>
     </ImageAsset>
-    <BundleResource Include="Resources\xamarin_logo.png" />
-    <BundleResource Include="Resources\xamarin_logo%402x.png" />
-    <BundleResource Include="Resources\xamarin_logo%403x.png" />
-    <BundleResource Include="Resources\Default-568h%402x.png" />
-    <BundleResource Include="Resources\Default-Portrait.png" />
-    <BundleResource Include="Resources\Default-Portrait%402x.png" />
-    <BundleResource Include="Resources\Default.png" />
-    <BundleResource Include="Resources\Default%402x.png" />
     <ImageAsset Include="Assets.xcassets\SplashLogo.imageset\Contents.json">
       <Visible>false</Visible>
     </ImageAsset>
@@ -173,6 +165,7 @@
     <Reference Include="System.Numerics.Vectors" />
   </ItemGroup>
   <ItemGroup>
+    <PackageReference Include="SkiaSharp.Views.Forms" Version="2.80.3" />
     <PackageReference Include="Xamarin.Forms" Version="5.0.0.2337" />
     <PackageReference Include="Xamarin.Essentials" Version="1.7.1" />
   </ItemGroup>
@@ -335,9 +328,121 @@
     <BundleResource Include="Resources\trans%403x.png" />
   </ItemGroup>
   <ItemGroup>
-    <Folder Include="Base.lproj\" />
-    <Folder Include="en.lproj\" />
-    <Folder Include="zh-Hans.lproj\" />
+    <BundleResource Include="Resources\color.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <BundleResource Include="Resources\color%402x.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <BundleResource Include="Resources\color%403x.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <BundleResource Include="Resources\brunch.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <BundleResource Include="Resources\brunch%402x.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <BundleResource Include="Resources\brunch%403x.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <BundleResource Include="Resources\dinner.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <BundleResource Include="Resources\dinner%402x.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <BundleResource Include="Resources\dinner%403x.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <BundleResource Include="Resources\fee.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <BundleResource Include="Resources\fee%402x.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <BundleResource Include="Resources\fee%403x.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <BundleResource Include="Resources\fitness.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <BundleResource Include="Resources\fitness%402x.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <BundleResource Include="Resources\fitness%403x.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <BundleResource Include="Resources\fruit.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <BundleResource Include="Resources\fruit%402x.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <BundleResource Include="Resources\fruit%403x.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <BundleResource Include="Resources\gem.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <BundleResource Include="Resources\gem%402x.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <BundleResource Include="Resources\gem%403x.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <BundleResource Include="Resources\maintenance.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <BundleResource Include="Resources\maintenance%402x.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <BundleResource Include="Resources\maintenance%403x.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <BundleResource Include="Resources\makeup.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <BundleResource Include="Resources\makeup%402x.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <BundleResource Include="Resources\makeup%403x.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <BundleResource Include="Resources\party.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <BundleResource Include="Resources\party%402x.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <BundleResource Include="Resources\party%403x.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <BundleResource Include="Resources\rail.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <BundleResource Include="Resources\rail%402x.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <BundleResource Include="Resources\rail%403x.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <BundleResource Include="Resources\rent.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <BundleResource Include="Resources\rent%402x.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <BundleResource Include="Resources\rent%403x.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <BundleResource Include="Resources\taxi.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <BundleResource Include="Resources\taxi%402x.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <BundleResource Include="Resources\taxi%403x.png" />
   </ItemGroup>
   <Import Project="..\..\Billing.Shared\Billing.Shared.projitems" Label="Shared" />
   <Import Project="$(MSBuildExtensionsPath)\Xamarin\iOS\Xamarin.iOS.CSharp.targets" />