WPF 左侧菜单样式

最新推荐文章于 2024-07-28 22:14:36 发布
最新推荐文章于 2024-07-28 22:14:36 发布
阅读量1.3k 收藏 3
点赞数
文章标签： vue web js html javascript

之前做了一个菜单样式，这样的：

链接：WPF 修改(优化)Menu菜单的样式

如今又来一个左侧菜单样式，其实只是修改了一下模板，如下图：

还是老样子，代码全部都在MainWindow.xaml中：

<Window x:Class="wpfcore.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:wpfcore" 
        xmlns:controls="http://metro.mahapps.com/winfx/xaml/controls"
        mc:Ignorable="d"
        Background="#2D2D30"
        SnapsToDevicePixels="True"
        UseLayoutRounding="True"
        Title="MainWindow" Width="820" Height="340">
    <Window.Resources>
        <Style x:Key="sep" TargetType="{x:Type Separator}">
            <Setter Property="Margin" Value="0,3" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Separator}">
                        <Border Height="1" BorderThickness="1" BorderBrush="#999999" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
</Style>


        <Style TargetType="{x:Type MenuItem}">
            <Setter Property="Height" Value="40"/>
            <Setter Property="Foreground" Value="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type Menu}}}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type MenuItem}">
                        <Border x:Name="Border"  
                                Background="{TemplateBinding Background}" >
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition x:Name="ColIcon" Width="Auto" SharedSizeGroup="MenuItemIconColumnGroup"/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>
                                <ContentPresenter Grid.Column="0" Margin="5 0" x:Name="Icon"
                                                  VerticalAlignment="Center" ContentSource="Icon"/>


                                <Grid Grid.Column="1" x:Name="rightGrid">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" SharedSizeGroup="MenuTextColumnGroup"/>
                                        <ColumnDefinition x:Name="ColNext" Width="auto"/>
                                    </Grid.ColumnDefinitions>
                                    <ContentPresenter Grid.Column="0"
                                          Margin="{TemplateBinding Padding}"
                                          x:Name="HeaderHost"
                                          VerticalAlignment="Center"
                                          RecognizesAccessKey="True"
                                          ContentSource="Header"/>


                                    <Grid Grid.Column="1" Margin="5 0"
                                      x:Name="ArrowPanel" VerticalAlignment="Center">
                                        <Path x:Name="ArrowPanelPath" 
                                          HorizontalAlignment="Right" VerticalAlignment="Center" 
                                          Fill="{TemplateBinding Foreground}" Data="M0,0 L0,8 L4,4 z"/>
                                    </Grid>
                                </Grid>
                                <Popup IsOpen="{Binding Path=IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}"
                                       Placement="Right" x:Name="SubMenuPopup" Focusable="false">
                                    <Border x:Name="SubMenuBorder" 
                                            BorderBrush="#999999"
                                            BorderThickness="1" 
                                            Padding="2,2,2,2">
                                        <Grid x:Name="SubMenu" Grid.IsSharedSizeScope="True">
                                            <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Cycle"/>
                                        </Grid>
                                    </Border>
                                </Popup>
                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="Role" Value="TopLevelHeader">
                                <Setter Property="Padding" Value="6 0"/>
                                <Setter Property="Height" Value="50"/>
                                <Setter Property="Background" Value="DarkRed"/>
                                <Setter Property="MinWidth" Value="0" TargetName="ColIcon"/>
                                <Setter Property="Width" Value="Auto" TargetName="ColNext"/>
                                <Setter Property="Visibility" Value="Collapsed" TargetName="ArrowPanel"/>
                                <!--可添加一个附加属性，在trigger中，控制左侧的文字显示与隐藏，自行添加喽-->
                                <!--<Setter Property="Visibility" Value="Collapsed" TargetName="rightGrid"/>-->
                            </Trigger>
                            <Trigger Property="IsHighlighted" Value="true">
                                <Setter Property="Background" Value="Green" TargetName="Border"/>
                            </Trigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsHighlighted" Value="True"/>
                                    <Condition Property="Role" Value="TopLevelHeader"/>
                                </MultiTrigger.Conditions>
                                <MultiTrigger.Setters>
                                    <Setter Property="Background" Value="Green" TargetName="Border"/>
                                </MultiTrigger.Setters>
                            </MultiTrigger>
                            <Trigger Property="Role" Value="TopLevelItem">
                                <Setter Property="Padding" Value="6 1"/>
                                <Setter Property="Visibility" Value="Collapsed" TargetName="ArrowPanel"/>
                            </Trigger>
                            <Trigger Property="Role" Value="SubmenuHeader">
                                <Setter Property="Padding" Value="5 2"/>
                            </Trigger>
                            <Trigger Property="Role" Value="SubmenuItem">
                                <Setter Property="Padding" Value="5 2"/>
                                <Setter Property="Visibility" Value="Collapsed" TargetName="ArrowPanel"/>
                            </Trigger>
                            <Trigger Property="Icon" Value="{x:Null}">
                                <Setter Property="Visibility" Value="Collapsed" TargetName="Icon"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Foreground" Value="LightGray"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
</Style>
        <Image x:Key="icon" x:Shared="False"  Width="32" Height="32" Source="/64.jpg" />
    </Window.Resources>


    <Grid>
        <Menu HorizontalAlignment="Left" VerticalAlignment="Top"
              FontSize="16" Foreground="#F6F6F6" Background="Transparent">
            <Menu.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel IsItemsHost="True"/>
                </ItemsPanelTemplate>
            </Menu.ItemsPanel>
            <MenuItem  Header="文件(F)" Icon="{StaticResource icon}">
                <MenuItem Header="新建(N)">
                    <MenuItem Header="项目(P)..." />
                    <MenuItem Header="存储库(R)..."/>
                    <MenuItem Header="文件(F)..." />
                    <MenuItem Header="从现有代码创建项目(E)..."/>
                </MenuItem>
                <MenuItem Header="打开(O)"/>
                <MenuItem Header="克隆存储库(E)..." Icon="{StaticResource icon}"/>
                <MenuItem Header="启动窗口(W)" Icon="{StaticResource icon}"/>
                <Separator Style="{StaticResource sep}"/>
                <MenuItem Header="添加(D)"/>
                <MenuItem Header="关闭(C)"/>
                <MenuItem Header="关闭解决方案(T)"/>
                <Separator Style="{StaticResource sep}"/>
                <MenuItem Header="退出(X)" />
            </MenuItem>
            <MenuItem  Header="文件(F)" Icon="{StaticResource icon}">
                <MenuItem Header="新建(N)">
                    <MenuItem Header="项目(P)..."  Icon="{StaticResource icon}"/>
                    <MenuItem Header="存储库(R)..."/>
                    <MenuItem Header="文件(F)..." />
                    <MenuItem Header="从现有代码创建项目(E)..."/>
                </MenuItem>
                <MenuItem Header="打开(O)"/>
                <MenuItem Header="克隆存储库(E)..." Icon="{StaticResource icon}"/>
                <MenuItem Header="启动窗口(W)" Icon="{StaticResource icon}"/>
                <Separator Style="{StaticResource sep}"/>
                <MenuItem Header="添加(D)"/>
                <MenuItem Header="关闭(C)"/>
                <MenuItem Header="关闭解决方案(T)"/>
                <Separator Style="{StaticResource sep}"/>
                <MenuItem Header="退出(X)" />
            </MenuItem>
            <MenuItem  Header="文件(F)" Icon="{StaticResource icon}">
                <MenuItem Header="新建(N)">
                    <MenuItem Header="项目(P)..." />
                    <MenuItem Header="存储库(R)..."/>
                    <MenuItem Header="文件(F)..." />
                    <MenuItem Header="从现有代码创建项目(E)..."/>
                </MenuItem>
                <MenuItem Header="打开(O)"/>
                <MenuItem Header="克隆存储库(E)..." Icon="{StaticResource icon}"/>
                <MenuItem Header="启动窗口(W)" Icon="{StaticResource icon}"/>
                <Separator Style="{StaticResource sep}"/>
                <MenuItem Header="添加(D)"/>
                <MenuItem Header="关闭(C)"/>
                <MenuItem Header="关闭解决方案(T)"/>
                <Separator Style="{StaticResource sep}"/>
                <MenuItem Header="退出(X)" />
            </MenuItem>
        </Menu>
    </Grid>
</Window>

OK,结束 。

如果喜欢，点个赞呗~

dotNET跨平台
关注
C# WPF 左侧菜单右侧内容布局效果实现
weixin_34290000的博客
11-07 7658
原文:C# WPF 左侧菜单右侧内容布局效果实现我们要做的效果是这样的，左侧是可折叠的菜单栏，右侧是内容区域，点击左侧的菜单项右侧内容区域则相应地切换。 wpf实现的话，我的办法是用一个tabcontrol，修改tabcontrol的样式模板，首先将控件的TabStripPlacement设置为left使tabcontrol的item header部分靠左内容靠右，然后用一个Expander将T...
精美WPF左侧菜单栏
07-24
精美WPF左侧菜单栏，实现了点击菜单自动展开子菜单，右侧显示菜单详细列表！
wpf中团队独立开发模块和左侧2个菜单的框架演示
最新发布
故里2130
07-28 1065
依次类推，“功能456”菜单栏包含了“功能4”，“功能5”，“功能6”，“功能4”就是UserControl4界面，“功能5”就是UserControl5界面，“功能6”就是UserControl6界面，这里我们使用了UC界面，而不是项目了，当然也可以使用项目的，只是为了区分一下。同“功能456”所示，“功能789”菜单栏包含了“功能7”，“功能8”，“功能9”，“功能7”就是UserControl7界面，“功能8”就是UserControl8界面，“功能9”就是UserControl9界面。
WPF:MenuItem样式
acass424022的博客
04-20 3228
基础信息 1、MenuItem 样式 <Window.Resources> <Style TargetType="{x:Type MenuItem}"> <!--<Setter Property="Background" Value="#999999" />--> ...
WPF左侧漂亮的导航菜单.rar
03-26
WPF左侧导航菜单，项目可直接运行，进行有力参考
wpf prism左侧抽屉式菜单
雨中深巷的油纸伞
03-07 1367
ContentView 、TestView、SettingView是新建的用户控件，自己随便新建可以区分不同控件查看效果即可。1.首先引入包MaterialDesignColors和MaterialDesignThemes。RegionName 对应每一个创建Control，具体的规则可以看一下prism的导航。左侧菜单显示在窗体外，点击左上角菜单图标通过简单的动画呈现出来。prism 有个注册类ModuleModule。这里头像的图片写死了，需要的自己替换。然后在App.xaml.cs中注册。
wpfMenu样式
11-18
项目需要，重新写了一下menu样式。自定义了控件模板，用图片替换了背景色，效果很好看。
WPF自定义左侧折叠菜单
11-27
在Windows Presentation Foundation（WPF）框架中，创建一个自定义的左侧折叠导航菜单是一项常见的任务，它可以提升应用程序的用户体验，使用户能够轻松地在多个功能模块间切换。本篇文章将详细探讨如何实现这一功能...
WPF漂亮的导航菜单
11-05
WPF提供了丰富的控件和样式机制，使得开发者能够设计出具有吸引力的导航菜单，以增强用户体验。本文将深入探讨如何利用WPF实现一个漂亮酷炫的导航菜单，并结合实例程序进行详细注释讲解。 1. **XAML基础** WPF的...
简单WPF左侧导航框
01-06
在本文中，我们将深入探讨“简单WPF左侧导航框”这一主题，这是一个使用Visual Studio 2013（VS2013）开发的Windows Presentation Foundation（WPF）应用程序。这个应用提供了一个通用且可定制的界面框架，利用...
wpf配置菜单栏
weixin_30764883的博客
11-09 1178
　　WPF 内建了两种菜单——Menu 和ContextMenu(上下文菜单)。 　　1. Menu 　　Menu 的项可以是任何东西，但是你应该使用MenuItem 以及Separator 对象。 　　 <Menu x:Name="menu" Height="23.333" VerticalAlignment="Top"> <MenuI...
经典wpf菜单MenuItem样式1
05-06
wpf菜单MenuItem样式经典源代码,绝对经典，颜色根据自己需要修改
wpf菜单MenuItem样式经典
12-02
wpf菜单MenuItem样式经典源代码,绝对经典，
WPF中MenuItem原生样式
07-22
WPF中MenuItem原生样式
WPF实战项目四：左侧菜单导航
yigu4011的博客
07-12 3406
9、在点击首页、待办事项、备忘录、设置按钮时，菜单栏不会自动收缩进去，需要添加一下代码，设置ListBox的名字：x:Name="drawerHost"8、在ListBox下面添加导航，通过添加行为Microsoft.Xaml.Behaviors.Wpf来实现。6、在MainViewModel.cs中初始化导航 ，声明前进后退功能方法。5、在右侧空白注册一个区域，区域注册用上面单独的类来控制。
WPF 菜单Menu的自定义样式
weixin_44545554的博客
07-18 7664
菜单Menu的自定义样式： 页面代码： <Menu Height="50" Name="menu1" Width="50" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="{x:Null}" Background="{x:Null}" > <MenuItem ...
基于WPF的左侧选项栏
Barry208的博客
11-16 659
效果如下图 主要通过修改radioButton的模板来实现 <Window x:Class="WpfApp7.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.
WPF左侧导航菜单效果实现（使用MaterialDesign样式）
热门推荐
韬光养晦
06-16 1万+
WPF左侧导航菜单效果实现 一、项目文件框架; 文件说明： App.xaml：只引入MD控件样式。 MainWindow.展示导航菜单及控制菜单对应的用户控件切换。 UserControlMenuItem为单个菜单用户控件，由 Expander+ListView的组合形式实现 。 UserControlCustomers和UserControlProviders作为两个举例用的业务用户控件。 ViewModel中定义的两个菜单相关的类，将菜单及业务用户控件关联。 二、添加两个Nuget
WPF Menu控件自定义Style
amyu42747的博客
06-19 440
自定义WPF中Menu控件的样式 转载于:https://www.cnblogs.com/GeneralKING/p/3143665.html
wpf中左侧多级菜单样式
09-07
在WPF中创建左侧多级菜单样式可以通过使用TreeView控件来实现。 首先，我们可以在XAML中创建一个TreeView控件，并为其设置样式。样式中可以定义树形结构的外观、颜色和字体等属性。 接下来，我们需要在TreeView中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值