WPF 控件 (十六、Menu)

最新推荐文章于 2024-05-11 11:02:32 发布
最新推荐文章于 2024-05-11 11:02:32 发布
阅读量832 收藏 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
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WPF实战学习笔记04-菜单导航
xinzhiya001的博客
07-24 1060
/定义Nanme变量。
WPF 特效控件集合
05-08
**WPF特效控件集合详解** Windows Presentation Foundation (WPF) 是Microsoft.NET Framework的一个重要组成部分，它为开发者提供了丰富的用户界面开发能力。WPF通过使用XAML语言来描述UI元素和逻辑，使得创建复杂...
WPF 非常漂亮 MenuItem模板 WPF漂亮导航栏 WPF MenuItem 漂亮界面源代码 可以直接使用的WPF漂亮界面
weijia3624的专栏
12-28 1277
PF 非常漂亮 MenuItem模板 WPF漂亮导航栏 WPF MenuItem 漂亮界面源代码 可以直接使用的WPF漂亮界面 WPF中的MenuItem控件是导航菜单的重要组成部分，它提供了丰富的定制选项以创建出吸引人的导航界面。通过自定义模板和样式，MenuItem可以展现出各种视觉效果，如渐变色、图标、鼠标悬停效果等。此外，MenuItem还支持子菜单和命令绑定，使得用户界面既美观又功能强大。 以下是一个实例，展示了如何创建一个具有自定义样式的漂亮MenuItem：
WPF 控件专题 Menu 控件详解
^@^lemon tea^@^
09-19 5359
WPF 控件专题 Menu 控件详解
WPF之工具栏菜单栏功能区。
最新发布
lingxiao16888的博客
05-11 916
1.1，Menu中可添加菜单分隔条<Separator></Separator>作为分割线，使用Separator可以通过改变其template来自定义，Separator是无焦点的，如果简单的在MenuItem中添加一个textBlock它是可以有焦点的。1.4，ToolBarTray.Band：确定工具栏放在哪一栏中（最顶部的一栏索引为0），BandIndex属性明确设置一栏中什么位置放置工具栏.2.1，使用功能区需要添加程序集System.Windows.Controls.Ribbon。
WPF使用Menu菜单
热门推荐
weixin_44587829的博客
07-28 2万+
Menu 是一个控件，使用该控件可以对那些与命令或事件处理程序相关联的元素以分层方式进行组织。每个 Menu 可以包含多个 MenuItem 控件。每个MenuItem 都可调用命令或调用 Click 事件处理程序。MenuItem 也可以有多个 MenuItem 元素作为子项，从而构成子菜单。 控件是指对数据和方法的封装。控件可以有自己的属性和方法，其中属性是控件数据的简单访问者，方法则是控件的...
wpf menu 菜单 快捷键
weixin_53370274的博客
05-08 1311
界面快捷键资源 Ctrl+F F3可加入其它，自行定义 Page可改为Windows xaml文件 <Page.Resources> <RoutedUICommand x:Key="F3" Text="查找内容"/> <RoutedUICommand x:Key="Search" Text="查找内容"/> </Page.Resources> <Page.InputBindings> <KeyB
WPF_19_菜单
jqwang_2009的专栏
02-07 2050
增强Widnows专业应用程序的4个控件---Menu、ToolBar、StatusBar、功能区。
wpf 圆形菜单
02-26
WPF允许开发者通过继承已有的UI元素（如`Control`类）来创建自定义控件。为了实现圆形菜单，你需要创建一个自定义控件，可能命名为`CircleMenu`，并覆盖`OnRender`方法来绘制圆形布局。 2. **几何形状与绘图**： ...
WPF自定义多级菜单功能
08-06
采用wpf自定义控件，自定义布局，实现后台动态添加多级菜单功能，菜单构成是一级菜单上层小图片，下层菜单名。二级菜单是左侧小图片，右侧是菜单名称。一级和二级菜单有默认背景图片和选中后的图片。点击一级菜单...
WPF Accordion Menu:WPF 手风琴式动画菜单控件-开源
07-01
在本文中，我们将深入探讨如何使用WPF（Windows Presentation Foundation）和C#开发一个手风琴式动画菜单控件。这种类型的菜单在用户界面设计中非常常见，它以折叠和展开的方式显示层次结构数据，既节省空间又易于...
wpf TextBox 自定义菜单
05-28
右键菜单 ContextMenu cont = new ContextMenu(); cont.Items.Add(new MenuItem() { Header="删除"}); cont.Items.Add(new MenuItem() { Header = "添加" }); textBox1.ContextMenu = cont; for (int i = 0; i < cont.Items.Count; i++) { MenuItem item = (MenuItem)cont.Items[i]; item.Click += delegate(object sender,RoutedEventArgs e) { MessageBox.Show(item.Header.ToString()); }; }
wpf菜单MenuItem样式经典
12-02
wpf菜单MenuItem样式经典源代码,绝对经典，
Silverlight仿WPF的Menu控件(含源码)
09-04
在本文中，我们将深入探讨如何在Silverlight中创建一个仿WPF的Menu控件，并提供相关的编程知识。Silverlight是一种轻量级的插件技术，用于构建丰富的、交互式的网络应用程序，而WPF（Windows Presentation ...
WPF自定义控件-根据内容生成菜单
qq_37875849的博客
12-28 528
1.因为最后那个内容点击第二次才能选中，所以做了一些特殊的处理，还有自己在ItemControl上找不到CheckBox，用了CheckedCommand来触发事件Checked，代码实现有点奇怪，但是功能是已经实现的了，看看那位朋友有好的建议，方便的话跟聊下好的想法。控件：支持左边点击，右边内容滚到顶部，右边鼠标中键滚动，左边菜单栏跟着变化。2.该控件所有代码已经贴出来，可以可以直接使用， 把命名空间改掉就OK。1.控件样式代码App.xaml。3.菜单模型类MuneInfo。
WPF 常用控件
lvxingzhe3的博客
03-25 3696
WPF常用控件
WPF-菜单和Tab控件
weixin_34202952的博客
07-24 264
WPF-菜单和Tab控件 　　因为菜单和Tab控件一起用，所以就拿出来一块写 Tab控件 　　定义一个名为ViewItem类，定义Tab的属性 1 /// <summary> 2 /// tab item 3 /// </summary> 4 public class ViewItem 5 { 6 ...
WPF 自定义控件-布局控件
海盗Sharp的博客
01-06 819
自定义布局控件，继承Panel，重写MeasureOverride和ArrangeOverride方法。Panel继承自FrameworkElement，实现IAddChild，可以在自定义的布局控件中添加子元素（控件）如果继承Control，无法在控件内部添加子元素修改为继承Panel，需要删除中自动生成的模板样式。MeasureOverride测量子元素在布局中所需的大小 ArrangeOverride定位子元素并确定大小。实现模式应调用 Arrange(Rect) 每个可见子元素，并将每个子
WPF 侧边菜单的实现
hisxiwu的博客
08-31 784
WPF 侧边菜单的实现
wpf左侧菜单menu
06-07
WPF中，左侧菜单使用Menu控件实现。这个菜单可以包含多个MenuItem控件，并且支持子菜单的嵌套。 Menu控件的使用非常简单，它可以在XAML中通过代码直接添加，也可以在代码中通过一个对象来动态添加。 在Menu控件中，每个MenuItem都可以包含一个Header（标题），一个Command（命令），一个Icon（图标）和一个子菜单。其中，Header属性和子菜单是必需的，而Command和Icon是可选的。如果不需要Command，可以为其设置值为null，而如果不需要Icon，则设为一个空Image即可。 通过设置MenuItem的Command属性，可以为菜单项添加命名处理程序，这些处理程序会在菜单项被单击时触发。菜单项可以直接关联到一个Command，也可以绑定到ViewModel中的一个Command。 需要注意的是，在WPF中，除了Menu和MenuItem控件外，还有ContextMenu控件是用于实现右键菜单的，但其实现方式与Menu相似，只是呈现形式不同。在使用上，我们可以根据实际需要来选择使用哪种控件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值