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的值如何動態綁定？