WPF 控件 (十六、Menu)

最新推荐文章于 2024-09-04 22:03:11 发布
最新推荐文章于 2024-09-04 22:03:11 发布
阅读量923 收藏 1
点赞数
文章标签： wpf c# ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LyRics1996/article/details/130189784
版权
文章详细介绍了WPF中的一些关键UI元素属性，如FlowDirection、LayoutTransform和RenderTransform等，以及如何通过XAML修改元素布局和方向。此外，还展示了如何实现数据绑定以动态生成菜单，并提供了修改菜单样式的示例代码。
摘要由CSDN通过智能技术生成

一、属性说明

FlowDirection：其子元素的流动方向；
LayoutTransform：在执行布局时应该应用于此元素的图形转换方式。   
RenderTransform：元素的呈现位置的转换信息；
RenderTransformOrigin：由RenderTransform声明的任何可能呈现转换的中心点，相对于元素的边界。
HorizontalAlignment/VerticalAlignment：在父元素中组合此元素时所应用的水平对齐特征/垂直对齐特征。
HorizontalContentAlignment/VerticalContentAlignment：控件内容的水平对齐方式/垂直对齐方式。
Items：获取用于生成 ItemsControl 的内容的集合。
ItemTemplate：获取或设置用来显示每个项的 DataTemplate。
ItemsPanel：获取或设置模板，该模板定义对项的布局进行控制的面板。
ItemsSource：获取或设置用于生成 ItemsControl 的内容的集合。
IsMainMenu：获取或设置一个值，该值指示此 Menu 是否接收主菜单激活通知。
SnapsToDevicePixels：获取或设置一个值，该值确定在呈现过程中，此元素的呈现是否应使用特定于设备的像素设置。    
ContextMenu：获取或设置通过用户界面请求上下文菜单时应显示的上下文菜单元素， (UI 从此元素中) 。

二、默认

2.1 xaml

 <StackPanel Margin="10">
	<TextBlock Text="默认"/>
     <Menu>
         <MenuItem Header="菜单1" FlowDirection="LeftToRight">
             <MenuItem.Icon>
                 <Image Source="../bird1.png"/>
             </MenuItem.Icon>
             <MenuItem Header="子菜单1">
                 <MenuItem.Icon>
                     <Image Source="../bird1.png"/>
                 </MenuItem.Icon>
                 <MenuItem Header="子子菜单1">
                     <MenuItem.Icon>
                         <Image Source="../bird1.png"/>
                     </MenuItem.Icon>
                 </MenuItem>
             </MenuItem>
             <MenuItem Header="子菜单2"/>
             <MenuItem Header="子菜单3"/>
             <MenuItem Header="子菜单4"/>
         </MenuItem>
         <MenuItem Header="菜单2"/>
         <MenuItem Header="菜单3"/>
     </Menu>
 </StackPanel>

2.2 效果

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

三、修改方向

3.1 xaml 修改一级菜单方向

<StackPanel Margin="10">
   <TextBlock Text="修改方向"/>
    <Menu>
        <Menu.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel/>
            </ItemsPanelTemplate>
        </Menu.ItemsPanel>
        <MenuItem Name="menu1" Header="菜单1" FlowDirection="LeftToRight">
            <MenuItem.Icon>
                <Image Source="../bird1.png"/>
            </MenuItem.Icon>
            <MenuItem Header="子菜单1">
                <MenuItem.Icon>
                    <Image Source="../bird1.png"/>
                </MenuItem.Icon>
                <MenuItem Header="子子菜单1">
                    <MenuItem.Icon>
                        <Image Source="../bird1.png"/>
                    </MenuItem.Icon>
                </MenuItem>
            </MenuItem>
            <MenuItem Header="子菜单2"/>
            <MenuItem Header="子菜单3"/>
            <MenuItem Header="子菜单4"/>
        </MenuItem>
        <MenuItem Header="菜单2"/>
        <MenuItem Header="菜单3"/>
    </Menu>
</StackPanel>

3.2 修改子菜单弹出方向

在loaded中添加以下代码

private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
    Popup popup = menu1.Template.FindName("PART_Popup", menu1) as Popup;
    if (popup != null)
    {
        popup.Placement = PlacementMode.Right;
    }

}

3.3 效果

在这里插入图片描述

三、数据绑定

3.1 xaml

 <StackPanel Margin="10">
	<TextBlock Text="数据绑定"/>
	  <Menu ItemsSource="{Binding menus}" x:Name="menu3">
	      <Menu.ItemsPanel>
	          <ItemsPanelTemplate>
	              <StackPanel/>
	          </ItemsPanelTemplate>
	      </Menu.ItemsPanel>
	  </Menu>
	</StackPanel>

3.2 后台

    public List<string> menus { get; set; } = new List<string>();
        public MenuUserControl()
        {
            for (int i = 0; i < 5; i++)
            {
                menus.Add($"菜单{i + 1}");
            }

            InitializeComponent();
            this.DataContext = this;
        }

3.3 效果

在这里插入图片描述

四、修改样式

4.1 xaml

 <StackPanel Margin="10">
	<TextBlock Text="样式修改"/>
     <Menu >
         <Menu.ItemsPanel>
             <ItemsPanelTemplate>
                 <StackPanel/>
             </ItemsPanelTemplate>
         </Menu.ItemsPanel>
         <MenuItem  Header="菜单1" FlowDirection="LeftToRight" Style="{StaticResource MenuItemStyle}">
                 <MenuItem.Icon>
                     <Image Source="../bird1.png"/>
                 </MenuItem.Icon>
             <MenuItem Header="子菜单1" Style="{StaticResource MenuItemStyle}">
                     <MenuItem.Icon>
                         <Image Source="../bird1.png"/>
                     </MenuItem.Icon>
                 <MenuItem Header="子子菜单1" Style="{StaticResource MenuItemStyle}">
                         <MenuItem.Icon>
                             <Image Source="../bird1.png"/>
                         </MenuItem.Icon>
                     </MenuItem>
                 </MenuItem>
             <MenuItem Header="子菜单2" Style="{StaticResource MenuItemStyle}"/>
             <MenuItem Header="子菜单3" Style="{StaticResource MenuItemStyle}"/>
             <MenuItem Header="子菜单4" Style="{StaticResource MenuItemStyle}"/>
             </MenuItem>
         <MenuItem Header="菜单2" Style="{StaticResource MenuItemStyle}"/>
         <MenuItem Header="菜单3" Style="{StaticResource MenuItemStyle}"/>
     </Menu>
 </StackPanel>

4.2 style

 <Style x:Key="MenuItemStyle" TargetType="MenuItem">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="MenuItem">
                    <Grid ToolTip="{TemplateBinding Header}" Height="40" Background="#FBFBFD" Width="{TemplateBinding Width}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="50" />
                            <ColumnDefinition Width="*" MinWidth="0"/>
                        </Grid.ColumnDefinitions>
                        <Border Background="#FFD1E7FF"/>
                        <Border x:Name="_border"   Grid.ColumnSpan="2"/>
                        <Image x:Name="_imgicon" Width="30" Height="30" Stretch="Fill" Source="/lyrics.ui;component/Basic/Menu/bird1.png" />
                        <TextBlock Foreground="#2D2D30" Grid.Column="1" Margin="5 0 15 0"  VerticalAlignment="Center" x:Name="_txt" Text="{Binding Header,RelativeSource={RelativeSource TemplatedParent}}" />
                        <Path  Visibility="Collapsed" x:Name="_path" Grid.Column="1" HorizontalAlignment="Right"  Margin="5 13 5 0"   Data="M0,4 4,0 0,-4 z" Fill="#8A92"/>
                        <Popup  Placement="Right" x:Name="SubMenuPopup" AllowsTransparency="True"   Focusable="False" IsOpen="{TemplateBinding IsSubmenuOpen}" >
                            <ScrollViewer   ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
                                <Border Background="#FFD1E7FF" Name="SubmenuBorder" BorderBrush="LightGray" BorderThickness="1"  SnapsToDevicePixels="True"    >
                                    <StackPanel   IsItemsHost="True"   KeyboardNavigation.DirectionalNavigation="Cycle" />
                                </Border>
                            </ScrollViewer>
                        </Popup>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="HasItems" Value="true">
                            <Setter TargetName="_path" Property="Visibility" Value="Visible"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter TargetName="_border" Property="Background" Value="#FF84BDE4"/>
                            <Setter TargetName="_txt" Property="Foreground" Value="White"/>
                            <Setter TargetName="_path" Property="Fill" Value="White"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter TargetName="_txt" Property="Foreground" Value="Gray"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

4.3 效果

在这里插入图片描述

LyRics1996
关注
专栏目录
【愚公系列】2023年10月 WPF控件专题 Menu控件详解
时光隧道
08-13 5万+
WPF控件是Windows Presentation Foundation（WPF）中的基本用户界面元素。它们是可视化对象，可以用来创建各种用户界面。WPF控件可以分为两类：原生控件和自定义控件。原生控件是由Microsoft提供的内置控件，如Button、TextBox、Label、ComboBox等。这些控件都是WPF中常见的标准用户界面元素。自定义控件则允许开发人员使用XAML和C#等编程语言来创建个性化的用户界面元素。自定义控件可以根据需求提供更多的功能和自定义化选项，以及更好的用户体验。
C#WPF控件Menu详解
qq_30725967的博客
04-07 425
本文详解C#WPF控件Menu
wpfMenu样式
11-18
项目需要，重新写了一下menu样式。自定义了控件模板，用图片替换了背景色，效果很好看。
WPF中的菜单模板
Lassewang的成长历程
01-03 6573
资源字典代码如下： <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Border Margin="2"
WPF （菜单和工具栏1）Menu控件的详细使用教程
最新发布
weixin_39604653的博客
09-04 1442
Menu 控件是 WPF 中用于创建菜单栏的控件，可以在应用程序窗口的顶部或其他位置显示一个菜单系统。通过 Menu 控件，用户可以访问各种命令和功能。
经典wpf菜单MenuItem样式1
05-06
wpf菜单MenuItem样式经典源代码,绝对经典，颜色根据自己需要修改
wpf 菜单控件
清风ai明月的专栏
03-17 918
字符前的_标识，可通过按Alt键可以使这些字符可见，并使用该字符访问菜单。 <Window x:Class="BooksDemo.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsof
WPF Menu+ContextMenu+StatusBar入门介绍
weixin_62526951的博客
04-20 704
Menu+ContextMenu+StatusBar入门介绍
WPF:MenuItem样式
acass424022的博客
04-20 3283
基础信息 1、MenuItem 样式 <Window.Resources> <Style TargetType="{x:Type MenuItem}"> <!--<Setter Property="Background" Value="#999999" />--> ...
【WPF】WPF 常用控件
lanfeng59的博客
04-21 2114
一、WPF的概述 1.1 WPF 简介 WPF （全称：Windows Presentation Foundation）的核⼼是⼀个与分辨率⽆关且基于⽮量的呈现引擎，旨在充分利⽤现代图形硬件。 WPF 通过⼀套完善的应⽤程序开发功能对该核⼼进⾏了扩展，这些功能包括可扩展应⽤程序标记语⾔ (XAML)、控件、数据绑定、布局、⼆维和三维图形、动画、样式、模板、⽂档、媒体、⽂本和版式。 WPF 属于 .NET，因此可以⽣成整合 .NET API 其他元素的应⽤程序。 1.2 WPF 特点 呈现效果
wpf菜单MenuItem样式经典
12-02
wpf菜单MenuItem样式经典源代码,绝对经典，
WPF 环形菜单控件
05-07
很漂亮的环形菜单，WPF控件Code
WPF漂亮的导航菜单
11-05
WPF开发的漂亮酷炫的导航菜单实例程序，导航菜单实例注释讲解十分详细。
【愚公系列】2023年10月 WPF控件专题 ContextMenu控件详解
热门推荐
时光隧道
08-14 5万+
WPF控件是Windows Presentation Foundation（WPF）中的基本用户界面元素。它们是可视化对象，可以用来创建各种用户界面。WPF控件可以分为两类：原生控件和自定义控件。原生控件是由Microsoft提供的内置控件，如Button、TextBox、Label、ComboBox等。这些控件都是WPF中常见的标准用户界面元素。自定义控件则允许开发人员使用XAML和C#等编程语言来创建个性化的用户界面元素。自定义控件可以根据需求提供更多的功能和自定义化选项，以及更好的用户体验。
WPF控件分类
m0_56449543的博客
08-18 566
控件：是咱们的门面，控件有很多，主要控件分为6大类 布局控件：可以容纳多个控件或者嵌套其他布局的控件，用于在UI组织和排列控件。Grid、StackPanel、DockPanel等控件都属此类，它们拥有共同的父类为Panel。 内容控件：只能容纳一个控件或者布局控件作为它的内容。Window、Button等控件属于此类，因为只能容纳一个控件作为其内容，所以经常借助布局控件来规划其内容，它们的共同父类是ContentControl。 带标题内容控件：相当于一个内容控件，但是可以加一个标题（Header），
WPF 控件专题 Menu 控件详解
^@^lemon tea^@^
09-19 5562
WPF 控件专题 Menu 控件详解
【WPF应用34】WPF基本控件-Menu的详解与示例
qq_35320456的博客
04-05 4656
WPF基本控件-Menu的详解与示例
WPF MenuItem 四种角色分析
weixin_34365417的博客
02-27 642
Menu Menu的样式很简单，就是顶部的那个框，如下图 而其中的文字“文件”“图形”...是属于MenuItem的，要灵活使用MenuItem，就需要了解MenuItem.Role的作用 TopLevelItem 没有子菜单，直接执行命令 TopLevelHeader 能够弹出子菜单 SubmenuItem 没有子菜单，直接执行命令...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值