C ා WPF material design UI: navigation drawer & popup menu

Time is like running water, it can only flow away but not back!

Take a look at the praise and form a habit. This is the power you give me to create!

This article has been included in Dotnet9 https://dotnet9.com, and the webmaster is willing to share dotnet related technologies, such as Winform, WPF, ASP.NET Core, etc., as well as Qt Quick and Qt Widgets related to the C + + desktop, which only share the familiar and familiar ones.

1, First look at the effect:

2, Background

Some netizens left a message to dotnet9: "can WPF achieve SplitView effect in UWP, that is, drawer effect?" Dotnet9 remember the open source c ා WPF Control Library Abroad MaterialDesignInXaml For this effect, you can view the recommended articles written by this site: Introduction to MaterialDesignInXaml control , the webmaster is also a person who likes code bricks and is very interested in the code, so Google has a YouTube video to knock out the code implemented in this article, hoping to be useful to him and you.

3, Code implementation

The webmaster uses the WPF project created by. Net Core 3.1. After creating the PopUpAndNav solution, he needs to add two Nuget libraries: MaterialDesignThemes and MaterialDesignColors.

Add two libraries of Material

 

The project is relatively simple, mainly the demonstration window MainWindow:

Solution structure

There's not much code. I'll post all the codes.

Add MaterialDesignInXaml style: App.xaml

 1 <Application x:Class="PopUpAndNav.App"
 2              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4              xmlns:local="clr-namespace:PopUpAndNav"
 5              StartupUri="MainWindow.xaml">
 6     <Application.Resources>
 7         <ResourceDictionary>
 8             <ResourceDictionary.MergedDictionaries>
 9                 <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml"/>
10                 <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml"/>
11                 <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.Blue.xaml"/>
12                 <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Indigo.xaml"/>
13             </ResourceDictionary.MergedDictionaries>
14         </ResourceDictionary>
15     </Application.Resources>
16 </Application>
App.xaml

 

Show the code of MainWindow.xaml, use a simple custom window, look at the renderings, with the title bar menu in the upper right corner and the drawer menu in the upper left corner:

 1 <Window x:Class="PopUpAndNav.MainWindow"
 2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 5         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 6         xmlns:local="clr-namespace:PopUpAndNav"
 7         xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
 8         mc:Ignorable="d" Foreground="White"
 9         Title="MainWindow" Height="600" Width="1080" ResizeMode="NoResize" WindowStartupLocation="CenterScreen" WindowStyle="None">
10     <Window.Resources>
11         <Storyboard x:Key="MenuOpen">
12             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="GridMenu">
13                 <EasingDoubleKeyFrame KeyTime="0" Value="60"/>
14                 <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="200"/>
15             </DoubleAnimationUsingKeyFrames>
16         </Storyboard>
17         <Storyboard x:Key="MenuClose">
18             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="GridMenu">
19                 <EasingDoubleKeyFrame KeyTime="0" Value="200"/>
20                 <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="60"/>
21             </DoubleAnimationUsingKeyFrames>
22         </Storyboard>
23     </Window.Resources>
24 
25     <Window.Triggers>
26         <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="ButtonOpenMenu">
27             <BeginStoryboard Storyboard="{StaticResource MenuOpen}"/>
28         </EventTrigger>
29         <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="ButtonCloseMenu">
30             <BeginStoryboard Storyboard="{StaticResource MenuClose}"/>
31         </EventTrigger>
32     </Window.Triggers>
33     
34     <Grid Background="LightGray">
35         <Grid x:Name="GridTitle" Height="60" VerticalAlignment="Top" Background="#FF1368BD" MouseDown="GridTitle_MouseDown">
36             <TextBlock Text="C# WPF Drawer effect" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22"/>
37             <StackPanel VerticalAlignment="Center" Orientation="Horizontal" HorizontalAlignment="Right">
38                 <TextBlock Text="Dotnet9.com" VerticalAlignment="Center" FontSize="18"/>
39                 <materialDesign:PopupBox Foreground="White" Margin="10" PlacementMode="BottomAndAlignRightEdges" StaysOpen="False">
40                     <StackPanel Width="150">
41                         <Button Content="Account number"/>
42                         <Button Content="Set up"/>
43                         <Button Content="Help"/>
44                         <Separator/>
45                         <Button x:Name="ButtonPopUpLogout" Content="Logout" Click="ButtonPopUpLogout_Click"/>
46                     </StackPanel>
47                 </materialDesign:PopupBox>
48             </StackPanel>
49         </Grid>
50         <Grid x:Name="GridMenu" Width="60" HorizontalAlignment="Left" Background="#FF1B3861">
51             <StackPanel>
52                 <Grid Height="150" Background="White">
53                     <Button x:Name="ButtonCloseMenu" Width="60" Height="60" Background="{x:Null}" BorderBrush="{x:Null}" VerticalAlignment="Top" HorizontalAlignment="Right" Visibility="Collapsed" Click="ButtonCloseMenu_Click">
54                         <materialDesign:PackIcon Kind="ArrowLeft" Foreground="#FF1B3861" Width="25" Height="25"/>
55                     </Button>
56                     <Button x:Name="ButtonOpenMenu" Width="60" Height="60" Background="{x:Null}" BorderBrush="{x:Null}" VerticalAlignment="Top" HorizontalAlignment="Right" Click="ButtonOpenMenu_Click">
57                         <materialDesign:PackIcon Kind="Menu" Foreground="#FF1B3861" Width="25" Height="25"/>
58                     </Button>
59                 </Grid>
60                 <ListView ScrollViewer.HorizontalScrollBarVisibility="Disabled" Foreground="#FF1368BD">
61                     <ListViewItem Height="60">
62                         <StackPanel Orientation="Horizontal">
63                             <materialDesign:PackIcon Kind="ViewDashboard" Width="25" Height="25" Margin="10" VerticalAlignment="Center"/>
64                             <TextBlock Text="home page" VerticalAlignment="Center" Margin="20 10"/>
65                         </StackPanel>
66                     </ListViewItem>
67                     <ListViewItem Height="60">
68                         <StackPanel Orientation="Horizontal">
69                             <materialDesign:PackIcon Kind="Pencil" Width="25" Height="25" Margin="10" VerticalAlignment="Center"/>
70                             <TextBlock Text="Establish" VerticalAlignment="Center" Margin="20 10"/>
71                         </StackPanel>
72                     </ListViewItem>
73                     <ListViewItem Height="60">
74                         <StackPanel Orientation="Horizontal">
75                             <materialDesign:PackIcon Kind="Ticket" Width="25" Height="25" Margin="10" VerticalAlignment="Center"/>
76                             <TextBlock Text="Sell ticket" VerticalAlignment="Center" Margin="20 10"/>
77                         </StackPanel>
78                     </ListViewItem>
79                     <ListViewItem Height="60">
80                         <StackPanel Orientation="Horizontal">
81                             <materialDesign:PackIcon Kind="Message" Width="25" Height="25" Margin="10" VerticalAlignment="Center"/>
82                             <TextBlock Text="information" VerticalAlignment="Center" Margin="20 10"/>
83                         </StackPanel>
84                     </ListViewItem>
85                     <ListViewItem Height="60">
86                         <StackPanel Orientation="Horizontal">
87                             <materialDesign:PackIcon Kind="GithubBox" Width="25" Height="25" Margin="10" VerticalAlignment="Center"/>
88                             <TextBlock Text="GitHub" VerticalAlignment="Center" Margin="20 10"/>
89                         </StackPanel>
90                     </ListViewItem>
91                 </ListView>
92             </StackPanel>
93         </Grid>
94     </Grid>
95 </Window>
MainWindow.xaml

 

MainWindow.xaml.cs in the background mainly deals with window closing events and drawer menu expansion and folding:

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Text;
 5 using System.Threading.Tasks;
 6 using System.Windows;
 7 using System.Windows.Controls;
 8 using System.Windows.Data;
 9 using System.Windows.Documents;
10 using System.Windows.Input;
11 using System.Windows.Media;
12 using System.Windows.Media.Imaging;
13 using System.Windows.Navigation;
14 using System.Windows.Shapes;
15 
16 namespace PopUpAndNav
17 {
18     /// <summary>
19     /// Interaction logic for MainWindow.xaml
20     /// </summary>
21     public partial class MainWindow : Window
22     {
23         public MainWindow()
24         {
25             InitializeComponent();
26         }
27 
28         private void ButtonPopUpLogout_Click(object sender, RoutedEventArgs e)
29         {
30             Application.Current.Shutdown();
31         }
32 
33         private void ButtonOpenMenu_Click(object sender, RoutedEventArgs e)
34         {
35             ButtonOpenMenu.Visibility = Visibility.Collapsed;
36             ButtonCloseMenu.Visibility = Visibility.Visible;
37         }
38 
39         private void ButtonCloseMenu_Click(object sender, RoutedEventArgs e)
40         {
41             ButtonOpenMenu.Visibility = Visibility.Visible;
42             ButtonCloseMenu.Visibility = Visibility.Collapsed;
43         }
44         
45         private void GridTitle_MouseDown(object sender, MouseButtonEventArgs e)
46         {
47             DragMove();
48         }
49     }
50 }
MainWindow.xaml.cs
 

4, Article reference

The above code is from Dotnet9. Watch the WPF God video of dispatch com. Here is the God youtube address and the learning video of this example.

reference resources:
Design com WPF :  https://www.youtube.com/watch?v=YQ1EJJZBHyE

 

Unless otherwise noted, articles are written by Dotnet9 Organize and release, welcome to reprint.

For reprint, please indicate the address: https://dotnet9.com/2019/12/it-technology/csharp/wpf/csharp-wpf-material-design-ui-navigation-drawer-popup-menu.html

If you have any gains, please forward them vigorously (it's great to be able to praise and recommend them); if you think it's not easy to write a text, welcome Reward Dotnet9 Thank you for your attention and support to dotnet technology.

Tags: Windows Qt Google github

Posted on Tue, 28 Apr 2020 04:05:59 -0700 by Edison