一、先看效果： 二、本文背景有網(wǎng)友給站長(zhǎng)Dotnet9留言：“WPF中能否實(shí)現(xiàn)UWP中SplitView效果，即抽屜效果嗎？” Dotnet9記得國(guó)外開(kāi)源C# WPF控件庫(kù)MaterialDesignInXaml中有這種效果，可以查看本站寫(xiě)的推薦文章：MaterialDesignInXaml控件介紹，站長(zhǎng)也是個(gè)喜歡碼磚的人，對(duì)代碼是很感興趣的，遂Google了一個(gè)YouTube視頻敲出本文實(shí)現(xiàn)的代碼，希望對(duì)他和您有用。 三、代碼實(shí)現(xiàn)站長(zhǎng)使用.Net Core 3.1創(chuàng)建的WPF工程，創(chuàng)建PopUpAndNav解決方案后，需要添加兩個(gè)Nuget庫(kù)：MaterialDesignThemes和MaterialDesignColors。  添加Material兩個(gè)庫(kù)
工程比較簡(jiǎn)單，主要就是演示窗口MainWindow：  解決方案結(jié)構(gòu)代碼不多，我就全部貼上代碼吧。 添加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代碼，使用簡(jiǎn)單的自定義窗口，看效果圖，有右上角的標(biāo)題欄菜單及左上角的抽屜菜單：
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./markup-compatibility/2006" 6 xmlns:local="clr-namespace:PopUpAndNav" 7 xmlns:materialDesign="http:///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="賬號(hào)"/> 42 <Button Content="設(shè)置"/> 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="首頁(yè)" 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="創(chuàng)建" 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>
后臺(tái)MainWindow.xaml.cs，主要是處理窗體關(guān)閉事件及抽屜菜單的展開(kāi)與折疊：
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地址及本實(shí)例學(xué)習(xí)視頻。 參考：
|
|
|
