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/pack-nightly.yml

@@ -6,7 +6,7 @@ on:
       Version_Prefix:
         description: 'Version Prefix'
         required: true
-        default: '11.2.999'
+        default: '12.0.999'
         type: string
       Semi_Avalonia:
         description: 'Pack Semi.Avalonia'

.github/workflows/pack.yml

@@ -40,6 +40,7 @@ on:
       Semi_Avalonia_TreeDataGrid:
         type: boolean
         default: true
+    secrets: {}
 
 jobs:
   Pack_to_NuGet:

.github/workflows/release-tag.yml

@@ -33,6 +33,7 @@ jobs:
       Semi_Avalonia_ColorPicker: ${{ inputs.Semi_Avalonia_ColorPicker }}
       Semi_Avalonia_DataGrid: ${{ inputs.Semi_Avalonia_DataGrid }}
       Semi_Avalonia_TreeDataGrid: ${{ inputs.Semi_Avalonia_TreeDataGrid }}
+    secrets: inherit
 
   publish:
     uses: ./.github/workflows/publish.yml
@@ -62,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/ColorPickerDemo.axaml

@@ -2,80 +2,90 @@
     x:Class="Semi.Avalonia.Demo.Pages.ColorPickerDemo"
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:semi="https://irihi.tech/semi"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     d:DesignHeight="1450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <ScrollViewer>
-        <StackPanel Spacing="20">
-            <StackPanel Orientation="Horizontal" Spacing="20">
-                <ColorView Name="Test" ColorSpectrumShape="Ring" />
-                <ColorView ColorSpectrumShape="Box" />
-                <ColorView Palette="{DynamicResource SemiColorPalette}" />
-            </StackPanel>
-            <StackPanel Orientation="Horizontal">
-                <ColorView
-                    Name="SimpleColorViewTest"
-                    HsvColor="hsv(180,80%,70%)"
-                    IsAlphaVisible="True"
-                    Theme="{StaticResource SimpleColorView}" />
-                <StackPanel>
-                    <TextBlock Text="{Binding #SimpleColorViewTest.HsvColor}" />
-                    <TextBlock Text="{Binding #SimpleColorViewTest.Color}" />
+    <DockPanel>
+        <ScrollViewer DockPanel.Dock="Right" Width="260">
+            <StackPanel Margin="12" Spacing="8">
+                <StackPanel.Styles>
+                    <Style Selector="ToggleSwitch">
+                        <Setter Property="OffContent" Value="{Binding $self.OnContent}" />
+                    </Style>
+                </StackPanel.Styles>
+                <StackPanel Spacing="8">
+                    <ToggleSwitch Name="AccentColors" OnContent="IsAccentColorsVisible" IsChecked="True" />
+                    <ToggleSwitch Name="AlphaEnabled" OnContent="IsAlphaEnabled" IsChecked="True" />
+                    <ToggleSwitch Name="Alpha" OnContent="IsAlphaVisible" IsChecked="True" />
+                    <ToggleSwitch Name="ColorComponents" OnContent="IsColorComponentsVisible" IsChecked="True" />
+                    <ToggleSwitch Name="ColorModel" OnContent="IsColorModelVisible" IsChecked="True" />
+                    <ToggleSwitch Name="ColorPalette" OnContent="IsColorPaletteVisible" IsChecked="True" />
+                    <ToggleSwitch Name="ColorPreview" OnContent="IsColorPreviewVisible" IsChecked="True" />
+                    <ToggleSwitch Name="ColorSpectrum" OnContent="IsColorSpectrumVisible" IsChecked="True" />
+                    <ToggleSwitch Name="ColorSpectrumSlider" OnContent="IsColorSpectrumSliderVisible" IsChecked="True" />
+                    <ToggleSwitch Name="ComponentSlider" OnContent="IsComponentSliderVisible" IsChecked="True" />
+                    <ToggleSwitch Name="ComponentTextInput" OnContent="IsComponentTextInputVisible" IsChecked="True" />
+                    <ToggleSwitch Name="HexInput" OnContent="IsHexInputVisible" IsChecked="True" />
+                </StackPanel>
+
+                <Separator />
+
+                <StackPanel Spacing="8">
+                    <TextBlock>
+                        <Run Text="Color: " />
+                        <Run Text="{Binding #cv.Color,Mode=OneWay}" />
+                    </TextBlock>
+                    <TextBlock>
+                        <Run Text="HsvColor:" />
+                        <Run Text="{Binding #cv.HsvColor,Mode=OneWay}" />
+                    </TextBlock>
                 </StackPanel>
             </StackPanel>
-            <StackPanel Orientation="Horizontal" Spacing="8">
-                <ColorPicker ColorSpectrumShape="Ring">
-                    <ColorPicker.Palette>
-                        <FlatHalfColorPalette />
-                    </ColorPicker.Palette>
-                </ColorPicker>
-                <ColorPicker ColorSpectrumShape="Box">
-                    <ColorPicker.Palette>
-                        <semi:SemiColorLightPalette />
-                    </ColorPicker.Palette>
-                </ColorPicker>
-                <ColorPicker
-                    Theme="{DynamicResource HexColorPicker}"
-                    ColorSpectrumShape="Box">
-                    <ColorPicker.Palette>
-                        <semi:SemiColorLightPalette />
-                    </ColorPicker.Palette>
-                </ColorPicker>
-            </StackPanel>
-            <StackPanel HorizontalAlignment="Left">
-                <TextBlock Text="Use Style to customize button" />
-                <ColorPicker
-                    Margin="8"
-                    MinWidth="32"
-                    HsvColor="hsv(180,80%,70%)">
-                    <ColorPicker.Content>
-                        <Border
-                            Margin="1"
-                            Background="{Binding $parent[ColorPicker].HsvColor, Converter={StaticResource ToBrushConverter}}"
-                            CornerRadius="1" />
-                    </ColorPicker.Content>
-                    <ColorPicker.Styles>
-                        <Style Selector="DropDownButton">
-                            <Setter Property="Padding" Value="0" />
-                            <Style Selector="^ /template/ PathIcon">
-                                <Setter Property="IsVisible" Value="False" />
-                            </Style>
-                        </Style>
-                    </ColorPicker.Styles>
-                </ColorPicker>
-            </StackPanel>
+        </ScrollViewer>
 
-            <StackPanel Orientation="Horizontal" Spacing="8">
-                <ColorPicker
-                    Theme="{StaticResource SimpleColorPicker}"
-                    HsvColor="hsv(180,80%,70%)" />
-                <ColorPicker
-                    Theme="{StaticResource HexSimpleColorPicker}"
-                    HsvColor="hsv(180,80%,70%)" />
+        <Border Margin="12"
+                BorderBrush="{DynamicResource SemiColorBorder}"
+                BorderThickness="1"
+                CornerRadius="6"
+                ClipToBounds="True">
+            <Border.Styles>
+                <Style Selector=":is(ColorView)">
+                    <Setter Property="IsAccentColorsVisible" Value="{Binding #AccentColors.IsChecked}" />
+                    <Setter Property="IsAlphaEnabled" Value="{Binding #AlphaEnabled.IsChecked}" />
+                    <Setter Property="IsAlphaVisible" Value="{Binding #Alpha.IsChecked}" />
+                    <Setter Property="IsColorComponentsVisible" Value="{Binding #ColorComponents.IsChecked}" />
+                    <Setter Property="IsColorModelVisible" Value="{Binding #ColorModel.IsChecked}" />
+                    <Setter Property="IsColorPaletteVisible" Value="{Binding #ColorPalette.IsChecked}" />
+                    <Setter Property="IsColorPreviewVisible" Value="{Binding #ColorPreview.IsChecked}" />
+                    <Setter Property="IsColorSpectrumVisible" Value="{Binding #ColorSpectrum.IsChecked}" />
+                    <Setter Property="IsColorSpectrumSliderVisible" Value="{Binding #ColorSpectrumSlider.IsChecked}" />
+                    <Setter Property="IsComponentSliderVisible" Value="{Binding #ComponentSlider.IsChecked}" />
+                    <Setter Property="IsComponentTextInputVisible" Value="{Binding #ComponentTextInput.IsChecked}" />
+                    <Setter Property="IsHexInputVisible" Value="{Binding #HexInput.IsChecked}" />
+
+                    <Setter Property="Color" Value="#39C5BB" />
+                </Style>
+            </Border.Styles>
+            <StackPanel Margin="12" Spacing="12" Orientation="Horizontal">
+                <StackPanel Spacing="12">
+                    <TextBlock Text="Default Theme" FontWeight="Bold" FontSize="16" />
+                    <ColorView Name="cv" />
+                    <StackPanel Spacing="12" Orientation="Horizontal">
+                        <ColorPicker />
+                        <ColorPicker Theme="{DynamicResource HexColorPicker}" />
+                    </StackPanel>
+                </StackPanel>
+                <StackPanel Spacing="12">
+                    <TextBlock Text="SimpleColorPicker" FontWeight="Bold" FontSize="16" />
+                    <ColorView Theme="{DynamicResource SimpleColorView}" />
+                    <StackPanel Spacing="12" Orientation="Horizontal">
+                        <ColorPicker Theme="{DynamicResource SimpleColorPicker}" />
+                        <ColorPicker Theme="{DynamicResource HexSimpleColorPicker}" />
+                    </StackPanel>
+                </StackPanel>
             </StackPanel>
-        </StackPanel>
-    </ScrollViewer>
+        </Border>
+    </DockPanel>
 </UserControl>

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

@@ -50,7 +50,7 @@
             <TabbedPage Name="DemoTabs"
                         TabPlacement="Top"
                         SelectionChanged="OnSelectionChanged">
-                <ContentPage Header="Home">
+                <ContentPage Icon="{DynamicResource SemiIconHome}" Header="Home">
                     <StackPanel Margin="16" Spacing="8">
                         <TextBlock Text="Home Tab" FontSize="24" FontWeight="Bold" />
                         <TextBlock Text="Welcome to the Home tab. This is a TabbedPage sample."
@@ -59,14 +59,14 @@
                                    TextWrapping="Wrap" Opacity="0.7" />
                     </StackPanel>
                 </ContentPage>
-                <ContentPage Header="Search">
+                <ContentPage Icon="{DynamicResource SemiIconSearch}" Header="Search">
                     <StackPanel Margin="16" Spacing="8">
                         <TextBlock Text="Search Tab" FontSize="24" FontWeight="Bold" />
                         <TextBox PlaceholderText="Type to search..." />
                         <TextBlock Text="Search results will appear here." Opacity="0.7" />
                     </StackPanel>
                 </ContentPage>
-                <ContentPage Header="Settings">
+                <ContentPage Icon="{DynamicResource SemiIconSetting}" Header="Settings">
                     <StackPanel Margin="16" Spacing="8">
                         <TextBlock Text="Settings Tab" FontSize="24" FontWeight="Bold" />
                         <CheckBox Content="Enable notifications" />

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:CompileBindings="True">
+             x:Class="Semi.Avalonia.Demo.Pages.WindowCustomizationsPage">
 
     <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:views="clr-namespace:Semi.Avalonia.Demo.Views"
+    xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
     d:DesignHeight="450"
     d:DesignWidth="800"
-    x:DataType="views:MainViewModel"
+    x:DataType="vm:MainViewModel"
     mc:Ignorable="d">
-    <UserControl.Resources>
-        <ControlTheme x:Key="CategoryTabItem" TargetType="TabItem">
-            <Setter Property="IsEnabled" Value="False" />
-            <Setter Property="Template">
-                <ControlTemplate TargetType="TabItem">
+    <UserControl.Styles>
+        <Style Selector="TextBlock.NavSectionHeader">
+            <Setter Property="Margin" Value="12,10,12,2" />
+            <Setter Property="FontSize" Value="12" />
+            <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"
-                        FontSize="12"
-                        FontWeight="Bold"
-                        Text="{TemplateBinding Header}" />
-                </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}" />
+                        Margin="16,12,16,0"
+                        Foreground="{DynamicResource SemiColorText1}"
+                        IsVisible="{Binding ShowEmptySearchState}"
+                        Text="No demo pages matched your search." />
                 </StackPanel>
-                <StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
-                    <Button
-                        Command="{Binding OpenUrlCommand}"
-                        CommandParameter="{Binding DocumentationUrl}"
-                        Content="{StaticResource SemiIconGlobe}"
-                        Theme="{DynamicResource IconBorderlessButton}" />
+            </ScrollViewer>
+        </DrawerPage.Drawer>
 
-                    <Button
-                        Command="{Binding OpenUrlCommand}"
-                        CommandParameter="{Binding RepoUrl}"
-                        Content="{StaticResource SemiIconGithubLogo}"
-                        Theme="{DynamicResource IconBorderlessButton}" />
+        <DrawerPage.DrawerFooter>
+            <StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
+                <Button
+                    Command="{Binding OpenUrlCommand}"
+                    CommandParameter="{Binding DocumentationUrl}"
+                    Content="{StaticResource SemiIconGlobe}"
+                    Theme="{DynamicResource IconBorderlessButton}" />
 
-                    <ToggleSwitch
-                        Command="{Binding ToggleThemeCommand}"
-                        OffContent="{StaticResource SemiIconSun}"
-                        OnContent="{StaticResource SemiIconMoon}"
-                        Theme="{DynamicResource IconBorderlessToggleSwitch}" />
+                <Button
+                    Command="{Binding OpenUrlCommand}"
+                    CommandParameter="{Binding RepoUrl}"
+                    Content="{StaticResource SemiIconGithubLogo}"
+                    Theme="{DynamicResource IconBorderlessButton}" />
 
-                    <Button Content="{StaticResource SemiIconMenu}" Theme="{DynamicResource IconBorderlessButton}">
-                        <Button.Flyout>
-                            <MenuFlyout ItemsSource="{Binding MenuItems}" Placement="Bottom" />
-                        </Button.Flyout>
-                        <Button.Styles>
-                            <Style x:DataType="views:MenuItemViewModel" Selector="MenuItem">
-                                <Setter Property="Header" Value="{Binding Header}" />
-                                <Setter Property="ItemsSource" Value="{Binding Items}" />
-                                <Setter Property="Command" Value="{Binding Command}" />
-                                <Setter Property="CommandParameter" Value="{Binding CommandParameter}" />
-                            </Style>
-                        </Button.Styles>
-                    </Button>
-                </StackPanel>
-            </Panel>
-        </Border>
-        <TabControl
-            Name="tab"
-            Grid.Row="1"
-            Margin="8"
-            Padding="20,0,0,0"
-            Classes.Dismiss="{Binding #ExpandButton.IsChecked}"
-            TabStripPlacement="Left"
-            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>
+                <ToggleSwitch
+                    Command="{Binding ToggleThemeCommand}"
+                    OffContent="{StaticResource SemiIconSun}"
+                    OnContent="{StaticResource SemiIconMoon}"
+                    Theme="{DynamicResource IconBorderlessToggleSwitch}" />
+
+                <Button Content="{StaticResource SemiIconMenu}" Theme="{DynamicResource IconBorderlessButton}">
+                    <Button.Flyout>
+                        <MenuFlyout ItemsSource="{Binding MenuItems}" Placement="Bottom" />
+                    </Button.Flyout>
+                    <Button.Styles>
+                        <Style x:DataType="vm:MenuItemViewModel" Selector="MenuItem">
+                            <Setter Property="Header" Value="{Binding Header}" />
+                            <Setter Property="ItemsSource" Value="{Binding Items}" />
+                            <Setter Property="Command" Value="{Binding Command}" />
+                            <Setter Property="CommandParameter" Value="{Binding CommandParameter}" />
+                        </Style>
+                    </Button.Styles>
+                </Button>
+            </StackPanel>
+        </DrawerPage.DrawerFooter>
+    </DrawerPage>
+</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)
-        {
-            if (item is TabItem tabItem && tabItem.Header is not null && tabItem.Header.Equals(message))
-            {
-                tab.SelectedItem = tabItem;
-                break;
-            }
-        }
+        _viewModel.TryNavigateTo(message);
     }
 }
-
-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/Controls/ColorPicker.axaml

@@ -2,38 +2,48 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:iri="https://irihi.tech/shared"
-    xmlns:converters="using:Avalonia.Controls.Converters">
-    <converters:ToBrushConverter x:Key="ToBrushConverter" />
+    xmlns:semi="https://irihi.tech/semi">
+    <Design.PreviewWith>
+        <StackPanel Width="500" Height="500">
+            <ColorPicker Name="cp" Color="#AAAAAAAA" IsAlphaVisible="True" IsAlphaEnabled="True" />
+            <ColorPicker Theme="{DynamicResource SimpleColorPicker}" Color="{Binding #cp.Color}" IsAlphaEnabled="{Binding #cp.IsAlphaEnabled}" IsAlphaVisible="{Binding #cp.IsAlphaVisible}" />
+            <ColorPicker Theme="{DynamicResource HexSimpleColorPicker}" Color="{Binding #cp.Color}" IsAlphaEnabled="{Binding #cp.IsAlphaEnabled}" IsAlphaVisible="{Binding #cp.IsAlphaVisible}" />
+            <ColorView Color="{Binding #cp.Color}" IsAlphaEnabled="{Binding #cp.IsAlphaEnabled}" IsAlphaVisible="{Binding #cp.IsAlphaVisible}" />
+        </StackPanel>
+    </Design.PreviewWith>
 
     <ControlTheme x:Key="{x:Type ColorPicker}" TargetType="ColorPicker">
-        <Setter Property="MinWidth" Value="64" />
+        <!-- Alpha position should match CSS (and default slider order) instead of XAML/WinUI -->
+        <Setter Property="HexInputAlphaPosition" Value="Trailing" />
         <Setter Property="HorizontalAlignment" Value="Center" />
+        <Setter Property="Padding" Value="0 0 10 0" />
         <Setter Property="MinHeight" Value="{DynamicResource ColorPickerMinHeight}" />
         <Setter Property="CornerRadius" Value="{DynamicResource ColorPickerCornerRadius}" />
+        <Setter Property="Palette" Value="{DynamicResource SemiColorPalette}" />
         <Setter Property="Content">
             <Template>
                 <Panel>
                     <Border
                         Margin="1,1,0,1"
+                        Width="{Binding $self.Bounds.Height}"
                         Background="{DynamicResource ColorControlCheckeredBackgroundBrush}"
                         CornerRadius="{TemplateBinding CornerRadius, Converter={iri:CornerRadiusMixerConverter Left}}" />
                     <Border
                         Margin="1,1,0,1"
+                        Width="{Binding $self.Bounds.Height}"
                         Background="{TemplateBinding HsvColor, Converter={StaticResource ToBrushConverter}}"
                         CornerRadius="{TemplateBinding CornerRadius, Converter={iri:CornerRadiusMixerConverter Left}}" />
                 </Panel>
             </Template>
         </Setter>
-        <Setter Property="Palette">
-            <FluentColorPalette />
-        </Setter>
         <Setter Property="Template">
-            <ControlTemplate TargetType="{x:Type ColorPicker}">
+            <ControlTemplate TargetType="ColorPicker">
                 <DropDownButton
                     Width="{TemplateBinding Width}"
                     Height="{TemplateBinding Height}"
                     MinWidth="{TemplateBinding MinWidth}"
                     MinHeight="{TemplateBinding MinHeight}"
+                    Padding="{TemplateBinding Padding}"
                     HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                     VerticalAlignment="{TemplateBinding VerticalAlignment}"
                     HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
@@ -49,7 +59,9 @@
                         </Style>
                     </DropDownButton.Styles>
                     <DropDownButton.Flyout>
-                        <Flyout FlyoutPresenterClasses="nopadding" Placement="{DynamicResource ColorPickerFlyoutPlacement}">
+                        <Flyout
+                            FlyoutPresenterClasses="nopadding"
+                            Placement="{DynamicResource ColorPickerFlyoutPlacement}">
 
                             <!--
                                 The following is copy-pasted from the ColorView's control template.
@@ -57,7 +69,6 @@
                                 Note the only changes are resources specific to the ColorPicker.
                             -->
                             <Grid
-                                Name="RootGrid"
                                 Width="300"
                                 Height="300"
                                 RowDefinitions="*,Auto">
@@ -81,7 +92,7 @@
                                     Padding="0"
                                     VerticalAlignment="Stretch"
                                     HorizontalContentAlignment="Stretch"
-                                    SelectedIndex="{Binding SelectedIndex, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}">
+                                    SelectedIndex="{TemplateBinding SelectedIndex, Mode=TwoWay}">
                                     <TabControl.Styles>
                                         <Style Selector="TabItem">
                                             <Setter Property="MinHeight" Value="32" />
@@ -116,11 +127,11 @@
                                                 HorizontalAlignment="Center"
                                                 VerticalAlignment="Stretch"
                                                 AutomationProperties.Name="Third Component"
-                                                ColorComponent="{Binding ThirdComponent, ElementName=ColorSpectrum}"
+                                                ColorComponent="{Binding #ColorSpectrum.ThirdComponent}"
                                                 ColorModel="Hsva"
-                                                HsvColor="{Binding HsvColor, ElementName=ColorSpectrum}"
-                                                IsAlphaVisible="True"
-                                                IsPerceptive="False"
+                                                HsvColor="{Binding #ColorSpectrum.HsvColor}"
+                                                IsAlphaVisible="False"
+                                                IsPerceptive="True"
                                                 IsVisible="{TemplateBinding IsColorSpectrumSliderVisible}"
                                                 Orientation="Vertical" />
                                             <ColorSpectrum
@@ -129,7 +140,7 @@
                                                 HorizontalAlignment="Stretch"
                                                 VerticalAlignment="Stretch"
                                                 Components="{TemplateBinding ColorSpectrumComponents}"
-                                                HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                                                HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
                                                 MaxHue="{TemplateBinding MaxHue}"
                                                 MaxSaturation="{TemplateBinding MaxSaturation}"
                                                 MaxValue="{TemplateBinding MaxValue}"
@@ -146,14 +157,10 @@
                                                 AutomationProperties.Name="Alpha Component"
                                                 ColorComponent="Alpha"
                                                 ColorModel="Hsva"
-                                                HsvColor="{Binding HsvColor, ElementName=ColorSpectrum}"
+                                                HsvColor="{Binding #ColorSpectrum.HsvColor}"
+                                                IsVisible="{TemplateBinding IsAlphaVisible}"
                                                 IsEnabled="{TemplateBinding IsAlphaEnabled}"
                                                 Orientation="Vertical">
-                                                <ColorSlider.IsVisible>
-                                                    <MultiBinding Converter="{x:Static BoolConverters.And}">
-                                                        <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
-                                                    </MultiBinding>
-                                                </ColorSlider.IsVisible>
                                             </ColorSlider>
                                         </Grid>
                                     </TabItem>
@@ -168,13 +175,13 @@
                                         <ListBox
                                             Margin="12"
                                             VerticalAlignment="Stretch"
-                                            ItemContainerTheme="{DynamicResource ColorViewPaletteListBoxItemTheme}"
+                                            ItemContainerTheme="{StaticResource ColorViewPaletteListBoxItemTheme}"
                                             ItemsSource="{TemplateBinding PaletteColors}"
-                                            SelectedItem="{Binding Color, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource DoNothingForNullConverter}, Mode=TwoWay}"
-                                            Theme="{DynamicResource ColorViewPaletteListBoxTheme}"
+                                            SelectedItem="{TemplateBinding Color, Mode=TwoWay, Converter={StaticResource DoNothingForNullConverter}}"
+                                            Theme="{StaticResource ColorViewPaletteListBoxTheme}"
                                             UseLayoutRounding="False">
                                             <ListBox.ItemTemplate>
-                                                <DataTemplate DataType="{x:Type Color}">
+                                                <DataTemplate DataType="Color">
                                                     <Border
                                                         HorizontalAlignment="Stretch"
                                                         VerticalAlignment="Stretch"
@@ -205,7 +212,11 @@
                                             Margin="12"
                                             ColumnDefinitions="Auto,*"
                                             RowDefinitions="Auto,24,*,*,*,*,12"
-                                            Tag="{TemplateBinding ColorModel}">
+                                            UseLayoutRounding="False">
+                                            <Grid.Resources>
+                                                <Thickness x:Key="TextBoxContentPadding">8 0</Thickness>
+                                                <Thickness x:Key="TextBoxInnerLeftContentPadding">0 0 8 0</Thickness>
+                                            </Grid.Resources>
                                             <Grid.Styles>
                                                 <Style Selector="NumericUpDown">
                                                     <Setter Property="InnerLeftContent">
@@ -214,34 +225,6 @@
                                                         </Template>
                                                     </Setter>
                                                 </Style>
-                                                <Style Selector="Grid[Tag=Rgba]">
-                                                    <Style Selector="^ NumericUpDown#Component1NumericUpDown">
-                                                        <Setter Property="Tag" Value="R" />
-                                                    </Style>
-                                                    <Style Selector="^ NumericUpDown#Component2NumericUpDown">
-                                                        <Setter Property="Tag" Value="G" />
-                                                    </Style>
-                                                    <Style Selector="^ NumericUpDown#Component3NumericUpDown">
-                                                        <Setter Property="Tag" Value="B" />
-                                                    </Style>
-                                                    <Style Selector="^ NumericUpDown#AlphaComponentNumericUpDown">
-                                                        <Setter Property="Tag" Value="A" />
-                                                    </Style>
-                                                </Style>
-                                                <Style Selector="Grid[Tag=Hsva]">
-                                                    <Style Selector="^ NumericUpDown#Component1NumericUpDown">
-                                                        <Setter Property="Tag" Value="H" />
-                                                    </Style>
-                                                    <Style Selector="^ NumericUpDown#Component2NumericUpDown">
-                                                        <Setter Property="Tag" Value="S" />
-                                                    </Style>
-                                                    <Style Selector="^ NumericUpDown#Component3NumericUpDown">
-                                                        <Setter Property="Tag" Value="V" />
-                                                    </Style>
-                                                    <Style Selector="^ NumericUpDown#AlphaComponentNumericUpDown">
-                                                        <Setter Property="Tag" Value="A" />
-                                                    </Style>
-                                                </Style>
                                             </Grid.Styles>
                                             <!--  Top color model & Hex input  -->
                                             <Grid
@@ -263,9 +246,9 @@
                                                             Content="RGB"
                                                             CornerRadius="3,0,0,3"
                                                             IsChecked="{TemplateBinding ColorModel,
-                                                            Converter={StaticResource EnumToBoolConverter},
-                                                            ConverterParameter={x:Static ColorModel.Rgba},
-                                                            Mode=TwoWay}"
+                                                                Converter={StaticResource EnumToBoolConverter},
+                                                                ConverterParameter={x:Static ColorModel.Rgba},
+                                                                Mode=TwoWay}"
                                                             Theme="{DynamicResource ColorViewRadioButton}" />
                                                         <RadioButton
                                                             Name="HsvRadioButton"
@@ -275,9 +258,9 @@
                                                             Content="HSV"
                                                             CornerRadius="0,3,3,0"
                                                             IsChecked="{TemplateBinding ColorModel,
-                                                            Converter={StaticResource EnumToBoolConverter},
-                                                            ConverterParameter={x:Static ColorModel.Hsva},
-                                                            Mode=TwoWay}"
+                                                                Converter={StaticResource EnumToBoolConverter},
+                                                                ConverterParameter={x:Static ColorModel.Hsva},
+                                                                Mode=TwoWay}"
                                                             Theme="{DynamicResource ColorViewRadioButton}" />
                                                     </Grid>
                                                 </Border>
@@ -302,11 +285,11 @@
                                                 AllowSpin="True"
                                                 Classes="Small"
                                                 IsVisible="{TemplateBinding IsComponentTextInputVisible}"
-                                                Maximum="{Binding Maximum, ElementName=Component1Slider}"
-                                                Minimum="{Binding Minimum, ElementName=Component1Slider}"
+                                                Maximum="{Binding #Component1Slider.Maximum}"
+                                                Minimum="{Binding #Component1Slider.Minimum}"
                                                 NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
                                                 ShowButtonSpinner="False"
-                                                Value="{Binding Value, ElementName=Component1Slider}" />
+                                                Value="{Binding #Component1Slider.Value,Converter={StaticResource DoNothingForNullConverter}}" />
                                             <ColorSlider
                                                 Name="Component1Slider"
                                                 Grid.Row="2"
@@ -315,7 +298,7 @@
                                                 VerticalAlignment="Center"
                                                 ColorComponent="Component1"
                                                 ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
-                                                HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                                                HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
                                                 IsRoundingEnabled="True"
                                                 IsSnapToTickEnabled="True"
                                                 IsVisible="{TemplateBinding IsComponentSliderVisible}"
@@ -332,11 +315,11 @@
                                                 AllowSpin="True"
                                                 Classes="Small"
                                                 IsVisible="{TemplateBinding IsComponentTextInputVisible}"
-                                                Maximum="{Binding Maximum, ElementName=Component2Slider}"
-                                                Minimum="{Binding Minimum, ElementName=Component2Slider}"
+                                                Maximum="{Binding #Component2Slider.Maximum}"
+                                                Minimum="{Binding #Component2Slider.Minimum}"
                                                 NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
                                                 ShowButtonSpinner="False"
-                                                Value="{Binding Value, ElementName=Component2Slider}" />
+                                                Value="{Binding #Component2Slider.Value,Converter={StaticResource DoNothingForNullConverter}}" />
                                             <ColorSlider
                                                 Name="Component2Slider"
                                                 Grid.Row="3"
@@ -345,7 +328,7 @@
                                                 VerticalAlignment="Center"
                                                 ColorComponent="Component2"
                                                 ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
-                                                HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                                                HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
                                                 IsRoundingEnabled="True"
                                                 IsSnapToTickEnabled="True"
                                                 IsVisible="{TemplateBinding IsComponentSliderVisible}"
@@ -362,11 +345,11 @@
                                                 AllowSpin="True"
                                                 Classes="Small"
                                                 IsVisible="{TemplateBinding IsComponentTextInputVisible}"
-                                                Maximum="{Binding Maximum, ElementName=Component3Slider}"
-                                                Minimum="{Binding Minimum, ElementName=Component3Slider}"
+                                                Maximum="{Binding #Component3Slider.Maximum}"
+                                                Minimum="{Binding #Component3Slider.Minimum}"
                                                 NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
                                                 ShowButtonSpinner="False"
-                                                Value="{Binding Value, ElementName=Component3Slider}" />
+                                                Value="{Binding #Component3Slider.Value,Converter={StaticResource DoNothingForNullConverter}}" />
                                             <ColorSlider
                                                 Name="Component3Slider"
                                                 Grid.Row="4"
@@ -375,7 +358,7 @@
                                                 VerticalAlignment="Center"
                                                 ColorComponent="Component3"
                                                 ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
-                                                HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                                                HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
                                                 IsRoundingEnabled="True"
                                                 IsSnapToTickEnabled="True"
                                                 IsVisible="{TemplateBinding IsComponentSliderVisible}"
@@ -392,15 +375,15 @@
                                                 AllowSpin="True"
                                                 Classes="Small"
                                                 IsEnabled="{TemplateBinding IsAlphaEnabled}"
-                                                Maximum="{Binding Maximum, ElementName=AlphaComponentSlider}"
-                                                Minimum="{Binding Minimum, ElementName=AlphaComponentSlider}"
+                                                Maximum="{Binding #AlphaComponentSlider.Maximum}"
+                                                Minimum="{Binding #AlphaComponentSlider.Minimum}"
                                                 NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
                                                 ShowButtonSpinner="False"
-                                                Value="{Binding Value, ElementName=AlphaComponentSlider}">
+                                                Value="{Binding #AlphaComponentSlider.Value,Converter={StaticResource DoNothingForNullConverter}}">
                                                 <NumericUpDown.IsVisible>
                                                     <MultiBinding Converter="{x:Static BoolConverters.And}">
-                                                        <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
-                                                        <Binding Path="IsComponentTextInputVisible" RelativeSource="{RelativeSource TemplatedParent}" />
+                                                        <TemplateBinding Property="IsAlphaVisible" />
+                                                        <TemplateBinding Property="IsComponentTextInputVisible" />
                                                     </MultiBinding>
                                                 </NumericUpDown.IsVisible>
                                             </NumericUpDown>
@@ -412,7 +395,7 @@
                                                 VerticalAlignment="Center"
                                                 ColorComponent="Alpha"
                                                 ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
-                                                HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                                                HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
                                                 IsEnabled="{TemplateBinding IsAlphaEnabled}"
                                                 IsRoundingEnabled="True"
                                                 IsSnapToTickEnabled="True"
@@ -420,8 +403,8 @@
                                                 TickFrequency="1">
                                                 <ColorSlider.IsVisible>
                                                     <MultiBinding Converter="{x:Static BoolConverters.And}">
-                                                        <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
-                                                        <Binding Path="IsComponentSliderVisible" RelativeSource="{RelativeSource TemplatedParent}" />
+                                                        <TemplateBinding Property="IsAlphaVisible" />
+                                                        <TemplateBinding Property="IsComponentSliderVisible" />
                                                     </MultiBinding>
                                                 </ColorSlider.IsVisible>
                                             </ColorSlider>
@@ -429,11 +412,11 @@
                                     </TabItem>
                                 </TabControl>
                                 <!--  Previewer  -->
-                                <!--  Note that top/bottom margins have -5 to remove for drop shadow padding  -->
+                                <!-- Note that the drop shadow is allowed to extend past the control bounds -->
                                 <ColorPreviewer
                                     Grid.Row="1"
-                                    Margin="12,-5,12,7"
-                                    HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                                    Margin="12,0,12,12"
+                                    HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
                                     IsAccentColorsVisible="{TemplateBinding IsAccentColorsVisible}"
                                     IsVisible="{TemplateBinding IsColorPreviewVisible}" />
                             </Grid>
@@ -442,9 +425,33 @@
                 </DropDownButton>
             </ControlTemplate>
         </Setter>
-
-        <Style Selector="^ /template/ DropDownButton">
-            <Setter Property="Padding" Value="0 0 10 0" />
+        <Style Selector="^[ColorModel=Rgba]">
+            <Style Selector="^ /template/ NumericUpDown#Component1NumericUpDown">
+                <Setter Property="Tag" Value="R" />
+            </Style>
+            <Style Selector="^ /template/ NumericUpDown#Component2NumericUpDown">
+                <Setter Property="Tag" Value="G" />
+            </Style>
+            <Style Selector="^ /template/ NumericUpDown#Component3NumericUpDown">
+                <Setter Property="Tag" Value="B" />
+            </Style>
+            <Style Selector="^ /template/ NumericUpDown#AlphaComponentNumericUpDown">
+                <Setter Property="Tag" Value="A" />
+            </Style>
+        </Style>
+        <Style Selector="^[ColorModel=Hsva]">
+            <Style Selector="^ /template/ NumericUpDown#Component1NumericUpDown">
+                <Setter Property="Tag" Value="H" />
+            </Style>
+            <Style Selector="^ /template/ NumericUpDown#Component2NumericUpDown">
+                <Setter Property="Tag" Value="S" />
+            </Style>
+            <Style Selector="^ /template/ NumericUpDown#Component3NumericUpDown">
+                <Setter Property="Tag" Value="V" />
+            </Style>
+            <Style Selector="^ /template/ NumericUpDown#AlphaComponentNumericUpDown">
+                <Setter Property="Tag" Value="A" />
+            </Style>
         </Style>
     </ControlTheme>
 
@@ -452,38 +459,34 @@
         x:Key="HexColorPicker"
         BasedOn="{StaticResource {x:Type ColorPicker}}"
         TargetType="ColorPicker">
-        <Setter Property="MinWidth" Value="200" />
-        <Setter Property="Content">
-            <Template>
-                <Grid ColumnDefinitions="Auto, *">
-                    <Border
-                        Grid.Column="0"
-                        Width="{Binding $self.Bounds.Height}"
-                        Margin="1,1,0,1"
-                        HorizontalAlignment="Stretch"
-                        VerticalAlignment="Stretch"
-                        Background="{DynamicResource ColorControlCheckeredBackgroundBrush}"
-                        CornerRadius="{TemplateBinding CornerRadius}" />
-                    <Border
-                        Grid.Column="0"
-                        Width="{Binding $self.Bounds.Height}"
-                        Margin="1,1,0,1"
-                        HorizontalAlignment="Stretch"
-                        VerticalAlignment="Stretch"
-                        Background="{TemplateBinding HsvColor,Converter={StaticResource ToBrushConverter}}"
-                        CornerRadius="{TemplateBinding CornerRadius}" />
-                    <TextBlock
-                        Grid.Column="1"
-                        Margin="8,0,0,0"
-                        HorizontalAlignment="Left"
-                        VerticalAlignment="Center"
-                        FontWeight="Regular"
-                        Foreground="{DynamicResource TextBlockDefaultForeground}"
-                        Text="{Binding $parent[ColorPicker].Color}" />
-                </Grid>
-            </Template>
-        </Setter>
+        <Setter Property="MinWidth" Value="180" />
+        <Setter Property="Content" Value="{StaticResource HexColorPickerTemplate}" />
     </ControlTheme>
+    <Template x:Key="HexColorPickerTemplate">
+        <Grid ColumnDefinitions="Auto, *">
+            <Border
+                Grid.Column="0"
+                Width="{Binding $self.Bounds.Height}"
+                Margin="1,1,0,1"
+                Background="{DynamicResource ColorControlCheckeredBackgroundBrush}"
+                CornerRadius="{Binding $parent[ColorPicker].CornerRadius}" />
+            <Border
+                Grid.Column="0"
+                Width="{Binding $self.Bounds.Height}"
+                Margin="1,1,0,1"
+                Background="{Binding $parent[ColorPicker].HsvColor,Converter={StaticResource ToBrushConverter}}"
+                CornerRadius="{Binding $parent[ColorPicker].CornerRadius}" />
+            <TextBlock
+                Grid.Column="1"
+                Margin="8,0,0,0"
+                HorizontalAlignment="Left"
+                VerticalAlignment="Center"
+                Foreground="{DynamicResource TextBlockDefaultForeground}">
+                <Run Text="#" />
+                <Run Text="{Binding $parent[ColorPicker].Color, Converter={StaticResource ColorToHexConverter}}" />
+            </TextBlock>
+        </Grid>
+    </Template>
 
     <ControlTheme
         x:Key="SimpleColorPicker"
@@ -491,12 +494,13 @@
         TargetType="ColorPicker">
         <Setter Property="ColorSpectrumComponents" Value="SaturationValue" />
         <Setter Property="Template">
-            <ControlTemplate TargetType="{x:Type ColorPicker}">
+            <ControlTemplate TargetType="ColorPicker">
                 <DropDownButton
                     Width="{TemplateBinding Width}"
                     Height="{TemplateBinding Height}"
                     MinWidth="{TemplateBinding MinWidth}"
                     MinHeight="{TemplateBinding MinHeight}"
+                    Padding="{TemplateBinding Padding}"
                     HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                     VerticalAlignment="{TemplateBinding VerticalAlignment}"
                     HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
@@ -511,14 +515,16 @@
                         </Style>
                     </DropDownButton.Styles>
                     <DropDownButton.Flyout>
-                        <Flyout FlyoutPresenterClasses="nopadding" Placement="{DynamicResource SimpleColorPickerFlyoutPlacement}">
-
+                        <Flyout
+                            FlyoutPresenterClasses="nopadding"
+                            Placement="{DynamicResource SimpleColorPickerFlyoutPlacement}">
+                            
                             <!--
                                 The following is copy-pasted from the ColorView's control template.
                                 It MUST always be kept in sync with the ColorView (which is master).
                                 Note the only changes are resources specific to the ColorPicker.
                             -->
-                            <Grid Width="280">
+                            <Grid>
                                 <Grid.RowDefinitions>
                                     <RowDefinition Height="*" MinHeight="280" />
                                     <RowDefinition Height="Auto" />
@@ -534,6 +540,7 @@
                                         Name="ColorSpectrum"
                                         HorizontalAlignment="Stretch"
                                         VerticalAlignment="Stretch"
+                                        CornerRadius="8 8 0 0"
                                         Components="{TemplateBinding ColorSpectrumComponents}"
                                         HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
                                         MaxHue="{TemplateBinding MaxHue}"
@@ -584,35 +591,43 @@
                                         CornerRadius="4" />
                                     <Panel
                                         Name="PART_TextBoxPanel"
-                                        Width="106"
+                                        Width="116"
                                         Margin="4 0 0 0"
                                         HorizontalAlignment="Stretch"
                                         VerticalAlignment="Center">
                                         <TextBox
                                             Name="PART_HexTextBox"
+                                            AutomationProperties.Name="Hexadecimal Color"
                                             Classes="Small"
+                                            CornerRadius="3 0 0 3"
                                             InnerLeftContent="#"
-                                            IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Hex}"
-                                            Text="{TemplateBinding Color, Converter={StaticResource ColorToHexConverter}, Mode=TwoWay}"
-                                            MaxLength="8" />
+                                            IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={x:Static ObjectConverters.Equal}, ConverterParameter=Hex}"
+                                            MaxLength="8">
+                                            <TextBox.Resources>
+                                                <Thickness x:Key="TextBoxInnerLeftContentPadding">0 0 4 0</Thickness>
+                                            </TextBox.Resources>
+                                        </TextBox>
                                         <TextBox
                                             Name="PART_RgbaTextBox"
                                             Classes="Small"
-                                            IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Rgba}"
-                                            Text="{TemplateBinding Color, Converter={StaticResource ColorToTextConverter}, Mode=TwoWay}" />
+                                            CornerRadius="3 0 0 3"
+                                            IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={x:Static ObjectConverters.Equal}, ConverterParameter={x:Static ColorModel.Rgba}}"
+                                            Text="{TemplateBinding Color, Converter={semi:ColorToTextConverter}, Mode=TwoWay}" />
                                         <TextBox
                                             Name="PART_HsvaTextBox"
                                             Classes="Small"
-                                            IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Hsva}"
-                                            Text="{TemplateBinding HsvColor, Converter={StaticResource HsvColorToTextConverter}, Mode=TwoWay}" />
+                                            CornerRadius="3 0 0 3"
+                                            IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={x:Static ObjectConverters.Equal}, ConverterParameter={x:Static ColorModel.Hsva}}"
+                                            Text="{TemplateBinding HsvColor, Converter={semi:HsvColorToTextConverter}, Mode=TwoWay}" />
                                     </Panel>
 
                                     <NumericUpDown
                                         Name="AlphaComponentNumericUpDown"
-                                        Width="70"
+                                        Width="60"
                                         HorizontalAlignment="Right"
                                         VerticalAlignment="Center"
                                         AllowSpin="True"
+                                        CornerRadius="0"
                                         Classes="Small"
                                         IsEnabled="{TemplateBinding IsAlphaEnabled}"
                                         Maximum="{Binding #ColorSpectrumAlphaSlider.Maximum}"
@@ -621,14 +636,21 @@
                                         ShowButtonSpinner="False"
                                         InnerRightContent="%"
                                         IsVisible="{TemplateBinding IsAlphaVisible}"
-                                        Value="{Binding #ColorSpectrumAlphaSlider.Value}" />
+                                        Value="{Binding #ColorSpectrumAlphaSlider.Value,Converter={StaticResource DoNothingForNullConverter}}">
+                                        <NumericUpDown.Resources>
+                                            <Thickness x:Key="TextBoxContentPadding">12 0 4 0</Thickness>
+                                            <Thickness x:Key="TextBoxInnerRightContentPadding">4 0 0 0</Thickness>
+                                        </NumericUpDown.Resources>
+                                    </NumericUpDown>
                                     <ComboBox
                                         Name="ColorModelComboBox"
                                         Width="80"
+                                        CornerRadius="0 3 3 0"
                                         VerticalAlignment="Center"
                                         Classes="Small"
                                         SelectedValue="Hex">
-                                        Hex<ColorModel>Rgba</ColorModel>
+                                        <x:String>Hex</x:String>
+                                        <ColorModel>Rgba</ColorModel>
                                         <ColorModel>Hsva</ColorModel>
                                     </ComboBox>
                                 </StackPanel>
@@ -647,37 +669,8 @@
         x:Key="HexSimpleColorPicker"
         BasedOn="{StaticResource SimpleColorPicker}"
         TargetType="ColorPicker">
-        <Setter Property="MinWidth" Value="200" />
-        <Setter Property="Content">
-            <Template>
-                <Grid ColumnDefinitions="Auto, *">
-                    <Border
-                        Grid.Column="0"
-                        Width="{Binding $self.Bounds.Height}"
-                        Margin="1,1,0,1"
-                        HorizontalAlignment="Stretch"
-                        VerticalAlignment="Stretch"
-                        Background="{DynamicResource ColorControlCheckeredBackgroundBrush}"
-                        CornerRadius="{TemplateBinding CornerRadius}" />
-                    <Border
-                        Grid.Column="0"
-                        Width="{Binding $self.Bounds.Height}"
-                        Margin="1,1,0,1"
-                        HorizontalAlignment="Stretch"
-                        VerticalAlignment="Stretch"
-                        Background="{TemplateBinding HsvColor,Converter={StaticResource ToBrushConverter}}"
-                        CornerRadius="{TemplateBinding CornerRadius}" />
-                    <TextBlock
-                        Grid.Column="1"
-                        Margin="8,0,0,0"
-                        HorizontalAlignment="Left"
-                        VerticalAlignment="Center"
-                        FontWeight="Regular"
-                        Foreground="{DynamicResource TextBlockDefaultForeground}"
-                        Text="{Binding $parent[ColorPicker].Color}" />
-                </Grid>
-            </Template>
-        </Setter>
+        <Setter Property="MinWidth" Value="180" />
+        <Setter Property="Content" Value="{StaticResource HexColorPickerTemplate}" />
     </ControlTheme>
 
 </ResourceDictionary>

src/Semi.Avalonia.ColorPicker/Controls/ColorPreviewer.axaml

@@ -1,15 +1,13 @@
 <ResourceDictionary
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:iri="https://irihi.tech/shared"
-    xmlns:pc="using:Avalonia.Controls.Primitives.Converters">
-    <pc:AccentColorConverter x:Key="AccentColorConverter" />
+    xmlns:iri="https://irihi.tech/shared">
 
     <ControlTheme x:Key="{x:Type ColorPreviewer}" TargetType="ColorPreviewer">
         <Setter Property="Height" Value="{DynamicResource ColorPreviewerHeight}" />
         <Setter Property="CornerRadius" Value="{DynamicResource ColorPreviewerCornerRadius}" />
         <Setter Property="Template">
-            <ControlTemplate TargetType="{x:Type ColorPreviewer}">
+            <ControlTemplate TargetType="ColorPreviewer">
                 <Panel>
                     <!--  Preview color with accents to the left and right  -->
                     <Grid ColumnDefinitions="Auto,*,Auto" IsVisible="{TemplateBinding IsAccentColorsVisible}">

src/Semi.Avalonia.ColorPicker/Controls/ColorSlider.axaml

@@ -1,9 +1,6 @@
 <ResourceDictionary
     xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:converters="using:Avalonia.Controls.Converters">
-    <converters:CornerRadiusToDoubleConverter x:Key="TopLeftCornerRadiusConverter" Corner="TopLeft" />
-    <converters:CornerRadiusToDoubleConverter x:Key="BottomRightCornerRadiusConverter" Corner="BottomRight" />
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 
     <ControlTheme x:Key="ColorSliderThumbTheme" TargetType="Thumb">
         <Setter Property="Background" Value="Transparent" />
@@ -12,7 +9,7 @@
         <Setter Property="BorderThickness" Value="{DynamicResource ColorSliderThumbBorderBrush}" />
         <Setter Property="CornerRadius" Value="{DynamicResource ColorSliderThumbCornerRadius}" />
         <Setter Property="Template">
-            <ControlTemplate>
+            <ControlTemplate TargetType="Thumb">
                 <Border
                     Margin="1"
                     Background="{TemplateBinding Background}"
@@ -30,33 +27,30 @@
             <Setter Property="CornerRadius" Value="{DynamicResource ColorSliderCornerRadius}" />
             <Setter Property="Height" Value="{DynamicResource ColorSliderWidth}" />
             <Setter Property="Template">
-                <ControlTemplate TargetType="{x:Type ColorSlider}">
+                <ControlTemplate TargetType="ColorSlider">
                     <Border
                         BorderBrush="{TemplateBinding BorderBrush}"
                         BorderThickness="{TemplateBinding BorderThickness}"
                         CornerRadius="{TemplateBinding CornerRadius}">
                         <Grid Margin="{TemplateBinding Padding}">
-                            <Rectangle
-                                Width="{Binding #PART_Track.Bounds.Width}"
-                                Height="{Binding #PART_Track.Bounds.Height}"
+                            <Border
                                 HorizontalAlignment="Stretch"
-                                VerticalAlignment="Stretch"
-                                Fill="{DynamicResource ColorControlCheckeredBackgroundBrush}"
-                                RadiusX="{TemplateBinding CornerRadius,Converter={StaticResource TopLeftCornerRadiusConverter}}"
-                                RadiusY="{TemplateBinding CornerRadius,Converter={StaticResource BottomRightCornerRadiusConverter}}" />
-                            <Rectangle
-                                Width="{Binding #PART_Track.Bounds.Width}"
+                                VerticalAlignment="Center"
                                 Height="{Binding #PART_Track.Bounds.Height}"
+                                Background="{StaticResource ColorControlCheckeredBackgroundBrush}"
+                                CornerRadius="{DynamicResource ColorSliderCornerRadius}" />
+                            <Border
                                 HorizontalAlignment="Stretch"
-                                VerticalAlignment="Stretch"
-                                Fill="{TemplateBinding Background}"
-                                RadiusX="{TemplateBinding CornerRadius,Converter={StaticResource TopLeftCornerRadiusConverter}}"
-                                RadiusY="{TemplateBinding CornerRadius,Converter={StaticResource BottomRightCornerRadiusConverter}}" />
+                                VerticalAlignment="Center"
+                                Height="{Binding #PART_Track.Bounds.Height}"
+                                Background="{TemplateBinding Background}"
+                                CornerRadius="{DynamicResource ColorSliderCornerRadius}" />
+
                             <Track
                                 Name="PART_Track"
                                 Height="12"
                                 HorizontalAlignment="Stretch"
-                                VerticalAlignment="Stretch"
+                                VerticalAlignment="Center"
                                 IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
                                 Maximum="{TemplateBinding Maximum}"
                                 Minimum="{TemplateBinding Minimum}"
@@ -101,7 +95,7 @@
                                     Width="{TemplateBinding Height}"
                                     Height="{TemplateBinding Height}"
                                     DataContext="{TemplateBinding Value}"
-                                    Theme="{StaticResource ColorSliderThumbTheme}" />
+                                    Theme="{DynamicResource ColorSliderThumbTheme}" />
                             </Track>
                         </Grid>
                     </Border>
@@ -114,32 +108,28 @@
             <Setter Property="CornerRadius" Value="{DynamicResource ColorSliderCornerRadius}" />
             <Setter Property="Width" Value="{DynamicResource ColorSliderWidth}" />
             <Setter Property="Template">
-                <ControlTemplate TargetType="{x:Type ColorSlider}">
+                <ControlTemplate TargetType="ColorSlider">
                     <Border
                         BorderBrush="{TemplateBinding BorderBrush}"
                         BorderThickness="{TemplateBinding BorderThickness}"
                         CornerRadius="{TemplateBinding CornerRadius}">
                         <Grid Margin="{TemplateBinding Padding}">
-                            <Rectangle
-                                Width="{Binding #PART_Track.Bounds.Width}"
-                                Height="{Binding #PART_Track.Bounds.Height}"
-                                HorizontalAlignment="Stretch"
+                            <Border
+                                HorizontalAlignment="Center"
                                 VerticalAlignment="Stretch"
-                                Fill="{DynamicResource ColorControlCheckeredBackgroundBrush}"
-                                RadiusX="{TemplateBinding CornerRadius,Converter={StaticResource TopLeftCornerRadiusConverter}}"
-                                RadiusY="{TemplateBinding CornerRadius,Converter={StaticResource BottomRightCornerRadiusConverter}}" />
-                            <Rectangle
                                 Width="{Binding #PART_Track.Bounds.Width}"
-                                Height="{Binding #PART_Track.Bounds.Height}"
-                                HorizontalAlignment="Stretch"
+                                Background="{StaticResource ColorControlCheckeredBackgroundBrush}"
+                                CornerRadius="{DynamicResource ColorSliderCornerRadius}" />
+                            <Border
+                                HorizontalAlignment="Center"
                                 VerticalAlignment="Stretch"
-                                Fill="{TemplateBinding Background}"
-                                RadiusX="{TemplateBinding CornerRadius,Converter={StaticResource TopLeftCornerRadiusConverter}}"
-                                RadiusY="{TemplateBinding CornerRadius,Converter={StaticResource BottomRightCornerRadiusConverter}}" />
+                                Width="{Binding #PART_Track.Bounds.Width}"
+                                Background="{TemplateBinding Background}"
+                                CornerRadius="{DynamicResource ColorSliderCornerRadius}" />
                             <Track
                                 Name="PART_Track"
                                 Width="12"
-                                HorizontalAlignment="Stretch"
+                                HorizontalAlignment="Center"
                                 VerticalAlignment="Stretch"
                                 IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
                                 Maximum="{TemplateBinding Maximum}"
@@ -185,7 +175,7 @@
                                     Width="{TemplateBinding Width}"
                                     Height="{TemplateBinding Width}"
                                     DataContext="{TemplateBinding Value}"
-                                    Theme="{StaticResource ColorSliderThumbTheme}" />
+                                    Theme="{DynamicResource ColorSliderThumbTheme}" />
                             </Track>
                         </Grid>
                     </Border>

src/Semi.Avalonia.ColorPicker/Controls/ColorSpectrum.axaml

@@ -1,15 +1,11 @@
 <ResourceDictionary
     xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:converters="using:Avalonia.Controls.Converters">
-    <converters:EnumToBoolConverter x:Key="EnumToBoolConverter" />
-    <converters:CornerRadiusToDoubleConverter x:Key="TopLeftCornerRadiusConverter" Corner="TopLeft" />
-    <converters:CornerRadiusToDoubleConverter x:Key="BottomRightCornerRadiusConverter" Corner="BottomRight" />
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 
     <ControlTheme x:Key="{x:Type ColorSpectrum}" TargetType="ColorSpectrum">
         <Setter Property="CornerRadius" Value="{DynamicResource ColorSpectrumCornerRadius}" />
         <Setter Property="Template">
-            <ControlTemplate TargetType="{x:Type ColorSpectrum}">
+            <ControlTemplate TargetType="ColorSpectrum">
                 <Panel
                     Name="PART_LayoutRoot"
                     HorizontalAlignment="Stretch"
@@ -25,27 +21,27 @@
                             VerticalAlignment="Stretch"
                             IsHitTestVisible="False"
                             IsVisible="{TemplateBinding Shape,
-                            Converter={StaticResource EnumToBoolConverter},
+                            Converter={x:Static ObjectConverters.Equal},
                             ConverterParameter={x:Static ColorSpectrumShape.Box}}"
-                            RadiusX="{TemplateBinding CornerRadius,Converter={StaticResource TopLeftCornerRadiusConverter}}"
-                            RadiusY="{TemplateBinding CornerRadius,Converter={StaticResource BottomRightCornerRadiusConverter}}" />
+                            RadiusX="{Binding CornerRadius.TopLeft,RelativeSource={RelativeSource TemplatedParent}}"
+                            RadiusY="{Binding CornerRadius.BottomRight,RelativeSource={RelativeSource TemplatedParent}}" />
                         <Rectangle
                             Name="PART_SpectrumOverlayRectangle"
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch"
                             IsHitTestVisible="False"
                             IsVisible="{TemplateBinding Shape,
-                            Converter={StaticResource EnumToBoolConverter},
+                            Converter={x:Static ObjectConverters.Equal},
                             ConverterParameter={x:Static ColorSpectrumShape.Box}}"
-                            RadiusX="{TemplateBinding CornerRadius,Converter={StaticResource TopLeftCornerRadiusConverter}}"
-                            RadiusY="{TemplateBinding CornerRadius,Converter={StaticResource BottomRightCornerRadiusConverter}}" />
+                            RadiusX="{Binding CornerRadius.TopLeft,RelativeSource={RelativeSource TemplatedParent}}"
+                            RadiusY="{Binding CornerRadius.BottomRight,RelativeSource={RelativeSource TemplatedParent}}" />
                         <Ellipse
                             Name="PART_SpectrumEllipse"
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch"
                             IsHitTestVisible="False"
                             IsVisible="{TemplateBinding Shape,
-                            Converter={StaticResource EnumToBoolConverter},
+                            Converter={x:Static ObjectConverters.Equal},
                             ConverterParameter={x:Static ColorSpectrumShape.Ring}}" />
                         <Ellipse
                             Name="PART_SpectrumOverlayEllipse"
@@ -53,7 +49,7 @@
                             VerticalAlignment="Stretch"
                             IsHitTestVisible="False"
                             IsVisible="{TemplateBinding Shape,
-                            Converter={StaticResource EnumToBoolConverter},
+                            Converter={x:Static ObjectConverters.Equal},
                             ConverterParameter={x:Static ColorSpectrumShape.Ring}}" />
                         <Canvas
                             Name="PART_InputTarget"
@@ -89,17 +85,17 @@
                             VerticalAlignment="Stretch"
                             IsHitTestVisible="False"
                             IsVisible="{TemplateBinding Shape,
-                            Converter={StaticResource EnumToBoolConverter},
+                            Converter={x:Static ObjectConverters.Equal},
                             ConverterParameter={x:Static ColorSpectrumShape.Box}}"
-                            RadiusX="{TemplateBinding CornerRadius,Converter={StaticResource TopLeftCornerRadiusConverter}}"
-                            RadiusY="{TemplateBinding CornerRadius,Converter={StaticResource BottomRightCornerRadiusConverter}}" />
+                            RadiusX="{Binding CornerRadius.TopLeft,RelativeSource={RelativeSource TemplatedParent}}"
+                            RadiusY="{Binding CornerRadius.BottomRight,RelativeSource={RelativeSource TemplatedParent}}" />
                         <Ellipse
                             Name="BorderEllipse"
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch"
                             IsHitTestVisible="False"
                             IsVisible="{TemplateBinding Shape,
-                            Converter={StaticResource EnumToBoolConverter},
+                            Converter={x:Static ObjectConverters.Equal},
                             ConverterParameter={x:Static ColorSpectrumShape.Ring}}" />
                     </Panel>
                 </Panel>

src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml

@@ -1,28 +1,23 @@
 <ResourceDictionary
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:converters="using:Avalonia.Controls.Converters"
-    xmlns:globalization="using:System.Globalization"
-    xmlns:pc="using:Avalonia.Controls.Primitives.Converters"
-    xmlns:cvts="clr-namespace:Semi.Avalonia.ColorPicker.Converters">
-    <pc:ContrastBrushConverter x:Key="ContrastBrushConverter" />
-    <converters:ColorToDisplayNameConverter x:Key="ColorToDisplayNameConverter" />
-    <converters:ColorToHexConverter x:Key="ColorToHexConverter" />
-    <converters:DoNothingForNullConverter x:Key="DoNothingForNullConverter" />
-    <converters:EnumToBoolConverter x:Key="EnumToBoolConverter" />
-    <converters:ToBrushConverter x:Key="ToBrushConverter" />
-    <cvts:HsvColorToTextConverter x:Key="HsvColorToTextConverter" />
-    <cvts:ColorToTextConverter x:Key="ColorToTextConverter" />
-    <cvts:ToColorModel x:Key="ToColorModel" />
-    <globalization:NumberFormatInfo x:Key="ColorViewComponentNumberFormat" NumberDecimalDigits="0" />
+    xmlns:semi="https://irihi.tech/semi">
 
     <Design.PreviewWith>
-        <ColorView
-            Theme="{StaticResource SimpleColorView}"
-            IsAlphaVisible="True"
-            IsAlphaEnabled="True"
-            ColorModel="Hsva"
-            HsvColor="hsv(120,7%,90%)" />
+        <StackPanel>
+            <ColorView
+                SelectedIndex="2"
+                IsAlphaVisible="True"
+                IsAlphaEnabled="True"
+                ColorModel="Hsva"
+                HsvColor="hsv(120,7%,90%)" />
+            <ColorView
+                Theme="{DynamicResource SimpleColorView}"
+                IsAlphaVisible="True"
+                IsAlphaEnabled="True"
+                ColorModel="Hsva"
+                HsvColor="hsv(120,7%,90%)" />
+        </StackPanel>
     </Design.PreviewWith>
 
     <VisualBrush
@@ -32,16 +27,12 @@
         TileMode="Tile">
         <VisualBrush.Visual>
             <Image Width="8" Height="8">
-                <Image.Source>
-                    <DrawingImage>
-                        <DrawingImage.Drawing>
-                            <DrawingGroup>
-                                <GeometryDrawing Brush="Transparent" Geometry="M0,0 L2,0 2,2, 0,2Z" />
-                                <GeometryDrawing Brush="#19808080" Geometry="M0,1 L2,1 2,2, 1,2 1,0 0,0Z" />
-                            </DrawingGroup>
-                        </DrawingImage.Drawing>
-                    </DrawingImage>
-                </Image.Source>
+                <DrawingImage>
+                    <DrawingGroup>
+                        <GeometryDrawing Brush="Transparent" Geometry="M0 0H2V2H0Z" />
+                        <GeometryDrawing Brush="#19808080" Geometry="M0 1H2V2H1V0H0Z" />
+                    </DrawingGroup>
+                </DrawingImage>
             </Image>
         </VisualBrush.Visual>
     </VisualBrush>
@@ -61,11 +52,11 @@
                     CornerRadius="{TemplateBinding CornerRadius}">
                     <ScrollViewer
                         Name="PART_ScrollViewer"
-                        AllowAutoHide="{TemplateBinding (ScrollViewer.AllowAutoHide)}"
-                        HorizontalScrollBarVisibility="{TemplateBinding (ScrollViewer.HorizontalScrollBarVisibility)}"
-                        IsScrollChainingEnabled="{TemplateBinding (ScrollViewer.IsScrollChainingEnabled)}"
-                        IsDeferredScrollingEnabled="{TemplateBinding (ScrollViewer.IsDeferredScrollingEnabled)}"
-                        VerticalScrollBarVisibility="{TemplateBinding (ScrollViewer.VerticalScrollBarVisibility)}">
+                        AllowAutoHide="{TemplateBinding ScrollViewer.AllowAutoHide}"
+                        HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
+                        IsScrollChainingEnabled="{TemplateBinding ScrollViewer.IsScrollChainingEnabled}"
+                        IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
+                        VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
                         <ItemsPresenter
                             Name="PART_ItemsPresenter"
                             Margin="{TemplateBinding Padding}"
@@ -82,8 +73,8 @@
         <Setter Property="HorizontalContentAlignment" Value="Stretch" />
         <Setter Property="VerticalContentAlignment" Value="Stretch" />
         <Setter Property="Template">
-            <ControlTemplate TargetType="{x:Type ListBoxItem}">
-                <Grid UseLayoutRounding="False">
+            <ControlTemplate TargetType="ListBoxItem">
+                <Panel UseLayoutRounding="False">
                     <ContentPresenter
                         Name="PART_ContentPresenter"
                         Padding="{TemplateBinding Padding}"
@@ -101,7 +92,7 @@
                         VerticalAlignment="Stretch"
                         IsHitTestVisible="False"
                         StrokeThickness="1" />
-                </Grid>
+                </Panel>
             </ControlTemplate>
         </Setter>
 
@@ -141,12 +132,14 @@
                     Content="{TemplateBinding Content}"
                     ContentTemplate="{TemplateBinding ContentTemplate}"
                     CornerRadius="{TemplateBinding CornerRadius}"
-                    RecognizesAccessKey="True"
                     TextElement.FontSize="{TemplateBinding FontSize}"
                     TextElement.FontWeight="{TemplateBinding FontWeight}"
                     UseLayoutRounding="False" />
             </ControlTemplate>
         </Setter>
+        <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="RecognizesAccessKey" Value="True" />
+        </Style>
         <Style Selector="^:checked">
             <Setter Property="Background" Value="{DynamicResource ColorViewRadioButtonCheckedBackground}" />
             <Setter Property="Foreground" Value="{DynamicResource ColorViewRadioButtonCheckedForeground}" />
@@ -168,14 +161,14 @@
     </ControlTheme>
 
     <ControlTheme x:Key="{x:Type ColorView}" TargetType="ColorView">
+        <!-- Alpha position should match CSS (and default slider order) instead of XAML/WinUI -->
+        <Setter Property="HexInputAlphaPosition" Value="Trailing" />
         <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
         <Setter Property="Width" Value="300" />
         <Setter Property="Height" Value="300" />
-        <Setter Property="Palette">
-            <FluentColorPalette />
-        </Setter>
+        <Setter Property="Palette" Value="{DynamicResource SemiColorPalette}" />
         <Setter Property="Template">
-            <ControlTemplate TargetType="{x:Type ColorView}">
+            <ControlTemplate TargetType="ColorView">
                 <Grid RowDefinitions="*,Auto">
                     <!--  Backgrounds  -->
                     <!--  TODO: Background="{DynamicResource ColorViewTabBackgroundBrush}"  -->
@@ -197,7 +190,7 @@
                         Padding="0"
                         VerticalAlignment="Stretch"
                         HorizontalContentAlignment="Stretch"
-                        SelectedIndex="{Binding SelectedIndex, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}">
+                        SelectedIndex="{TemplateBinding SelectedIndex, Mode=TwoWay}">
                         <TabControl.Styles>
                             <Style Selector="TabItem">
                                 <Setter Property="MinHeight" Value="32" />
@@ -232,11 +225,11 @@
                                     HorizontalAlignment="Center"
                                     VerticalAlignment="Stretch"
                                     AutomationProperties.Name="Third Component"
-                                    ColorComponent="{Binding ThirdComponent, ElementName=ColorSpectrum}"
+                                    ColorComponent="{Binding #ColorSpectrum.ThirdComponent}"
                                     ColorModel="Hsva"
-                                    HsvColor="{Binding HsvColor, ElementName=ColorSpectrum}"
-                                    IsAlphaVisible="True"
-                                    IsPerceptive="False"
+                                    HsvColor="{Binding #ColorSpectrum.HsvColor}"
+                                    IsAlphaVisible="False"
+                                    IsPerceptive="True"
                                     IsVisible="{TemplateBinding IsColorSpectrumSliderVisible}"
                                     Orientation="Vertical" />
                                 <ColorSpectrum
@@ -245,7 +238,7 @@
                                     HorizontalAlignment="Stretch"
                                     VerticalAlignment="Stretch"
                                     Components="{TemplateBinding ColorSpectrumComponents}"
-                                    HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                                    HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
                                     MaxHue="{TemplateBinding MaxHue}"
                                     MaxSaturation="{TemplateBinding MaxSaturation}"
                                     MaxValue="{TemplateBinding MaxValue}"
@@ -262,14 +255,10 @@
                                     AutomationProperties.Name="Alpha Component"
                                     ColorComponent="Alpha"
                                     ColorModel="Hsva"
-                                    HsvColor="{Binding HsvColor, ElementName=ColorSpectrum}"
+                                    HsvColor="{Binding #ColorSpectrum.HsvColor}"
+                                    IsVisible="{TemplateBinding IsAlphaVisible}"
                                     IsEnabled="{TemplateBinding IsAlphaEnabled}"
                                     Orientation="Vertical">
-                                    <ColorSlider.IsVisible>
-                                        <MultiBinding Converter="{x:Static BoolConverters.And}">
-                                            <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
-                                        </MultiBinding>
-                                    </ColorSlider.IsVisible>
                                 </ColorSlider>
                             </Grid>
                         </TabItem>
@@ -286,11 +275,11 @@
                                 VerticalAlignment="Stretch"
                                 ItemContainerTheme="{StaticResource ColorViewPaletteListBoxItemTheme}"
                                 ItemsSource="{TemplateBinding PaletteColors}"
-                                SelectedItem="{Binding Color, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource DoNothingForNullConverter}, Mode=TwoWay}"
+                                SelectedItem="{TemplateBinding Color, Mode=TwoWay, Converter={StaticResource DoNothingForNullConverter}}"
                                 Theme="{StaticResource ColorViewPaletteListBoxTheme}"
                                 UseLayoutRounding="False">
                                 <ListBox.ItemTemplate>
-                                    <DataTemplate DataType="{x:Type Color}">
+                                    <DataTemplate DataType="Color">
                                         <Border
                                             HorizontalAlignment="Stretch"
                                             VerticalAlignment="Stretch"
@@ -322,6 +311,10 @@
                                 ColumnDefinitions="Auto,*"
                                 RowDefinitions="Auto,24,*,*,*,*,12"
                                 UseLayoutRounding="False">
+                                <Grid.Resources>
+                                    <Thickness x:Key="TextBoxContentPadding">8 0</Thickness>
+                                    <Thickness x:Key="TextBoxInnerLeftContentPadding">0 0 8 0</Thickness>
+                                </Grid.Resources>
                                 <Grid.Styles>
                                     <Style Selector="NumericUpDown">
                                         <Setter Property="InnerLeftContent">
@@ -351,9 +344,9 @@
                                                 Content="RGB"
                                                 CornerRadius="3,0,0,3"
                                                 IsChecked="{TemplateBinding ColorModel,
-                                                Converter={StaticResource EnumToBoolConverter},
-                                                ConverterParameter={x:Static ColorModel.Rgba},
-                                                Mode=TwoWay}"
+                                                    Converter={StaticResource EnumToBoolConverter},
+                                                    ConverterParameter={x:Static ColorModel.Rgba},
+                                                    Mode=TwoWay}"
                                                 Theme="{DynamicResource ColorViewRadioButton}" />
                                             <RadioButton
                                                 Name="HsvRadioButton"
@@ -363,9 +356,9 @@
                                                 Content="HSV"
                                                 CornerRadius="0,3,3,0"
                                                 IsChecked="{TemplateBinding ColorModel,
-                                                Converter={StaticResource EnumToBoolConverter},
-                                                ConverterParameter={x:Static ColorModel.Hsva},
-                                                Mode=TwoWay}"
+                                                    Converter={StaticResource EnumToBoolConverter},
+                                                    ConverterParameter={x:Static ColorModel.Hsva},
+                                                    Mode=TwoWay}"
                                                 Theme="{DynamicResource ColorViewRadioButton}" />
                                         </Grid>
                                     </Border>
@@ -390,11 +383,11 @@
                                     AllowSpin="True"
                                     Classes="Small"
                                     IsVisible="{TemplateBinding IsComponentTextInputVisible}"
-                                    Maximum="{Binding Maximum, ElementName=Component1Slider}"
-                                    Minimum="{Binding Minimum, ElementName=Component1Slider}"
+                                    Maximum="{Binding #Component1Slider.Maximum}"
+                                    Minimum="{Binding #Component1Slider.Minimum}"
                                     NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
                                     ShowButtonSpinner="False"
-                                    Value="{Binding Value, ElementName=Component1Slider}" />
+                                    Value="{Binding #Component1Slider.Value,Converter={StaticResource DoNothingForNullConverter}}" />
                                 <ColorSlider
                                     Name="Component1Slider"
                                     Grid.Row="2"
@@ -403,7 +396,7 @@
                                     VerticalAlignment="Center"
                                     ColorComponent="Component1"
                                     ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
-                                    HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                                    HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
                                     IsRoundingEnabled="True"
                                     IsSnapToTickEnabled="True"
                                     IsVisible="{TemplateBinding IsComponentSliderVisible}"
@@ -420,11 +413,11 @@
                                     AllowSpin="True"
                                     Classes="Small"
                                     IsVisible="{TemplateBinding IsComponentTextInputVisible}"
-                                    Maximum="{Binding Maximum, ElementName=Component2Slider}"
-                                    Minimum="{Binding Minimum, ElementName=Component2Slider}"
+                                    Maximum="{Binding #Component2Slider.Maximum}"
+                                    Minimum="{Binding #Component2Slider.Minimum}"
                                     NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
                                     ShowButtonSpinner="False"
-                                    Value="{Binding Value, ElementName=Component2Slider}" />
+                                    Value="{Binding #Component2Slider.Value,Converter={StaticResource DoNothingForNullConverter}}" />
                                 <ColorSlider
                                     Name="Component2Slider"
                                     Grid.Row="3"
@@ -433,7 +426,7 @@
                                     VerticalAlignment="Center"
                                     ColorComponent="Component2"
                                     ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
-                                    HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                                    HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
                                     IsRoundingEnabled="True"
                                     IsSnapToTickEnabled="True"
                                     IsVisible="{TemplateBinding IsComponentSliderVisible}"
@@ -450,11 +443,11 @@
                                     AllowSpin="True"
                                     Classes="Small"
                                     IsVisible="{TemplateBinding IsComponentTextInputVisible}"
-                                    Maximum="{Binding Maximum, ElementName=Component3Slider}"
-                                    Minimum="{Binding Minimum, ElementName=Component3Slider}"
+                                    Maximum="{Binding #Component3Slider.Maximum}"
+                                    Minimum="{Binding #Component3Slider.Minimum}"
                                     NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
                                     ShowButtonSpinner="False"
-                                    Value="{Binding Value, ElementName=Component3Slider}" />
+                                    Value="{Binding #Component3Slider.Value,Converter={StaticResource DoNothingForNullConverter}}" />
                                 <ColorSlider
                                     Name="Component3Slider"
                                     Grid.Row="4"
@@ -463,7 +456,7 @@
                                     VerticalAlignment="Center"
                                     ColorComponent="Component3"
                                     ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
-                                    HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                                    HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
                                     IsRoundingEnabled="True"
                                     IsSnapToTickEnabled="True"
                                     IsVisible="{TemplateBinding IsComponentSliderVisible}"
@@ -480,15 +473,15 @@
                                     AllowSpin="True"
                                     Classes="Small"
                                     IsEnabled="{TemplateBinding IsAlphaEnabled}"
-                                    Maximum="{Binding Maximum, ElementName=AlphaComponentSlider}"
-                                    Minimum="{Binding Minimum, ElementName=AlphaComponentSlider}"
+                                    Maximum="{Binding #AlphaComponentSlider.Maximum}"
+                                    Minimum="{Binding #AlphaComponentSlider.Minimum}"
                                     NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
                                     ShowButtonSpinner="False"
-                                    Value="{Binding Value, ElementName=AlphaComponentSlider}">
+                                    Value="{Binding #AlphaComponentSlider.Value,Converter={StaticResource DoNothingForNullConverter}}">
                                     <NumericUpDown.IsVisible>
                                         <MultiBinding Converter="{x:Static BoolConverters.And}">
-                                            <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
-                                            <Binding Path="IsComponentTextInputVisible" RelativeSource="{RelativeSource TemplatedParent}" />
+                                            <TemplateBinding Property="IsAlphaVisible" />
+                                            <TemplateBinding Property="IsComponentTextInputVisible" />
                                         </MultiBinding>
                                     </NumericUpDown.IsVisible>
                                 </NumericUpDown>
@@ -500,7 +493,7 @@
                                     VerticalAlignment="Center"
                                     ColorComponent="Alpha"
                                     ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
-                                    HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                                    HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
                                     IsEnabled="{TemplateBinding IsAlphaEnabled}"
                                     IsRoundingEnabled="True"
                                     IsSnapToTickEnabled="True"
@@ -508,8 +501,8 @@
                                     TickFrequency="1">
                                     <ColorSlider.IsVisible>
                                         <MultiBinding Converter="{x:Static BoolConverters.And}">
-                                            <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
-                                            <Binding Path="IsComponentSliderVisible" RelativeSource="{RelativeSource TemplatedParent}" />
+                                            <TemplateBinding Property="IsAlphaVisible" />
+                                            <TemplateBinding Property="IsComponentSliderVisible" />
                                         </MultiBinding>
                                     </ColorSlider.IsVisible>
                                 </ColorSlider>
@@ -517,11 +510,11 @@
                         </TabItem>
                     </TabControl>
                     <!--  Previewer  -->
-                    <!--  Note that top/bottom margins have -5 to remove for drop shadow padding  -->
+                    <!-- Note that the drop shadow is allowed to extend past the control bounds -->
                     <ColorPreviewer
                         Grid.Row="1"
-                        Margin="12,-5,12,7"
-                        HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                        Margin="12,0,12,12"
+                        HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
                         IsAccentColorsVisible="{TemplateBinding IsAccentColorsVisible}"
                         IsVisible="{TemplateBinding IsColorPreviewVisible}" />
                 </Grid>
@@ -558,11 +551,12 @@
     </ControlTheme>
 
     <ControlTheme x:Key="SimpleColorView" TargetType="ColorView">
+        <Setter Property="HexInputAlphaPosition" Value="Trailing" />
         <Setter Property="Width" Value="280" />
         <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
         <Setter Property="ColorSpectrumComponents" Value="SaturationValue" />
         <Setter Property="Template">
-            <ControlTemplate TargetType="{x:Type ColorView}">
+            <ControlTemplate TargetType="ColorView">
                 <Grid>
                     <Grid.RowDefinitions>
                         <RowDefinition Height="*" MinHeight="280" />
@@ -579,6 +573,7 @@
                             Name="ColorSpectrum"
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch"
+                            CornerRadius="8 8 0 0"
                             Components="{TemplateBinding ColorSpectrumComponents}"
                             HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
                             MaxHue="{TemplateBinding MaxHue}"
@@ -602,7 +597,7 @@
                         Orientation="Horizontal" />
 
                     <ColorSlider
-                        x:Name="ColorSpectrumAlphaSlider"
+                        Name="ColorSpectrumAlphaSlider"
                         Grid.Row="2"
                         HorizontalAlignment="Stretch"
                         VerticalAlignment="Center"
@@ -629,35 +624,43 @@
                             CornerRadius="4" />
                         <Panel
                             Name="PART_TextBoxPanel"
-                            Width="106"
+                            Width="116"
                             Margin="4 0 0 0"
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Center">
                             <TextBox
                                 Name="PART_HexTextBox"
+                                AutomationProperties.Name="Hexadecimal Color"
                                 Classes="Small"
+                                CornerRadius="3 0 0 3"
                                 InnerLeftContent="#"
-                                IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Hex}"
-                                Text="{TemplateBinding Color, Converter={StaticResource ColorToHexConverter}, Mode=TwoWay}"
-                                MaxLength="8" />
+                                IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={x:Static ObjectConverters.Equal}, ConverterParameter=Hex}"
+                                MaxLength="8">
+                                <TextBox.Resources>
+                                    <Thickness x:Key="TextBoxInnerLeftContentPadding">0 0 4 0</Thickness>
+                                </TextBox.Resources>
+                            </TextBox>
                             <TextBox
                                 Name="PART_RgbaTextBox"
                                 Classes="Small"
-                                IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Rgba}"
-                                Text="{TemplateBinding Color, Converter={StaticResource ColorToTextConverter}, Mode=TwoWay}" />
+                                CornerRadius="3 0 0 3"
+                                IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={x:Static ObjectConverters.Equal}, ConverterParameter={x:Static ColorModel.Rgba}}"
+                                Text="{TemplateBinding Color, Converter={semi:ColorToTextConverter}, Mode=TwoWay}" />
                             <TextBox
                                 Name="PART_HsvaTextBox"
                                 Classes="Small"
-                                IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Hsva}"
-                                Text="{TemplateBinding HsvColor, Converter={StaticResource HsvColorToTextConverter}, Mode=TwoWay}" />
+                                CornerRadius="3 0 0 3"
+                                IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={x:Static ObjectConverters.Equal}, ConverterParameter={x:Static ColorModel.Hsva}}"
+                                Text="{TemplateBinding HsvColor, Converter={semi:HsvColorToTextConverter}, Mode=TwoWay}" />
                         </Panel>
 
                         <NumericUpDown
                             Name="AlphaComponentNumericUpDown"
-                            Width="70"
+                            Width="60"
                             HorizontalAlignment="Right"
                             VerticalAlignment="Center"
                             AllowSpin="True"
+                            CornerRadius="0"
                             Classes="Small"
                             IsEnabled="{TemplateBinding IsAlphaEnabled}"
                             Maximum="{Binding #ColorSpectrumAlphaSlider.Maximum}"
@@ -666,14 +669,21 @@
                             ShowButtonSpinner="False"
                             InnerRightContent="%"
                             IsVisible="{TemplateBinding IsAlphaVisible}"
-                            Value="{Binding #ColorSpectrumAlphaSlider.Value}" />
+                            Value="{Binding #ColorSpectrumAlphaSlider.Value,Converter={StaticResource DoNothingForNullConverter}}">
+                            <NumericUpDown.Resources>
+                                <Thickness x:Key="TextBoxContentPadding">12 0 4 0</Thickness>
+                                <Thickness x:Key="TextBoxInnerRightContentPadding">4 0 0 0</Thickness>
+                            </NumericUpDown.Resources>
+                        </NumericUpDown>
                         <ComboBox
                             Name="ColorModelComboBox"
                             Width="80"
+                            CornerRadius="0 3 3 0"
                             VerticalAlignment="Center"
                             Classes="Small"
                             SelectedValue="Hex">
-                            Hex<ColorModel>Rgba</ColorModel>
+                            <x:String>Hex</x:String>
+                            <ColorModel>Rgba</ColorModel>
                             <ColorModel>Hsva</ColorModel>
                         </ComboBox>
                     </StackPanel>

src/Semi.Avalonia.ColorPicker/Controls/Converters.axaml

@@ -0,0 +1,17 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:converters="using:Avalonia.Controls.Converters"
+                    xmlns:pc="using:Avalonia.Controls.Primitives.Converters"
+                    xmlns:globalization="using:System.Globalization">
+    <pc:ContrastBrushConverter x:Key="ContrastBrushConverter" />
+    <pc:AccentColorConverter x:Key="AccentColorConverter" />
+
+    <converters:ColorToDisplayNameConverter x:Key="ColorToDisplayNameConverter" />
+    <converters:DoNothingForNullConverter x:Key="DoNothingForNullConverter" />
+    <converters:ToBrushConverter x:Key="ToBrushConverter" />
+    <converters:ColorToHexConverter x:Key="ColorToHexConverter" AlphaPosition="Trailing" IsAlphaVisible="True" />
+
+    <converters:EnumToBoolConverter x:Key="EnumToBoolConverter" />
+
+    <globalization:NumberFormatInfo x:Key="ColorViewComponentNumberFormat" NumberDecimalDigits="0" />
+</ResourceDictionary>

src/Semi.Avalonia.ColorPicker/Controls/_index.axaml

@@ -2,6 +2,7 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <ResourceDictionary.MergedDictionaries>
+        <ResourceInclude Source="Converters.axaml" />
         <ResourceInclude Source="ColorPicker.axaml" />
         <ResourceInclude Source="ColorPreviewer.axaml" />
         <ResourceInclude Source="ColorSlider.axaml" />

src/Semi.Avalonia.ColorPicker/Converters/ColorToTextConverter.cs

@@ -3,19 +3,19 @@ using System.Globalization;
 using System.Linq;
 using Avalonia;
 using Avalonia.Data;
-using Avalonia.Data.Converters;
 using Avalonia.Media;
+using Irihi.Avalonia.Shared.Converters;
 
 namespace Semi.Avalonia.ColorPicker.Converters;
 
-public class ColorToTextConverter : IValueConverter
+public class ColorToTextConverter : MarkupValueConverter
 {
-    public object Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
+    public override object Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
     {
         return value is Color color ? $"{color.R},{color.G},{color.B},{color.A}" : AvaloniaProperty.UnsetValue;
     }
 
-    public object ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
+    public override object ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
     {
         if (value is not string str) return BindingOperations.DoNothing;
         var parts = str.Split(',');

src/Semi.Avalonia.ColorPicker/Converters/HsvColorToTextConverter.cs

@@ -3,21 +3,21 @@ using System.Globalization;
 using System.Linq;
 using Avalonia;
 using Avalonia.Data;
-using Avalonia.Data.Converters;
 using Avalonia.Media;
+using Irihi.Avalonia.Shared.Converters;
 
 namespace Semi.Avalonia.ColorPicker.Converters;
 
-public class HsvColorToTextConverter : IValueConverter
+public class HsvColorToTextConverter : MarkupValueConverter
 {
-    public object Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
+    public override object Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
     {
         return value is HsvColor hsvColor
             ? $"{Math.Round(hsvColor.H)},{Math.Round(hsvColor.S * 100)},{Math.Round(hsvColor.V * 100)},{Math.Round(hsvColor.A * 100)}"
             : AvaloniaProperty.UnsetValue;
     }
 
-    public object ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
+    public override object ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
     {
         if (value is not string str) return BindingOperations.DoNothing;
         var parts = str.Split(',');

src/Semi.Avalonia.ColorPicker/Converters/ToColorModel.cs

@@ -1,21 +0,0 @@
-using System;
-using System.Globalization;
-using Avalonia.Controls;
-using Avalonia.Data.Converters;
-
-namespace Semi.Avalonia.ColorPicker.Converters;
-
-public class ToColorModel : IValueConverter
-{
-    public object Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
-    {
-        return parameter is "Hex" && value is "Hex" ||
-               parameter is "Rgba" && value is ColorModel.Rgba ||
-               parameter is "Hsva" && value is ColorModel.Hsva;
-    }
-
-    public object ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
-    {
-        throw new NotImplementedException();
-    }
-}

src/Semi.Avalonia.ColorPicker/Index.axaml

@@ -3,6 +3,7 @@
         <ResourceDictionary>
             <ResourceDictionary.ThemeDictionaries>
                 <ResourceInclude x:Key="Default" Source="Light.axaml" />
+                <ResourceInclude x:Key="Light" Source="Light.axaml" />
                 <ResourceInclude x:Key="Dark" Source="Dark.axaml" />
             </ResourceDictionary.ThemeDictionaries>
             <ResourceDictionary.MergedDictionaries>

src/Semi.Avalonia.ColorPicker/Properties/AssemblyInfo.cs

@@ -1,3 +1,5 @@
 using Avalonia.Metadata;
 
-[assembly: XmlnsDefinition("https://irihi.tech/semi", "Semi.Avalonia.ColorPicker")]
+[assembly: XmlnsPrefix("https://irihi.tech/semi", "semi")]
+[assembly: XmlnsDefinition("https://irihi.tech/semi", "Semi.Avalonia.ColorPicker")]
+[assembly: XmlnsDefinition("https://irihi.tech/semi", "Semi.Avalonia.ColorPicker.Converters")]

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

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

src/Semi.Avalonia.ColorPicker/SemiColorDarkPalette.cs

@@ -1,13 +1,12 @@
 using Avalonia.Controls;
 using Avalonia.Media;
-using Avalonia.Utilities;
 using Irihi.Avalonia.Shared.Helpers;
 
 namespace Semi.Avalonia.ColorPicker;
 
-public class SemiColorDarkPalette: IColorPalette
+public class SemiColorDarkPalette : IColorPalette
 {
-    private static readonly Color[,] Colors = new Color[,]
+    private static readonly Color[,] Colors = new[,]
     {
         {
             //Red
@@ -217,7 +216,21 @@ public class SemiColorDarkPalette: IColorPalette
             Color.FromUInt32(0xFFE6E8EA),
             Color.FromUInt32(0xFFF9F9F9),
         },
+        {
+            //AIPurple
+            Color.FromUInt32(0xFF3A1770),
+            Color.FromUInt32(0xFF532394),
+            Color.FromUInt32(0xFF6F31B8),
+            Color.FromUInt32(0xFF8D41DB),
+            Color.FromUInt32(0xFFA744FF),
+            Color.FromUInt32(0xFFC375FF),
+            Color.FromUInt32(0xFFD598FF),
+            Color.FromUInt32(0xFFE5BAFF),
+            Color.FromUInt32(0xFFF3DDFF),
+            Color.FromUInt32(0xFFFBF3FF),
+        },
     };
+
     public Color GetColor(int colorIndex, int shadeIndex)
     {
         return Colors[
@@ -229,4 +242,4 @@ public class SemiColorDarkPalette: IColorPalette
     public int ColorCount => Colors.GetLength(0);
 
     public int ShadeCount => Colors.GetLength(1);
-}
+}

src/Semi.Avalonia.ColorPicker/SemiColorLightPalette.cs

@@ -1,13 +1,12 @@
 using Avalonia.Controls;
 using Avalonia.Media;
-using Avalonia.Utilities;
 using Irihi.Avalonia.Shared.Helpers;
 
 namespace Semi.Avalonia.ColorPicker;
 
-public class SemiColorLightPalette: IColorPalette
+public class SemiColorLightPalette : IColorPalette
 {
-    private static readonly Color[,] Colors = new Color[,]
+    private static readonly Color[,] Colors = new[,]
     {
         {
             //Red
@@ -217,7 +216,21 @@ public class SemiColorLightPalette: IColorPalette
             Color.FromUInt32(0xFF2E3238),
             Color.FromUInt32(0xFF1C1F23),
         },
+        {
+            //AIPurple
+            Color.FromUInt32(0xFFF8EDFF),
+            Color.FromUInt32(0xFFF2DAFF),
+            Color.FromUInt32(0xFFE3B5FF),
+            Color.FromUInt32(0xFFD191FF),
+            Color.FromUInt32(0xFFBD6CFF),
+            Color.FromUInt32(0xFFA647FF),
+            Color.FromUInt32(0xFF8636DB),
+            Color.FromUInt32(0xFF6928B8),
+            Color.FromUInt32(0xFF4E1C94),
+            Color.FromUInt32(0xFF361270),
+        },
     };
+
     public Color GetColor(int colorIndex, int shadeIndex)
     {
         return Colors[

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"
-    x:CompileBindings="True">
+    xmlns:collections="using:Avalonia.Collections">
     <ControlTheme x:Key="DataGridCellTextBlockTheme" TargetType="TextBlock">
         <Setter Property="Margin" Value="{DynamicResource DataGridCellTextBlockDefaultMargin}" />
         <Setter Property="VerticalAlignment" Value="Center" />

src/Semi.Avalonia.DataGrid/Index.axaml

@@ -3,6 +3,7 @@
         <ResourceDictionary>
             <ResourceDictionary.ThemeDictionaries>
                 <ResourceInclude x:Key="Default" Source="Light.axaml" />
+                <ResourceInclude x:Key="Light" Source="Light.axaml" />
                 <ResourceInclude x:Key="Dark" Source="Dark.axaml" />
             </ResourceDictionary.ThemeDictionaries>
             <ResourceDictionary.MergedDictionaries>

src/Semi.Avalonia.DataGrid/Semi.Avalonia.DataGrid.csproj

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

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"
-    x:CompileBindings="True">
+    xmlns:conv="clr-namespace:Avalonia.Controls.Converters;assembly=Avalonia.Controls.TreeDataGrid">
     <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"
-    x:CompileBindings="True">
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <ControlTheme x:Key="{x:Type SplitView}" TargetType="SplitView">
         <Setter Property="OpenPaneLength" Value="{DynamicResource SplitViewOpenPaneThemeLength}" />
         <Setter Property="CompactPaneLength" Value="{DynamicResource SplitViewCompactPaneThemeLength}" />

src/Semi.Avalonia/Controls/TabItem.axaml

@@ -31,7 +31,6 @@
                     <DockPanel HorizontalSpacing="{DynamicResource TabItemIconHeaderSpacing}">
                         <ContentPresenter
                             Name="PART_IconPresenter"
-                            DockPanel.Dock="Left"
                             Content="{TemplateBinding Icon}"
                             ContentTemplate="{TemplateBinding IconTemplate}"
                             IsVisible="{Binding $self.Content, Converter={x:Static ObjectConverters.IsNotNull}}">
@@ -61,6 +60,10 @@
             <Setter Property="RecognizesAccessKey" Value="True" />
         </Style>
 
+        <Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
+            <Setter Property="DockPanel.Dock" Value="Left" />
+        </Style>
+
         <Style Selector="^:selected">
             <Style Selector="^ /template/ ContentPresenter#PART_HeaderPresenter">
                 <Setter Property="FontWeight" Value="{DynamicResource TabItemSelectedFontWeight}" />

src/Semi.Avalonia/Controls/TabbedPage.axaml

@@ -2,7 +2,11 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <Design.PreviewWith>
-        <TabbedPage Width="400" Height="300" />
+        <TabbedPage Width="400" Height="800" TabPlacement="Bottom">
+            <ContentPage Icon="{DynamicResource SemiIconHome}" Header="Home" />
+            <ContentPage Icon="{DynamicResource SemiIconSearch}" Header="Search" />
+            <ContentPage Icon="{DynamicResource SemiIconSetting}" Header="Settings" />
+        </TabbedPage>
     </Design.PreviewWith>
 
     <ControlTheme x:Key="{x:Type TabbedPage}" TargetType="TabbedPage">
@@ -11,27 +15,91 @@
                 <TabControl
                     Name="PART_TabControl"
                     Background="{TemplateBinding Background}"
-                    Theme="{StaticResource LineTabControl}" />
+                    Theme="{StaticResource LineTabControl}">
+                    <TabControl.ItemContainerTheme>
+                        <ControlTheme
+                            BasedOn="{StaticResource LineTabItem}"
+                            TargetType="TabItem">
+                            <Style Selector="^[TabStripPlacement=Top], ^[TabStripPlacement=Bottom]">
+                                <Setter Property="TabItem.Margin" Value="0" />
+                                <Setter Property="TabItem.HorizontalContentAlignment" Value="Center" />
+                                <Setter Property="TabItem.VerticalContentAlignment" Value="Center" />
+                                <Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
+                                    <Setter Property="DockPanel.Dock" Value="Top" />
+                                </Style>
+                            </Style>
+                        </ControlTheme>
+                    </TabControl.ItemContainerTheme>
+                    <TabControl.ItemsPanel>
+                        <ItemsPanelTemplate>
+                            <UniformGrid Columns="{Binding $parent[TabControl].ItemCount}" />
+                        </ItemsPanelTemplate>
+                    </TabControl.ItemsPanel>
+                </TabControl>
             </ControlTemplate>
         </Setter>
     </ControlTheme>
+
     <ControlTheme x:Key="CardTabbedPage" TargetType="TabbedPage">
         <Setter Property="Template">
             <ControlTemplate TargetType="TabbedPage">
                 <TabControl
                     Name="PART_TabControl"
                     Background="{TemplateBinding Background}"
-                    Theme="{StaticResource CardTabControl}" />
+                    Theme="{StaticResource CardTabControl}">
+                    <TabControl.ItemContainerTheme>
+                        <ControlTheme
+                            BasedOn="{StaticResource CardTabItem}"
+                            TargetType="TabItem">
+                            <Style Selector="^[TabStripPlacement=Top], ^[TabStripPlacement=Bottom]">
+                                <Setter Property="TabItem.Padding" Value="8" />
+                                <Setter Property="TabItem.Margin" Value="0" />
+                                <Setter Property="TabItem.HorizontalContentAlignment" Value="Center" />
+                                <Setter Property="TabItem.VerticalContentAlignment" Value="Center" />
+                                <Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
+                                    <Setter Property="DockPanel.Dock" Value="Top" />
+                                </Style>
+                            </Style>
+                        </ControlTheme>
+                    </TabControl.ItemContainerTheme>
+                    <TabControl.ItemsPanel>
+                        <ItemsPanelTemplate>
+                            <UniformGrid Columns="{Binding $parent[TabControl].ItemCount}" />
+                        </ItemsPanelTemplate>
+                    </TabControl.ItemsPanel>
+                </TabControl>
             </ControlTemplate>
         </Setter>
     </ControlTheme>
+
     <ControlTheme x:Key="ButtonTabbedPage" TargetType="TabbedPage">
         <Setter Property="Template">
             <ControlTemplate TargetType="TabbedPage">
                 <TabControl
                     Name="PART_TabControl"
                     Background="{TemplateBinding Background}"
-                    Theme="{StaticResource ButtonTabControl}" />
+                    Theme="{StaticResource ButtonTabControl}">
+                    <TabControl.ItemContainerTheme>
+                        <ControlTheme
+                            BasedOn="{StaticResource ButtonTabItem}"
+                            TargetType="TabItem">
+                            <Style Selector="^[TabStripPlacement=Top], ^[TabStripPlacement=Bottom]">
+                                <Setter Property="TabItem.Padding" Value="12" />
+                                <Setter Property="TabItem.Margin" Value="0" />
+                                <Setter Property="TabItem.HorizontalContentAlignment" Value="Center" />
+                                <Setter Property="TabItem.VerticalContentAlignment" Value="Center" />
+                                <Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
+                                    <Setter Property="DockPanel.Dock" Value="Top" />
+                                </Style>
+                            </Style>
+                        </ControlTheme>
+                    </TabControl.ItemContainerTheme>
+                    <TabControl.ItemsPanel>
+                        <ItemsPanelTemplate>
+                            <UniformGrid Columns="{Binding $parent[TabControl].ItemCount}" />
+                        </ItemsPanelTemplate>
+                    </TabControl.ItemsPanel>
+                </TabControl>
             </ControlTemplate>
         </Setter>
     </ControlTheme>

src/Semi.Avalonia/Semi.Avalonia.csproj

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