Skip to content

NavigationRail, NavigationBar, NavigationDrawer controls for MaterialDesign3 #2628

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
Keboo merged 17 commits into from
Apr 15, 2022
Merged

NavigationRail, NavigationBar, NavigationDrawer controls for MaterialDesign3 #2628

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
c6fd7e1
Test Material Design 3 Listbox
StefanoRivolta-Previero Feb 10, 2022
15fe77b
Update Material Design 3 Navigation Rail
StefanoRivolta-Previero Feb 14, 2022
36fa8d4
Merge branch 'master' into listbox
StefanoRivolta-Previero Feb 14, 2022
1ce20e2
merge
StefanoRivolta-Previero Mar 23, 2022
24fcd3f
Merge branch 'master' into listbox
StefanoRivolta-Previero Mar 29, 2022
289e990
Fix Shadow bug in Drawer
StefanoRivolta-Previero Mar 30, 2022
06b0a84
Add NavigationRail, NavigationBar, NavigationDrawer
StefanoRivolta-Previero Mar 30, 2022
76a6e5c
Add NavigationRail and NavigationBar pages
StefanoRivolta-Previero Mar 30, 2022
029db6b
Showcase new Navigation controls in DemoApp
StefanoRivolta-Previero Mar 30, 2022
76c528c
Merge branch 'master' into listbox
StefanoRivolta-Previero Mar 30, 2022
98f234b
Update MaterialDesign3.Demo.Wpf/Domain/SampleItem.cs
StefanoRivolta-Previero Mar 31, 2022
9414d8d
Change style names
StefanoRivolta-Previero Apr 4, 2022
9c9babe
Add XamlDisplay
StefanoRivolta-Previero Apr 4, 2022
56f742e
Add new Badged Style
StefanoRivolta-Previero Apr 4, 2022
ed21dee
Add badge to navigation controls
StefanoRivolta-Previero Apr 4, 2022
9e8e6fe
Add badge examples
StefanoRivolta-Previero Apr 4, 2022
bd3a881
Fix nullable warning
StefanoRivolta-Previero Apr 4, 2022
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
9 changes: 8 additions & 1 deletion MaterialDesign3.Demo.Wpf/Domain/DemoItem.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
using System.Collections.Generic;
using System.Windows;
using System.Windows.Controls;
using MaterialDesignThemes.Wpf;

namespace MaterialDesign3Demo.Domain
{
Expand All @@ -15,12 +16,15 @@ public class DemoItem : ViewModelBase
private ScrollBarVisibility _verticalScrollBarVisibilityRequirement = ScrollBarVisibility.Auto;
private Thickness _marginRequirement = new(16);

public DemoItem(string name, Type contentType, IEnumerable<DocumentationLink> documentation, object? dataContext = null)
public DemoItem(string name, Type contentType, IEnumerable<DocumentationLink> documentation,
PackIconKind selectedIcon, PackIconKind unselectedIcon, object? dataContext = null)
{
Name = name;
_contentType = contentType;
_dataContext = dataContext;
Documentation = documentation;
SelectedIcon = selectedIcon;
UnselectedIcon = unselectedIcon;
}

public string Name { get; }
Expand All @@ -29,6 +33,9 @@ public DemoItem(string name, Type contentType, IEnumerable<DocumentationLink> do

public object? Content => _content ??= CreateContent();

public PackIconKind SelectedIcon { get; set; }
public PackIconKind UnselectedIcon { get; set; }

public ScrollBarVisibility HorizontalScrollBarVisibilityRequirement
{
get => _horizontalScrollBarVisibilityRequirement;
Expand Down
152 changes: 118 additions & 34 deletions MaterialDesign3.Demo.Wpf/Domain/MainWindowViewModel.cs
View file
Open in desktop

Large diffs are not rendered by default.

10 changes: 10 additions & 0 deletions MaterialDesign3.Demo.Wpf/Domain/SampleItem.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
using MaterialDesignThemes.Wpf;

namespace MaterialDesign3Demo.Domain;

public class SampleItem
{
public string Title { get; set; }
public PackIconKind SelectedIcon { get; set; }
public PackIconKind UnselectedIcon { get; set; }
}
14 changes: 7 additions & 7 deletions MaterialDesign3.Demo.Wpf/Home.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,13 +65,13 @@

<ScrollViewer
Grid.Row="1"
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Disabled"
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Auto"
HorizontalAlignment="Center"
VerticalAlignment="Bottom"
Margin="0 0 0 32">
<Grid>
<StackPanel Orientation="Horizontal">
<WrapPanel Orientation="Horizontal" Margin="0 20 0 0">
<materialDesign:Card
Width="420"
Margin="4 2 8 16"
Expand Down Expand Up @@ -252,11 +252,11 @@
</Border>
</Grid>
</materialDesign:Card>
</StackPanel>
</WrapPanel>
</Grid>
</ScrollViewer>

<materialDesign:PopupBox
<!--<materialDesign:PopupBox
Style="{StaticResource MaterialDesignMultiFloatingActionPopupBox}"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
Expand All @@ -279,7 +279,7 @@
ToolTip="Chat"
Click="ChatButton_OnClick"
Content="{materialDesign:PackIcon Kind=Message, Size=20}">
<!-- mix up the colours by bringing in a named palette (see merged dictionaries at top) -->
--><!-- mix up the colours by bringing in a named palette (see merged dictionaries at top) --><!--
<Button.Background>
<SolidColorBrush Color="{StaticResource GreenPrimary500}"/>
</Button.Background>
Expand Down Expand Up @@ -309,6 +309,6 @@
</Button.Foreground>
</Button>
</StackPanel>
</materialDesign:PopupBox>
</materialDesign:PopupBox>-->
</Grid>
</UserControl>
230 changes: 155 additions & 75 deletions MaterialDesign3.Demo.Wpf/MainWindow.xaml
View file
Open in desktop

Large diffs are not rendered by default.

58 changes: 48 additions & 10 deletions MaterialDesign3.Demo.Wpf/MainWindow.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
using System.Windows.Controls.Primitives;
using System.Windows.Input;
using System.Windows.Media;
using System.Configuration;

namespace MaterialDesign3Demo
{
Expand Down Expand Up @@ -43,16 +44,19 @@ public MainWindow()

private void UIElement_OnPreviewMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
//until we had a StaysOpen glag to Drawer, this will help with scroll bars
var dependencyObject = Mouse.Captured as DependencyObject;

while (dependencyObject != null)
if (NavDrawer.OpenMode is not DrawerHostOpenMode.Standard)
{
if (dependencyObject is ScrollBar) return;
dependencyObject = VisualTreeHelper.GetParent(dependencyObject);
}
//until we had a StaysOpen glag to Drawer, this will help with scroll bars
var dependencyObject = Mouse.Captured as DependencyObject;

while (dependencyObject != null)
{
if (dependencyObject is ScrollBar) return;
dependencyObject = VisualTreeHelper.GetParent(dependencyObject);
}

MenuToggleButton.IsChecked = false;
MenuToggleButton.IsChecked = false;
}
}

private async void MenuPopupButton_OnClick(object sender, RoutedEventArgs e)
Expand Down Expand Up @@ -80,10 +84,10 @@ private void OnCopy(object sender, ExecutedRoutedEventArgs e)
}
}

private void MenuToggleButton_OnClick(object sender, RoutedEventArgs e)
private void MenuToggleButton_OnClick(object sender, RoutedEventArgs e)
=> DemoItemsSearchBox.Focus();

private void MenuDarkModeButton_Click(object sender, RoutedEventArgs e)
private void MenuDarkModeButton_Click(object sender, RoutedEventArgs e)
=> ModifyTheme(DarkModeToggleButton.IsChecked == true);

private static void ModifyTheme(bool isDarkTheme)
Expand All @@ -97,5 +101,39 @@ private static void ModifyTheme(bool isDarkTheme)

private void OnSelectedItemChanged(object sender, DependencyPropertyChangedEventArgs e)
=> MainScrollViewer.ScrollToHome();

private void GitHubButton_OnClick(object sender, RoutedEventArgs e)
=> Link.OpenInBrowser(ConfigurationManager.AppSettings["GitHub"]);

private void Window_SizeChanged(object sender, SizeChangedEventArgs e)
{
if (ActualWidth <= 700)
{
NavRail.Visibility = Visibility.Collapsed;
NavBar.Visibility = Visibility.Visible;
NavDrawer.OpenMode = DrawerHostOpenMode.Modal;
NavDrawer.IsLeftDrawerOpen = false;
MenuToggleButton.Visibility = Visibility.Visible;
FAB.Visibility = Visibility.Visible;
}
else if (ActualWidth > 700 && ActualWidth <= 1600)
{
NavRail.Visibility = Visibility.Visible;
NavBar.Visibility = Visibility.Collapsed;
NavDrawer.OpenMode = DrawerHostOpenMode.Modal;
NavDrawer.IsLeftDrawerOpen = false;
MenuToggleButton.Visibility = Visibility.Visible;
FAB.Visibility = Visibility.Collapsed;
}
else if (ActualWidth > 1600)
{
NavRail.Visibility = Visibility.Collapsed;
NavBar.Visibility = Visibility.Collapsed;
NavDrawer.OpenMode = DrawerHostOpenMode.Standard;
NavDrawer.IsLeftDrawerOpen = true;
MenuToggleButton.Visibility = Visibility.Collapsed;
FAB.Visibility = Visibility.Visible;
}
}
}
}
199 changes: 199 additions & 0 deletions MaterialDesign3.Demo.Wpf/NavigationBar.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,199 @@
<UserControl x:Class="MaterialDesign3Demo.NavigationBar"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:smtx="clr-namespace:ShowMeTheXAML;assembly=ShowMeTheXAML"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
xmlns:local="clr-namespace:MaterialDesign3Demo"
xmlns:domain="clr-namespace:MaterialDesign3Demo.Domain"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<Grid>
<StackPanel>

<StackPanel>
<TextBlock Text="Normal"/>

<Button Height="56" Width="56"
Background="{DynamicResource SecondaryHueMidBrush}"
Foreground="{DynamicResource SecondaryHueMidBrushForeground}"
BorderThickness="0"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
materialDesign:ButtonAssist.CornerRadius="16"
Margin="16">
<materialDesign:PackIcon Kind="PencilOutline"
Width="24"
Height="24"/>
</Button>

<Grid Height="80"
Background="{DynamicResource MaterialDesignCardBackground}">
<ListBox Height="80"
Copy link
Member

@Keboo Keboo Mar 31, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would wrap each of these ListBoxes in a XamlDisplay control (this is from the ShowMeTheXaml package). It is what provides the little button people can click on to see the XAML contained within it.

SelectedIndex="0"
Style="{StaticResource MaterialDesign3NavigationBarPrimaryListBox}">
<ListBoxItem>
<ListBoxItem.Style>
<Style TargetType="ListBoxItem" BasedOn="{StaticResource MaterialDesign3NavigationBarPrimaryListBoxItem}">
<Setter Property="materialDesign:NavigationBarAssist.SelectedIcon" Value="Circle"/>
<Setter Property="materialDesign:NavigationBarAssist.UnselectedIcon" Value="CircleOutline"/>
</Style>
</ListBoxItem.Style>
<TextBlock Text="text 1"/>
</ListBoxItem>
<ListBoxItem >
<ListBoxItem.Style>
<Style TargetType="ListBoxItem" BasedOn="{StaticResource MaterialDesign3NavigationBarPrimaryListBoxItem}">
<Setter Property="materialDesign:NavigationBarAssist.SelectedIcon" Value="Triangle"/>
<Setter Property="materialDesign:NavigationBarAssist.UnselectedIcon" Value="TriangleOutline"/>
</Style>
</ListBoxItem.Style>
<TextBlock Text="text 2"/>
</ListBoxItem>
<ListBoxItem >
<ListBoxItem.Style>
<Style TargetType="ListBoxItem" BasedOn="{StaticResource MaterialDesign3NavigationBarPrimaryListBoxItem}">
<Setter Property="materialDesign:NavigationBarAssist.SelectedIcon" Value="Receipt"/>
<Setter Property="materialDesign:NavigationBarAssist.UnselectedIcon" Value="ReceiptOutline"/>
</Style>
</ListBoxItem.Style>
<TextBlock Text="text 3"/>
</ListBoxItem>
</ListBox>
</Grid>
</StackPanel>

<StackPanel Margin="0 20 0 0">
<TextBlock Text="MVVM"/>

<Grid Height="80"
Background="{DynamicResource MaterialDesignCardBackground}">
<ListBox Height="80"
ItemsSource="{Binding SampleList}"
SelectedIndex="0"
Style="{StaticResource MaterialDesign3NavigationBarListBox}">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem" BasedOn="{StaticResource MaterialDesign3NavigationBarListBoxItem}">
<Setter Property="materialDesign:NavigationBarAssist.SelectedIcon" Value="{Binding SelectedIcon}"/>
<Setter Property="materialDesign:NavigationBarAssist.UnselectedIcon" Value="{Binding UnselectedIcon}"/>
<Setter Property="materialDesign:NavigationBarAssist.IsTextVisible" Value="True"/>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.Resources>
<DataTemplate DataType="{x:Type domain:SampleItem}">
<TextBlock Text="{Binding Title}"/>
</DataTemplate>
</ListBox.Resources>
</ListBox>
</Grid>
</StackPanel>

<StackPanel Margin="0 20 0 0">
<TextBlock Text="Without Text"/>

<Grid Height="80"
Background="{DynamicResource MaterialDesignCardBackground}">
<ListBox Height="80"
ItemsSource="{Binding SampleList}"
SelectedIndex="0"
Style="{StaticResource MaterialDesign3NavigationBarPrimaryListBox}">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem" BasedOn="{StaticResource MaterialDesign3NavigationBarPrimaryListBoxItem}">
<Setter Property="materialDesign:NavigationBarAssist.SelectedIcon" Value="{Binding SelectedIcon}"/>
<Setter Property="materialDesign:NavigationBarAssist.UnselectedIcon" Value="{Binding UnselectedIcon}"/>
<Setter Property="materialDesign:NavigationBarAssist.IsTextVisible" Value="False"/>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.Resources>
<DataTemplate DataType="{x:Type domain:SampleItem}">
<TextBlock Text="{Binding Title}"/>
</DataTemplate>
</ListBox.Resources>
</ListBox>
</Grid>
</StackPanel>


<StackPanel Margin="0 20 0 0">
<TextBlock Text="Custom Color"/>

<Button Height="56"
Width="56"
Background="#633B48"
Foreground="#FFD8E4"
BorderThickness="0"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
materialDesign:ButtonAssist.CornerRadius="16"
Margin="16">
<materialDesign:PackIcon Kind="PencilOutline" Width="24" Height="24"/>
</Button>

<Grid Height="80" Background="#25232A">
<ListBox Height="80" ItemsSource="{Binding SampleList}" SelectedIndex="0" Foreground="#E8DEF8"
Style="{StaticResource MaterialDesign3NavigationBarPrimaryListBox}">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem" BasedOn="{StaticResource MaterialDesign3NavigationBarPrimaryListBoxItem}">
<Setter Property="Foreground" Value="#E8DEF8"/>
<Setter Property="Background" Value="#4A4458"/>
<Setter Property="materialDesign:NavigationBarAssist.SelectedIcon" Value="{Binding SelectedIcon}"/>
<Setter Property="materialDesign:NavigationBarAssist.UnselectedIcon" Value="{Binding UnselectedIcon}"/>
<Setter Property="materialDesign:NavigationBarAssist.IsTextVisible" Value="True"/>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.Resources>
<DataTemplate DataType="{x:Type domain:SampleItem}">
<TextBlock Text="{Binding Title}"/>
</DataTemplate>
</ListBox.Resources>
</ListBox>
</Grid>
</StackPanel>

<StackPanel Margin="0 20 0 0">
<TextBlock Text="Custom Size"/>

<Button Height="96" Width="96"
Background="#633B48"
Foreground="#FFD8E4"
BorderThickness="0"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
materialDesign:ButtonAssist.CornerRadius="28"
Margin="16">
<materialDesign:PackIcon Kind="PencilOutline" Width="36" Height="36"/>
</Button>

<Grid Height="160"
Background="#25232A">
<ListBox ItemsSource="{Binding SampleList}"
SelectedIndex="0"
Foreground="#E8DEF8"
Style="{StaticResource MaterialDesign3NavigationBarPrimaryListBox}">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem" BasedOn="{StaticResource MaterialDesign3NavigationBarPrimaryListBoxItem}">
<Setter Property="Foreground" Value="#E8DEF8"/>
<Setter Property="Background" Value="#4A4458"/>
<Setter Property="FontSize" Value="24"/>
<Setter Property="materialDesign:NavigationBarAssist.SelectionHeight" Value="64"/>
<Setter Property="materialDesign:NavigationBarAssist.SelectionWidth" Value="128"/>
<Setter Property="materialDesign:NavigationBarAssist.SelectionCornerRadius" Value="32"/>
<Setter Property="materialDesign:NavigationBarAssist.SelectedIcon" Value="{Binding SelectedIcon}"/>
<Setter Property="materialDesign:NavigationBarAssist.UnselectedIcon" Value="{Binding UnselectedIcon}"/>
<Setter Property="materialDesign:NavigationBarAssist.IsTextVisible" Value="True"/>
<Setter Property="materialDesign:NavigationBarAssist.IconSize" Value="48"/>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.Resources>
<DataTemplate DataType="{x:Type domain:SampleItem}">
<TextBlock Text="{Binding Title}"/>
</DataTemplate>
</ListBox.Resources>
</ListBox>
</Grid>
</StackPanel>
</StackPanel>

</Grid>
</UserControl>
Loading