Skip to content

Added Bottom on NavigationViewPaneDisplayMode #582

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
pomianowski merged 1 commit into from
Apr 23, 2023
Merged

Added Bottom on NavigationViewPaneDisplayMode #582

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
94 changes: 93 additions & 1 deletion src/Wpf.Ui.Gallery/Views/Pages/Navigation/NavigationViewPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>

<Grid Grid.Row="0" Margin="42">
Expand Down Expand Up @@ -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}"
Expand Down
3 changes: 2 additions & 1 deletion src/Wpf.Ui/Controls/Navigation/NavigationViewPaneDisplayMode.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ public enum NavigationViewPaneDisplayMode
/// <summary>
/// The pane is shown at the top of the control.
/// </summary>
Top
Top,
Bottom
}

177 changes: 177 additions & 0 deletions src/Wpf.Ui/Styles/Controls/NavigationView.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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>

Expand Down