Implement Semi Design theme for page-based navigation controls (ContentPage / DrawerPage / NavigationPage / TabbedPage) (#766)

* Initial plan

* Implement Semi Design theme for ContentPage, DrawerPage, NavigationPage, TabbedPage

Co-authored-by: zdpcdt <54255897+zdpcdt@users.noreply.github.com>

* fix: bind ItemsSource to Pages in TabControl of TabbedPage.

* chore: split demo navigation pages.

* demo: improve NavigationPage demo pages with interactive controls

Co-authored-by: zdpcdt <54255897+zdpcdt@users.noreply.github.com>

* fix: use comma-separated Padding syntax and remove trailing newline

Co-authored-by: zdpcdt <54255897+zdpcdt@users.noreply.github.com>

* feat: implement semi design theme for navigation controls in demo pages.

* feat: enhance demo pages with foreground color for better visibility

* feat: add back button visibility control and improve navigation page layout.

* chore: remove DrawerPage unused static resources.

* feat: add HighContrast resources for ContentPage, DrawerPage, NavigationPage, TabbedPage

Co-authored-by: zdpcdt <54255897+zdpcdt@users.noreply.github.com>

* feat: implement CardTabbedPage & ButtonTabbedPage themes.

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: zdpcdt <54255897+zdpcdt@users.noreply.github.com>
Co-authored-by: Dong Bin <popmessiah@hotmail.com>

src/Semi.Avalonia/Controls/ContentPage.axaml

@@ -0,0 +1,43 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <Design.PreviewWith>
+        <ContentPage
+            Width="400"
+            Height="300"
+            Background="White">
+            <TextBlock
+                HorizontalAlignment="Center"
+                VerticalAlignment="Center"
+                Text="ContentPage" />
+        </ContentPage>
+    </Design.PreviewWith>
+
+    <ControlTheme x:Key="{x:Type ContentPage}" TargetType="ContentPage">
+        <Setter Property="Background" Value="{DynamicResource ContentPageBackground}" />
+        <Setter Property="Foreground" Value="{DynamicResource ContentPageForeground}" />
+        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
+        <Setter Property="VerticalContentAlignment" Value="Stretch" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="ContentPage">
+                <Grid RowDefinitions="Auto,*,Auto" Background="{TemplateBinding Background}">
+                    <ContentPresenter
+                        Name="PART_TopCommandBar"
+                        Grid.Row="0"
+                        Content="{TemplateBinding TopCommandBar}" />
+                    <ContentPresenter
+                        Name="PART_ContentPresenter"
+                        Grid.Row="1"
+                        Content="{TemplateBinding Content}"
+                        ContentTemplate="{TemplateBinding ContentTemplate}"
+                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
+                    <ContentPresenter
+                        Name="PART_BottomCommandBar"
+                        Grid.Row="2"
+                        Content="{TemplateBinding BottomCommandBar}" />
+                </Grid>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/DrawerPage.axaml

@@ -0,0 +1,143 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <Design.PreviewWith>
+        <DrawerPage Width="400" Height="300" />
+    </Design.PreviewWith>
+
+    <ControlTheme x:Key="{x:Type DrawerPage}" TargetType="DrawerPage">
+        <Setter Property="Background" Value="{DynamicResource DrawerPageBackground}" />
+        <Setter Property="Foreground" Value="{DynamicResource DrawerPageForeground}" />
+        <Setter Property="DrawerBackground" Value="{DynamicResource DrawerPageDrawerBackground}" />
+        <Setter Property="DrawerLength" Value="{DynamicResource DrawerPageDrawerLength}" />
+        <Setter Property="CompactDrawerLength" Value="{DynamicResource DrawerPageCompactDrawerLength}" />
+        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
+        <Setter Property="VerticalContentAlignment" Value="Stretch" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="DrawerPage">
+                <Grid RowDefinitions="Auto,*" Background="{TemplateBinding Background}">
+
+                    <!--  Top bar with pane toggle button  -->
+                    <Border
+                        Name="PART_TopBar"
+                        Grid.Row="0"
+                        MinHeight="{DynamicResource DrawerPageTopBarMinHeight}"
+                        Padding="{DynamicResource DrawerPageTopBarPadding}"
+                        Background="{DynamicResource DrawerPageTopBarBackground}"
+                        BorderBrush="{DynamicResource DrawerPageTopBarBorderBrush}"
+                        BorderThickness="{DynamicResource DrawerPageTopBarBorderThickness}">
+                        <Grid ColumnDefinitions="Auto,Auto,*">
+                            <!--  Pane toggle button (hamburger)  -->
+                            <ToggleButton
+                                Name="PART_PaneButton"
+                                Grid.Column="0"
+                                Width="{DynamicResource DrawerPagePaneButtonSize}"
+                                Height="{DynamicResource DrawerPagePaneButtonSize}"
+                                Margin="{DynamicResource DrawerPagePaneButtonMargin}"
+                                VerticalAlignment="Center"
+                                Background="{DynamicResource DrawerPagePaneButtonBackground}"
+                                Foreground="{DynamicResource DrawerPagePaneButtonForeground}"
+                                IsChecked="{TemplateBinding IsOpen, Mode=TwoWay}">
+                                <PathIcon
+                                    Width="16"
+                                    Height="16"
+                                    Data="{DynamicResource DrawerPageMenuGlyph}"
+                                    Foreground="{DynamicResource DrawerPagePaneButtonForeground}" />
+                            </ToggleButton>
+
+                            <!--  Drawer icon (shown in top bar)  -->
+                            <ContentPresenter
+                                Name="PART_PaneIconPresenter"
+                                Grid.Column="1"
+                                VerticalAlignment="Center"
+                                Content="{TemplateBinding DrawerIcon}" />
+                        </Grid>
+                    </Border>
+
+                    <!--  Main area: SplitView + Backdrop  -->
+                    <Panel Grid.Row="1">
+                        <SplitView
+                            Name="PART_SplitView"
+                            CompactPaneLength="{TemplateBinding CompactDrawerLength}"
+                            DisplayMode="{TemplateBinding DisplayMode}"
+                            IsPaneOpen="{TemplateBinding IsOpen, Mode=TwoWay}"
+                            OpenPaneLength="{TemplateBinding DrawerLength}"
+                            PaneBackground="{TemplateBinding DrawerBackground}">
+                            <SplitView.Pane>
+                                <DockPanel>
+                                    <!--  Drawer header  -->
+                                    <ContentPresenter
+                                        Name="PART_DrawerHeader"
+                                        DockPanel.Dock="Top"
+                                        Background="{TemplateBinding DrawerHeaderBackground}"
+                                        Content="{TemplateBinding DrawerHeader}" />
+
+                                    <!--  Drawer footer  -->
+                                    <ContentPresenter
+                                        Name="PART_DrawerFooter"
+                                        DockPanel.Dock="Bottom"
+                                        Background="{TemplateBinding DrawerFooterBackground}"
+                                        Content="{TemplateBinding DrawerFooter}" />
+
+                                    <!--  Compact pane icon (compact mode)  -->
+                                    <ContentPresenter
+                                        Name="PART_CompactPaneIconPresenter"
+                                        DockPanel.Dock="Top"
+                                        IsVisible="False"
+                                        Content="{TemplateBinding DrawerIcon}" />
+
+                                    <!--  Bottom pane icon  -->
+                                    <ContentPresenter
+                                        Name="PART_BottomPaneIconPresenter"
+                                        DockPanel.Dock="Bottom"
+                                        IsVisible="False" />
+
+                                    <!--  Drawer main content  -->
+                                    <ContentPresenter
+                                        Name="PART_DrawerPresenter"
+                                        Content="{TemplateBinding Drawer}"
+                                        ContentTemplate="{TemplateBinding DrawerTemplate}" />
+                                </DockPanel>
+                            </SplitView.Pane>
+
+                            <!--  Main page content  -->
+                            <ContentPresenter
+                                Name="PART_ContentPresenter"
+                                Content="{TemplateBinding Content}"
+                                ContentTemplate="{TemplateBinding ContentTemplate}"
+                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
+                        </SplitView>
+
+                        <!--  Backdrop overlay (shown in overlay/flyout modes)  -->
+                        <Border
+                            Name="PART_Backdrop"
+                            Background="{TemplateBinding BackdropBrush}"
+                            IsHitTestVisible="False"
+                            IsVisible="False" />
+
+                        <!--  Compact pane toggle  -->
+                        <ToggleButton
+                            Name="PART_CompactPaneToggle"
+                            IsVisible="False" />
+                    </Panel>
+                </Grid>
+            </ControlTemplate>
+        </Setter>
+
+        <!--  Pseudo-class: right-side drawer  -->
+        <Style Selector="^:placement-right /template/ SplitView#PART_SplitView">
+            <Setter Property="PanePlacement" Value="Right" />
+        </Style>
+
+        <!--  Pseudo-class: top drawer  -->
+        <Style Selector="^:placement-top /template/ SplitView#PART_SplitView">
+            <Setter Property="PanePlacement" Value="Top" />
+        </Style>
+
+        <!--  Pseudo-class: bottom drawer  -->
+        <Style Selector="^:placement-bottom /template/ SplitView#PART_SplitView">
+            <Setter Property="PanePlacement" Value="Bottom" />
+        </Style>
+    </ControlTheme>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/NavigationPage.axaml

@@ -0,0 +1,94 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <Design.PreviewWith>
+        <NavigationPage Width="400" Height="300" />
+    </Design.PreviewWith>
+
+    <ControlTheme x:Key="{x:Type NavigationPage}" TargetType="NavigationPage">
+        <Setter Property="Background" Value="{DynamicResource NavigationPageBackground}" />
+        <Setter Property="Foreground" Value="{DynamicResource NavigationPageForeground}" />
+        <Setter Property="BarHeight" Value="{DynamicResource NavigationPageBarMinHeight}" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="NavigationPage">
+                <Grid RowDefinitions="Auto,*,Auto" Background="{TemplateBinding Background}">
+                    <!--  Top command bar  -->
+                    <ContentPresenter
+                        Name="PART_TopCommandBar"
+                        Grid.Row="0" />
+
+                    <!--  Content host (pages + navigation bar)  -->
+                    <Panel Name="PART_ContentHost" Grid.Row="1">
+                        <!--  Previous page (back animation target)  -->
+                        <ContentPresenter Name="PART_PageBackPresenter" />
+
+                        <!--  Current page  -->
+                        <ContentPresenter Name="PART_PagePresenter" />
+
+                        <!--  Modal back page  -->
+                        <ContentPresenter Name="PART_ModalBackPresenter" />
+
+                        <!--  Modal page  -->
+                        <ContentPresenter Name="PART_ModalPresenter" />
+
+                        <!--  Navigation bar (overlaid on content by default)  -->
+                        <Border
+                            Name="PART_NavigationBar"
+                            MinHeight="{TemplateBinding BarHeight}"
+                            Padding="{DynamicResource NavigationPageBarPadding}"
+                            VerticalAlignment="Top"
+                            Background="{DynamicResource NavigationPageBarBackground}"
+                            BorderBrush="{DynamicResource NavigationPageBarBorderBrush}"
+                            BorderThickness="{DynamicResource NavigationPageBarBorderThickness}">
+                            <Grid ColumnDefinitions="Auto,*,Auto">
+                                <Button
+                                    Name="PART_BackButton"
+                                    Grid.Column="0"
+                                    MinHeight="{DynamicResource NavigationPageBarMinHeight}"
+                                    MinWidth="{DynamicResource NavigationPageBarMinHeight}"
+                                    Padding="8"
+                                    VerticalAlignment="Center"
+                                    IsVisible="{TemplateBinding IsBackButtonEffectivelyVisible}"
+                                    Background="{DynamicResource NavigationPageBackButtonBackground}"
+                                    Theme="{StaticResource BorderlessButton}">
+                                    <Panel Background="Transparent">
+                                        <PathIcon
+                                            Theme="{StaticResource InnerPathIcon}"
+                                            Classes="Large"
+                                            Data="{DynamicResource NavigationPageBackButtonGlyph}"
+                                            Foreground="{DynamicResource NavigationPageBackButtonForeground}"
+                                            IsVisible="{Binding CurrentPage?.(NavigationPage.BackButtonContent), RelativeSource={RelativeSource TemplatedParent}, Converter={x:Static ObjectConverters.IsNull}, FallbackValue=False}" />
+                                        <ContentPresenter
+                                            Content="{Binding CurrentPage?.(NavigationPage.BackButtonContent), RelativeSource={RelativeSource TemplatedParent}, FallbackValue={x:Null}}"
+                                            IsVisible="{Binding CurrentPage?.(NavigationPage.BackButtonContent), RelativeSource={RelativeSource TemplatedParent}, Converter={x:Static ObjectConverters.IsNotNull}, FallbackValue=False}"
+                                            VerticalAlignment="Center"
+                                            HorizontalAlignment="Center" />
+                                    </Panel>
+                                </Button>
+                                <ContentPresenter
+                                    Grid.Column="1"
+                                    HorizontalAlignment="Center"
+                                    VerticalAlignment="Center" />
+                            </Grid>
+                        </Border>
+                    </Panel>
+
+                    <!--  Bottom command bar  -->
+                    <ContentPresenter
+                        Name="PART_BottomCommandBar"
+                        Grid.Row="2" />
+                </Grid>
+            </ControlTemplate>
+        </Setter>
+
+        <!--  Navigation bar is inset (content flows under the bar)  -->
+        <Style Selector="^:nav-bar-inset /template/ Border#PART_NavigationBar">
+            <Setter Property="BorderThickness" Value="0" />
+        </Style>
+
+        <!--  Compact navigation bar  -->
+        <Style Selector="^:nav-bar-compact /template/ Border#PART_NavigationBar">
+            <Setter Property="MinHeight" Value="0" />
+        </Style>
+    </ControlTheme>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/TabbedPage.axaml

@@ -0,0 +1,41 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <Design.PreviewWith>
+        <TabbedPage Width="400" Height="300" />
+    </Design.PreviewWith>
+
+    <ControlTheme x:Key="{x:Type TabbedPage}" TargetType="TabbedPage">
+        <Setter Property="Template">
+            <ControlTemplate TargetType="TabbedPage">
+                <TabControl
+                    Name="PART_TabControl"
+                    Background="{TemplateBinding Background}"
+                    Theme="{StaticResource LineTabControl}"
+                    ItemsSource="{TemplateBinding Pages}" />
+            </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}"
+                    ItemsSource="{TemplateBinding Pages}" />
+            </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}"
+                    ItemsSource="{TemplateBinding Pages}" />
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/_index.axaml

@@ -6,6 +6,7 @@
         <ResourceInclude Source="AutoCompleteBox.axaml" />
         <ResourceInclude Source="Border.axaml" />
         <ResourceInclude Source="Button.axaml" />
+        <ResourceInclude Source="ContentPage.axaml" />
         <ResourceInclude Source="ButtonSpinner.axaml" />
         <ResourceInclude Source="Calendar.axaml" />
         <ResourceInclude Source="CalendarDatePicker.axaml" />
@@ -18,6 +19,7 @@
         <ResourceInclude Source="DatePicker.axaml" />
         <ResourceInclude Source="DateTimePickerShared.axaml" />
         <ResourceInclude Source="DropDownButton.axaml" />
+        <ResourceInclude Source="DrawerPage.axaml" />
         <ResourceInclude Source="EmbeddableControlRoot.axaml" />
         <ResourceInclude Source="Expander.axaml" />
         <ResourceInclude Source="FlyoutPresenter.axaml" />
@@ -33,6 +35,7 @@
         <ResourceInclude Source="MenuFlyoutPresenter.axaml" />
         <ResourceInclude Source="NotificationCard.axaml" />
         <ResourceInclude Source="NumericUpDown.axaml" />
+        <ResourceInclude Source="NavigationPage.axaml" />
         <ResourceInclude Source="PathIcon.axaml" />
         <ResourceInclude Source="Popup.axaml" />
         <ResourceInclude Source="ProgressBar.axaml" />
@@ -47,6 +50,7 @@
         <ResourceInclude Source="TabControl.axaml" />
         <ResourceInclude Source="TabItem.axaml" />
         <ResourceInclude Source="TabStrip.axaml" />
+        <ResourceInclude Source="TabbedPage.axaml" />
         <ResourceInclude Source="TextBlock.axaml" />
         <ResourceInclude Source="TextBox.axaml" />
         <ResourceInclude Source="ThemeVariantScope.axaml" />

src/Semi.Avalonia/Themes/Dark/ContentPage.axaml

@@ -0,0 +1,5 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  ContentPage  -->
+    <StaticResource x:Key="ContentPageBackground" ResourceKey="SemiColorBackground0" />
+    <StaticResource x:Key="ContentPageForeground" ResourceKey="SemiColorText0" />
+</ResourceDictionary>

src/Semi.Avalonia/Themes/Dark/DrawerPage.axaml

@@ -0,0 +1,13 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  DrawerPage background  -->
+    <StaticResource x:Key="DrawerPageBackground" ResourceKey="SemiColorBackground0" />
+    <StaticResource x:Key="DrawerPageForeground" ResourceKey="SemiColorText0" />
+    <!--  Top bar  -->
+    <StaticResource x:Key="DrawerPageTopBarBackground" ResourceKey="SemiColorBackground1" />
+    <StaticResource x:Key="DrawerPageTopBarBorderBrush" ResourceKey="SemiColorBorder" />
+    <!--  Drawer pane  -->
+    <StaticResource x:Key="DrawerPageDrawerBackground" ResourceKey="SemiColorNavBackground" />
+    <!--  Pane button  -->
+    <SolidColorBrush x:Key="DrawerPagePaneButtonBackground" Color="Transparent" />
+    <StaticResource x:Key="DrawerPagePaneButtonForeground" ResourceKey="SemiColorText0" />
+</ResourceDictionary>

src/Semi.Avalonia/Themes/Dark/NavigationPage.axaml

@@ -0,0 +1,14 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  NavigationPage  -->
+    <StaticResource x:Key="NavigationPageBackground" ResourceKey="SemiColorBackground0" />
+    <StaticResource x:Key="NavigationPageForeground" ResourceKey="SemiColorText0" />
+    <!--  Navigation bar  -->
+    <StaticResource x:Key="NavigationPageBarBackground" ResourceKey="SemiColorBackground1" />
+    <StaticResource x:Key="NavigationPageBarForeground" ResourceKey="SemiColorText0" />
+    <StaticResource x:Key="NavigationPageBarBorderBrush" ResourceKey="SemiColorBorder" />
+    <!--  Back button  -->
+    <SolidColorBrush x:Key="NavigationPageBackButtonBackground" Color="Transparent" />
+    <StaticResource x:Key="NavigationPageBackButtonForeground" ResourceKey="SemiColorText0" />
+    <StaticResource x:Key="NavigationPageBackButtonPointeroverBackground" ResourceKey="SemiColorFill0" />
+    <StaticResource x:Key="NavigationPageBackButtonPressedBackground" ResourceKey="SemiColorFill1" />
+</ResourceDictionary>

src/Semi.Avalonia/Themes/Dark/TabbedPage.axaml

@@ -0,0 +1,2 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+</ResourceDictionary>

src/Semi.Avalonia/Themes/Dark/_index.axaml

@@ -4,6 +4,7 @@
         <ResourceInclude Source="AutoCompleteBox.axaml" />
         <ResourceInclude Source="Border.axaml" />
         <ResourceInclude Source="Button.axaml" />
+        <ResourceInclude Source="ContentPage.axaml" />
         <ResourceInclude Source="ButtonSpinner.axaml" />
         <ResourceInclude Source="Calendar.axaml" />
         <ResourceInclude Source="CalendarDatePicker.axaml" />
@@ -16,6 +17,7 @@
         <ResourceInclude Source="DatePicker.axaml" />
         <ResourceInclude Source="DateTimePickerShared.axaml" />
         <ResourceInclude Source="DropDownButton.axaml" />
+        <ResourceInclude Source="DrawerPage.axaml" />
         <ResourceInclude Source="Expander.axaml" />
         <ResourceInclude Source="Flyout.axaml" />
         <ResourceInclude Source="GridSplitter.axaml" />
@@ -26,6 +28,7 @@
         <ResourceInclude Source="ManagedFileChooser.axaml" />
         <ResourceInclude Source="Menu.axaml" />
         <ResourceInclude Source="NotificationCard.axaml" />
+        <ResourceInclude Source="NavigationPage.axaml" />
         <ResourceInclude Source="NumericUpDown.axaml" />
         <ResourceInclude Source="ProgressBar.axaml" />
         <ResourceInclude Source="RadioButton.axaml" />
@@ -36,6 +39,7 @@
         <ResourceInclude Source="SplitView.axaml" />
         <ResourceInclude Source="TabControl.axaml" />
         <ResourceInclude Source="TabItem.axaml" />
+        <ResourceInclude Source="TabbedPage.axaml" />
         <ResourceInclude Source="TextBlock.axaml" />
         <ResourceInclude Source="TextBox.axaml" />
         <ResourceInclude Source="TimePicker.axaml" />

src/Semi.Avalonia/Themes/HighContrast/ContentPage.axaml

@@ -0,0 +1,5 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  ContentPage  -->
+    <StaticResource x:Key="ContentPageBackground" ResourceKey="SemiColorWindow" />
+    <StaticResource x:Key="ContentPageForeground" ResourceKey="SemiColorWindowText" />
+</ResourceDictionary>

src/Semi.Avalonia/Themes/HighContrast/DrawerPage.axaml

@@ -0,0 +1,13 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  DrawerPage background  -->
+    <StaticResource x:Key="DrawerPageBackground" ResourceKey="SemiColorWindow" />
+    <StaticResource x:Key="DrawerPageForeground" ResourceKey="SemiColorWindowText" />
+    <!--  Top bar  -->
+    <StaticResource x:Key="DrawerPageTopBarBackground" ResourceKey="SemiColorWindow" />
+    <StaticResource x:Key="DrawerPageTopBarBorderBrush" ResourceKey="SemiColorWindowText" />
+    <!--  Drawer pane  -->
+    <StaticResource x:Key="DrawerPageDrawerBackground" ResourceKey="SemiColorWindow" />
+    <!--  Pane button  -->
+    <SolidColorBrush x:Key="DrawerPagePaneButtonBackground" Color="Transparent" />
+    <StaticResource x:Key="DrawerPagePaneButtonForeground" ResourceKey="SemiColorWindowText" />
+</ResourceDictionary>

src/Semi.Avalonia/Themes/HighContrast/NavigationPage.axaml

@@ -0,0 +1,14 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  NavigationPage  -->
+    <StaticResource x:Key="NavigationPageBackground" ResourceKey="SemiColorWindow" />
+    <StaticResource x:Key="NavigationPageForeground" ResourceKey="SemiColorWindowText" />
+    <!--  Navigation bar  -->
+    <StaticResource x:Key="NavigationPageBarBackground" ResourceKey="SemiColorWindow" />
+    <StaticResource x:Key="NavigationPageBarForeground" ResourceKey="SemiColorWindowText" />
+    <StaticResource x:Key="NavigationPageBarBorderBrush" ResourceKey="SemiColorWindowText" />
+    <!--  Back button  -->
+    <SolidColorBrush x:Key="NavigationPageBackButtonBackground" Color="Transparent" />
+    <StaticResource x:Key="NavigationPageBackButtonForeground" ResourceKey="SemiColorWindowText" />
+    <StaticResource x:Key="NavigationPageBackButtonPointeroverBackground" ResourceKey="SemiColorHighlight" />
+    <StaticResource x:Key="NavigationPageBackButtonPressedBackground" ResourceKey="SemiColorHighlightText" />
+</ResourceDictionary>

src/Semi.Avalonia/Themes/HighContrast/TabbedPage.axaml

@@ -0,0 +1,2 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+</ResourceDictionary>

src/Semi.Avalonia/Themes/HighContrast/_index.axaml

@@ -12,9 +12,11 @@
         <ResourceInclude Source="CheckBox.axaml" />
         <ResourceInclude Source="ComboBox.axaml" />
         <ResourceInclude Source="CommandBar.axaml" />
+        <ResourceInclude Source="ContentPage.axaml" />
         <ResourceInclude Source="DataValidationErrors.axaml" />
         <ResourceInclude Source="DatePicker.axaml" />
         <ResourceInclude Source="DateTimePickerShared.axaml" />
+        <ResourceInclude Source="DrawerPage.axaml" />
         <ResourceInclude Source="DropDownButton.axaml" />
         <ResourceInclude Source="Expander.axaml" />
         <ResourceInclude Source="Flyout.axaml" />
@@ -25,6 +27,7 @@
         <ResourceInclude Source="ListBox.axaml" />
         <ResourceInclude Source="ManagedFileChooser.axaml" />
         <ResourceInclude Source="Menu.axaml" />
+        <ResourceInclude Source="NavigationPage.axaml" />
         <ResourceInclude Source="NotificationCard.axaml" />
         <ResourceInclude Source="NumericUpDown.axaml" />
         <ResourceInclude Source="ProgressBar.axaml" />
@@ -36,6 +39,7 @@
         <ResourceInclude Source="SplitView.axaml" />
         <ResourceInclude Source="TabControl.axaml" />
         <ResourceInclude Source="TabItem.axaml" />
+        <ResourceInclude Source="TabbedPage.axaml" />
         <ResourceInclude Source="TextBlock.axaml" />
         <ResourceInclude Source="TextBox.axaml" />
         <ResourceInclude Source="TimePicker.axaml" />

src/Semi.Avalonia/Themes/Light/ContentPage.axaml

@@ -0,0 +1,5 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  ContentPage  -->
+    <StaticResource x:Key="ContentPageBackground" ResourceKey="SemiColorBackground0" />
+    <StaticResource x:Key="ContentPageForeground" ResourceKey="SemiColorText0" />
+</ResourceDictionary>

src/Semi.Avalonia/Themes/Light/DrawerPage.axaml

@@ -0,0 +1,13 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  DrawerPage background  -->
+    <StaticResource x:Key="DrawerPageBackground" ResourceKey="SemiColorBackground0" />
+    <StaticResource x:Key="DrawerPageForeground" ResourceKey="SemiColorText0" />
+    <!--  Top bar  -->
+    <StaticResource x:Key="DrawerPageTopBarBackground" ResourceKey="SemiColorBackground1" />
+    <StaticResource x:Key="DrawerPageTopBarBorderBrush" ResourceKey="SemiColorBorder" />
+    <!--  Drawer pane  -->
+    <StaticResource x:Key="DrawerPageDrawerBackground" ResourceKey="SemiColorNavBackground" />
+    <!--  Pane button  -->
+    <SolidColorBrush x:Key="DrawerPagePaneButtonBackground" Color="Transparent" />
+    <StaticResource x:Key="DrawerPagePaneButtonForeground" ResourceKey="SemiColorText0" />
+</ResourceDictionary>

src/Semi.Avalonia/Themes/Light/NavigationPage.axaml

@@ -0,0 +1,14 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  NavigationPage  -->
+    <StaticResource x:Key="NavigationPageBackground" ResourceKey="SemiColorBackground0" />
+    <StaticResource x:Key="NavigationPageForeground" ResourceKey="SemiColorText0" />
+    <!--  Navigation bar  -->
+    <StaticResource x:Key="NavigationPageBarBackground" ResourceKey="SemiColorBackground1" />
+    <StaticResource x:Key="NavigationPageBarForeground" ResourceKey="SemiColorText0" />
+    <StaticResource x:Key="NavigationPageBarBorderBrush" ResourceKey="SemiColorBorder" />
+    <!--  Back button  -->
+    <SolidColorBrush x:Key="NavigationPageBackButtonBackground" Color="Transparent" />
+    <StaticResource x:Key="NavigationPageBackButtonForeground" ResourceKey="SemiColorText0" />
+    <StaticResource x:Key="NavigationPageBackButtonPointeroverBackground" ResourceKey="SemiColorFill0" />
+    <StaticResource x:Key="NavigationPageBackButtonPressedBackground" ResourceKey="SemiColorFill1" />
+</ResourceDictionary>

src/Semi.Avalonia/Themes/Light/TabbedPage.axaml

@@ -0,0 +1,2 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+</ResourceDictionary>

src/Semi.Avalonia/Themes/Light/_index.axaml

@@ -4,6 +4,7 @@
         <ResourceInclude Source="AutoCompleteBox.axaml" />
         <ResourceInclude Source="Border.axaml" />
         <ResourceInclude Source="Button.axaml" />
+        <ResourceInclude Source="ContentPage.axaml" />
         <ResourceInclude Source="ButtonSpinner.axaml" />
         <ResourceInclude Source="Calendar.axaml" />
         <ResourceInclude Source="CalendarDatePicker.axaml" />
@@ -16,6 +17,7 @@
         <ResourceInclude Source="DatePicker.axaml" />
         <ResourceInclude Source="DateTimePickerShared.axaml" />
         <ResourceInclude Source="DropDownButton.axaml" />
+        <ResourceInclude Source="DrawerPage.axaml" />
         <ResourceInclude Source="Expander.axaml" />
         <ResourceInclude Source="Flyout.axaml" />
         <ResourceInclude Source="GridSplitter.axaml" />
@@ -26,6 +28,7 @@
         <ResourceInclude Source="ManagedFileChooser.axaml" />
         <ResourceInclude Source="Menu.axaml" />
         <ResourceInclude Source="NotificationCard.axaml" />
+        <ResourceInclude Source="NavigationPage.axaml" />
         <ResourceInclude Source="NumericUpDown.axaml" />
         <ResourceInclude Source="ProgressBar.axaml" />
         <ResourceInclude Source="RadioButton.axaml" />
@@ -36,6 +39,7 @@
         <ResourceInclude Source="SplitView.axaml" />
         <ResourceInclude Source="TabControl.axaml" />
         <ResourceInclude Source="TabItem.axaml" />
+        <ResourceInclude Source="TabbedPage.axaml" />
         <ResourceInclude Source="TextBlock.axaml" />
         <ResourceInclude Source="TextBox.axaml" />
         <ResourceInclude Source="TimePicker.axaml" />

src/Semi.Avalonia/Themes/Shared/ContentPage.axaml

@@ -0,0 +1,4 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  ContentPage  -->
+    <x:Double x:Key="ContentPageBarMinHeight">48</x:Double>
+</ResourceDictionary>

src/Semi.Avalonia/Themes/Shared/DrawerPage.axaml

@@ -0,0 +1,15 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  DrawerPage top bar  -->
+    <x:Double x:Key="DrawerPageTopBarMinHeight">48</x:Double>
+    <Thickness x:Key="DrawerPageTopBarPadding">4 0</Thickness>
+    <Thickness x:Key="DrawerPageTopBarBorderThickness">0 0 0 1</Thickness>
+
+    <!--  DrawerPage pane/drawer  -->
+    <x:Double x:Key="DrawerPageDrawerLength">280</x:Double>
+    <x:Double x:Key="DrawerPageCompactDrawerLength">56</x:Double>
+
+    <!--  DrawerPage pane button  -->
+    <x:Double x:Key="DrawerPagePaneButtonSize">32</x:Double>
+    <Thickness x:Key="DrawerPagePaneButtonMargin">8 0</Thickness>
+    <StaticResource x:Key="DrawerPageMenuGlyph" ResourceKey="SemiIconMenu" />
+</ResourceDictionary>

src/Semi.Avalonia/Themes/Shared/NavigationPage.axaml

@@ -0,0 +1,7 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  NavigationPage  -->
+    <x:Double x:Key="NavigationPageBarMinHeight">48</x:Double>
+    <Thickness x:Key="NavigationPageBarPadding">4 0</Thickness>
+    <Thickness x:Key="NavigationPageBarBorderThickness">0 0 0 1</Thickness>
+    <StaticResource x:Key="NavigationPageBackButtonGlyph" ResourceKey="SemiIconChevronLeft" />
+</ResourceDictionary>

src/Semi.Avalonia/Themes/Shared/TabbedPage.axaml

@@ -0,0 +1,4 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  TabbedPage  -->
+    <!--  TabbedPage reuses Semi's existing TabControl (LineTabControl) theme  -->
+</ResourceDictionary>

src/Semi.Avalonia/Themes/Shared/_index.axaml

@@ -4,6 +4,7 @@
         <ResourceInclude Source="AutoCompleteBox.axaml" />
         <ResourceInclude Source="Border.axaml" />
         <ResourceInclude Source="Button.axaml" />
+        <ResourceInclude Source="ContentPage.axaml" />
         <ResourceInclude Source="ButtonSpinner.axaml" />
         <ResourceInclude Source="Calendar.axaml" />
         <ResourceInclude Source="CalendarDatePicker.axaml" />
@@ -16,6 +17,7 @@
         <ResourceInclude Source="DatePicker.axaml" />
         <ResourceInclude Source="DateTimePickerShared.axaml" />
         <ResourceInclude Source="DropDownButton.axaml" />
+        <ResourceInclude Source="DrawerPage.axaml" />
         <ResourceInclude Source="Expander.axaml" />
         <ResourceInclude Source="Flyout.axaml" />
         <ResourceInclude Source="GridSplitter.axaml" />
@@ -26,6 +28,7 @@
         <ResourceInclude Source="ManagedFileChooser.axaml" />
         <ResourceInclude Source="Menu.axaml" />
         <ResourceInclude Source="NotificationCard.axaml" />
+        <ResourceInclude Source="NavigationPage.axaml" />
         <ResourceInclude Source="NumericUpDown.axaml" />
         <ResourceInclude Source="ProgressBar.axaml" />
         <ResourceInclude Source="RadioButton.axaml" />
@@ -36,6 +39,7 @@
         <ResourceInclude Source="SplitView.axaml" />
         <ResourceInclude Source="TabControl.axaml" />
         <ResourceInclude Source="TabItem.axaml" />
+        <ResourceInclude Source="TabbedPage.axaml" />
         <ResourceInclude Source="TextBlock.axaml" />
         <ResourceInclude Source="TextBox.axaml" />
         <ResourceInclude Source="TimePicker.axaml" />