WPF中创建带图像和下拉菜单的工具提示风格菜单

在探索如何创建具有图像和下拉菜单的工具提示风格菜单时,找到了许多技巧,但内心深处,知道WPF开发者一定实现了一些整洁的XAML方法来创建菜单,这些菜单涉及图像的相对引用和垂直下拉菜单,而不是WinForm风格的拼凑。

找到了正确的方法,但尚未找到明确的参考。因此,决定创建一个。希望这能帮助到需要的人,这样就不必经历经历的几天尝试和错误了!

第一步:重复以下内容:WPF不是WinForms。

重复大约100次。从脑海中清除所有关于嵌入资源的知识。同时,抹去所有关于由ToolTip驱动的菜单的知识。好了,现在可以从WPF的世界观重建这些知识了。

教程

首先,创建一个WPF测试项目(或者使用自己的项目,因为都知道,当有人说“让在测试项目中做这个!”时,并不喜欢,因为实际上,只想让它在当前项目中工作)。这将适用于是使用UserControl还是Window。无论是编译为DLL还是EXE,它都会工作。保证。已经测试过了。下面的所有代码都有效...因为已经编译、运行并测试过了。保证这一点...因为最讨厌技术文章中的代码从未见过编译器的内部。

<Window x:Class="VisualMenus.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525" DataContext="{Binding RelativeSource={RelativeSource Self}}"> </Window>

设置此属性可确保将绑定到当前数据上下文的资源(即,它不会回溯到父级,向外到子级,或飘到云端...或其他任何类似的废话...主啊,不会想不小心绑定到Facebook照片上。

如果打算使用无聊的文本菜单,跳过这一步。但话说回来,如果正在阅读本教程,不会想跳过这一步!

在项目中添加一个名为Images或Resources或Foo的文件夹...真的不重要。将图像添加到新文件夹。最简单的方法是将它们复制到刚刚在Windows资源管理器中创建的文件夹中,然后将它们作为现有文件拖入项目中。

现在,这真的很重要。对于每个文件,确保图像的构建操作设置为"资源",复制到输出目录设置为"不复制"。这是在WPF中定义资源的新方法。不需要直接将它们添加到构建首选项中,也不必生成RESX文件(记住,说过要忘记所有这些!!)(知道,是刚刚提起来的...忍不住...已经训练了这么多年...进步,而不是完美,对吧?)

回到Window或UserControl的XAML。创建一个菜单。可以从工具箱中拖放控件,或者可以自己输入。更喜欢后者...老派,猜。

很漂亮,对吧?好的,现在来添加有趣的东西。首先,为菜单项定义一个MenuItem.Icon标签。

现在,还在XAML中,去创建一个名为<Window.Resources>的部分,在<Grid>之前...或者在UserControl的情况下,将创建一个名为<UserControl.Resources>的部分,并将其放置在DockPanel、Grid或XAML文件中存在的任何其他顶级视觉元素之前。为想要绑定到MenuItem的图像添加一个<BitmapImage>资源定义。然后将其绑定到MenuItem的Image标签。看看示例。

会注意到添加了一些额外的"美化"标签...对齐、高度、宽度等。所有这些都是...继续让视觉效果看起来像想要的那样。

这就是它在预览窗口中的样子。喜欢预览窗口...只是说说。

在这一点上,将运行应用程序来展示这个菜单是什么样子的,并展示图像确实如预期那样出现。看看这个!!它有效!!(如果在尝试了几天之后才看到这个教程,会理解兴奋。)

看这里...图像出现了,但没有复制到bin目录:

现在是时候连接剩下的部分,继续进行下拉部分的乐趣了。在<Window.Resources>(或<UserControl.Resources>)部分下,为想要添加到菜单中的每个图像添加一个引用,然后通过添加MenuItem Icon Images并引用资源键来将每个引用绑定到菜单。确保每个资源图像都有一个唯一的键!!

让再测试一次,好吗?

在这一点上,将连接一些事件处理程序。菜单如果没有实际效果就什么都不是,对吧?发现最快的方法是去每个MenuItem,输入Click="",IntelliSense会弹出选项,让通过双击警报来创建一个新的事件处理程序。可以选择稍后重命名处理程序。

这是代码背后的代码。知道...这很痛苦...但对一些人来说可能不是。不要评判!

现在是那些下拉菜单。知道那些...那些在WinForms中很容易创建,但在WPF中似乎完全难以捉摸的?是的,那些。它们并不像想象的那么难。回到XAML,在MenuItem下添加以下代码:

<MenuItem.ItemsPanel> <ItemsPanelTemplate> <VirtualizingStackPanel Orientation="Vertical"/> </ItemsPanelTemplate> </MenuItem.ItemsPanel>

现在,在那个代码块下添加菜单项,并为它们也添加事件处理程序。是的,就是那么简单。

代码背后的代码:

连接想要它做的事情,完成了!!

是的,可以像上面一样添加图像到那些下拉菜单项中,它们会很好地出现在文本的左侧。因为保证过,这里是完整的代码运行:

玩得开心,编码愉快!!

沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485