From 3b4443cd54fac2e1ca7b6be0b8cf9e4df992cb54 Mon Sep 17 00:00:00 2001
From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
Date: Tue, 7 Apr 2026 23:53:11 +0800
Subject: [PATCH] Fix CarouselPage ControlTemplate and sync NavigationPage
 template (#791)

* fix: specify TargetType in ControlTemplate for CarouselPage and remove redundant ItemsSource bindings in TabbedPage.

* feat: sync ContentPage with Avalonia Fluent version.

* fix: sync upstream NavigationPage template.

* feat: adjust NavigationPage bar height and add large style support

* feat: add ToggleSwitch for large style support in NavigationPageDemo

---------

Co-authored-by: Dong Bin <popmessiah@hotmail.com>
---
 .../Pages/NavigationPageDemo.axaml            |   5 +-
 src/Semi.Avalonia/Controls/CarouselPage.axaml |   2 +-
 src/Semi.Avalonia/Controls/ContentPage.axaml  |  31 ++--
 .../Controls/NavigationPage.axaml             | 173 ++++++++++--------
 src/Semi.Avalonia/Controls/TabbedPage.axaml   |   9 +-
 .../Themes/Dark/NavigationPage.axaml          |   9 -
 .../Themes/HighContrast/NavigationPage.axaml  |   9 -
 .../Themes/Light/NavigationPage.axaml         |  11 +-
 .../Themes/Shared/NavigationPage.axaml        |   3 +-
 9 files changed, 127 insertions(+), 125 deletions(-)

diff --git a/demo/Semi.Avalonia.Demo/Pages/NavigationPageDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/NavigationPageDemo.axaml
index 055e20a..d965a25 100644
--- a/demo/Semi.Avalonia.Demo/Pages/NavigationPageDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/NavigationPageDemo.axaml
@@ -48,6 +48,7 @@
                                Text="Current: Home"
                                Opacity="0.7"
                                TextWrapping="Wrap" />
+                    <ToggleSwitch Content="Large" Name="large" />
                 </StackPanel>
             </ScrollViewer>
 
@@ -58,7 +59,9 @@
                     BorderThickness="1"
                     CornerRadius="6"
                     ClipToBounds="True">
-                <NavigationPage Name="DemoNav" />
+                <NavigationPage 
+                    Name="DemoNav" 
+                    Classes.Large="{Binding #large.IsChecked}" />
             </Border>
         </DockPanel>
     </ScrollViewer>
diff --git a/src/Semi.Avalonia/Controls/CarouselPage.axaml b/src/Semi.Avalonia/Controls/CarouselPage.axaml
index 1e6da26..778aaac 100644
--- a/src/Semi.Avalonia/Controls/CarouselPage.axaml
+++ b/src/Semi.Avalonia/Controls/CarouselPage.axaml
@@ -4,7 +4,7 @@
     <ControlTheme x:Key="{x:Type CarouselPage}" TargetType="CarouselPage">
         <Setter Property="Background" Value="Transparent" />
         <Setter Property="Template">
-            <ControlTemplate>
+            <ControlTemplate TargetType="CarouselPage">
                 <Carousel
                     Name="PART_Carousel"
                     Background="{TemplateBinding Background}"
diff --git a/src/Semi.Avalonia/Controls/ContentPage.axaml b/src/Semi.Avalonia/Controls/ContentPage.axaml
index 9ab5ba5..9c17062 100644
--- a/src/Semi.Avalonia/Controls/ContentPage.axaml
+++ b/src/Semi.Avalonia/Controls/ContentPage.axaml
@@ -16,28 +16,27 @@
     <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}">
+                <DockPanel>
                     <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}" />
+                        DockPanel.Dock="Top" />
                     <ContentPresenter
                         Name="PART_BottomCommandBar"
-                        Grid.Row="2"
-                        Content="{TemplateBinding BottomCommandBar}" />
-                </Grid>
+                        DockPanel.Dock="Bottom" />
+                    <ContentPresenter
+                        Name="PART_ContentPresenter"
+                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                        Background="{TemplateBinding Background}"
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        CornerRadius="{TemplateBinding CornerRadius}"
+                        Content="{TemplateBinding Content}"
+                        ContentTemplate="{TemplateBinding ContentTemplate}" />
+                </DockPanel>
             </ControlTemplate>
         </Setter>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Controls/NavigationPage.axaml b/src/Semi.Avalonia/Controls/NavigationPage.axaml
index 26ef8d1..2658f14 100644
--- a/src/Semi.Avalonia/Controls/NavigationPage.axaml
+++ b/src/Semi.Avalonia/Controls/NavigationPage.axaml
@@ -6,89 +6,118 @@
     </Design.PreviewWith>
 
     <ControlTheme x:Key="{x:Type NavigationPage}" TargetType="NavigationPage">
-        <Setter Property="Background" Value="{DynamicResource NavigationPageBackground}" />
-        <Setter Property="Foreground" Value="{DynamicResource NavigationPageForeground}" />
+        <Setter Property="Background" Value="Transparent" />
         <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)  -->
+                <Panel ClipToBounds="True">
+                    <DockPanel>
                         <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>
+                            Name="PART_NavBarSpacer"
+                            Height="{TemplateBinding EffectiveBarHeight}"
+                            IsVisible="False"
+                            DockPanel.Dock="Top" />
+                        <ContentPresenter
+                            Name="PART_BottomCommandBar"
+                            DockPanel.Dock="Bottom"
+                            Background="{TemplateBinding Background}"
+                            Content="{Binding CurrentPage.(NavigationPage.BottomCommandBar), RelativeSource={RelativeSource TemplatedParent}, FallbackValue={x:Null}}" />
+                        <Panel
+                            Name="PART_ContentHost"
+                            Background="{TemplateBinding Background}"
+                            ClipToBounds="True">
+                            <ContentPresenter Name="PART_PageBackPresenter" />
+                            <ContentPresenter Name="PART_PagePresenter" />
+                        </Panel>
+                    </DockPanel>
 
-                    <!--  Bottom command bar  -->
+                    <Border
+                        Name="PART_NavigationBar"
+                        VerticalAlignment="Top"
+                        MinHeight="{TemplateBinding EffectiveBarHeight}"
+                        Padding="{DynamicResource NavigationPageBarPadding}"
+                        Background="{DynamicResource NavigationPageBarBackground}"
+                        BorderBrush="{DynamicResource NavigationPageBarBorderBrush}"
+                        BorderThickness="{DynamicResource NavigationPageBarBorderThickness}">
+                        <Grid ColumnDefinitions="Auto,*,Auto">
+                            <Button
+                                Name="PART_BackButton"
+                                Grid.Column="0"
+                                Classes="Tertiary"
+                                Height="{TemplateBinding BarHeight}"
+                                Width="{TemplateBinding BarHeight}"
+                                Padding="8"
+                                IsVisible="{TemplateBinding IsBackButtonEffectivelyVisible}"
+                                Theme="{StaticResource BorderlessButton}">
+                                <Panel Background="Transparent">
+                                    <PathIcon
+                                        Name="PART_BackButtonDefaultIcon"
+                                        Theme="{StaticResource InnerPathIcon}"
+                                        Data="{DynamicResource NavigationPageBackButtonGlyph}" />
+                                    <ContentPresenter
+                                        Name="PART_BackButtonContentPresenter"
+                                        VerticalAlignment="Center"
+                                        HorizontalAlignment="Center" />
+                                </Panel>
+                            </Button>
+                            <ContentPresenter
+                                Name="PART_Header"
+                                Grid.Column="1"
+                                FontWeight="SemiBold"
+                                Content="{Binding CurrentPage?.Header, RelativeSource={RelativeSource TemplatedParent}, FallbackValue={x:Null}}"
+                                ContentTemplate="{Binding CurrentPage?.HeaderTemplate, RelativeSource={RelativeSource TemplatedParent}, FallbackValue={x:Null}}"
+                                VerticalAlignment="Center"
+                                Margin="12,0" />
+                            <ContentPresenter
+                                Name="PART_TopCommandBar"
+                                Grid.Column="2"
+                                HorizontalAlignment="Right"
+                                Content="{Binding CurrentPage?.(NavigationPage.TopCommandBar), RelativeSource={RelativeSource TemplatedParent}, FallbackValue={x:Null}}" />
+                        </Grid>
+                    </Border>
+
+                    <Border
+                        Name="PART_NavBarShadow"
+                        ZIndex="1"
+                        VerticalAlignment="Top"
+                        IsVisible="False"
+                        Height="4"
+                        IsHitTestVisible="False">
+                        <Border.Background>
+                            <LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
+                                <GradientStop Color="#0C000000" Offset="0" />
+                                <GradientStop Color="#00000000" Offset="1" />
+                            </LinearGradientBrush>
+                        </Border.Background>
+                    </Border>
                     <ContentPresenter
-                        Name="PART_BottomCommandBar"
-                        Grid.Row="2" />
-                </Grid>
+                        Name="PART_ModalBackPresenter"
+                        ZIndex="99"
+                        IsVisible="False"
+                        Background="{TemplateBinding Background}" />
+                    <ContentPresenter
+                        Name="PART_ModalPresenter"
+                        ZIndex="100"
+                        IsVisible="False"
+                        Background="{TemplateBinding Background}" />
+                </Panel>
             </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 Selector="^ /template/ Border#PART_NavigationBar">
+            <Setter Property="Background" Value="{DynamicResource NavigationBarBackground}" />
         </Style>
 
-        <!--  Compact navigation bar  -->
-        <Style Selector="^:nav-bar-compact /template/ Border#PART_NavigationBar">
-            <Setter Property="MinHeight" Value="0" />
+        <Style Selector="^:nav-bar-inset /template/ Border#PART_NavBarSpacer">
+            <Setter Property="IsVisible" Value="True" />
+        </Style>
+
+        <Style Selector="^:nav-bar-compact /template/ ContentPresenter#PART_TopCommandBar CommandBar">
+            <Setter Property="DefaultLabelPosition" Value="Collapsed" />
+        </Style>
+        
+        <Style Selector="^.Large">
+            <Setter Property="BarHeight" Value="{DynamicResource NavigationPageBarLargeMinHeight}" />
         </Style>
     </ControlTheme>
 </ResourceDictionary>
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Controls/TabbedPage.axaml b/src/Semi.Avalonia/Controls/TabbedPage.axaml
index 64b68b7..a3a69f9 100644
--- a/src/Semi.Avalonia/Controls/TabbedPage.axaml
+++ b/src/Semi.Avalonia/Controls/TabbedPage.axaml
@@ -11,8 +11,7 @@
                 <TabControl
                     Name="PART_TabControl"
                     Background="{TemplateBinding Background}"
-                    Theme="{StaticResource LineTabControl}"
-                    ItemsSource="{TemplateBinding Pages}" />
+                    Theme="{StaticResource LineTabControl}" />
             </ControlTemplate>
         </Setter>
     </ControlTheme>
@@ -22,8 +21,7 @@
                 <TabControl
                     Name="PART_TabControl"
                     Background="{TemplateBinding Background}"
-                    Theme="{StaticResource CardTabControl}"
-                    ItemsSource="{TemplateBinding Pages}" />
+                    Theme="{StaticResource CardTabControl}" />
             </ControlTemplate>
         </Setter>
     </ControlTheme>
@@ -33,8 +31,7 @@
                 <TabControl
                     Name="PART_TabControl"
                     Background="{TemplateBinding Background}"
-                    Theme="{StaticResource ButtonTabControl}"
-                    ItemsSource="{TemplateBinding Pages}" />
+                    Theme="{StaticResource ButtonTabControl}" />
             </ControlTemplate>
         </Setter>
     </ControlTheme>
diff --git a/src/Semi.Avalonia/Themes/Dark/NavigationPage.axaml b/src/Semi.Avalonia/Themes/Dark/NavigationPage.axaml
index 3b68d1b..e21ef94 100644
--- a/src/Semi.Avalonia/Themes/Dark/NavigationPage.axaml
+++ b/src/Semi.Avalonia/Themes/Dark/NavigationPage.axaml
@@ -1,14 +1,5 @@
 <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>
diff --git a/src/Semi.Avalonia/Themes/HighContrast/NavigationPage.axaml b/src/Semi.Avalonia/Themes/HighContrast/NavigationPage.axaml
index c80946b..a079740 100644
--- a/src/Semi.Avalonia/Themes/HighContrast/NavigationPage.axaml
+++ b/src/Semi.Avalonia/Themes/HighContrast/NavigationPage.axaml
@@ -1,14 +1,5 @@
 <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>
diff --git a/src/Semi.Avalonia/Themes/Light/NavigationPage.axaml b/src/Semi.Avalonia/Themes/Light/NavigationPage.axaml
index 3b68d1b..0dc6e95 100644
--- a/src/Semi.Avalonia/Themes/Light/NavigationPage.axaml
+++ b/src/Semi.Avalonia/Themes/Light/NavigationPage.axaml
@@ -1,14 +1,5 @@
 <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>
+</ResourceDictionary>
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Themes/Shared/NavigationPage.axaml b/src/Semi.Avalonia/Themes/Shared/NavigationPage.axaml
index 7275100..f8cb8a3 100644
--- a/src/Semi.Avalonia/Themes/Shared/NavigationPage.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/NavigationPage.axaml
@@ -1,6 +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>
+    <x:Double x:Key="NavigationPageBarMinHeight">32</x:Double>
+    <x:Double x:Key="NavigationPageBarLargeMinHeight">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" />