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="DictionaryDictionaryMenu.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的值如何动态绑定？