在探索如何创建具有图像和下拉菜单的工具提示风格菜单时,找到了许多技巧,但内心深处,知道WPF开发者一定实现了一些整洁的XAML方法来创建菜单,这些菜单涉及图像的相对引用和垂直下拉菜单,而不是WinForm风格的拼凑。
找到了正确的方法,但尚未找到明确的参考。因此,决定创建一个。希望这能帮助到需要的人,这样就不必经历经历的几天尝试和错误了!
重复大约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>
现在,在那个代码块下添加菜单项,并为它们也添加事件处理程序。是的,就是那么简单。
代码背后的代码:
连接想要它做的事情,完成了!!
是的,可以像上面一样添加图像到那些下拉菜单项中,它们会很好地出现在文本的左侧。因为保证过,这里是完整的代码运行:
玩得开心,编码愉快!!