feat: enhance navigation and UI structure in MainView and Application.

Agent-Logs-Url: https://github.com/irihitech/Semi.Avalonia/sessions/ccdc8843-c9ae-4277-89e1-f25308ba3eaf

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: rabbitism <14807942+rabbitism@users.noreply.github.com>

.editorconfig

@@ -0,0 +1,240 @@
+# editorconfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Default settings:
+# A newline ending every file
+# Use 4 spaces as indentation
+[*]
+insert_final_newline = true
+indent_style = space
+indent_size = 4
+
+# C# files
+[*.cs]
+# New line preferences
+csharp_new_line_before_open_brace = all
+csharp_new_line_before_else = true
+csharp_new_line_before_catch = true
+csharp_new_line_before_finally = true
+csharp_new_line_before_members_in_object_initializers = true
+csharp_new_line_before_members_in_anonymous_types = true
+csharp_new_line_between_query_expression_clauses = true
+# trim_trailing_whitespace = true
+
+# Indentation preferences
+csharp_indent_block_contents = true
+csharp_indent_braces = false
+csharp_indent_case_contents = true
+csharp_indent_switch_labels = true
+csharp_indent_labels = one_less_than_current
+
+# avoid this. unless absolutely necessary
+dotnet_style_qualification_for_field = false:suggestion
+dotnet_style_qualification_for_property = false:suggestion
+dotnet_style_qualification_for_method = false:suggestion
+dotnet_style_qualification_for_event = false:suggestion
+
+# prefer var
+csharp_style_var_for_built_in_types = true
+csharp_style_var_when_type_is_apparent = true
+csharp_style_var_elsewhere = true:suggestion
+
+# use language keywords instead of BCL types
+dotnet_style_predefined_type_for_locals_parameters_members = true:suggestion
+dotnet_style_predefined_type_for_member_access = true:suggestion
+
+# name all constant fields using PascalCase
+dotnet_naming_rule.constant_fields_should_be_pascal_case.severity = suggestion
+dotnet_naming_rule.constant_fields_should_be_pascal_case.symbols  = constant_fields
+dotnet_naming_rule.constant_fields_should_be_pascal_case.style    = pascal_case_style
+
+dotnet_naming_symbols.constant_fields.applicable_kinds   = field
+dotnet_naming_symbols.constant_fields.required_modifiers = const
+
+dotnet_naming_style.pascal_case_style.capitalization = pascal_case
+
+# private static fields should have s_ prefix
+dotnet_naming_rule.private_static_fields_should_have_prefix.severity = suggestion
+dotnet_naming_rule.private_static_fields_should_have_prefix.symbols  = private_static_fields
+dotnet_naming_rule.private_static_fields_should_have_prefix.style    = private_static_prefix_style
+
+dotnet_naming_symbols.private_static_fields.applicable_kinds   = field
+dotnet_naming_symbols.private_static_fields.required_modifiers = static
+dotnet_naming_symbols.private_static_fields.applicable_accessibilities = private
+
+dotnet_naming_style.private_static_prefix_style.required_prefix = s_
+dotnet_naming_style.private_static_prefix_style.capitalization = camel_case
+
+# internal and private fields should be _camelCase
+dotnet_naming_rule.camel_case_for_private_internal_fields.severity = suggestion
+dotnet_naming_rule.camel_case_for_private_internal_fields.symbols  = private_internal_fields
+dotnet_naming_rule.camel_case_for_private_internal_fields.style    = camel_case_underscore_style
+
+dotnet_naming_symbols.private_internal_fields.applicable_kinds = field
+dotnet_naming_symbols.private_internal_fields.applicable_accessibilities = private, internal
+
+dotnet_naming_style.camel_case_underscore_style.required_prefix = _
+dotnet_naming_style.camel_case_underscore_style.capitalization = camel_case
+
+# use accessibility modifiers
+dotnet_style_require_accessibility_modifiers = for_non_interface_members:suggestion
+
+# Code style defaults
+dotnet_sort_system_directives_first = true
+csharp_preserve_single_line_blocks = true
+csharp_preserve_single_line_statements = false
+
+# Expression-level preferences
+dotnet_style_object_initializer = true:suggestion
+dotnet_style_collection_initializer = true:suggestion
+dotnet_style_explicit_tuple_names = true:suggestion
+dotnet_style_coalesce_expression = true:suggestion
+dotnet_style_null_propagation = true:suggestion
+
+# Expression-bodied members
+csharp_style_expression_bodied_methods = false:none
+csharp_style_expression_bodied_constructors = false:none
+csharp_style_expression_bodied_operators = false:none
+csharp_style_expression_bodied_properties = true:none
+csharp_style_expression_bodied_indexers = true:none
+csharp_style_expression_bodied_accessors = true:none
+
+# Pattern matching
+csharp_style_pattern_matching_over_is_with_cast_check = true:suggestion
+csharp_style_pattern_matching_over_as_with_null_check = true:suggestion
+csharp_style_inlined_variable_declaration = true:suggestion
+
+# Null checking preferences
+csharp_style_throw_expression = true:suggestion
+csharp_style_conditional_delegate_call = true:suggestion
+
+# Space preferences
+csharp_space_after_cast = false
+csharp_space_after_colon_in_inheritance_clause = true
+csharp_space_after_comma = true
+csharp_space_after_dot = false
+csharp_space_after_keywords_in_control_flow_statements = true
+csharp_space_after_semicolon_in_for_statement = true
+csharp_space_around_binary_operators = before_and_after
+csharp_space_around_declaration_statements = false
+csharp_space_before_colon_in_inheritance_clause = true
+csharp_space_before_comma = false
+csharp_space_before_dot = false
+csharp_space_before_open_square_brackets = false
+csharp_space_before_semicolon_in_for_statement = false
+csharp_space_between_empty_square_brackets = false
+csharp_space_between_method_call_empty_parameter_list_parentheses = false
+csharp_space_between_method_call_name_and_opening_parenthesis = false
+csharp_space_between_method_call_parameter_list_parentheses = false
+csharp_space_between_method_declaration_empty_parameter_list_parentheses = false
+csharp_space_between_method_declaration_name_and_open_parenthesis = false
+csharp_space_between_method_declaration_parameter_list_parentheses = false
+csharp_space_between_parentheses = false
+csharp_space_between_square_brackets = false
+space_within_single_line_array_initializer_braces = true
+
+#Net Analyzer
+dotnet_analyzer_diagnostic.category-Performance.severity = none #error - Uncomment when all violations are fixed.
+
+# CA1018: Mark attributes with AttributeUsageAttribute
+dotnet_diagnostic.CA1018.severity = warning
+# CA1304: Specify CultureInfo
+dotnet_diagnostic.CA1304.severity = warning
+# CA1802: Use literals where appropriate
+dotnet_diagnostic.CA1802.severity = warning
+# CA1813: Avoid unsealed attributes
+dotnet_diagnostic.CA1813.severity = warning
+# CA1815: Override equals and operator equals on value types
+dotnet_diagnostic.CA1815.severity = warning
+# CA1820: Test for empty strings using string length
+dotnet_diagnostic.CA1820.severity = warning
+# CA1821: Remove empty finalizers
+dotnet_diagnostic.CA1821.severity = warning
+# CA1822: Mark members as static
+dotnet_diagnostic.CA1822.severity = suggestion
+dotnet_code_quality.CA1822.api_surface = private, internal
+# CA1823: Avoid unused private fields
+dotnet_diagnostic.CA1823.severity = warning
+# CA1825: Avoid zero-length array allocations
+dotnet_diagnostic.CA1825.severity = warning
+# CA1826: Use property instead of Linq Enumerable method
+dotnet_diagnostic.CA1826.severity = suggestion
+# CA1827: Do not use Count/LongCount when Any can be used
+dotnet_diagnostic.CA1827.severity = warning
+# CA1828: Do not use CountAsync/LongCountAsync when AnyAsync can be used
+dotnet_diagnostic.CA1828.severity = warning
+# CA1829: Use Length/Count property instead of Enumerable.Count method
+dotnet_diagnostic.CA1829.severity = warning
+#CA1847: Use string.Contains(char) instead of string.Contains(string) with single characters
+dotnet_diagnostic.CA1847.severity = warning
+# CA1851: Possible multiple enumerations of IEnumerable collection
+dotnet_diagnostic.CA1851.severity = warning
+#CA1854: Prefer the IDictionary.TryGetValue(TKey, out TValue) method
+dotnet_diagnostic.CA1854.severity = warning
+#CA2211:Non-constant fields should not be visible
+dotnet_diagnostic.CA2211.severity = warning
+
+# Wrapping preferences
+csharp_wrap_before_ternary_opsigns = false
+
+# Avalonia PublicAnalyzer preferences
+dotnet_diagnostic.AVP1000.severity = warning
+dotnet_diagnostic.AVP1001.severity = warning
+dotnet_diagnostic.AVP1002.severity = warning
+dotnet_diagnostic.AVP1010.severity = warning
+dotnet_diagnostic.AVP1011.severity = warning
+dotnet_diagnostic.AVP1012.severity = warning
+dotnet_diagnostic.AVP1013.severity = warning
+dotnet_diagnostic.AVP1020.severity = warning
+dotnet_diagnostic.AVP1021.severity = warning
+dotnet_diagnostic.AVP1022.severity = warning
+dotnet_diagnostic.AVP1030.severity = warning
+dotnet_diagnostic.AVP1031.severity = warning
+dotnet_diagnostic.AVP1032.severity = warning
+dotnet_diagnostic.AVP1040.severity = warning
+dotnet_diagnostic.AVA2001.severity = warning
+
+# Xaml files
+[*.{xaml,axaml}]
+indent_size = 4
+# DuplicateSetterError
+avalonia_xaml_diagnostic.AVLN2203.severity = warning
+# StyleInMergedDictionaries
+avalonia_xaml_diagnostic.AVLN2204.severity = warning
+# RequiredTemplatePartMissing
+avalonia_xaml_diagnostic.AVLN2205.severity = warning
+# OptionalTemplatePartMissing
+avalonia_xaml_diagnostic.AVLN2206.severity = info
+# TemplatePartWrongType
+avalonia_xaml_diagnostic.AVLN2207.severity = warning
+# ItemContainerInsideTemplate
+avalonia_xaml_diagnostic.AVLN2208.severity = warning
+# Obsolete
+avalonia_xaml_diagnostic.AVLN5001.severity = warning
+
+# Xml project files
+[*.{csproj,vcxproj,vcxproj.filters,proj,nativeproj,locproj}]
+indent_size = 2
+
+# Xml build files
+[*.builds]
+indent_size = 2
+
+# Xml files
+[*.{xml,stylecop,resx,ruleset}]
+indent_size = 2
+
+# Xml config files
+[*.{props,targets,config,nuspec}]
+indent_size = 2
+
+[*.json]
+indent_size = 2
+
+# Shell scripts
+[*.sh]
+end_of_line = lf
+[*.{cmd,bat}]
+end_of_line = crlf

.github/workflows/release-tag.yml

@@ -63,7 +63,7 @@ jobs:
         run: ls -R
 
       - name: Release
-        uses: softprops/action-gh-release@v2
+        uses: softprops/action-gh-release@v3
         if: startsWith(github.ref, 'refs/tags/') || github.event_name == 'workflow_dispatch'
         with:
           generate_release_notes: true

demo/Directory.Packages.props

@@ -1,7 +1,7 @@
 <Project>
     <PropertyGroup>
         <ManagePackageVersionsCentrally>true</ManagePackageVersionsCentrally>
-        <AvaloniaVersion>12.0.0</AvaloniaVersion>
+        <AvaloniaVersion>12.0.1</AvaloniaVersion>
         <DataGridVersion>12.0.0</DataGridVersion>
         <SkiaSharpVersion>3.119.3-preview.1.1</SkiaSharpVersion>
     </PropertyGroup>
@@ -23,4 +23,4 @@
 
         <PackageVersion Include="CommunityToolkit.Mvvm" Version="8.4.2"/>
     </ItemGroup>
-</Project>
+</Project>

demo/Semi.Avalonia.Demo/Converters/FileIconConverter.cs

@@ -1,28 +0,0 @@
-using System;
-using System.Collections.Generic;
-using System.Globalization;
-using Avalonia;
-using Avalonia.Data.Converters;
-using Avalonia.Metadata;
-
-namespace Semi.Avalonia.Demo.Converters;
-
-public class FileIconConverter : IMultiValueConverter
-{
-    [Content] public IDictionary<string, object?> Items { get; } = new Dictionary<string, object?>();
-
-    public object? Convert(IList<object?> values, Type targetType, object? parameter, CultureInfo culture)
-    {
-        if (values[0] is bool isDirectory && values[1] is bool isOpen)
-        {
-            if (!isDirectory)
-            {
-                return Items["file"];
-            }
-
-            return isOpen ? Items["folderOpen"] : Items["folderClosed"];
-        }
-
-        return AvaloniaProperty.UnsetValue;
-    }
-}

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

@@ -29,40 +29,40 @@
 
         <AutoCompleteBox
             PlaceholderText="Please select a State"
-            ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
+            ValueMemberBinding="{Binding Name,x:DataType=vm:StateData}" />
         <AutoCompleteBox
             Classes="Large"
-            ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
+            ValueMemberBinding="{Binding Name,x:DataType=vm:StateData}" />
         <AutoCompleteBox
             Classes="Small"
-            ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
+            ValueMemberBinding="{Binding Name,x:DataType=vm:StateData}" />
         <AutoCompleteBox
             Classes="Bordered"
-            ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
+            ValueMemberBinding="{Binding Name,x:DataType=vm:StateData}" />
         <AutoCompleteBox
             IsEnabled="False"
             PlaceholderText="Disabled"
-            ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
+            ValueMemberBinding="{Binding Name,x:DataType=vm:StateData}" />
         <AutoCompleteBox
             InnerLeftContent="https://"
             InnerRightContent=".com"
-            ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
+            ValueMemberBinding="{Binding Name,x:DataType=vm:StateData}" />
 
         <StackPanel Orientation="Horizontal">
             <AutoCompleteBox
                 Width="100"
                 Classes="Large"
                 PlaceholderText="Large"
-                ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
+                ValueMemberBinding="{Binding Name,x:DataType=vm:StateData}" />
             <AutoCompleteBox
                 Width="100"
                 PlaceholderText="Default"
-                ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
+                ValueMemberBinding="{Binding Name,x:DataType=vm:StateData}" />
             <AutoCompleteBox
                 Width="100"
                 Classes="Small"
                 PlaceholderText="Small"
-                ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
+                ValueMemberBinding="{Binding Name,x:DataType=vm:StateData}" />
         </StackPanel>
 
         <StackPanel Orientation="Horizontal">
@@ -70,17 +70,17 @@
                 Width="100"
                 IsEnabled="False"
                 PlaceholderText="Disabled"
-                ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
+                ValueMemberBinding="{Binding Name,x:DataType=vm:StateData}" />
             <AutoCompleteBox
                 Width="100"
                 Classes="Bordered"
                 PlaceholderText="Bordered"
-                ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
+                ValueMemberBinding="{Binding Name,x:DataType=vm:StateData}" />
             <AutoCompleteBox
                 Width="100"
                 Classes="Bordered"
                 IsEnabled="False"
-                ValueMemberBinding="{Binding Name,DataType=vm:StateData}" />
+                ValueMemberBinding="{Binding Name,x:DataType=vm:StateData}" />
         </StackPanel>
 
     </StackPanel>

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

@@ -3,8 +3,7 @@
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
-             x:Class="Semi.Avalonia.Demo.Pages.WindowCustomizationsPage"
+             x:Class="Semi.Avalonia.Demo.Pages.WindowCustomizationsPage">
-             x:CompileBindings="True">
 
     <StackPanel
         Spacing="10"

demo/Semi.Avalonia.Demo/Semi.Avalonia.Demo.csproj

@@ -3,7 +3,6 @@
         <TargetFramework>net8.0</TargetFramework>
         <Nullable>enable</Nullable>
         <LangVersion>latest</LangVersion>
-        <AvaloniaUseCompiledBindingsByDefault>true</AvaloniaUseCompiledBindingsByDefault>
     </PropertyGroup>
 
     <ItemGroup>

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

@@ -0,0 +1,353 @@
+using System;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.Globalization;
+using System.Linq;
+using System.Threading.Tasks;
+using System.Windows.Input;
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Controls.ApplicationLifetimes;
+using Avalonia.Layout;
+using Avalonia.Styling;
+using CommunityToolkit.Mvvm.ComponentModel;
+using CommunityToolkit.Mvvm.Input;
+using Semi.Avalonia.Demo.Pages;
+
+namespace Semi.Avalonia.Demo.ViewModels;
+
+public partial class MainViewModel : ObservableObject
+{
+    private readonly Dictionary<string, NavigationItemViewModel> _itemsByTitle = new(StringComparer.Ordinal);
+    private readonly IReadOnlyList<NavigationSectionViewModel> _allSections;
+
+    [ObservableProperty] public partial string? SearchText { get; set; }
+
+    public string DocumentationUrl => "https://docs.irihi.tech/semi";
+    public string RepoUrl => "https://github.com/irihitech/Semi.Avalonia";
+    public IReadOnlyList<MenuItemViewModel> MenuItems { get; }
+    public IReadOnlyList<NavigationSectionViewModel> Sections { get; }
+    public ObservableCollection<NavigationSectionViewModel> FilteredSections { get; } = [];
+    public bool ShowEmptySearchState => FilteredSections.Count == 0 && !string.IsNullOrWhiteSpace(SearchText);
+    public ContentPage? CurrentPage => SelectedItem?.Page;
+    public string SelectedPageTitle => SelectedItem?.Title ?? "Overview";
+
+    public NavigationItemViewModel? SelectedItem
+    {
+        get;
+        private set
+        {
+            if (ReferenceEquals(field, value))
+            {
+                return;
+            }
+
+            var previous = field;
+            if (SetProperty(ref field, value))
+            {
+                previous?.IsSelected = false;
+                value?.IsSelected = true;
+                OnPropertyChanged(nameof(CurrentPage));
+                OnPropertyChanged(nameof(SelectedPageTitle));
+            }
+        }
+    }
+
+    public MainViewModel()
+    {
+        MenuItems =
+        [
+            new MenuItemViewModel
+            {
+                Header = "Theme",
+                Items =
+                [
+                    new MenuItemViewModel { Header = "Auto", Command = FollowSystemThemeCommand },
+                    new MenuItemViewModel { Header = "Aquatic", Command = SelectThemeCommand, CommandParameter = SemiTheme.Aquatic },
+                    new MenuItemViewModel { Header = "Desert", Command = SelectThemeCommand, CommandParameter = SemiTheme.Desert },
+                    new MenuItemViewModel { Header = "Dusk", Command = SelectThemeCommand, CommandParameter = SemiTheme.Dusk },
+                    new MenuItemViewModel { Header = "NightSky", Command = SelectThemeCommand, CommandParameter = SemiTheme.NightSky },
+                ]
+            },
+            new MenuItemViewModel
+            {
+                Header = "Locale",
+                Items =
+                [
+                    new MenuItemViewModel { Header = "简体中文", Command = SelectLocaleCommand, CommandParameter = new CultureInfo("zh-CN") },
+                    new MenuItemViewModel { Header = "English", Command = SelectLocaleCommand, CommandParameter = new CultureInfo("en-US") },
+                    new MenuItemViewModel { Header = "日本語", Command = SelectLocaleCommand, CommandParameter = new CultureInfo("ja-JP") },
+                    new MenuItemViewModel { Header = "한국어", Command = SelectLocaleCommand, CommandParameter = new CultureInfo("ko-KR") },
+                    new MenuItemViewModel { Header = "English (UK)", Command = SelectLocaleCommand, CommandParameter = new CultureInfo("en-GB") },
+                    new MenuItemViewModel { Header = "Italiano", Command = SelectLocaleCommand, CommandParameter = new CultureInfo("it-IT") },
+                    new MenuItemViewModel { Header = "Italiano (Switzerland)", Command = SelectLocaleCommand, CommandParameter = new CultureInfo("it-CH") },
+                    new MenuItemViewModel { Header = "Nederlands", Command = SelectLocaleCommand, CommandParameter = new CultureInfo("nl-NL") },
+                    new MenuItemViewModel { Header = "Nederlands (Belgium)", Command = SelectLocaleCommand, CommandParameter = new CultureInfo("nl-BE") },
+                    new MenuItemViewModel { Header = "Українська", Command = SelectLocaleCommand, CommandParameter = new CultureInfo("uk-UA") },
+                    new MenuItemViewModel { Header = "Русский", Command = SelectLocaleCommand, CommandParameter = new CultureInfo("ru-RU") },
+                    new MenuItemViewModel { Header = "繁體中文", Command = SelectLocaleCommand, CommandParameter = new CultureInfo("zh-TW") },
+                    new MenuItemViewModel { Header = "Deutsch", Command = SelectLocaleCommand, CommandParameter = new CultureInfo("de-DE") },
+                    new MenuItemViewModel { Header = "Español", Command = SelectLocaleCommand, CommandParameter = new CultureInfo("es-ES") },
+                    new MenuItemViewModel { Header = "Polski", Command = SelectLocaleCommand, CommandParameter = new CultureInfo("pl-PL") },
+                    new MenuItemViewModel { Header = "Français", Command = SelectLocaleCommand, CommandParameter = new CultureInfo("fr-FR") },
+                ]
+            }
+        ];
+
+        Sections = _allSections =
+        [
+            new NavigationSectionViewModel("Overview",
+            [
+                CreateItem("Overview", static () => new Overview()),
+                CreateItem("About Us", static () => new AboutUs()),
+            ]),
+            new NavigationSectionViewModel("Resource Browser",
+            [
+                CreateItem("Palette", static () => new PaletteDemo()),
+                CreateItem("HighContrastTheme", static () => new HighContrastDemo()),
+                CreateItem("Variables", static () => new VariablesDemo()),
+                CreateItem("Icon", static () => new IconDemo()),
+            ]),
+            new NavigationSectionViewModel("Separate Pack",
+            [
+                CreateItem("ColorPicker", static () => new ColorPickerDemo()),
+                CreateItem("DataGrid", static () => new DataGridDemo()),
+            ]),
+            new NavigationSectionViewModel("Basic",
+            [
+                CreateItem("TextBlock", static () => new TextBlockDemo()),
+                CreateItem("SelectableTextBlock", static () => new SelectableTextBlockDemo()),
+                CreateItem("Border", static () => new BorderDemo()),
+                CreateItem("PathIcon", static () => new PathIconDemo()),
+            ]),
+            new NavigationSectionViewModel("Button",
+            [
+                CreateItem("Button", static () => new ButtonDemo()),
+                CreateItem("HyperlinkButton", static () => new HyperlinkButtonDemo()),
+                CreateItem("CheckBox", static () => new CheckBoxDemo()),
+                CreateItem("RadioButton", static () => new RadioButtonDemo()),
+                CreateItem("ToggleSwitch", static () => new ToggleSwitchDemo()),
+            ]),
+            new NavigationSectionViewModel("Input",
+            [
+                CreateItem("TextBox", static () => new TextBoxDemo()),
+                CreateItem("AutoCompleteBox", static () => new AutoCompleteBoxDemo()),
+                CreateItem("ComboBox", static () => new ComboBoxDemo()),
+                CreateItem("ButtonSpinner", static () => new ButtonSpinnerDemo()),
+                CreateItem("NumericUpDown", static () => new NumericUpDownDemo()),
+                CreateItem("Slider", static () => new SliderDemo()),
+                CreateItem("ManagedFileChooser", static () => new ManagedFileChooserDemo()),
+            ]),
+            new NavigationSectionViewModel("Date/Time",
+            [
+                CreateItem("Calendar", static () => new CalendarDemo()),
+                CreateItem("CalendarDatePicker", static () => new CalendarDatePickerDemo()),
+                CreateItem("DatePicker", static () => new DatePickerDemo()),
+                CreateItem("TimePicker", static () => new TimePickerDemo()),
+            ]),
+            new NavigationSectionViewModel("Navigation",
+            [
+                CreateItem("ContentPage", static () => new ContentPageDemo()),
+                CreateItem("CarouselPage", static () => new CarouselPageDemo()),
+                CreateItem("DrawerPage", static () => new DrawerPageDemo()),
+                CreateItem("NavigationPage", static () => new NavigationPageDemo()),
+                CreateItem("TabbedPage", static () => new TabbedPageDemo()),
+                CreateItem("TabControl", static () => new TabControlDemo()),
+                CreateItem("TabStrip", static () => new TabStripDemo()),
+                CreateItem("TreeView", static () => new TreeViewDemo()),
+            ]),
+            new NavigationSectionViewModel("Show",
+            [
+                CreateItem("Carousel", static () => new CarouselDemo()),
+                CreateItem("PipsPager", static () => new PipsPagerDemo()),
+                CreateItem("Expander", static () => new ExpanderDemo()),
+                CreateItem("Flyout", static () => new FlyoutDemo()),
+                CreateItem("HeaderedContentControl", static () => new HeaderedContentControlDemo()),
+                CreateItem("Label", static () => new LabelDemo()),
+                CreateItem("ListBox", static () => new ListBoxDemo()),
+                CreateItem("SplitView", static () => new SplitViewDemo()),
+                CreateItem("ToolTip", static () => new ToolTipDemo()),
+            ]),
+            new NavigationSectionViewModel("Feedback",
+            [
+                CreateItem("DataValidationErrors", static () => new DataValidationErrorsDemo()),
+                CreateItem("Notification", static () => new NotificationDemo()),
+                CreateItem("ProgressBar", static () => new ProgressBarDemo()),
+                CreateItem("RefreshContainer", static () => new RefreshContainerDemo()),
+            ]),
+            new NavigationSectionViewModel("Other",
+            [
+                CreateItem("CommandBar", static () => new CommandBarDemo()),
+                CreateItem("GridSplitter", static () => new GridSplitterDemo()),
+                CreateItem("Menu", static () => new MenuDemo()),
+                CreateItem("ScrollViewer", static () => new ScrollViewerDemo()),
+                CreateItem("ThemeVariantScope", static () => new ThemeVariantDemo()),
+                CreateItem("WindowCustomizationsPage", static () => new WindowCustomizationsPage()),
+            ]),
+        ];
+
+        SelectedItem = Sections[0].Items[0];
+        RefreshFilteredSections();
+    }
+
+    public bool TryNavigateTo(string title)
+    {
+        if (_itemsByTitle.TryGetValue(title, out var item))
+        {
+            SelectedItem = item;
+            return true;
+        }
+
+        return false;
+    }
+
+    partial void OnSearchTextChanged(string? value)
+    {
+        RefreshFilteredSections();
+    }
+
+    [RelayCommand]
+    private void NavigateTo(object? parameter)
+    {
+        if (parameter is NavigationItemViewModel item)
+        {
+            SelectedItem = item;
+        }
+    }
+
+    [RelayCommand]
+    private void FollowSystemTheme()
+    {
+        Application.Current?.RegisterFollowSystemTheme();
+    }
+
+    [RelayCommand]
+    private void ToggleTheme()
+    {
+        var app = Application.Current;
+        if (app is null) return;
+        var theme = app.ActualThemeVariant;
+        app.RequestedThemeVariant = theme == ThemeVariant.Dark ? ThemeVariant.Light : ThemeVariant.Dark;
+        app.UnregisterFollowSystemTheme();
+    }
+
+    [RelayCommand]
+    private void SelectTheme(object? obj)
+    {
+        var app = Application.Current;
+        if (app is null) return;
+        app.RequestedThemeVariant = obj as ThemeVariant;
+        app.UnregisterFollowSystemTheme();
+    }
+
+    [RelayCommand]
+    private void SelectLocale(object? obj)
+    {
+        var app = Application.Current;
+        if (app is null) return;
+        SemiTheme.OverrideLocaleResources(app, obj as CultureInfo);
+    }
+
+    [RelayCommand]
+    private static async Task OpenUrl(string url)
+    {
+        var launcher = ResolveDefaultTopLevel()?.Launcher;
+        if (launcher is not null)
+        {
+            await launcher.LaunchUriAsync(new Uri(url));
+        }
+    }
+
+    private NavigationItemViewModel CreateItem(string title, Func<Control> contentFactory)
+    {
+        var item = new NavigationItemViewModel(title, NavigateToCommand, contentFactory);
+        _itemsByTitle.Add(title, item);
+        return item;
+    }
+
+    private void RefreshFilteredSections()
+    {
+        var search = string.IsNullOrWhiteSpace(SearchText) ? string.Empty : SearchText.Trim();
+
+        FilteredSections.Clear();
+
+        foreach (var section in _allSections)
+        {
+            if (search.Length == 0 ||
+                section.Header.Contains(search, StringComparison.InvariantCultureIgnoreCase))
+            {
+                FilteredSections.Add(section);
+                continue;
+            }
+
+            var matchedItems = section.Items
+                .Where(item => item.Title.Contains(search, StringComparison.InvariantCultureIgnoreCase))
+                .ToArray();
+
+            if (matchedItems.Length > 0)
+            {
+                FilteredSections.Add(new NavigationSectionViewModel(section.Header, matchedItems));
+            }
+        }
+
+        OnPropertyChanged(nameof(ShowEmptySearchState));
+    }
+
+    private static TopLevel? ResolveDefaultTopLevel()
+    {
+        return Application.Current?.ApplicationLifetime switch
+        {
+            IClassicDesktopStyleApplicationLifetime desktopLifetime => desktopLifetime.MainWindow,
+            ISingleViewApplicationLifetime singleView => TopLevel.GetTopLevel(singleView.MainView),
+            _ => null
+        };
+    }
+}
+
+public class NavigationSectionViewModel
+{
+    public NavigationSectionViewModel(string header, IReadOnlyList<NavigationItemViewModel> items)
+    {
+        Header = header;
+        Items = items;
+    }
+
+    public string Header { get; }
+
+    public IReadOnlyList<NavigationItemViewModel> Items { get; }
+}
+
+public partial class NavigationItemViewModel : ObservableObject
+{
+    private readonly Func<Control> _contentFactory;
+
+    public NavigationItemViewModel(string title, ICommand navigateCommand, Func<Control> contentFactory)
+    {
+        Title = title;
+        NavigateCommand = navigateCommand;
+        _contentFactory = contentFactory;
+    }
+
+    public string Title { get; }
+
+    public ICommand NavigateCommand { get; }
+
+    public ContentPage Page => field ??= new ContentPage
+    {
+        Header = Title,
+        Background = null,
+        HorizontalContentAlignment = HorizontalAlignment.Stretch,
+        VerticalContentAlignment = VerticalAlignment.Stretch,
+        Content = _contentFactory()
+    };
+
+    [ObservableProperty] public partial bool IsSelected { get; set; }
+}
+
+public class MenuItemViewModel
+{
+    public string? Header { get; set; }
+    public ICommand? Command { get; set; }
+    public object? CommandParameter { get; set; }
+    public IList<MenuItemViewModel>? Items { get; set; }
+}

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

@@ -4,283 +4,141 @@
     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:pages="using:Semi.Avalonia.Demo.Pages"
+    xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
-    xmlns:views="clr-namespace:Semi.Avalonia.Demo.Views"
     d:DesignHeight="450"
     d:DesignWidth="800"
-    x:DataType="views:MainViewModel"
+    x:DataType="vm:MainViewModel"
     mc:Ignorable="d">
-    <UserControl.Resources>
+    <UserControl.Styles>
-        <ControlTheme x:Key="CategoryTabItem" TargetType="TabItem">
+        <Style Selector="TextBlock.NavSectionHeader">
-            <Setter Property="IsEnabled" Value="False" />
+            <Setter Property="Margin" Value="12,10,12,2" />
-            <Setter Property="Template">
+            <Setter Property="FontSize" Value="12" />
-                <ControlTemplate TargetType="TabItem">
+            <Setter Property="FontWeight" Value="Bold" />
+            <Setter Property="Foreground" Value="{DynamicResource SemiColorText1}" />
+        </Style>
+
+        <Style Selector="Border.NavItemHost">
+            <Setter Property="Margin" Value="6,0" />
+            <Setter Property="Background" Value="Transparent" />
+        </Style>
+
+        <Style Selector="Border.NavItemHost.Selected">
+            <Setter Property="Background" Value="{DynamicResource SemiColorPrimaryLight}" />
+        </Style>
+
+        <Style Selector="Button.NavItem">
+            <Setter Property="Theme" Value="{DynamicResource BorderlessButton}" />
+            <Setter Property="HorizontalAlignment" Value="Stretch" />
+            <Setter Property="HorizontalContentAlignment" Value="Left" />
+            <Setter Property="Padding" Value="12,8" />
+            <Setter Property="Foreground" Value="{DynamicResource SemiColorText0}" />
+        </Style>
+        <Style Selector="Button.NavItem.Selected">
+            <Setter Property="Foreground" Value="{DynamicResource SemiColorPrimary}" />
+        </Style>
+    </UserControl.Styles>
+
+    <DrawerPage
+        Name="MainDrawer"
+        Margin="8"
+        Background="Transparent"
+        Content="{Binding CurrentPage}"
+        DrawerLayoutBehavior="{OnFormFactor Split, Mobile=Overlay}"
+        DrawerLength="300"
+        IsOpen="True">
+        <DrawerPage.Header>
+            <StackPanel Orientation="Horizontal" Spacing="8">
+                <SelectableTextBlock
+                    VerticalAlignment="Center"
+                    Classes="H6"
+                    Text="Semi Avalonia"
+                    Theme="{DynamicResource TitleSelectableTextBlock}" />
+                <TextBlock VerticalAlignment="Center" Text="/" />
+                <SelectableTextBlock
+                    VerticalAlignment="Center"
+                    Classes="Secondary"
+                    Text="{Binding SelectedPageTitle}" />
+            </StackPanel>
+        </DrawerPage.Header>
+
+        <DrawerPage.DrawerHeader>
+            <TextBox
+                Margin="8"
+                Classes="ClearButton"
+                PlaceholderText="Search demos or sections"
+                Text="{Binding SearchText}" />
+        </DrawerPage.DrawerHeader>
+
+        <DrawerPage.Drawer>
+            <ScrollViewer HorizontalScrollBarVisibility="Disabled">
+                <StackPanel>
+                    <ItemsControl ItemsSource="{Binding FilteredSections}">
+                        <ItemsControl.ItemTemplate>
+                            <DataTemplate DataType="vm:NavigationSectionViewModel">
+                                <StackPanel Margin="0,0,0,10">
+                                    <TextBlock Classes="NavSectionHeader" Text="{Binding Header}" />
+                                    <ItemsControl ItemsSource="{Binding Items}">
+                                        <ItemsControl.ItemTemplate>
+                                            <DataTemplate DataType="vm:NavigationItemViewModel">
+                                                <Border Classes="NavItemHost" Classes.Selected="{Binding IsSelected}">
+                                                    <Button
+                                                        Classes="NavItem"
+                                                        Classes.Selected="{Binding IsSelected}"
+                                                        Command="{Binding NavigateCommand}"
+                                                        CommandParameter="{Binding}"
+                                                        Content="{Binding Title}" />
+                                                </Border>
+                                            </DataTemplate>
+                                        </ItemsControl.ItemTemplate>
+                                    </ItemsControl>
+                                </StackPanel>
+                            </DataTemplate>
+                        </ItemsControl.ItemTemplate>
+                    </ItemsControl>
+
                     <TextBlock
-                        Margin="4"
+                        Margin="16,12,16,0"
-                        FontSize="12"
+                        Foreground="{DynamicResource SemiColorText1}"
-                        FontWeight="Bold"
+                        IsVisible="{Binding ShowEmptySearchState}"
-                        Text="{TemplateBinding Header}" />
+                        Text="No demo pages matched your search." />
-                </ControlTemplate>
-            </Setter>
-            <Style Selector="^:disabled /template/ TextBlock">
-                <Setter Property="Foreground" Value="{DynamicResource SemiColorText1}" />
-            </Style>
-        </ControlTheme>
-    </UserControl.Resources>
-    <Grid RowDefinitions="Auto, *">
-        <Border
-            Grid.Row="0"
-            Margin="8"
-            Padding="12,4"
-            Theme="{DynamicResource CardBorder}">
-            <Panel>
-                <StackPanel Orientation="Horizontal" Spacing="8">
-                    <ToggleSwitch
-                        Name="ExpandButton"
-                        Content="{StaticResource SemiIconSidebar}"
-                        Theme="{DynamicResource IconBorderlessToggleSwitch}" />
-                    <SelectableTextBlock
-                        VerticalAlignment="Center"
-                        Classes="H6"
-                        Text="Semi Avalonia"
-                        Theme="{DynamicResource TitleSelectableTextBlock}" />
-                    <SelectableTextBlock VerticalAlignment="Center" Text="/" />
-                    <SelectableTextBlock
-                        VerticalAlignment="Center"
-                        Classes="Secondary"
-                        Text="{ReflectionBinding #tab.SelectedItem.Header}" />
                 </StackPanel>
-                <StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
+            </ScrollViewer>
-                    <Button
+        </DrawerPage.Drawer>
-                        Command="{Binding OpenUrlCommand}"
-                        CommandParameter="{Binding DocumentationUrl}"
-                        Content="{StaticResource SemiIconGlobe}"
-                        Theme="{DynamicResource IconBorderlessButton}" />
 
-                    <Button
+        <DrawerPage.DrawerFooter>
-                        Command="{Binding OpenUrlCommand}"
+            <StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
-                        CommandParameter="{Binding RepoUrl}"
+                <Button
-                        Content="{StaticResource SemiIconGithubLogo}"
+                    Command="{Binding OpenUrlCommand}"
-                        Theme="{DynamicResource IconBorderlessButton}" />
+                    CommandParameter="{Binding DocumentationUrl}"
+                    Content="{StaticResource SemiIconGlobe}"
+                    Theme="{DynamicResource IconBorderlessButton}" />
 
-                    <ToggleSwitch
+                <Button
-                        Command="{Binding ToggleThemeCommand}"
+                    Command="{Binding OpenUrlCommand}"
-                        OffContent="{StaticResource SemiIconSun}"
+                    CommandParameter="{Binding RepoUrl}"
-                        OnContent="{StaticResource SemiIconMoon}"
+                    Content="{StaticResource SemiIconGithubLogo}"
-                        Theme="{DynamicResource IconBorderlessToggleSwitch}" />
+                    Theme="{DynamicResource IconBorderlessButton}" />
 
-                    <Button Content="{StaticResource SemiIconMenu}" Theme="{DynamicResource IconBorderlessButton}">
+                <ToggleSwitch
-                        <Button.Flyout>
+                    Command="{Binding ToggleThemeCommand}"
-                            <MenuFlyout ItemsSource="{Binding MenuItems}" Placement="Bottom" />
+                    OffContent="{StaticResource SemiIconSun}"
-                        </Button.Flyout>
+                    OnContent="{StaticResource SemiIconMoon}"
-                        <Button.Styles>
+                    Theme="{DynamicResource IconBorderlessToggleSwitch}" />
-                            <Style x:DataType="views:MenuItemViewModel" Selector="MenuItem">
+
-                                <Setter Property="Header" Value="{Binding Header}" />
+                <Button Content="{StaticResource SemiIconMenu}" Theme="{DynamicResource IconBorderlessButton}">
-                                <Setter Property="ItemsSource" Value="{Binding Items}" />
+                    <Button.Flyout>
-                                <Setter Property="Command" Value="{Binding Command}" />
+                        <MenuFlyout ItemsSource="{Binding MenuItems}" Placement="Bottom" />
-                                <Setter Property="CommandParameter" Value="{Binding CommandParameter}" />
+                    </Button.Flyout>
-                            </Style>
+                    <Button.Styles>
-                        </Button.Styles>
+                        <Style x:DataType="vm:MenuItemViewModel" Selector="MenuItem">
-                    </Button>
+                            <Setter Property="Header" Value="{Binding Header}" />
-                </StackPanel>
+                            <Setter Property="ItemsSource" Value="{Binding Items}" />
-            </Panel>
+                            <Setter Property="Command" Value="{Binding Command}" />
-        </Border>
+                            <Setter Property="CommandParameter" Value="{Binding CommandParameter}" />
-        <TabControl
+                        </Style>
-            Name="tab"
+                    </Button.Styles>
-            Grid.Row="1"
+                </Button>
-            Margin="8"
+            </StackPanel>
-            Padding="20,0,0,0"
+        </DrawerPage.DrawerFooter>
-            Classes.Dismiss="{Binding #ExpandButton.IsChecked}"
+    </DrawerPage>
-            TabStripPlacement="Left"
+</UserControl>
-            Theme="{DynamicResource ScrollLineTabControl}">
-            <TabControl.Styles>
-                <Style Selector=".Dismiss /template/ ScrollViewer#PART_ScrollViewer">
-                    <Setter Property="IsVisible" Value="False" />
-                </Style>
-            </TabControl.Styles>
-            <TabControl.ItemsPanel>
-                <ItemsPanelTemplate>
-                    <StackPanel />
-                </ItemsPanelTemplate>
-            </TabControl.ItemsPanel>
-            <TabItem Header="Overview">
-                <pages:Overview />
-            </TabItem>
-            <TabItem Header="About Us">
-                <pages:AboutUs />
-            </TabItem>
-            <TabItem Header="Resource Browser" Theme="{DynamicResource CategoryTabItem}" />
-            <TabItem Header="Palette">
-                <pages:PaletteDemo />
-            </TabItem>
-            <TabItem Header="HighContrastTheme">
-                <pages:HighContrastDemo />
-            </TabItem>
-            <TabItem Header="Variables">
-                <pages:VariablesDemo />
-            </TabItem>
-            <TabItem Header="Icon">
-                <pages:IconDemo />
-            </TabItem>
-            <TabItem Header="Separate Pack" Theme="{DynamicResource CategoryTabItem}" />
-            <TabItem Header="ColorPicker">
-                <pages:ColorPickerDemo />
-            </TabItem>
-            <TabItem Header="DataGrid">
-                <pages:DataGridDemo />
-            </TabItem>
-            <!-- <TabItem Header="TreeDataGrid"> -->
-            <!--     <pages:TreeDataGridDemo /> -->
-            <!-- </TabItem> -->
-            <TabItem Header="Basic" Theme="{DynamicResource CategoryTabItem}" />
-            <TabItem Header="TextBlock">
-                <pages:TextBlockDemo />
-            </TabItem>
-            <TabItem Header="SelectableTextBlock">
-                <pages:SelectableTextBlockDemo />
-            </TabItem>
-            <TabItem Header="Border">
-                <pages:BorderDemo />
-            </TabItem>
-            <TabItem Header="PathIcon">
-                <pages:PathIconDemo />
-            </TabItem>
-            <TabItem Header="Button" Theme="{DynamicResource CategoryTabItem}" />
-            <TabItem Header="Button">
-                <pages:ButtonDemo />
-            </TabItem>
-            <TabItem Header="HyperlinkButton">
-                <pages:HyperlinkButtonDemo />
-            </TabItem>
-            <TabItem Header="CheckBox">
-                <pages:CheckBoxDemo />
-            </TabItem>
-            <TabItem Header="RadioButton">
-                <pages:RadioButtonDemo />
-            </TabItem>
-            <TabItem Header="ToggleSwitch">
-                <pages:ToggleSwitchDemo />
-            </TabItem>
-            <TabItem Header="Input" Theme="{DynamicResource CategoryTabItem}" />
-            <TabItem Header="TextBox">
-                <pages:TextBoxDemo />
-            </TabItem>
-            <TabItem Header="AutoCompleteBox">
-                <pages:AutoCompleteBoxDemo />
-            </TabItem>
-            <TabItem Header="ComboBox">
-                <pages:ComboBoxDemo />
-            </TabItem>
-            <TabItem Header="ButtonSpinner">
-                <pages:ButtonSpinnerDemo />
-            </TabItem>
-            <TabItem Header="NumericUpDown">
-                <pages:NumericUpDownDemo />
-            </TabItem>
-            <TabItem Header="Slider">
-                <pages:SliderDemo />
-            </TabItem>
-            <TabItem Header="ManagedFileChooser">
-                <pages:ManagedFileChooserDemo />
-            </TabItem>
-            <TabItem Header="Date/Time" Theme="{DynamicResource CategoryTabItem}" />
-            <TabItem Header="Calendar">
-                <pages:CalendarDemo />
-            </TabItem>
-            <TabItem Header="CalendarDatePicker">
-                <pages:CalendarDatePickerDemo />
-            </TabItem>
-            <TabItem Header="DatePicker">
-                <pages:DatePickerDemo />
-            </TabItem>
-            <TabItem Header="TimePicker">
-                <pages:TimePickerDemo />
-            </TabItem>
-            <TabItem Header="Navigation" Theme="{DynamicResource CategoryTabItem}" />
-            <TabItem Header="ContentPage">
-                <pages:ContentPageDemo />
-            </TabItem>
-            <TabItem Header="CarouselPage">
-                <pages:CarouselPageDemo />
-            </TabItem>
-            <TabItem Header="DrawerPage">
-                <pages:DrawerPageDemo />
-            </TabItem>
-            <TabItem Header="NavigationPage">
-                <pages:NavigationPageDemo />
-            </TabItem>
-            <TabItem Header="TabbedPage">
-                <pages:TabbedPageDemo />
-            </TabItem>
-            <TabItem Header="TabControl">
-                <pages:TabControlDemo />
-            </TabItem>
-            <TabItem Header="TabStrip">
-                <pages:TabStripDemo />
-            </TabItem>
-            <TabItem Header="TreeView">
-                <pages:TreeViewDemo />
-            </TabItem>
-            <TabItem Header="Show" Theme="{DynamicResource CategoryTabItem}" />
-            <TabItem Header="Carousel">
-                <pages:CarouselDemo />
-            </TabItem>
-            <TabItem Header="PipsPager">
-                <pages:PipsPagerDemo />
-            </TabItem>
-            <TabItem Header="Expander">
-                <pages:ExpanderDemo />
-            </TabItem>
-            <TabItem Header="Flyout">
-                <pages:FlyoutDemo />
-            </TabItem>
-            <TabItem Header="HeaderedContentControl">
-                <pages:HeaderedContentControlDemo />
-            </TabItem>
-            <TabItem Header="Label">
-                <pages:LabelDemo />
-            </TabItem>
-            <TabItem Header="ListBox">
-                <pages:ListBoxDemo />
-            </TabItem>
-            <TabItem Header="SplitView">
-                <pages:SplitViewDemo />
-            </TabItem>
-            <TabItem Header="ToolTip">
-                <pages:ToolTipDemo />
-            </TabItem>
-            <TabItem Header="Feedback" Theme="{DynamicResource CategoryTabItem}" />
-            <TabItem Header="DataValidationErrors">
-                <pages:DataValidationErrorsDemo />
-            </TabItem>
-            <TabItem Header="Notification">
-                <pages:NotificationDemo />
-            </TabItem>
-            <TabItem Header="ProgressBar">
-                <pages:ProgressBarDemo />
-            </TabItem>
-            <TabItem Header="RefreshContainer">
-                <pages:RefreshContainerDemo />
-            </TabItem>
-            <TabItem Header="Other" Theme="{DynamicResource CategoryTabItem}" />
-            <TabItem Header="CommandBar">
-                <pages:CommandBarDemo />
-            </TabItem>
-            <TabItem Header="GridSplitter">
-                <pages:GridSplitterDemo />
-            </TabItem>
-            <TabItem Header="Menu">
-                <pages:MenuDemo />
-            </TabItem>
-            <TabItem Header="ScrollViewer">
-                <pages:ScrollViewerDemo />
-            </TabItem>
-            <TabItem Header="ThemeVariantScope">
-                <pages:ThemeVariantDemo />
-            </TabItem>
-            <TabItem Header="WindowCustomizationsPage">
-                <pages:WindowCustomizationsPage />
-            </TabItem>
-        </TabControl>
-    </Grid>
-</UserControl>

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

@@ -1,250 +1,22 @@
-using System;
-using System.Collections.Generic;
-using System.Globalization;
-using System.Threading.Tasks;
-using System.Windows.Input;
-using Avalonia;
 using Avalonia.Controls;
-using Avalonia.Controls.ApplicationLifetimes;
-using Avalonia.Styling;
-using CommunityToolkit.Mvvm.ComponentModel;
-using CommunityToolkit.Mvvm.Input;
 using CommunityToolkit.Mvvm.Messaging;
+using Semi.Avalonia.Demo.ViewModels;
 
 namespace Semi.Avalonia.Demo.Views;
 
 public partial class MainView : UserControl
 {
+    private readonly MainViewModel _viewModel;
+
     public MainView()
     {
         InitializeComponent();
-        this.DataContext = new MainViewModel();
+        DataContext = _viewModel = new MainViewModel();
         WeakReferenceMessenger.Default.Register<string, string>(this, "JumpTo", MessageHandler);
     }
 
     private void MessageHandler(object _, string message)
     {
-        foreach (var item in tab.ItemsView)
+        _viewModel.TryNavigateTo(message);
-        {
-            if (item is TabItem tabItem && tabItem.Header is not null && tabItem.Header.Equals(message))
-            {
-                tab.SelectedItem = tabItem;
-                break;
-            }
-        }
     }
 }
-
-public partial class MainViewModel : ObservableObject
-{
-    public string DocumentationUrl => "https://docs.irihi.tech/semi";
-    public string RepoUrl => "https://github.com/irihitech/Semi.Avalonia";
-    public IReadOnlyList<MenuItemViewModel> MenuItems { get; }
-
-    public MainViewModel()
-    {
-        MenuItems =
-        [
-            new MenuItemViewModel
-            {
-                Header = "Theme",
-                Items =
-                [
-                    new MenuItemViewModel
-                    {
-                        Header = "Auto",
-                        Command = FollowSystemThemeCommand
-                    },
-                    new MenuItemViewModel
-                    {
-                        Header = "Aquatic",
-                        Command = SelectThemeCommand,
-                        CommandParameter = SemiTheme.Aquatic
-                    },
-                    new MenuItemViewModel
-                    {
-                        Header = "Desert",
-                        Command = SelectThemeCommand,
-                        CommandParameter = SemiTheme.Desert
-                    },
-                    new MenuItemViewModel
-                    {
-                        Header = "Dusk",
-                        Command = SelectThemeCommand,
-                        CommandParameter = SemiTheme.Dusk
-                    },
-                    new MenuItemViewModel
-                    {
-                        Header = "NightSky",
-                        Command = SelectThemeCommand,
-                        CommandParameter = SemiTheme.NightSky
-                    },
-                ]
-            },
-            new MenuItemViewModel
-            {
-                Header = "Locale",
-                Items =
-                [
-                    new MenuItemViewModel
-                    {
-                        Header = "简体中文",
-                        Command = SelectLocaleCommand,
-                        CommandParameter = new CultureInfo("zh-CN")
-                    },
-                    new MenuItemViewModel
-                    {
-                        Header = "English",
-                        Command = SelectLocaleCommand,
-                        CommandParameter = new CultureInfo("en-US")
-                    },
-                    new MenuItemViewModel
-                    {
-                        Header = "日本語",
-                        Command = SelectLocaleCommand,
-                        CommandParameter = new CultureInfo("ja-JP")
-                    },
-                    new MenuItemViewModel
-                    {
-                        Header = "한국어",
-                        Command = SelectLocaleCommand,
-                        CommandParameter = new CultureInfo("ko-KR")
-                    },
-                    new MenuItemViewModel
-                    {
-                        Header = "English (UK)",
-                        Command = SelectLocaleCommand,
-                        CommandParameter = new CultureInfo("en-GB")
-                    },
-                    new MenuItemViewModel
-                    {
-                        Header = "Italiano",
-                        Command = SelectLocaleCommand,
-                        CommandParameter = new CultureInfo("it-IT")
-                    },
-                    new MenuItemViewModel
-                    {
-                        Header = "Italiano (Switzerland)",
-                        Command = SelectLocaleCommand,
-                        CommandParameter = new CultureInfo("it-CH")
-                    },
-                    new MenuItemViewModel
-                    {
-                        Header = "Nederlands",
-                        Command = SelectLocaleCommand,
-                        CommandParameter = new CultureInfo("nl-NL")
-                    },
-                    new MenuItemViewModel
-                    {
-                        Header = "Nederlands (Belgium)",
-                        Command = SelectLocaleCommand,
-                        CommandParameter = new CultureInfo("nl-BE")
-                    },
-                    new MenuItemViewModel
-                    {
-                        Header = "Українська",
-                        Command = SelectLocaleCommand,
-                        CommandParameter = new CultureInfo("uk-UA")
-                    },
-                    new MenuItemViewModel
-                    {
-                        Header = "Русский",
-                        Command = SelectLocaleCommand,
-                        CommandParameter = new CultureInfo("ru-RU")
-                    },
-                    new MenuItemViewModel
-                    {
-                        Header = "繁體中文",
-                        Command = SelectLocaleCommand,
-                        CommandParameter = new CultureInfo("zh-TW")
-                    },
-                    new MenuItemViewModel
-                    {
-                        Header = "Deutsch",
-                        Command = SelectLocaleCommand,
-                        CommandParameter = new CultureInfo("de-DE")
-                    },
-                    new MenuItemViewModel
-                    {
-                        Header = "Español",
-                        Command = SelectLocaleCommand,
-                        CommandParameter = new CultureInfo("es-ES")
-                    },
-                    new MenuItemViewModel
-                    {
-                        Header = "Polski",
-                        Command = SelectLocaleCommand,
-                        CommandParameter = new CultureInfo("pl-PL")
-                    },
-                    new MenuItemViewModel
-                    {
-                        Header = "Français",
-                        Command = SelectLocaleCommand,
-                        CommandParameter = new CultureInfo("fr-FR")
-                    },
-                ]
-            }
-        ];
-    }
-
-    [RelayCommand]
-    private void FollowSystemTheme()
-    {
-        Application.Current?.RegisterFollowSystemTheme();
-    }
-
-    [RelayCommand]
-    private void ToggleTheme()
-    {
-        var app = Application.Current;
-        if (app is null) return;
-        var theme = app.ActualThemeVariant;
-        app.RequestedThemeVariant = theme == ThemeVariant.Dark ? ThemeVariant.Light : ThemeVariant.Dark;
-        app.UnregisterFollowSystemTheme();
-    }
-
-    [RelayCommand]
-    private void SelectTheme(object? obj)
-    {
-        var app = Application.Current;
-        if (app is null) return;
-        app.RequestedThemeVariant = obj as ThemeVariant;
-        app.UnregisterFollowSystemTheme();
-    }
-
-    [RelayCommand]
-    private void SelectLocale(object? obj)
-    {
-        var app = Application.Current;
-        if (app is null) return;
-        SemiTheme.OverrideLocaleResources(app, obj as CultureInfo);
-    }
-
-    [RelayCommand]
-    private static async Task OpenUrl(string url)
-    {
-        var launcher = ResolveDefaultTopLevel()?.Launcher;
-        if (launcher is not null)
-        {
-            await launcher.LaunchUriAsync(new Uri(url));
-        }
-    }
-
-    private static TopLevel? ResolveDefaultTopLevel()
-    {
-        return Application.Current?.ApplicationLifetime switch
-        {
-            IClassicDesktopStyleApplicationLifetime desktopLifetime => desktopLifetime.MainWindow,
-            ISingleViewApplicationLifetime singleView => TopLevel.GetTopLevel(singleView.MainView),
-            _ => null
-        };
-    }
-}
-
-public class MenuItemViewModel
-{
-    public string? Header { get; set; }
-    public ICommand? Command { get; set; }
-    public object? CommandParameter { get; set; }
-    public IList<MenuItemViewModel>? Items { get; set; }
-}

src/Directory.Build.props

@@ -2,7 +2,6 @@
     <PropertyGroup>
         <Nullable>enable</Nullable>
         <LangVersion>latest</LangVersion>
-        <AvaloniaUseCompiledBindingsByDefault>true</AvaloniaUseCompiledBindingsByDefault>
     </PropertyGroup>
 
     <PropertyGroup Condition="$([MSBuild]::IsTargetFrameworkCompatible('$(TargetFramework)', 'net8.0'))">

src/Directory.Packages.props

@@ -1,7 +1,7 @@
 <Project>
     <PropertyGroup>
         <ManagePackageVersionsCentrally>true</ManagePackageVersionsCentrally>
-        <AvaloniaVersion>12.0.0</AvaloniaVersion>
+        <AvaloniaVersion>12.0.1</AvaloniaVersion>
         <DataGridVersion>12.0.0</DataGridVersion>
     </PropertyGroup>
     <ItemGroup>
@@ -11,4 +11,4 @@
         <PackageVersion Include="Avalonia.Controls.TreeDataGrid" Version="11.1.1"/>
         <PackageVersion Include="Irihi.Avalonia.Shared" Version="0.4.0"/>
     </ItemGroup>
-</Project>
+</Project>

src/Semi.Avalonia.ColorPicker/Semi.Avalonia.ColorPicker.csproj

@@ -2,8 +2,8 @@
 
     <PropertyGroup>
         <TargetFrameworks>net8.0;net10.0</TargetFrameworks>
-        <Version>12.0.0</Version>
+        <Version>12.0.1</Version>
-        <PackageReleaseNotes>Update to Semi.Avalonia.ColorPicker 12.0.0</PackageReleaseNotes>
+        <PackageReleaseNotes>Update to Semi.Avalonia.ColorPicker 12.0.1</PackageReleaseNotes>
         <Title>Semi.Avalonia.ColorPicker</Title>
     </PropertyGroup>
 

src/Semi.Avalonia.DataGrid/DataGrid.axaml

@@ -1,8 +1,7 @@
 <ResourceDictionary
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:collections="using:Avalonia.Collections"
+    xmlns:collections="using:Avalonia.Collections">
-    x:CompileBindings="True">
     <ControlTheme x:Key="DataGridCellTextBlockTheme" TargetType="TextBlock">
         <Setter Property="Margin" Value="{DynamicResource DataGridCellTextBlockDefaultMargin}" />
         <Setter Property="VerticalAlignment" Value="Center" />

src/Semi.Avalonia.TreeDataGrid/TreeDataGrid.axaml

@@ -1,8 +1,7 @@
 <ResourceDictionary
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:conv="clr-namespace:Avalonia.Controls.Converters;assembly=Avalonia.Controls.TreeDataGrid"
+    xmlns:conv="clr-namespace:Avalonia.Controls.Converters;assembly=Avalonia.Controls.TreeDataGrid">
-    x:CompileBindings="True">
     <Design.PreviewWith>
         <StackPanel Margin="20">
             <TreeDataGridColumnHeader Header="123" />

src/Semi.Avalonia/Controls/SplitView.axaml

@@ -1,7 +1,6 @@
 <ResourceDictionary 
     xmlns="https://github.com/avaloniaui" 
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    x:CompileBindings="True">
     <ControlTheme x:Key="{x:Type SplitView}" TargetType="SplitView">
         <Setter Property="OpenPaneLength" Value="{DynamicResource SplitViewOpenPaneThemeLength}" />
         <Setter Property="CompactPaneLength" Value="{DynamicResource SplitViewCompactPaneThemeLength}" />

src/Semi.Avalonia/Semi.Avalonia.csproj

@@ -2,8 +2,8 @@
 
     <PropertyGroup>
         <TargetFrameworks>net8.0;net10.0</TargetFrameworks>
-        <Version>12.0.0</Version>
+        <Version>12.0.1</Version>
-        <PackageReleaseNotes>Update to Semi.Avalonia 12.0.0</PackageReleaseNotes>
+        <PackageReleaseNotes>Update to Semi.Avalonia 12.0.1</PackageReleaseNotes>
         <Title>Semi.Avalonia</Title>
     </PropertyGroup>