asp动态网站开发/营销课程培训

一、序言

    记得没出来工作就开始逛博客园了，这个博客网站做的很好，有很多大神都在里面，当然也有了优质的技术文章，好了，言归正传。这篇博文讲的是做一个横向导航菜单，毕竟菜单是常用的，要多练习练习，就仿照博客园个人博客主页的菜单做一个。

二、该菜单使用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的值如何动态绑定？