wpf prism左侧抽屉式菜单

最新推荐文章于 2024-09-04 22:03:11 发布
最新推荐文章于 2024-09-04 22:03:11 发布
阅读量1.4k 收藏 5
点赞数 5
文章标签： wpf
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_25086397/article/details/136534326
版权
文章详细描述了一个使用MaterialDesign风格的WPF应用，涉及左侧菜单的动态显示与隐藏、菜单样式的动画效果、prism框架的Region导航以及C#代码实现。
摘要由CSDN通过智能技术生成

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实战项目四：左侧菜单导航
yigu4011的博客
07-12 3561
9、在点击首页、待办事项、备忘录、设置按钮时，菜单栏不会自动收缩进去，需要添加一下代码，设置ListBox的名字：x:Name="drawerHost"8、在ListBox下面添加导航，通过添加行为Microsoft.Xaml.Behaviors.Wpf来实现。6、在MainViewModel.cs中初始化导航 ，声明前进后退功能方法。5、在右侧空白注册一个区域，区域注册用上面单独的类来控制。
C#-WPF实现抽屉效果SplitView-炫酷漂亮的侧边菜单效果+MD主题重绘原生控件的美观效果-源码Demo下载
04-11
C#-WPF实现抽屉效果SplitView-炫酷漂亮的侧边菜单效果+MD主题重绘原生控件的美观效果-源码Demo下载
WPF Prism实例(多个实例包含Prism各个重要概念实例)
03-28
1、Prism各个重要概念实例 2、MVVM架构 3、WPF中使用Prism
精美WPF左侧菜单栏
07-24
精美WPF左侧菜单栏，实现了点击菜单自动展开子菜单，右侧显示菜单详细列表！
WPF （菜单和工具栏1）Menu控件的详细使用教程
最新发布
weixin_39604653的博客
09-04 1177
Menu 控件是 WPF 中用于创建菜单栏的控件，可以在应用程序窗口的顶部或其他位置显示一个菜单系统。通过 Menu 控件，用户可以访问各种命令和功能。
WPF左侧菜单栏的实现及右侧窗口的互动
qq_27474555的博客
02-16 2809
本文用WPF实现简单的左侧菜单，并初步实现其与右侧窗口的互动。
WPF 实现抽屉菜单
biyusr的专栏
07-29 829
分享一个抽屉菜单作者原文链接https框架使用大于等于.NET40；;项目使用开源许可协议；更多效果可以通过GitHub[1]|码云[2]下载代码;由于在中没有现成的类似的抽屉菜单，所以我们自己实现一个。1）代码如下。2）代码如下。3）代码如下。4）代码如下。5）代码如下。6）代码如下。7）代码如下。WPF开发者，赞18参考①[3]参考②[4]...
WPF实现抽屉效果
dylan777的专栏
07-31 2616
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"         Title="MainWindow" Height="350" Width="525">
C# WPF 抽屉菜单
muyeyu的专栏
01-27 1282
C# WPF 抽屉按钮 和 收缩
示例：WPF中使用Grid+Margin实现抽屉菜单效果
HeBianGu的博客
02-26 4568
一、目的：演示在WPF中使用Grid+Margin实现抽屉菜单效果 二、效果： 三、步骤： 1、整体应用Grid布局： <Grid> <Grid.ColumnDefinitions> ...
WPF .NET6框架-项目模板-抽屉式菜单-Material Design UI-现代风格
GJ_SO的博客
07-07 417
WPF模板：框架.Net6+抽屉式风格+Material Design
简单WPF左侧导航框
01-06
基于VS2013开发的WPF应用，是一个简单通用的界面框架，定制化了TabControl，达到界面导航的效果，可以将不同的界面放在Page页面中，方便使用。
WPF自定义左侧折叠菜单
11-27
WPF自定义左侧折叠导航菜单
WPF左侧漂亮的导航菜单.rar
03-26
WPF左侧导航菜单，项目可直接运行，进行有力参考
WPF项目模板-抽屉式菜单-Material Design UI-现代风格
07-07
它展示了如何在WPF中应用Material Design，实现响应式抽屉菜单，并处理DPI适配，为开发者提供了一个高效且美观的桌面应用开发环境。通过学习和使用这个模板，开发者可以快速搭建出符合现代审美标准的应用程序，同时...
WPF Prism页面导航实例(Bootstrapper，Shell，Module，Region，Navigation使用)
03-28
**WPF Prism页面导航实例详解** 在Windows Presentation Foundation (WPF)中，Prism框架提供了一种强大的方式来构建模块化、可维护的用户界面。本篇将深入探讨Prism中的核心概念，包括Bootstrapper、Shell、Module...
WPF Prism TemplatePack
05-26
**WPF Prism TemplatePack** 是一个专门为Windows Presentation Foundation (WPF) 开发者设计的工具包，它包含了一系列预先配置的模板，可以帮助开发者快速启动基于Prism框架的应用程序开发。Prism是Microsoft ...
WPF左侧抽屉菜单效果实现
韬光养晦
06-15 4605
WPF左侧抽屉菜单效果实现 一、添加两个Nuget库：MaterialDesignThemes和MaterialDesignColors; 二、在App.xaml中添加MaterialDesignInXaml样式; <Application x:Class="WPFTest0615.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http
wpf prism左侧导航栏
09-03
WPF Prism 是一个用于开发模块化、可重用的 WPF 应用程序的框架。左侧导航栏是 WPF Prism 中常见的界面元素之一。 左侧导航栏通常位于应用程序的主界面左侧，用于展示应用程序中的不同模块或功能页面。它可以是一个垂直的、具有层级结构的菜单，也可以是一个带有图标和标签的导航面板。 在 WPF Prism 中，左侧导航栏的实现通常借助于模块和区域的概念。模块是应用程序的不同功能单元，而区域则是界面上的一个容器，用于承载不同模块的视图。左侧导航栏就是其中一种常见的区域。 通过在左侧导航栏中添加菜单项或按钮，可以帮助用户快速访问应用程序中的不同功能模块。用户可以点击导航栏中的某个项，然后在主工作区域中显示相应的模块视图。 同时，左侧导航栏还可以用于展示当前所选模块的子模块或子功能页面。这可以通过嵌套的菜单或折叠面板等方式来实现。用户可以通过点击导航栏中的某个项，展开或折叠其子模块，以便更好地组织和浏览各功能。 总之，WPF Prism 中的左侧导航栏是一个重要的界面元素，用于帮助用户快速访问和切换不同模块或功能页面。它的作用是提高用户体验、提升应用程序的可用性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

雨中深巷的油纸伞

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值