feat: enhance IconDemo.

demo/Semi.Avalonia.Demo/Pages/IconDemo.axaml

@@ -2,9 +2,43 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             x:DataType="vm:IconDemoViewModel"
              x:Class="Semi.Avalonia.Demo.Pages.IconDemo">
+    <Design.DataContext>
+        <vm:IconDemoViewModel />
+    </Design.DataContext>
     <ScrollViewer>
-        <StackPanel x:Name="IconsPanel" Orientation="Vertical" Spacing="10" Margin="10" />
+        <ItemsControl ItemsSource="{Binding Icons}">
+            <ItemsControl.ItemsPanel>
+                <ItemsPanelTemplate>
+                    <WrapPanel />
+                </ItemsPanelTemplate>
+            </ItemsControl.ItemsPanel>
+            <ItemsControl.ItemTemplate>
+                <DataTemplate>
+                    <Button Theme="{DynamicResource OutlineButton}"
+                            Classes="Tertiary"
+                            Padding="0"
+                            Margin="10"
+                            Width="200"
+                            Height="120">
+                        <StackPanel>
+                            <PathIcon
+                                Theme="{DynamicResource InnerPathIcon}"
+                                HorizontalAlignment="Center"
+                                Classes="ExtraLarge"
+                                Data="{Binding Geometry}" />
+                            <TextBlock
+                                HorizontalAlignment="Center"
+                                FontSize="12"
+                                FontWeight="Normal"
+                                Text="{Binding ResourceKey}" />
+                        </StackPanel>
+                    </Button>
+                </DataTemplate>
+            </ItemsControl.ItemTemplate>
+        </ItemsControl>
     </ScrollViewer>
-</UserControl>
+</UserControl>

demo/Semi.Avalonia.Demo/Pages/IconDemo.axaml.cs

@@ -1,10 +1,7 @@
-using System;
-using Avalonia.Controls;
+using Avalonia.Controls;
 using Avalonia.Controls.Primitives;
-using Avalonia.Controls.Shapes;
-using Avalonia.Markup.Xaml;
-using Avalonia.Media;
 using Avalonia.Threading;
+using Semi.Avalonia.Demo.ViewModels;
 
 namespace Semi.Avalonia.Demo.Pages;
 
@@ -13,33 +10,13 @@ public partial class IconDemo : UserControl
     public IconDemo()
     {
         InitializeComponent();
+        this.DataContext = new IconDemoViewModel();
     }
 
     protected override async void OnApplyTemplate(TemplateAppliedEventArgs e)
     {
         base.OnApplyTemplate(e);
-        await Dispatcher.UIThread.InvokeAsync(LoadIcons);
-    }
-
-    private void LoadIcons()
-    {
-        IResourceDictionary? resources =
-            AvaloniaXamlLoader.Load(new Uri("avares://Semi.Avalonia/Themes/Shared/Icon.axaml")) as ResourceDictionary;
-        if (resources is null) return;
-
-        var stackPanel = this.FindControl<StackPanel>("IconsPanel");
-        foreach (var key in resources.Keys)
-        {
-            if (resources[key] is not Geometry geometry) continue;
-            var iconControl = new Path
-            {
-                Data = geometry,
-                Fill = Brushes.Black,
-                Width = 48,
-                Height = 48
-            };
-
-            stackPanel?.Children.Add(iconControl);
-        }
+        var vm = this.DataContext as IconDemoViewModel;
+        await Dispatcher.UIThread.InvokeAsync(() => { vm?.InitializeResources(); });
     }
 }

demo/Semi.Avalonia.Demo/ViewModels/IconDemoViewModel.cs

@@ -0,0 +1,41 @@
+using System;
+using System.Collections.ObjectModel;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+using Avalonia.Media;
+using CommunityToolkit.Mvvm.ComponentModel;
+
+namespace Semi.Avalonia.Demo.ViewModels;
+
+public partial class IconDemoViewModel : ObservableObject
+{
+    private readonly IResourceDictionary? _resources =
+        AvaloniaXamlLoader.Load(new Uri("avares://Semi.Avalonia/Themes/Shared/Icon.axaml")) as ResourceDictionary;
+
+    public ObservableCollection<IconItem> Icons { get; set; } = [];
+
+    public void InitializeResources()
+    {
+        LoadIcons();
+    }
+
+    private void LoadIcons()
+    {
+        if (_resources is null) return;
+
+        foreach (var key in _resources.Keys)
+        {
+            if (_resources[key] is Geometry geometry)
+            {
+                var icon = new IconItem { ResourceKey = key.ToString(), Geometry = geometry };
+                Icons.Add(icon);
+            }
+        }
+    }
+}
+
+public class IconItem
+{
+    public string? ResourceKey { get; set; }
+    public Geometry? Geometry { get; set; }
+}