feat: add DataGrid description.

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

@@ -2,12 +2,12 @@
              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.Pages"
+             xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
              mc:Ignorable="d" d:DesignWidth="1000" d:DesignHeight="1450"
-             x:DataType="vm:HighContrastThemeViewModel"
+             x:DataType="vm:HighContrastDemoViewModel"
-             x:Class="Semi.Avalonia.Demo.Pages.HighContrastTheme">
+             x:Class="Semi.Avalonia.Demo.Pages.HighContrastDemo">
     <Design.DataContext>
-        <vm:HighContrastThemeViewModel />
+        <vm:HighContrastDemoViewModel />
     </Design.DataContext>
     <ScrollViewer>
         <StackPanel Spacing="10">
@@ -193,6 +193,59 @@
                     </StackPanel>
                 </Border>
             </ThemeVariantScope>
+
+            <DataGrid
+                HorizontalAlignment="Left"
+                CanUserSortColumns="False"
+                AutoGenerateColumns="False"
+                ItemsSource="{Binding ColorResources}"
+                GridLinesVisibility="All"
+                BorderBrush="{DynamicResource SemiColorBorder}"
+                BorderThickness="1"
+                Padding="5">
+                <DataGrid.Columns>
+                    <DataGridTemplateColumn Header="Color">
+                        <DataGridTemplateColumn.CellTemplate>
+                            <DataTemplate>
+                                <Border Background="{Binding Brush}" />
+                            </DataTemplate>
+                        </DataGridTemplateColumn.CellTemplate>
+                    </DataGridTemplateColumn>
+
+                    <DataGridTemplateColumn Header="ResourceKey">
+                        <DataGridTemplateColumn.CellTemplate>
+                            <DataTemplate>
+                                <SelectableTextBlock
+                                    Margin="12 0"
+                                    VerticalAlignment="Center"
+                                    Text="{Binding ResourceKey}" />
+                            </DataTemplate>
+                        </DataGridTemplateColumn.CellTemplate>
+                    </DataGridTemplateColumn>
+
+                    <DataGridTemplateColumn Header="Description">
+                        <DataGridTemplateColumn.CellTemplate>
+                            <DataTemplate>
+                                <SelectableTextBlock
+                                    Margin="12 0"
+                                    VerticalAlignment="Center"
+                                    Text="{Binding Description}" />
+                            </DataTemplate>
+                        </DataGridTemplateColumn.CellTemplate>
+                    </DataGridTemplateColumn>
+
+                    <DataGridTemplateColumn Header="Pair With">
+                        <DataGridTemplateColumn.CellTemplate>
+                            <DataTemplate>
+                                <SelectableTextBlock
+                                    Margin="12 0"
+                                    VerticalAlignment="Center"
+                                    Text="{Binding PairWith}" />
+                            </DataTemplate>
+                        </DataGridTemplateColumn.CellTemplate>
+                    </DataGridTemplateColumn>
+                </DataGrid.Columns>
+            </DataGrid>
         </StackPanel>
     </ScrollViewer>
 </UserControl>

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

@@ -0,0 +1,13 @@
+using Avalonia.Controls;
+using Semi.Avalonia.Demo.ViewModels;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class HighContrastDemo : UserControl
+{
+    public HighContrastDemo()
+    {
+        InitializeComponent();
+        this.DataContext = new HighContrastDemoViewModel();
+    }
+}

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

@@ -1,28 +0,0 @@
-using System.Collections.Generic;
-using Avalonia.Controls;
-using Avalonia.Styling;
-using CommunityToolkit.Mvvm.ComponentModel;
-
-namespace Semi.Avalonia.Demo.Pages;
-
-public partial class HighContrastTheme : UserControl
-{
-    public HighContrastTheme()
-    {
-        InitializeComponent();
-        this.DataContext = new HighContrastThemeViewModel();
-    }
-}
-
-public partial class HighContrastThemeViewModel : ObservableObject
-{
-    [ObservableProperty] private ThemeVariant? _selectedThemeVariant = SemiTheme.Aquatic;
-
-    public IEnumerable<ThemeVariant> ThemeVariants =>
-    [
-        SemiTheme.Aquatic,
-        SemiTheme.Desert,
-        SemiTheme.Dust,
-        SemiTheme.NightSky,
-    ];
-}

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

@@ -0,0 +1,122 @@
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Controls.ApplicationLifetimes;
+using Avalonia.Media;
+using Avalonia.Styling;
+using CommunityToolkit.Mvvm.ComponentModel;
+
+namespace Semi.Avalonia.Demo.ViewModels;
+
+public partial class HighContrastDemoViewModel : ObservableObject
+{
+    [ObservableProperty] private ThemeVariant? _selectedThemeVariant;
+    public IEnumerable<ThemeVariant> ThemeVariants { get; }
+    public ObservableCollection<ColorResource> ColorResources { get; set; }
+
+    public HighContrastDemoViewModel()
+    {
+        ThemeVariants =
+        [
+            SemiTheme.Aquatic,
+            SemiTheme.Desert,
+            SemiTheme.Dust,
+            SemiTheme.NightSky,
+        ];
+        ColorResources =
+        [
+            new ColorResource
+            {
+                ResourceKey = "WindowColor",
+                Brush = new SolidColorBrush(Color.Parse("#202020")),
+                Description = "Background of pages, panes, popups, and windows.",
+                PairWith = "WindowTextColor"
+            },
+            new ColorResource
+            {
+                ResourceKey = "WindowTextColor",
+                Brush = new SolidColorBrush(Color.Parse("#FFFFFF")),
+                Description = "Headings, body copy, lists, placeholder text, app and window borders.",
+                PairWith = "WindowColor"
+            },
+            new ColorResource
+            {
+                ResourceKey = "HotlightColor",
+                Brush = new SolidColorBrush(Color.Parse("#75E9FC")),
+                Description = "Hyperlinks.",
+                PairWith = "WindowColor"
+            },
+            new ColorResource
+            {
+                ResourceKey = "GrayTextColor",
+                Brush = new SolidColorBrush(Color.Parse("#A6A6A6")),
+                Description = "Inactive (disabled) UI.",
+                PairWith = "WindowColor"
+            },
+            new ColorResource
+            {
+                ResourceKey = "HighlightTextColor",
+                Brush = new SolidColorBrush(Color.Parse("#263B50")),
+                Description =
+                    "Foreground color for text or UI that is in selected, interacted with (hover, pressed), or in progress.",
+                PairWith = "HighlightColor"
+            },
+            new ColorResource
+            {
+                ResourceKey = "HighlightColor",
+                Brush = new SolidColorBrush(Color.Parse("#8EE3F0")),
+                Description =
+                    "Background or accent color for UI that is in selected, interacted with (hover, pressed), or in progress.",
+                PairWith = "HighlightTextColor"
+            },
+            new ColorResource
+            {
+                ResourceKey = "ButtonTextColor",
+                Brush = new SolidColorBrush(Color.Parse("#FFFFFF")),
+                Description = "Foreground color for buttons and any UI that can be interacted with.",
+                PairWith = "ButtonFaceColor"
+            },
+            new ColorResource
+            {
+                ResourceKey = "ButtonFaceColor",
+                Brush = new SolidColorBrush(Color.Parse("#202020")),
+                Description = "Background color for buttons and any UI that can be interacted with.",
+                PairWith = "ButtonTextColor"
+            },
+        ];
+        SelectedThemeVariant = SemiTheme.Aquatic;
+    }
+
+    partial void OnSelectedThemeVariantChanged(ThemeVariant? value)
+    {
+        var topLevel = ResolveDefaultTopLevel();
+        if (value is null) return;
+        foreach (var colorResource in ColorResources)
+        {
+            if (colorResource.ResourceKey is null) continue;
+            if (topLevel?.TryFindResource(colorResource.ResourceKey, value, out var o) == true && o is Color color)
+            {
+                colorResource.Brush = new SolidColorBrush(color);
+            }
+        }
+    }
+
+    private static TopLevel? ResolveDefaultTopLevel()
+    {
+        return Application.Current?.ApplicationLifetime switch
+        {
+            IClassicDesktopStyleApplicationLifetime desktopLifetime => desktopLifetime.MainWindow,
+            ISingleViewApplicationLifetime singleView => TopLevel.GetTopLevel(singleView.MainView),
+            _ => null
+        };
+    }
+}
+
+public partial class ColorResource : ObservableObject
+{
+    [ObservableProperty] private string? _resourceKey;
+    [ObservableProperty] private SolidColorBrush? _brush;
+    [ObservableProperty] private string? _description;
+    [ObservableProperty] private string? _pairWith;
+}

demo/Semi.Avalonia.Demo/Views/MainView.axaml

@@ -110,7 +110,7 @@
                 <pages:PaletteDemo />
             </TabItem>
             <TabItem Header="HighContrastTheme">
-                <pages:HighContrastTheme />
+                <pages:HighContrastDemo />
             </TabItem>
             <TabItem Header="AutoCompleteBox">
                 <pages:AutoCompleteBoxDemo />