From 6798bb7b869199f3c314cba082cda807000fd623 Mon Sep 17 00:00:00 2001
From: zh3305 <zh3305@gmail.com>
Date: Fri, 7 Apr 2023 13:44:59 +0800
Subject: [PATCH] Added Bottom on NavigationViewPaneDisplayMode

---
 .../Pages/Navigation/NavigationViewPage.xaml  |  94 +++++++++-
 .../NavigationViewPaneDisplayMode.cs          |   3 +-
 .../Styles/Controls/NavigationView.xaml       | 177 ++++++++++++++++++
 3 files changed, 272 insertions(+), 2 deletions(-)

diff --git a/src/Wpf.Ui.Gallery/Views/Pages/Navigation/NavigationViewPage.xaml b/src/Wpf.Ui.Gallery/Views/Pages/Navigation/NavigationViewPage.xaml
index 7dda64f59..9c150498a 100644
--- a/src/Wpf.Ui.Gallery/Views/Pages/Navigation/NavigationViewPage.xaml
+++ b/src/Wpf.Ui.Gallery/Views/Pages/Navigation/NavigationViewPage.xaml
@@ -34,6 +34,7 @@
                     <RowDefinition Height="Auto" />
                     <RowDefinition Height="Auto" />
                     <RowDefinition Height="Auto" />
+                    <RowDefinition />
                 </Grid.RowDefinitions>
 
                 <Grid Grid.Row="0" Margin="42">
@@ -292,8 +293,99 @@
                     </controls:GalleryControlPresenter>
                 </Grid>
 
+
+                <Grid Grid.Row="3" Margin="42,0,42,42">
+                    <controls:GalleryControlPresenter
+                        Margin="0"
+                        Padding="0"
+                        HeaderText="WPF UI Bottom NavigationView.">
+                        <ui:NavigationView
+                            MinHeight="300"
+                            Margin="0"
+                            IsBackButtonVisible="Auto"
+                            IsPaneToggleVisible="False"
+                            PaneDisplayMode="Bottom">
+                            <ui:NavigationView.MenuItems>
+                                <ui:NavigationViewItem
+                                    Content="Menu Item 1"
+                                    Icon="{ui:SymbolIcon Home24}"
+                                    TargetPageType="{x:Type samples:SamplePage1}" />
+                                <ui:NavigationViewItem
+                                    Content="Menu Item 2"
+                                    Icon="{ui:SymbolIcon AppFolder24}"
+                                    TargetPageType="{x:Type samples:SamplePage2}" />
+                                <ui:NavigationViewItem
+                                    Content="Menu Item 3"
+                                    Icon="{ui:SymbolIcon BezierCurveSquare20}"
+                                    TargetPageType="{x:Type samples:SamplePage3}" />
+                                <ui:NavigationViewItem
+                                    Content="Menu Item 4"
+                                    Icon="{ui:SymbolIcon Library24}"
+                                    TargetPageType="{x:Type samples:SamplePage1}" />
+                            </ui:NavigationView.MenuItems>
+                            <ui:NavigationView.FooterMenuItems>
+                                <ui:NavigationViewItem Icon="{ui:SymbolIcon Settings24}" TargetPageType="{x:Type samples:SamplePage3}" />
+                            </ui:NavigationView.FooterMenuItems>
+                            <ui:NavigationView.AutoSuggestBox>
+                                <ui:AutoSuggestBox
+                                    MinWidth="140"
+                                    Margin="0"
+                                    PlaceholderText="Search" />
+                            </ui:NavigationView.AutoSuggestBox>
+                            <ui:NavigationView.PaneHeader>
+                                <Border
+                                    Margin="8,0"
+                                    VerticalAlignment="Stretch"
+                                    Background="{DynamicResource StripedBackgroundBrush}"
+                                    CornerRadius="4">
+                                    <TextBlock
+                                        Margin="24,0"
+                                        VerticalAlignment="Center"
+                                        FontWeight="Medium"
+                                        Foreground="{ui:ThemeResource TextFillColorSecondaryBrush}"
+                                        Text="Pane Header" />
+                                </Border>
+                            </ui:NavigationView.PaneHeader>
+                            <ui:NavigationView.PaneFooter>
+                                <Border
+                                    Margin="8,0"
+                                    VerticalAlignment="Stretch"
+                                    Background="{DynamicResource StripedBackgroundBrush}"
+                                    CornerRadius="4">
+                                    <TextBlock
+                                        Margin="24,0"
+                                        VerticalAlignment="Center"
+                                        FontWeight="Medium"
+                                        Foreground="{ui:ThemeResource TextFillColorSecondaryBrush}"
+                                        Text="Pane Footer" />
+                                </Border>
+                            </ui:NavigationView.PaneFooter>
+                            <ui:NavigationView.Header>
+                                <Border
+                                    Margin="8"
+                                    Background="{DynamicResource StripedBackgroundBrush}"
+                                    CornerRadius="4">
+                                    <TextBlock
+                                        Margin="24"
+                                        VerticalAlignment="Center"
+                                        FontWeight="Medium"
+                                        Foreground="{ui:ThemeResource TextFillColorSecondaryBrush}"
+                                        Text="NavigationView Header" />
+                                </Border>
+                            </ui:NavigationView.Header>
+                        </ui:NavigationView>
+                        <controls:GalleryControlPresenter.CodeText>
+                            &lt;ui:NavigationView PaneDisplayMode=&quot;Bottom&quot; &gt;\n
+                            \t&lt;ui:NavigationView.MenuItems&gt;\n
+                            \t\t&lt;ui:NavigationViewItem Content=&quot;Home&quot; Icon=&quot;Home24&quot; /&gt;\n
+                            \t&lt;/ui:NavigationView.MenuItems&gt;\n
+                            &lt;/ui:NavigationView&gt;
+                        </controls:GalleryControlPresenter.CodeText>
+                    </controls:GalleryControlPresenter>
+                </Grid>
+
                 <controls:ControlDocumentationSummary
-                    Grid.Row="3"
+                    Grid.Row="4"
                     Margin="42,24,42,42"
                     HorizontalAlignment="Left"
                     CsharpUrl="{StaticResource PageCsharpUrl}"
diff --git a/src/Wpf.Ui/Controls/Navigation/NavigationViewPaneDisplayMode.cs b/src/Wpf.Ui/Controls/Navigation/NavigationViewPaneDisplayMode.cs
index 33f646702..a8e26c35d 100644
--- a/src/Wpf.Ui/Controls/Navigation/NavigationViewPaneDisplayMode.cs
+++ b/src/Wpf.Ui/Controls/Navigation/NavigationViewPaneDisplayMode.cs
@@ -32,6 +32,7 @@ public enum NavigationViewPaneDisplayMode
     /// <summary>
     /// The pane is shown at the top of the control.
     /// </summary>
-    Top
+    Top,
+    Bottom
 }
 
diff --git a/src/Wpf.Ui/Styles/Controls/NavigationView.xaml b/src/Wpf.Ui/Styles/Controls/NavigationView.xaml
index 97ed441ef..82dcbdefe 100644
--- a/src/Wpf.Ui/Styles/Controls/NavigationView.xaml
+++ b/src/Wpf.Ui/Styles/Controls/NavigationView.xaml
@@ -1173,6 +1173,179 @@
             </Trigger>
         </ControlTemplate.Triggers>
     </ControlTemplate>
+    <!--  Bottom  -->
+
+    <ControlTemplate x:Key="BottomNavigationViewTemplate" TargetType="{x:Type navigation:NavigationView}">
+        <Grid>
+            <Grid.RowDefinitions>
+                <RowDefinition Height="*" />
+                <RowDefinition Height="Auto" />
+            </Grid.RowDefinitions>
+
+            <Grid Grid.Row="0">
+                <Grid.RowDefinitions>
+                    <RowDefinition Height="Auto" />
+                    <RowDefinition Height="*" />
+                </Grid.RowDefinitions>
+
+                <!--  Header  -->
+                <ContentPresenter
+                Grid.Row="0"
+                Margin="0"
+                Content="{TemplateBinding Header}"
+                Visibility="{TemplateBinding HeaderVisibility}" />
+
+                <!--  Page content  -->
+                <navigation:NavigationViewContentPresenter
+                x:Name="PART_NavigationViewContentPresenter"
+                Grid.Row="1"
+                Margin="{TemplateBinding Padding}"
+                TransitionDuration="{TemplateBinding TransitionDuration}"
+                TransitionType="{TemplateBinding TransitionType}" />
+
+                <!--  Overlay  -->
+                <ContentPresenter
+                Grid.Row="0"
+                Grid.RowSpan="2"
+                Margin="0"
+                Content="{TemplateBinding ContentOverlay}" />
+            </Grid>
+            <Grid x:Name="PaneGrid" Grid.Row="1">
+                <Grid.ColumnDefinitions>
+                    <ColumnDefinition Width="Auto" />
+                    <ColumnDefinition Width="Auto" />
+                    <ColumnDefinition Width="*" />
+                    <ColumnDefinition Width="Auto" />
+                    <ColumnDefinition Width="Auto" />
+                    <ColumnDefinition Width="Auto" />
+                </Grid.ColumnDefinitions>
+
+                <controls:Button
+                    x:Name="PART_BackButton"
+                    Grid.Column="0"
+                    IsEnabled="{TemplateBinding IsBackEnabled}"
+                    Style="{StaticResource BasePaneButtonStyle}"
+                    Visibility="{TemplateBinding IsBackButtonVisible,
+                                                 Converter={StaticResource BackButtonVisibilityToVisibilityConverter}}">
+                    <controls:Button.Icon>
+                        <iconElements:SymbolIcon Symbol="ArrowLeft48" />
+                    </controls:Button.Icon>
+                </controls:Button>
+
+                <!--  Pane header  -->
+                <ContentPresenter
+                    Grid.Column="1"
+                    Margin="0"
+                    Content="{TemplateBinding PaneHeader}" />
+
+                <ItemsControl
+                    x:Name="PART_MenuItemsItemsControl"
+                    Grid.Column="2"
+                    Focusable="False"
+                    KeyboardNavigation.DirectionalNavigation="Contained"
+                    ScrollViewer.HorizontalScrollBarVisibility="Disabled"
+                    ScrollViewer.VerticalScrollBarVisibility="Disabled">
+                    <ItemsControl.ItemsPanel>
+                        <ItemsPanelTemplate>
+                            <StackPanel
+                                Margin="0"
+                                IsItemsHost="True"
+                                Orientation="Horizontal" />
+                        </ItemsPanelTemplate>
+                    </ItemsControl.ItemsPanel>
+                </ItemsControl>
+
+                <!--  Auto Suggest Box  -->
+                <ContentPresenter Grid.Column="3" Content="{TemplateBinding AutoSuggestBox}" />
+
+                <!--  Pane footer  -->
+                <ContentPresenter
+                    Grid.Column="4"
+                    Margin="0"
+                    Content="{TemplateBinding PaneFooter}" />
+
+                <ItemsControl
+                    x:Name="PART_FooterMenuItemsItemsControl"
+                    Grid.Column="5"
+                    Focusable="False"
+                    KeyboardNavigation.DirectionalNavigation="Contained"
+                    ScrollViewer.HorizontalScrollBarVisibility="Disabled"
+                    ScrollViewer.VerticalScrollBarVisibility="Disabled">
+                    <ItemsControl.ItemsPanel>
+                        <ItemsPanelTemplate>
+                            <StackPanel
+                                Margin="0"
+                                IsItemsHost="True"
+                                Orientation="Horizontal" />
+                        </ItemsPanelTemplate>
+                    </ItemsControl.ItemsPanel>
+                </ItemsControl>
+            </Grid>
+        </Grid>
+    </ControlTemplate>
+
+    <ControlTemplate x:Key="BottomCompactNavigationViewItemTemplate" TargetType="{x:Type navigation:NavigationViewItem}">
+        <Border x:Name="MainBorder">
+            <Grid>
+                <Grid Margin="12,8,12,8">
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="Auto" />
+                        <ColumnDefinition Width="*" />
+                    </Grid.ColumnDefinitions>
+                    <Grid Grid.Column="0">
+                        <ContentPresenter
+                            x:Name="IconContentPresenter"
+                            Margin="0,0,6,0"
+                            HorizontalAlignment="Center"
+                            VerticalAlignment="Center"
+                            Content="{TemplateBinding Icon}"
+                            TextElement.FontSize="16"
+                            TextElement.Foreground="{DynamicResource TextFillColorPrimaryBrush}" />
+                    </Grid>
+                    <ContentPresenter
+                        x:Name="ElementContentPresenter"
+                        Grid.Column="1"
+                        HorizontalAlignment="Left"
+                        VerticalAlignment="Center"
+                        Content="{TemplateBinding Content}"
+                        TextElement.FontSize="14"
+                        TextElement.Foreground="{TemplateBinding Foreground}" />
+                </Grid>
+                <Rectangle
+                    x:Name="ActiveRectangle"
+                    Grid.Column="0"
+                    Width="16"
+                    Height="3"
+                    Margin="0,0,0,-4"
+                    HorizontalAlignment="Center"
+                    VerticalAlignment="Bottom"
+                    Opacity="0.0"
+                    RadiusX="2"
+                    RadiusY="2">
+                    <Rectangle.Fill>
+                        <SolidColorBrush Color="{DynamicResource SystemAccentColorSecondary}" />
+                    </Rectangle.Fill>
+                </Rectangle>
+            </Grid>
+        </Border>
+        <ControlTemplate.Triggers>
+            <Trigger Property="IsActive" Value="True">
+                <Setter TargetName="ActiveRectangle" Property="Opacity" Value="1.0" />
+            </Trigger>
+            <Trigger Property="Icon" Value="{x:Null}">
+                <Setter TargetName="IconContentPresenter" Property="Visibility" Value="Collapsed" />
+            </Trigger>
+            <Trigger Property="Content" Value="{x:Null}">
+                <Setter TargetName="IconContentPresenter" Property="Margin" Value="0" />
+                <Setter TargetName="ElementContentPresenter" Property="Visibility" Value="Collapsed" />
+            </Trigger>
+            <Trigger Property="Content" Value="">
+                <Setter TargetName="IconContentPresenter" Property="Margin" Value="0" />
+                <Setter TargetName="ElementContentPresenter" Property="Visibility" Value="Collapsed" />
+            </Trigger>
+        </ControlTemplate.Triggers>
+    </ControlTemplate>
+
 
     <Style x:Key="DefaultNavigationViewStyle" TargetType="{x:Type navigation:NavigationView}">
         <Setter Property="Foreground">
@@ -1211,6 +1384,10 @@
                 <Setter Property="Template" Value="{StaticResource TopNavigationViewTemplate}" />
                 <Setter Property="ItemTemplate" Value="{StaticResource TopCompactNavigationViewItemTemplate}" />
             </Trigger>
+            <Trigger Property="PaneDisplayMode" Value="Bottom">
+                <Setter Property="Template" Value="{StaticResource BottomNavigationViewTemplate}" />
+                <Setter Property="ItemTemplate" Value="{StaticResource BottomCompactNavigationViewItemTemplate}" />
+            </Trigger>
         </Style.Triggers>
     </Style>