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>

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>

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

src/Semi.Avalonia/Controls/ContentPage.axaml

@@ -16,27 +16,26 @@
     <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"
+                        DockPanel.Dock="Top" />
-                        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"
+                        DockPanel.Dock="Bottom" />
-                        Content="{TemplateBinding BottomCommandBar}" />
+                    <ContentPresenter
-                </Grid>
+                        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>

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="Background" Value="Transparent" />
-        <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}">
+                <Panel ClipToBounds="True">
-                    <!--  Top command bar  -->
+                    <DockPanel>
-                    <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"
+                            Name="PART_NavBarSpacer"
-                            MinHeight="{TemplateBinding BarHeight}"
+                            Height="{TemplateBinding EffectiveBarHeight}"
-                            Padding="{DynamicResource NavigationPageBarPadding}"
+                            IsVisible="False"
-                            VerticalAlignment="Top"
+                            DockPanel.Dock="Top" />
-                            Background="{DynamicResource NavigationPageBarBackground}"
+                        <ContentPresenter
-                            BorderBrush="{DynamicResource NavigationPageBarBorderBrush}"
+                            Name="PART_BottomCommandBar"
-                            BorderThickness="{DynamicResource NavigationPageBarBorderThickness}">
+                            DockPanel.Dock="Bottom"
-                            <Grid ColumnDefinitions="Auto,*,Auto">
+                            Background="{TemplateBinding Background}"
-                                <Button
+                            Content="{Binding CurrentPage.(NavigationPage.BottomCommandBar), RelativeSource={RelativeSource TemplatedParent}, FallbackValue={x:Null}}" />
-                                    Name="PART_BackButton"
+                        <Panel
-                                    Grid.Column="0"
+                            Name="PART_ContentHost"
-                                    MinHeight="{DynamicResource NavigationPageBarMinHeight}"
+                            Background="{TemplateBinding Background}"
-                                    MinWidth="{DynamicResource NavigationPageBarMinHeight}"
+                            ClipToBounds="True">
-                                    Padding="8"
+                            <ContentPresenter Name="PART_PageBackPresenter" />
-                                    VerticalAlignment="Center"
+                            <ContentPresenter Name="PART_PagePresenter" />
-                                    IsVisible="{TemplateBinding IsBackButtonEffectivelyVisible}"
+                        </Panel>
-                                    Background="{DynamicResource NavigationPageBackButtonBackground}"
+                    </DockPanel>
-                                    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  -->
+                    <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"
+                        Name="PART_ModalBackPresenter"
-                        Grid.Row="2" />
+                        ZIndex="99"
-                </Grid>
+                        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="^ /template/ Border#PART_NavigationBar">
-        <Style Selector="^:nav-bar-inset /template/ Border#PART_NavigationBar">
+            <Setter Property="Background" Value="{DynamicResource NavigationBarBackground}" />
-            <Setter Property="BorderThickness" Value="0" />
         </Style>
 
-        <!--  Compact navigation bar  -->
+        <Style Selector="^:nav-bar-inset /template/ Border#PART_NavBarSpacer">
-        <Style Selector="^:nav-bar-compact /template/ Border#PART_NavigationBar">
+            <Setter Property="IsVisible" Value="True" />
-            <Setter Property="MinHeight" Value="0" />
+        </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>

src/Semi.Avalonia/Controls/TabbedPage.axaml

@@ -11,8 +11,7 @@
                 <TabControl
                     Name="PART_TabControl"
                     Background="{TemplateBinding Background}"
-                    Theme="{StaticResource LineTabControl}"
+                    Theme="{StaticResource LineTabControl}" />
-                    ItemsSource="{TemplateBinding Pages}" />
             </ControlTemplate>
         </Setter>
     </ControlTheme>
@@ -22,8 +21,7 @@
                 <TabControl
                     Name="PART_TabControl"
                     Background="{TemplateBinding Background}"
-                    Theme="{StaticResource CardTabControl}"
+                    Theme="{StaticResource CardTabControl}" />
-                    ItemsSource="{TemplateBinding Pages}" />
             </ControlTemplate>
         </Setter>
     </ControlTheme>
@@ -33,8 +31,7 @@
                 <TabControl
                     Name="PART_TabControl"
                     Background="{TemplateBinding Background}"
-                    Theme="{StaticResource ButtonTabControl}"
+                    Theme="{StaticResource ButtonTabControl}" />
-                    ItemsSource="{TemplateBinding Pages}" />
             </ControlTemplate>
         </Setter>
     </ControlTheme>

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>

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>

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>

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