前言：
此时你们对“html抽屉菜单”都比较关注，大家都想要了解一些“html抽屉菜单”的相关文章。那么小编在网络上收集了一些对于“html抽屉菜单””的相关内容，希望咱们能喜欢，兄弟们一起来学习一下吧！微信公众号：Dotnet9，网站：Dotnet9，问题或建议，请网站留言； 如果您觉得Dotnet9对您有帮助，欢迎赞赏
C# WPF 响应式布局和抽屉式菜单导航
内容目录
实现效果业务场景编码实现本文参考源码下载1.实现效果
效果
2.业务场景
常规业务
3.编码实现3.1 添加Nuget库
使用 .Net Core 3.1 创建名为 “ResponsiveLayout” 的WPF解决方案，添加两个Nuget库：MaterialDesignThemes和MaterialDesignColors。
MaterialDesign控件库
3.2 工程结构
3个文件变动：
App.xaml：添加MD控件样式MainWindow.xaml：主窗口实现效果MainWindow.xaml.cs：主窗口后台实现抽屉菜单开和闭3.3 App.xaml引入MD控件样式
关键样式引用代码
<Application.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" /> <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" /> <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.DeepPurple.xaml" /> <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" /> </ResourceDictionary.MergedDictionaries> </ResourceDictionary></Application.Resources>3.4 主窗体 MainWindow.xaml
全部代码，菜单及右侧布局
<Window x:Class="ResponsiveLayout.MainWindow" xmlns="; xmlns:x="; xmlns:d="; xmlns:mc="; xmlns:local="clr-namespace:ResponsiveLayout" xmlns:materialDesign="; mc:Ignorable="d" Title="MainWindow" Height="450" Width="800"> <Window.Resources> <Storyboard x:Key="CloseMenu"> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Width)" Storyboard.TargetName="grid"> <EasingDoubleKeyFrame KeyTime="0" Value="200"/> <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="70"/> </DoubleAnimationUsingKeyFrames> </Storyboard> <Storyboard x:Key="OpenMenu"> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Width)" Storyboard.TargetName="grid"> <EasingDoubleKeyFrame KeyTime="0" Value="70"/> <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="200"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </Window.Resources> <Grid> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="auto"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Grid Background="#FFCBCBCB" Grid.Column="1"> <Grid Margin="0 20 0 0" Background="#FFEEEEEE"> <Grid Height="100" Background="#FFEEEEEE" VerticalAlignment="Top" HorizontalAlignment="Stretch" Margin="10"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Border BorderBrush="White" BorderThickness="0 0 1 0" Grid.Column="0"> <TextBlock FontSize="30" Text="R$ 860,90" Foreground="Black" Margin="15"/> </Border> <Border BorderBrush="White" BorderThickness="0 0 1 0" Grid.Column="1"> <TextBlock FontSize="30" Text="R$ 750,90" Foreground="Black" Margin="15"/> </Border> <Border BorderBrush="White" BorderThickness="0 0 1 0" Grid.Column="2"> <TextBlock FontSize="30" Text="R$ 60,90" Foreground="Black" Margin="15"/> </Border> <Border BorderBrush="White" BorderThickness="0 0 1 0" Grid.Column="3"> <TextBlock FontSize="30" Text="R$ 865,90" Foreground="Black" Margin="15"/> </Border> </Grid> </Grid> </Grid> <Grid x:Name="grid" Width="200" Background="#FF6C6C8D" RenderTransformOrigin="0.5,0.5" Grid.Column="0"> <Button x:Name="button" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="10" Style="{StaticResource MaterialDesignFlatButton}" Click="Button_Click"> <materialDesign:PackIcon Kind="Menu" Foreground="White"/> </Button> </Grid> </Grid> </Grid></Window>3.5 MainWindow.xaml.cs关键代码，简单的菜单开、闭动画播放
private void Button_Click(object sender, RoutedEventArgs e){ if (MenuClosed) { Storyboard openMenu = (Storyboard)button.FindResource("OpenMenu"); openMenu.Begin(); } else { Storyboard closeMenu = (Storyboard)button.FindResource("CloseMenu"); closeMenu.Begin(); } MenuClosed = !MenuClosed;}4.本文参考Design com WPF 大神的学习视频：Responsive Layout and Menu Navigation Drawer
开源控件库：MaterialDesignInXamlToolkit
本站对MD开源控件库的介绍：控件介绍
5.代码下载
Github源码下载：ResponsiveLayout
除非注明，文章均由 Dotnet9 整理发布，欢迎转载。
转载请注明本文地址：
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #html抽屉菜单
