Add colour picker

Author: Colin Mackay

src/Stravaig.Icons.Example/App.axaml

@@ -11,6 +11,7 @@
 
     <Application.Styles>
         <FluentTheme />
+        <StyleInclude Source="avares://Avalonia.Controls.ColorPicker/Themes/Fluent/Fluent.xaml" />
         <StyleInclude Source="Styles/AppDefaultStyles.axaml" />
     </Application.Styles>
 </Application>

src/Stravaig.Icons.Example/Stravaig.Icons.Example.csproj

@@ -14,6 +14,7 @@
 
     <ItemGroup>
         <PackageReference Include="Avalonia" Version="11.3.9"/>
+        <PackageReference Include="Avalonia.Controls.ColorPicker" Version="11.3.9" />
         <PackageReference Include="Avalonia.Desktop" Version="11.3.9"/>
         <PackageReference Include="Avalonia.Themes.Fluent" Version="11.3.9"/>
         <PackageReference Include="Avalonia.Fonts.Inter" Version="11.3.9"/>

src/Stravaig.Icons.Example/ViewModels/PhosphorIconDemoViewModel.cs

@@ -1,4 +1,5 @@
 using Avalonia.Controls;
+using Avalonia.Media;
 using CommunityToolkit.Mvvm.ComponentModel;
 using Stravaig.Avalonia.Controls.Icons;
 using System;
@@ -22,12 +23,11 @@ public partial class PhosphorIconDemoViewModel : ViewModelBase
     [ObservableProperty]
     private int _iconSize;
 
-    partial void OnSelectedIconTypeIndexChanged(int? value)
-    {
-        if (value.HasValue)
-            SelectedIconType = IconTypes[value.Value].Key;
-        Trace.WriteLine($"Selected Icon Type Index Changed to {value}. Type is now {SelectedIconType}.");
-    }
+    [ObservableProperty]
+    private HsvColor _colour;
+
+    [ObservableProperty]
+    private string _rgbColour;
 
     public PhosphorIconDemoViewModel()
     {
@@ -36,11 +36,24 @@ public PhosphorIconDemoViewModel()
         _selectedIconTypeIndex = 0;
         _selectedIconType = IconTypes[0].Key;
         _iconSize = 24;
+        _colour = new HsvColor(Color.FromRgb(0x80, 0x80, 0x80));
+        _rgbColour = _colour.ToRgb().ToString();
     }
 
     public List<KeyValuePair<PhosphorIconName, string>> Icons { get; } = Enum.GetValues<PhosphorIconName>().Select(n => new KeyValuePair<PhosphorIconName, string>(n, n.ToString())).ToList();
 
     public List<KeyValuePair<PhosphorIconType, string>> IconTypes { get; } = Enum.GetValues<PhosphorIconType>().Select(t => new KeyValuePair<PhosphorIconType, string>(t, t.ToString())).ToList();
 
+    partial void OnColourChanged(HsvColor value)
+    {
+        RgbColour = Colour.ToRgb().ToString();
+    }
+
+    partial void OnSelectedIconTypeIndexChanged(int? value)
+    {
+        if (value.HasValue)
+            SelectedIconType = IconTypes[value.Value].Key;
+        Trace.WriteLine($"Selected Icon Type Index Changed to {value}. Type is now {SelectedIconType}.");
+    }
 
 }

src/Stravaig.Icons.Example/Views/PhosphorIconDemoView.axaml

@@ -29,7 +29,7 @@
                         Margin="5"
                         VerticalAlignment="Center"
                         Classes="H2"
-                        Text="Style"/>
+                        Text="Style:"/>
                     <ComboBox ItemsSource="{Binding IconTypes}"
                               SelectedIndex="{Binding SelectedIconTypeIndex}">
                         <ComboBox.ItemTemplate>
@@ -68,6 +68,18 @@
                         VerticalAlignment="Center"/>
                 </StackPanel>
 
+                <StackPanel Orientation="Horizontal">
+                    <TextBlock Classes="H2" Margin="5" Text="Colour:"/>
+                    <ColorPicker
+                        ColorModel="Rgba"
+                        Width="200"
+                        HsvColor="{Binding Colour}" />
+                    <TextBlock
+                        Margin="5"
+                        VerticalAlignment="Center"
+                        Text="{Binding RgbColour}"/>
+                </StackPanel>
+
                 <ItemsControl Name="IconsItemsControl" ItemsSource="{Binding Icons}">
                     <ItemsControl.ItemsPanel>
                         <ItemsPanelTemplate>