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>

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

@@ -0,0 +1,54 @@
+<UserControl
+    x:Class="Semi.Avalonia.Demo.Pages.ContentPageDemo"
+    xmlns="https://github.com/avaloniaui"
+    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"
+    d:DesignHeight="600"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    <DockPanel>
+        <ScrollViewer DockPanel.Dock="Right" Width="260">
+            <StackPanel Margin="12" Spacing="8">
+                <TextBlock Text="Configuration" FontWeight="SemiBold" FontSize="16"
+                           Foreground="{DynamicResource SemiColorText0}" />
+                <TextBlock Text="ContentPage is the fundamental page type. It hosts a single piece of content and integrates with NavigationPage, TabbedPage, and CarouselPage. The Header property sets the navigation bar title."
+                           FontSize="12" Opacity="0.7" TextWrapping="Wrap" />
+
+                <Separator />
+
+                <TextBlock Text="Navigation" FontWeight="SemiBold" />
+                <Button Content="Push Page" HorizontalAlignment="Stretch" Click="OnPush" />
+                <Button Content="Pop Page" HorizontalAlignment="Stretch" Click="OnPop" />
+                <Button Content="Pop to Root" HorizontalAlignment="Stretch" Click="OnPopToRoot" />
+
+                <Separator />
+
+                <TextBlock Text="Key Properties" FontWeight="SemiBold" />
+                <TextBlock Text="• Header: nav bar title (string or Control)" FontSize="12" Opacity="0.8" TextWrapping="Wrap" />
+                <TextBlock Text="• Content: any Avalonia control" FontSize="12" Opacity="0.8" TextWrapping="Wrap" />
+                <TextBlock Text="• Background: page background brush" FontSize="12" Opacity="0.8" TextWrapping="Wrap" />
+                <TextBlock Text="• HorizontalContentAlignment" FontSize="12" Opacity="0.8" />
+                <TextBlock Text="• VerticalContentAlignment" FontSize="12" Opacity="0.8" />
+                <TextBlock Text="• AutomaticallyApplySafeAreaPadding" FontSize="12" Opacity="0.8" />
+
+                <Separator />
+
+                <TextBlock Name="StatusText"
+                           Text="Depth: 1 | Current: Root Page"
+                           FontSize="11"
+                           Opacity="0.7" />
+            </StackPanel>
+        </ScrollViewer>
+
+        <Border DockPanel.Dock="Right" Width="1" Background="{DynamicResource SemiColorBackground0}" />
+
+        <Border Margin="12"
+                BorderBrush="{DynamicResource SemiColorBorder}"
+                BorderThickness="1"
+                CornerRadius="6"
+                ClipToBounds="True">
+            <NavigationPage Name="DemoNav" />
+        </Border>
+    </DockPanel>
+</UserControl>

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

@@ -0,0 +1,93 @@
+using Avalonia.Controls;
+using Avalonia.Interactivity;
+using Avalonia.Media;
+using Avalonia.Layout;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class ContentPageDemo : UserControl
+{
+    private static readonly Color[] PageColors =
+    [
+        Color.FromRgb(0xE3, 0xF2, 0xFD), // blue
+        Color.FromRgb(0xF3, 0xE5, 0xF5), // purple
+        Color.FromRgb(0xE8, 0xF5, 0xE9), // green
+        Color.FromRgb(0xFF, 0xF8, 0xE1), // amber
+        Color.FromRgb(0xFB, 0xE9, 0xE7), // deep orange
+    ];
+
+    private int _pageCount;
+
+    public ContentPageDemo()
+    {
+        InitializeComponent();
+        Loaded += OnLoaded;
+    }
+
+    private async void OnLoaded(object? sender, RoutedEventArgs e)
+    {
+        await DemoNav.PushAsync(MakePage("Root Page", "ContentPage inside a NavigationPage.\nUse the options to navigate."));
+        UpdateStatus();
+    }
+
+    private async void OnPush(object? sender, RoutedEventArgs e)
+    {
+        _pageCount++;
+        await DemoNav.PushAsync(MakePage($"Page {_pageCount}", $"ContentPage #{_pageCount}.\nNavigate back using the back button."));
+        UpdateStatus();
+    }
+
+    private async void OnPop(object? sender, RoutedEventArgs e)
+    {
+        await DemoNav.PopAsync();
+        UpdateStatus();
+    }
+
+    private async void OnPopToRoot(object? sender, RoutedEventArgs e)
+    {
+        await DemoNav.PopToRootAsync();
+        _pageCount = 0;
+        UpdateStatus();
+    }
+
+    private void UpdateStatus()
+    {
+        StatusText.Text = $"Depth: {DemoNav.StackDepth} | Current: {DemoNav.CurrentPage?.Header}";
+    }
+
+    private ContentPage MakePage(string header, string body) =>
+        new ContentPage
+        {
+            Header = header,
+            Background = new SolidColorBrush(PageColors[_pageCount % PageColors.Length]),
+            Content = new StackPanel
+            {
+                HorizontalAlignment = HorizontalAlignment.Center,
+                VerticalAlignment = VerticalAlignment.Center,
+                Spacing = 10,
+                Children =
+                {
+                    new TextBlock
+                    {
+                        Text = header,
+                        FontSize = 20,
+                        FontWeight = FontWeight.SemiBold,
+                        HorizontalAlignment = HorizontalAlignment.Center,
+                        Foreground = Brushes.Black,
+                    },
+                    new TextBlock
+                    {
+                        Text = body,
+                        FontSize = 13,
+                        Opacity = 0.7,
+                        TextWrapping = TextWrapping.Wrap,
+                        TextAlignment = TextAlignment.Center,
+                        MaxWidth = 260,
+                        Foreground = Brushes.Black,
+                    }
+                }
+            },
+            HorizontalContentAlignment = HorizontalAlignment.Stretch,
+            VerticalContentAlignment = VerticalAlignment.Stretch
+        };
+}

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

@@ -0,0 +1,72 @@
+<UserControl
+    x:Class="Semi.Avalonia.Demo.Pages.DrawerPageDemo"
+    xmlns="https://github.com/avaloniaui"
+    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"
+    d:DesignHeight="700"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    <DockPanel>
+        <ScrollViewer DockPanel.Dock="Right" Width="260">
+            <StackPanel Margin="12" Spacing="8">
+                <TextBlock Text="Configuration" FontWeight="SemiBold" FontSize="16"
+                           Foreground="{DynamicResource SemiColorText0}" />
+
+                <Button Content="Toggle Drawer"
+                        HorizontalAlignment="Stretch"
+                        Click="OnToggleDrawer" />
+
+                <Separator />
+
+                <CheckBox Name="GestureCheck"
+                          Content="Gesture Enabled"
+                          IsChecked="True"
+                          IsCheckedChanged="OnGestureChanged" />
+
+                <Separator />
+
+                <TextBlock Text="Status" FontWeight="SemiBold" FontSize="14" />
+                <TextBlock Name="StatusText"
+                           Text="Drawer: Closed"
+                           Opacity="0.7"
+                           TextWrapping="Wrap" />
+            </StackPanel>
+        </ScrollViewer>
+
+        <Border DockPanel.Dock="Right" Width="1" Background="{DynamicResource SemiColorBackground0}" />
+
+        <Border Margin="12"
+                BorderBrush="{DynamicResource SemiColorBorder}"
+                BorderThickness="1"
+                CornerRadius="6"
+                ClipToBounds="True">
+            <DrawerPage Name="DemoDrawer"
+                        Header="First Look"
+                        DrawerLength="250">
+                <DrawerPage.DrawerHeader>
+                    <Border Padding="16" Background="{DynamicResource SemiColorPrimary}">
+                        <TextBlock Text="Menu" FontSize="18" FontWeight="SemiBold" Foreground="{DynamicResource SemiColorText0}" />
+                    </Border>
+                </DrawerPage.DrawerHeader>
+                <DrawerPage.Drawer>
+                    <ListBox Name="DrawerMenu" SelectionChanged="OnMenuSelectionChanged">
+                        <ListBoxItem Content="Home" />
+                        <ListBoxItem Content="Settings" />
+                        <ListBoxItem Content="Profile" />
+                        <ListBoxItem Content="About" />
+                    </ListBox>
+                </DrawerPage.Drawer>
+                <DrawerPage.Content>
+                    <ContentPage Header="Home">
+                        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Spacing="8">
+                            <TextBlock Text="Home Page" FontSize="20" FontWeight="SemiBold" HorizontalAlignment="Center" />
+                            <TextBlock Text="Swipe from the left edge or use the hamburger button to open the drawer."
+                                       FontSize="13" Opacity="0.7" TextWrapping="Wrap" TextAlignment="Center" MaxWidth="300" />
+                        </StackPanel>
+                    </ContentPage>
+                </DrawerPage.Content>
+            </DrawerPage>
+        </Border>
+    </DockPanel>
+</UserControl>

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

@@ -0,0 +1,68 @@
+using System;
+using Avalonia.Controls;
+using Avalonia.Interactivity;
+using Avalonia.Layout;
+using Avalonia.Media;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class DrawerPageDemo : UserControl
+{
+    public DrawerPageDemo()
+    {
+        InitializeComponent();
+    }
+
+    protected override void OnLoaded(RoutedEventArgs e)
+    {
+        base.OnLoaded(e);
+        DemoDrawer.Opened += OnDrawerStatusChanged;
+        DemoDrawer.Closed += OnDrawerStatusChanged;
+    }
+
+    protected override void OnUnloaded(RoutedEventArgs e)
+    {
+        base.OnUnloaded(e);
+        DemoDrawer.Opened -= OnDrawerStatusChanged;
+        DemoDrawer.Closed -= OnDrawerStatusChanged;
+    }
+
+    private void OnDrawerStatusChanged(object? sender, EventArgs e) => UpdateStatus();
+
+    private void OnToggleDrawer(object? sender, RoutedEventArgs e)
+    {
+        DemoDrawer.IsOpen = !DemoDrawer.IsOpen;
+    }
+
+    private void OnGestureChanged(object? sender, RoutedEventArgs e)
+    {
+        DemoDrawer.IsGestureEnabled = GestureCheck.IsChecked == true;
+    }
+
+    private void OnMenuSelectionChanged(object? sender, SelectionChangedEventArgs e)
+    {
+        if (DrawerMenu.SelectedItem is ListBoxItem item)
+        {
+            DemoDrawer.Content = new ContentPage
+            {
+                Header = item.Content?.ToString(),
+                Content = new TextBlock
+                {
+                    Text = $"{item.Content} page content",
+                    FontSize = 16,
+                    HorizontalAlignment = HorizontalAlignment.Center,
+                    VerticalAlignment = VerticalAlignment.Center,
+                    Foreground = Brushes.Black,
+                },
+                HorizontalContentAlignment = HorizontalAlignment.Stretch,
+                VerticalContentAlignment = VerticalAlignment.Stretch
+            };
+            DemoDrawer.IsOpen = false;
+        }
+    }
+
+    private void UpdateStatus()
+    {
+        StatusText.Text = $"Drawer: {(DemoDrawer.IsOpen ? "Open" : "Closed")}";
+    }
+}

demo/Semi.Avalonia.Demo/Pages/NavigationDemoHelper.cs

@@ -0,0 +1,66 @@
+using Avalonia.Controls;
+using Avalonia.Layout;
+using Avalonia.Media;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+/// <summary>
+/// Shared helpers for ControlCatalog demo pages.
+/// </summary>
+internal static class NavigationDemoHelper
+{
+    /// <summary>
+    /// Pastel background brushes cycled by page index.
+    /// </summary>
+    internal static readonly IBrush[] PageBrushes =
+    [
+        new SolidColorBrush(Color.Parse("#BBDEFB")),
+        new SolidColorBrush(Color.Parse("#C8E6C9")),
+        new SolidColorBrush(Color.Parse("#FFE0B2")),
+        new SolidColorBrush(Color.Parse("#E1BEE7")),
+        new SolidColorBrush(Color.Parse("#FFCDD2")),
+        new SolidColorBrush(Color.Parse("#B2EBF2"))
+    ];
+
+    internal static IBrush GetPageBrush(int index) =>
+        PageBrushes[(index % PageBrushes.Length + PageBrushes.Length) % PageBrushes.Length];
+
+    /// <summary>
+    /// Creates a simple demo ContentPage with a centered title and subtitle.
+    /// </summary>
+    internal static ContentPage MakePage(string header, string body, int colorIndex) =>
+        new()
+        {
+            Header = header,
+            Background = GetPageBrush(colorIndex),
+            Content = new StackPanel
+            {
+                HorizontalAlignment = HorizontalAlignment.Center,
+                VerticalAlignment = VerticalAlignment.Center,
+                Spacing = 8,
+                Children =
+                {
+                    new TextBlock
+                    {
+                        Text = header,
+                        FontSize = 20,
+                        FontWeight = FontWeight.SemiBold,
+                        HorizontalAlignment = HorizontalAlignment.Center,
+                        Foreground = Brushes.Black,
+                    },
+                    new TextBlock
+                    {
+                        Text = body,
+                        FontSize = 13,
+                        Opacity = 0.7,
+                        TextWrapping = TextWrapping.Wrap,
+                        TextAlignment = TextAlignment.Center,
+                        MaxWidth = 260,
+                        Foreground = Brushes.Black,
+                    }
+                }
+            },
+            HorizontalContentAlignment = HorizontalAlignment.Stretch,
+            VerticalContentAlignment = VerticalAlignment.Stretch
+        };
+}

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

@@ -0,0 +1,65 @@
+<UserControl
+    x:Class="Semi.Avalonia.Demo.Pages.NavigationPageDemo"
+    xmlns="https://github.com/avaloniaui"
+    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"
+    d:DesignHeight="700"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    <ScrollViewer>
+        <DockPanel>
+            <ScrollViewer DockPanel.Dock="Right" Width="260">
+                <StackPanel Margin="12" Spacing="8">
+                    <TextBlock Text="Configuration" FontWeight="SemiBold" FontSize="16" />
+                    <TextBlock Text="Navigation" FontWeight="SemiBold" FontSize="13" />
+
+                    <Button Content="Push Page"
+                            HorizontalAlignment="Stretch"
+                            Click="OnPush" />
+                    <Button Content="Pop"
+                            HorizontalAlignment="Stretch"
+                            Click="OnPop" />
+                    <Button Content="Pop to Root"
+                            HorizontalAlignment="Stretch"
+                            Click="OnPopToRoot" />
+
+                    <Separator />
+
+                    <TextBlock Text="Options" FontWeight="SemiBold" FontSize="14" />
+
+                    <CheckBox Name="HasNavBarCheck"
+                              Content="Has Navigation Bar"
+                              IsChecked="True"
+                              IsCheckedChanged="OnHasNavBarChanged" />
+                    <CheckBox Name="HasBackButtonCheck"
+                              Content="Has Back Button"
+                              IsChecked="True" 
+                              IsCheckedChanged="OnHasBackButonChanged" />
+
+                    <Separator />
+
+                    <TextBlock Text="Status" FontWeight="SemiBold" FontSize="14" />
+                    <TextBlock Name="StatusText"
+                               Text="Depth: 1"
+                               Opacity="0.7"
+                               TextWrapping="Wrap" />
+                    <TextBlock Name="HeaderText"
+                               Text="Current: Home"
+                               Opacity="0.7"
+                               TextWrapping="Wrap" />
+                </StackPanel>
+            </ScrollViewer>
+
+            <Border DockPanel.Dock="Right" Width="1" Background="{DynamicResource SemiColorBackground0}" />
+
+            <Border Margin="12"
+                    BorderBrush="{DynamicResource SemiColorBorder}"
+                    BorderThickness="1"
+                    CornerRadius="6"
+                    ClipToBounds="True">
+                <NavigationPage Name="DemoNav" />
+            </Border>
+        </DockPanel>
+    </ScrollViewer>
+</UserControl>

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

@@ -0,0 +1,66 @@
+using Avalonia.Controls;
+using Avalonia.Interactivity;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class NavigationPageDemo : UserControl
+{
+    private int _pageCount;
+
+    public NavigationPageDemo()
+    {
+        InitializeComponent();
+        Loaded += OnLoaded;
+    }
+
+    private async void OnLoaded(object? sender, RoutedEventArgs e)
+    {
+        await DemoNav.PushAsync(NavigationDemoHelper.MakePage("Home", "Welcome!\nUse the buttons to push and pop pages.", 0), null);
+        UpdateStatus();
+    }
+
+    private async void OnPush(object? sender, RoutedEventArgs e)
+    {
+        _pageCount++;
+        var page = NavigationDemoHelper.MakePage($"Page {_pageCount}", $"This is page {_pageCount}.", _pageCount);
+        NavigationPage.SetHasNavigationBar(page, HasNavBarCheck.IsChecked == true);
+        NavigationPage.SetHasBackButton(page, HasBackButtonCheck.IsChecked == true);
+        await DemoNav.PushAsync(page);
+        UpdateStatus();
+    }
+
+    private async void OnPop(object? sender, RoutedEventArgs e)
+    {
+        await DemoNav.PopAsync();
+        UpdateStatus();
+    }
+
+    private async void OnPopToRoot(object? sender, RoutedEventArgs e)
+    {
+        await DemoNav.PopToRootAsync();
+        _pageCount = 0;
+        UpdateStatus();
+    }
+
+    private void OnHasNavBarChanged(object? sender, RoutedEventArgs e)
+    {
+        if (DemoNav == null)
+            return;
+        if (DemoNav.CurrentPage != null)
+            NavigationPage.SetHasNavigationBar(DemoNav.CurrentPage, HasNavBarCheck.IsChecked == true);
+    }
+
+    private void OnHasBackButonChanged(object? sender, RoutedEventArgs e)
+    {
+        if (DemoNav == null)
+            return;
+        if (DemoNav.CurrentPage != null)
+            NavigationPage.SetHasBackButton(DemoNav.CurrentPage, HasBackButtonCheck.IsChecked == true);
+    }
+
+    private void UpdateStatus()
+    {
+        StatusText.Text = $"Depth: {DemoNav.StackDepth}";
+        HeaderText.Text = $"Current: {DemoNav.CurrentPage?.Header ?? "(none)"}";
+    }
+}

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

@@ -0,0 +1,80 @@
+<UserControl
+    x:Class="Semi.Avalonia.Demo.Pages.TabbedPageDemo"
+    xmlns="https://github.com/avaloniaui"
+    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"
+    d:DesignHeight="600"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    <DockPanel>
+        <ScrollViewer DockPanel.Dock="Right" Width="260">
+            <StackPanel Margin="12" Spacing="8">
+                <TextBlock Text="Configuration" FontWeight="SemiBold" FontSize="16"
+                           Foreground="{DynamicResource SemiColorText0}" />
+
+                <TextBlock Text="Tab Management" FontWeight="SemiBold" FontSize="13" />
+                <StackPanel Spacing="6">
+                    <Button Content="Add Tab" Click="OnAddTab" HorizontalAlignment="Stretch" />
+                    <Button Content="Remove Latest Tab" Click="OnRemoveTab" HorizontalAlignment="Stretch" />
+                </StackPanel>
+
+                <Separator />
+
+                <TextBlock Text="Tab Placement" FontWeight="SemiBold" FontSize="13" />
+                <ComboBox Name="PlacementCombo" SelectedIndex="0"
+                          SelectionChanged="OnPlacementChanged" HorizontalAlignment="Stretch">
+                    <ComboBoxItem Content="Top" />
+                    <ComboBoxItem Content="Bottom" />
+                    <ComboBoxItem Content="Left" />
+                    <ComboBoxItem Content="Right" />
+                </ComboBox>
+
+                <Separator />
+
+                <TextBlock Text="Status" FontWeight="SemiBold" FontSize="14" />
+                <TextBlock Name="StatusText"
+                           Text="3 tabs | Selected: Home (0)"
+                           Opacity="0.7"
+                           TextWrapping="Wrap" />
+            </StackPanel>
+        </ScrollViewer>
+
+        <Border DockPanel.Dock="Right" Width="1" Background="{DynamicResource SemiColorBackground0}" />
+
+        <Border Margin="12"
+                BorderBrush="{DynamicResource SemiColorBorder}"
+                BorderThickness="1"
+                CornerRadius="6"
+                ClipToBounds="True">
+            <TabbedPage Name="DemoTabs"
+                        TabPlacement="Top"
+                        SelectionChanged="OnSelectionChanged">
+                <ContentPage 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."
+                                   TextWrapping="Wrap" />
+                        <TextBlock Text="Use the panel on the right to add or remove tabs dynamically."
+                                   TextWrapping="Wrap" Opacity="0.7" />
+                    </StackPanel>
+                </ContentPage>
+                <ContentPage 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">
+                    <StackPanel Margin="16" Spacing="8">
+                        <TextBlock Text="Settings Tab" FontSize="24" FontWeight="Bold" />
+                        <CheckBox Content="Enable notifications" />
+                        <CheckBox Content="Dark mode" />
+                        <CheckBox Content="Auto-save" IsChecked="True" />
+                    </StackPanel>
+                </ContentPage>
+            </TabbedPage>
+        </Border>
+    </DockPanel>
+</UserControl>

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

@@ -0,0 +1,84 @@
+using System.Collections;
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Interactivity;
+using Avalonia.Media;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class TabbedPageDemo : UserControl
+{
+    private int _tabCounter = 3;
+
+    public TabbedPageDemo()
+    {
+        InitializeComponent();
+    }
+
+    private void OnAddTab(object? sender, RoutedEventArgs e)
+    {
+        var idx = ++_tabCounter;
+        var page = new ContentPage
+        {
+            Header = $"Tab {idx}",
+            Content = new StackPanel
+            {
+                Margin = new Thickness(16),
+                Spacing = 8,
+                Children =
+                {
+                    new TextBlock
+                    {
+                        Text = $"Tab {idx}",
+                        FontSize = 24,
+                        FontWeight = FontWeight.Bold,
+                    },
+                    new TextBlock
+                    {
+                        Text = $"This tab was added dynamically (tab #{idx}).",
+                        Opacity = 0.7,
+                        TextWrapping = TextWrapping.Wrap,
+                    }
+                }
+            }
+        };
+
+        ((IList)DemoTabs.Pages!).Add(page);
+        UpdateStatus();
+    }
+
+    private void OnRemoveTab(object? sender, RoutedEventArgs e)
+    {
+        var pages = (IList)DemoTabs.Pages!;
+        if (pages.Count > 1)
+        {
+            pages.RemoveAt(pages.Count - 1);
+            UpdateStatus();
+        }
+    }
+
+    private void OnPlacementChanged(object? sender, SelectionChangedEventArgs e)
+    {
+        if (DemoTabs == null) return;
+        DemoTabs.TabPlacement = PlacementCombo.SelectedIndex switch
+        {
+            1 => TabPlacement.Bottom,
+            2 => TabPlacement.Left,
+            3 => TabPlacement.Right,
+            _ => TabPlacement.Top
+        };
+    }
+
+    private void OnSelectionChanged(object? sender, PageSelectionChangedEventArgs e)
+    {
+        UpdateStatus();
+    }
+
+    private void UpdateStatus()
+    {
+        if (StatusText == null) return;
+        var pages = (IList)DemoTabs.Pages!;
+        var pageName = (DemoTabs.SelectedPage as ContentPage)?.Header?.ToString() ?? "—";
+        StatusText.Text = $"{pages.Count} tab{(pages.Count != 1 ? "s" : "")} | Selected: {pageName} ({DemoTabs.SelectedIndex})";
+    }
+}

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

@@ -215,6 +215,18 @@
             <TabItem
                 Theme="{DynamicResource CategoryTabItem}"
                 Header="Navigation" />
+            <TabItem Header="ContentPage">
+                <pages:ContentPageDemo />
+            </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>

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" />