WPF横向导航菜单
一、序言
记得没出来工作就开始逛博客园了，这个博客网站做的很好，有很多大神都在里面，当然也有了优质的技术文章，好了，言归正传。这篇博文讲的是做一个横向导航菜单，毕竟菜单是常用的，要多练习练习，就仿照博客园个人博客主页的菜单做一个。
二、该菜单使用Menu控件
1、前端xmal代码如下
<Window x:Class="WpfApp1.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:WpfApp1" mc:Ignorable="d" Title="MainWindow" Height="450" Width="800"> <Grid> <Menu> <MenuItem Header="首页"/> <MenuItem Header="新随笔"/> <MenuItem Header="联系"/> <MenuItem Header="订阅"/> <MenuItem Header="管理"/> </Menu> </Grid> </Window>
2、运行起来看下效果图
3、基本功能做完了就要实现以下效果提升用户体验了，现在要把鼠标移到菜单项上背景色变为蓝色，下面是xmal代码：
<Window x:Class="WpfApp1.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:WpfApp1" mc:Ignorable="d" Title="MainWindow" Height="450" Width="800"> <Grid> <Menu> <MenuItem Header="首页"> <MenuItem.Template> <ControlTemplate TargetType="MenuItem"> <TextBlock x:Name="txt" Padding="2,2,2,2" Text="首页" Background="LightGray"></TextBlock> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter TargetName="txt" Property="Background" Value="Blue"></Setter> <Setter TargetName="txt" Property="Padding" Value="2,2,2,2"></Setter> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </MenuItem.Template> </MenuItem> <MenuItem Header="新随笔"> <MenuItem.Template> <ControlTemplate TargetType="MenuItem"> <TextBlock x:Name="txt" Padding="2,2,2,2" Text="新随笔" Background="LightGray"></TextBlock> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter TargetName="txt" Property="Background" Value="Blue"></Setter> <Setter TargetName="txt" Property="Padding" Value="2,2,2,2"></Setter> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </MenuItem.Template> </MenuItem> <MenuItem Header="联系"> <MenuItem.Template> <ControlTemplate TargetType="MenuItem"> <TextBlock x:Name="txt" Padding="2,2,2,2" Text="联系" Background="LightGray"></TextBlock> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter TargetName="txt" Property="Background" Value="Blue"></Setter> <Setter TargetName="txt" Property="Padding" Value="2,2,2,2"></Setter> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </MenuItem.Template> </MenuItem> <MenuItem Header="订阅"> <MenuItem.Template> <ControlTemplate TargetType="MenuItem"> <TextBlock x:Name="txt" Padding="2,2,2,2" Text="订阅" Background="LightGray"></TextBlock> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter TargetName="txt" Property="Background" Value="Blue"></Setter> <Setter TargetName="txt" Property="Padding" Value="2,2,2,2"></Setter> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </MenuItem.Template> </MenuItem> <MenuItem Header="管理"> <MenuItem.Template> <ControlTemplate TargetType="MenuItem"> <TextBlock x:Name="txt" Padding="2,2,2,2" Text="管理" Background="LightGray"></TextBlock> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter TargetName="txt" Property="Background" Value="Blue"></Setter> <Setter TargetName="txt" Property="Padding" Value="2,2,2,2"></Setter> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </MenuItem.Template> </MenuItem> </Menu> </Grid> </Window>
3.1、上面每个菜单项都用了重复模板，有点鸡肋，现在要把这个模板抽象出来
3.1.1、创建资源字典
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:WpfApp1.Dictionary"> <ControlTemplate x:Key="MenuItemTemplate" TargetType="MenuItem"> <TextBlock x:Name="txt" Padding="2,2,2,2" Text="首页" Background="LightGray"></TextBlock> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter TargetName="txt" Property="Background" Value="Blue"></Setter> <Setter TargetName="txt" Property="Padding" Value="2,2,2,2"></Setter> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </ResourceDictionary>
3.1.2、集成资源字典
<Application x:Class="WpfApp1.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:WpfApp1" StartupUri="MainWindow.xaml"> <Application.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="Dictionary\DictionaryMenu.xaml"/> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </Application.Resources> </Application>
3.1.3、使用资源字典
<Window x:Class="WpfApp1.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:WpfApp1" mc:Ignorable="d" Title="MainWindow" Height="450" Width="800"> <Grid> <Menu> <MenuItem Header="首页" Name="ddd" Template="{StaticResource MenuItemTemplate}"> </MenuItem> <MenuItem Header="新随笔" Name="ddd1" Template="{StaticResource MenuItemTemplate}"> </MenuItem> <MenuItem Header="联系" Name="ddd2" Template="{StaticResource MenuItemTemplate}"> </MenuItem> <MenuItem Header="订阅" Name="ddd4" Template="{StaticResource MenuItemTemplate}"> </MenuItem> <MenuItem Header="管理" Name="ddd5" Template="{StaticResource MenuItemTemplate}"> </MenuItem> </Menu> </Grid> </Window>
3.1.4、运行效果图，上面的资源字典控件模板里面Text的值如何动态绑定？
