時間は水のようなものです、あなたは流れに戻って行くことができません！
再び親指アップ、あなたは私の創造力を与えるということです習慣、！
Dotnet9が既に含まれてhttps://dotnet9.comこの記事では、所有者は、単に自分の馴染みを共有し、そのようなWinフォーム、WPF、ASP.NETコア、など、またデスクトップC ++のQtクイックとQtのウィジェットに関連しているとして、株式DOTNET関連技術に満足しています自分の意志。
まず、結果を見て：
二、本文背景
マスターDotnet9メッセージに一部のインターネットユーザー：「WPFは、その引き出しの効果にSplitView効果でUWPでそれを達成することができますか？」Dotnet9は外国覚えているオープンソースのC＃WPFコントロールライブラリMaterialDesignInXamlはこの効果を持っている、あなたはサイト書かれた推薦資料を表示することができますMaterialDesignInXamlをコントロールが導入され、その後、GoogleがYouTubeのビデオは、この記事で実装されたコードをノックアウトし、あなたが彼に役立ちます願っています、また、レンガのようなコードであるウェブマスターは、コードは非常に興味を持っています、。
第三に、コードの実装
MaterialDesignThemesとMaterialDesignColors：所有者はネットコア3.1 WPFのプロジェクトを使用して作成した後、PopUpAndNavソリューションを作成し、我々は2つのNugetライブラリを追加する必要があります。
2つのライブラリー素材を追加
このプロジェクトは、主にプレゼンテーションウィンドウのメインウィンドウは比較的簡単です：
ソリューションの構造
コードはずっと、私はすべてのコードを貼り付けます。
MaterialDesignInXamlスタイルを追加します。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>
演示窗口MainWindow.xaml代码，使用简单的自定义窗口，看效果图，有右上角的标题栏菜单及左上角的抽屉菜单：
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 抽屉效果" 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="账号"/> 42 <Button Content="设置"/> 43 <Button Content="帮助"/> 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="首页" 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="创建" 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="售票" 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="信息" 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.cs，主要是处理窗体关闭事件及抽屉菜单的展开与折叠：
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 }
四、文章参考
上面的代码是Dotnet9看 Disign com WPF 大神视频手敲的，下面是大神youtube地址及本实例学习视频。
参考：
Design com WPF ： https://www.youtube.com/watch?v=YQ1EJJZBHyE
除非注明，文章均由 Dotnet9 整理发布，欢迎转载。
アドレスを指定してくださいこの記事を転載：https://dotnet9.com/2019/12/it-technology/csharp/wpf/csharp-wpf-material-design-ui-navigation-drawer-popup-menu.html
収穫した場合、前方精力的に（親指とそれが優れてお勧めすることができます）してください。書かれたテキストを小さく感じることは容易ではないとして、歓迎サイトDotnet9に報酬を、小さなはあなたに感謝し、関心とDOTNET技術のサポートに感謝します。