wpf prism左侧抽屉式菜单

2024-03-08 15:36
文章标签 菜单 wpf 左侧 prism 抽屉式

本文主要是介绍wpf prism左侧抽屉式菜单，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.首先引入包MaterialDesignColors和MaterialDesignThemes

2.主页面布局

在这里插入图片描述
在这里插入图片描述

左侧菜单显示在窗体外，点击左上角菜单图标通过简单的动画呈现出来

3.左侧窗体外菜单

<Grid x:Name="GridMenu" Width="150" HorizontalAlignment="Left" Margin="-150 0 0 0"  RenderTransformOrigin="0.5,0.5" Background="#4169E1"><Grid.RenderTransform><TransformGroup><ScaleTransform/><SkewTransform/><RotateTransform/><TranslateTransform/></TransformGroup></Grid.RenderTransform><StackPanel><Image Source="../Images/head.png"/ Margin="50,20"><ListView Foreground="White" FontFamily="Champagne &amp; Limousines" FontSize="18" ItemsSource="{Binding MenuList}"><ListView.ItemTemplate><DataTemplate><StackPanel Orientation="Horizontal" Margin="0,10,0,0"><Button Style="{DynamicResource MenuButtonStyle}"Command="{Binding DataContext.ShowRegionCommand, RelativeSource={RelativeSource AncestorType={x:Type ListView}}}"CommandParameter="{Binding ElementName=txtRegion}"/><TextBlock Text="{Binding Path = RegionName}" Visibility="Collapsed" Name="txtRegion"/></StackPanel></DataTemplate></ListView.ItemTemplate></ListView></StackPanel><Button x:Name="ButtonClose" HorizontalAlignment="Right" VerticalAlignment="Top" Background="{x:Null}" Foreground="White" BorderBrush="{x:Null}" Width="30" Height="30" Padding="0"><materialDesign:PackIcon Kind="Close"/></Button>
</Grid>

这里头像的图片写死了，需要的自己替换。

4.菜单样式

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"><Storyboard x:Key="CloseMenu"><DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="GridMenu"><EasingDoubleKeyFrame KeyTime="0" Value="150"/><EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/></DoubleAnimationUsingKeyFrames><DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="GridBackground"><EasingDoubleKeyFrame KeyTime="0" Value="1"/><EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/></DoubleAnimationUsingKeyFrames><DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Width" Storyboard.TargetName="ContentGrid"><EasingDoubleKeyFrame KeyTime="0" Value="1290"/><!--初始宽度绑定到根Grid的宽度--><EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1440"/><!--减去菜单的宽度--></DoubleAnimationUsingKeyFrames><ObjectAnimationUsingKeyFrames  Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="ButtonOpen"><DiscreteObjectKeyFrame  KeyTime="0"><DiscreteObjectKeyFrame.Value><Visibility>Visible</Visibility></DiscreteObjectKeyFrame.Value></DiscreteObjectKeyFrame></ObjectAnimationUsingKeyFrames></Storyboard><Storyboard x:Key="OpenMenu"><DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="GridMenu"><EasingDoubleKeyFrame KeyTime="0" Value="0"/><EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="150"/></DoubleAnimationUsingKeyFrames><DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="GridBackground"><EasingDoubleKeyFrame KeyTime="0" Value="0"/><EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/></DoubleAnimationUsingKeyFrames><DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Width" Storyboard.TargetName="ContentGrid"><EasingDoubleKeyFrame KeyTime="0" Value="1440"/><!--初始宽度绑定到根Grid的宽度--><EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1290"/><!--减去菜单的宽度--></DoubleAnimationUsingKeyFrames><ObjectAnimationUsingKeyFrames  Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="ButtonOpen"><DiscreteObjectKeyFrame  KeyTime="0"><DiscreteObjectKeyFrame.Value><Visibility>Hidden</Visibility></DiscreteObjectKeyFrame.Value></DiscreteObjectKeyFrame></ObjectAnimationUsingKeyFrames></Storyboard><Style TargetType="Button" x:Key="MenuButtonStyle"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="Button"><Border Name="back" BorderThickness="0" Width="130"><StackPanel Orientation="Horizontal" Margin="0"><materialDesign:PackIcon Kind="{Binding Path = Icon}" Width="20" Height="20" Foreground="White" Margin="20,10,0,0" VerticalAlignment="Center"/><TextBlock Text="{Binding Path = Name}" Margin="10,10,0,0"  Foreground="White" FontFamily="微软雅黑" /></StackPanel></Border><ControlTemplate.Triggers><Trigger Property="IsPressed" Value="True"><Setter Property="Background" Value="Transparent" TargetName="back"/></Trigger><Trigger Property="IsMouseOver" Value="True"><Setter Property="Background" Value="Transparent" TargetName="back"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style>
</ResourceDictionary>

5.主页面事件

<Window.Triggers><EventTrigger RoutedEvent="ButtonBase.Click" SourceName="ButtonClose"><BeginStoryboard x:Name="CloseMenu_BeginStoryboard" Storyboard="{StaticResource CloseMenu}"/></EventTrigger><EventTrigger RoutedEvent="ButtonBase.Click" SourceName="ButtonOpen"><BeginStoryboard Storyboard="{StaticResource OpenMenu}"/></EventTrigger>
</Window.Triggers>

6.主页面内容

    <Grid x:Name="ContentGrid" HorizontalAlignment="Right" Width="1440"><Grid.RowDefinitions><RowDefinition  Height="80"></RowDefinition><RowDefinition></RowDefinition></Grid.RowDefinitions><Grid Background="#4169E1"><Grid x:Name="GridBackground" Background="#55313131" Opacity="0"/><Button x:Name="ButtonOpen" HorizontalAlignment="Left" VerticalAlignment="Top" Background="{x:Null}" BorderBrush="{x:Null}" Width="30" Height="30" Padding="0"><materialDesign:PackIcon Kind="Menu" Foreground="#FF313131"/></Button><!--窗体控件按钮--><StackPanel Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Right"><Button Width="40" Height="30" Style="{StaticResource PathButtonStyle}" Foreground="White" Tag="M0 0,10 0" /><Button Width="40" Height="30" Style="{StaticResource PathButtonStyle}" Foreground="White" Tag="M0 0,0 10,12 10,12 0Z" /><Button Width="50" Height="30" Style="{StaticResource PathButtonStyle}" Foreground="White" Tag="M0 0,12 12M0 12,12 0" /></StackPanel></Grid><ContentControl x:Name="Main" prism:RegionManager.RegionName="ContentRegion"  Grid.Row="1"/></Grid>
</Grid>

7.后台C#代码

private readonly IRegionManager _regionManager;public MainWindowViewModel(IRegionManager regionManager){_regionManager = regionManager;ShowRegionCommand = new DelegateCommand<object>(ShowRegion);InitMenus();}private void ShowRegion(object o){var text = (o as TextBlock).Text;_regionManager.RequestNavigate("ContentRegion", text);}private ObservableCollection<MenuModel> _menuList;public ObservableCollection<MenuModel> MenuList{get { return _menuList; }set{SetProperty(ref _menuList, value);}}
private void InitMenus()
{MenuList = new ObservableCollection<MenuModel>();MenuList.Add(new MenuModel(){Name = "主页",Icon = PackIconKind.Home,RegionName = "ContentView"});MenuList.Add(new MenuModel(){Name = "测试",Icon = PackIconKind.CovidTest,RegionName = "TestView"});MenuList.Add(new MenuModel(){Name = "设置",Icon = PackIconKind.Settings,RegionName = "SettingView"});
}

RegionName 对应每一个创建Control，具体的规则可以看一下prism的导航。

8.MenuModel类

public class MenuModel
{public string Name { get; set; }public PackIconKind Icon { get; set; }public string RegionName { get; set; }
}

9.prism 导航注册

prism 有个注册类ModuleModule

public class ModuleModule : IModule
{private readonly IRegionManager _regionManager;public ModuleModule(IRegionManager regionManager){_regionManager = regionManager;}/// <summary>/// 通知模块已被初始化。/// </summary>/// <param name="containerProvider"></param>public void OnInitialized(IContainerProvider containerProvider){_regionManager.RequestNavigate(RegionNames.ContentRegion, "ContentView");_regionManager.RequestNavigate(RegionNames.TestRegion, "TestView");_regionManager.RequestNavigate(RegionNames.SettingRegion, "SettingView");}/// <summary>/// 用于在您的应用程序将使用的容器中注册类型。/// </summary>/// <param name="containerRegistry"></param>public void RegisterTypes(IContainerRegistry containerRegistry){containerRegistry.RegisterForNavigation<ContentView>();containerRegistry.RegisterForNavigation<TestView>();containerRegistry.RegisterForNavigation<SettingView>();}
}

然后在App.xaml.cs中注册

 protected override void ConfigureModuleCatalog(IModuleCatalog moduleCatalog){moduleCatalog.AddModule<ModuleModule>();}

10.RegionNames类

public static class RegionNames
{public const string TestRegion = "TestRegion";public const string SettingRegion = "SettingRegion";public const string ContentRegion = "ContentRegion";
}

ContentView 、TestView、SettingView是新建的用户控件，自己随便新建可以区分不同控件查看效果即可。

这篇关于wpf prism左侧抽屉式菜单的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/787565。

相关文章

用Microsoft.Extensions.Hosting 管理WPF项目.

用Microsoft.Extensions.Hosting 管理WPF项目.

首先引入必要的包: <ItemGroup><PackageReference Include="CommunityToolkit.Mvvm" Version="8.2.2" /><PackageReference Include="Microsoft.Extensions.Hosting" Version="8.0.0" /><PackageReference Include="Serilog
阅读更多...
2_为MFC程序添加菜单

2_为MFC程序添加菜单

在MFC中添加菜单栏 1，双击资源文件，显示资源视图，点击Menu插入Menu菜单，编辑菜单的ID，自己取名字。 2，点击“请在此处键入”添加菜单选项，输入&E，E的下面就会产生下划线；在产生的弹出菜单中继续编辑，并且可以添加事件处理函数； 在弹出菜单的任意位置，鼠标右键，弹出的菜单中选择“插入分隔符”，即可产生分隔符 3，在你设计的Dialog窗口的属性栏，选择Menu后面的
阅读更多...
把Sublime Text 2 加入右键菜单（带图标）, Edit with Sublime Text

把Sublime Text 2 加入右键菜单（带图标）, Edit with Sublime Text

Sublime Text 2 是现在很受大家欢迎的编辑器了，不仅是在web前端，在书定简单的php、Js等代码时，也是相当的好用，再配合多种的插件和新颖的界面，更是让人欲罢不能。 在使用时，我们通过喜欢打开一个文件的时候，右击再选择打开程序，比如会用记事本、Notedpad++之类的，这时如果把Sublime Text也加入到其中毕竟会方便不少，在找了一番后，实验成功，效果如下： 实现
阅读更多...
vue+elementui搭建后台管理界面(5递归生成侧栏路由) vue定义定义多级路由菜单

vue+elementui搭建后台管理界面(5递归生成侧栏路由) vue定义定义多级路由菜单

有一个菜单树，顶层菜单下面有多个子菜单，子菜单下还有子菜单。。。 这时候就要用递归处理 1 定义多级菜单 修改 src/router/index.js 的 / 路由 {path: '/',redirect: '/dashboard',name: 'Container',component: Container,children: [{path: 'dashboard', name: '首
阅读更多...
论坛开源项目推荐（12.25）：菜单（Menu）

论坛开源项目推荐（12.25）：菜单（Menu）

转自  http://www.cocoachina.com/applenews/devnews/2013/1225/7608.html 更多代码可到CocoaChina代码库查看：http://code.cocoachina.com/   SvpplyTable（可折叠可张开的菜单动画） 允许你简单地创建可折叠可张开的菜单动画效果，灵感来自于Svpply app。不同表格项
阅读更多...
项目实战--实现一个多级菜单统一工具类

项目实战--实现一个多级菜单统一工具类

一、背景介绍 在项目开发工程中，经常需要实现多级菜单的效果，比如需要一个多级功能菜单、多级评论、多级部门等功能，如果每个项目都要定制一版代码或者SQL，就会面临代码重复开发的问题。为简化开发过程并提高代码的可维护性，我实现一个统一的工具类来处理这些需求，使用SpringBoot创建一个返回多级菜单、多级评论、多级部门、多级分类的统一工具类。 二、数据库字段设计方案 首先，在数据库设计时，考虑
阅读更多...
C# 唯一性进程的方法封装（Winform/WPF通用）

C# 唯一性进程的方法封装（Winform/WPF通用）

C#唯一进程封装 C# 唯一性进程的方法封装 public class UniqueProcess{/// <summary>/// 焦点切换指定的窗口，并将其带到前台/// </summary>/// <param name="hWnd"></param>/// <param name="fAltTab"></param>[DllImport("user32.dll")]public st
阅读更多...
Ubuntu系统通过GRUB引导菜单进入恢复模式修改账户密码

Ubuntu系统通过GRUB引导菜单进入恢复模式修改账户密码

当在Ubuntu系统中忘记了账户密码时，有几种方法可以破解或重置密码。 本指引文档方法：通过GRUB引导菜单进入恢复模式 实践环境为：20.04.6 LTS (Focal Fossa) 1. 重启Ubuntu系统：首先，你需要重启你的Ubuntu系统。 2. 进入GRUB引导菜单：在启动过程中，按下Shift键以进入GRUB引导菜单。（如果你拥有双启动机器，并且需要在操作系统启动时选择，那么
阅读更多...
二级联动菜单--常见的城市二级联动

二级联动菜单--常见的城市二级联动

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> 二级联动菜单 </TITLE><script language="javascript">var jiangxi=[["1","南昌"],["2","上饶"],["3","赣州"]];var zhejiang=[["1","
阅读更多...
【Rust日报】2021-05-13 -- Tracing Prism - 提高日志文件可读性的 Web 程序

【Rust日报】2021-05-13 -- Tracing Prism - 提高日志文件可读性的 Web 程序

Szyszka - 简单好用的批量文件重命名工具 Szyszka 使用 Rust 和 GTK3 创建，具有简单明了的 GUI ，适用于 Linux，Max，Windows。支持多种重命名规则：替换、清除、修改、自定义等。 Github: https://github.com/qarmin/szyszka Snap: https://snapcraft.io/szyszka Tracing Pr
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2