WPF使用菜单实现页面跳转

1、Menu的使用

1.1 MenuData.xml文件

<?xml version="1.0" encoding="utf-8" ?>
<Data xmlns="">
  <Operation Name="部门管理" Gesture="F" Ico="/Images/out.ico">
    <Operation Name="部门列表" Gesture="Control+P" Uid="/Department/DpmtList.xaml" Model="Jump"/>
    <Operation Name="新增部门" Gesture="Control+W" Uid="/Department/AddDpmt.xaml" Model="Show"/>      
  </Operation>
  <Operation Name="员工管理" Gesture="E" Ico="/Images/admin.ico">
    <Operation Name="员工列表" Gesture="Control+C" Uid="/Employee/EmpList.xaml" Model="Jump"/>
    <Operation Name="新增员工" Gesture="Control+X" Uid="/Employee/AddEmp.xaml" Model="Show"/>
  </Operation>
</Data>

1.2 前台代码

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApplication1"
        Title="菜单" Height="500" Width="800" WindowStartupLocation="CenterScreen">
    <Window.Resources>
        <!--数据源-->
        <XmlDataProvider x:Key="dsMenu"  Source="MenuData.xml" XPath="Data/Operation" />
        <!--菜单模板-->
        <HierarchicalDataTemplate DataType="Operation" ItemsSource="{Binding XPath=Operation}">
            <StackPanel Orientation="Horizontal">
                <Image Source="{Binding XPath=@Ico}" Height="24" Width="24" Margin="10,0"  />
                <TextBlock Text="{Binding XPath=@Name}" Margin="10,0"/>
                <TextBlock Text="{Binding XPath=@Gesture}" />
            </StackPanel>
        </HierarchicalDataTemplate>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="24"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <!--菜单-->
        <StackPanel Grid.Row="0" MenuItem.Click="StackPanel_Click_1">
            <Menu ItemsSource="{Binding Source={StaticResource dsMenu}}"/>
        </StackPanel>
        <!--显示内容-->
        <Frame Grid.Row="1" x:Name="mainFrame" Source="/Index.xaml"  NavigationUIVisibility="Hidden"/>
    </Grid>
</Window>

1.3 后台代码

/// <summary>
/// 菜单点击事件
/// </summary>
private void StackPanel_Click_1(object sender, RoutedEventArgs e)
{
    MenuItem mi = e.OriginalSource as MenuItem;
    XmlElement xe = mi.Header as XmlElement;
    string name = xe.Attributes["Name"].Value;
    string uid = xe.Attributes["Uid"].Value;
    string model = xe.Attributes["Model"].Value;
    //Jump:使用Frame跳转页面；Show:使用NavigationWindow弹出页面
    if (model == "Jump")
    {
        JumpPage(uid);
    }
    else if (model == "Show")
    {
        ShowPage(Name, uid);
    }
}

/// <summary>
/// 使用Frame跳转页面
/// </summary>
private void JumpPage(string uid)
{
    if (!String.IsNullOrWhiteSpace(uid))
    {
        this.mainFrame.Navigate(new Uri(uid, UriKind.Relative));
    }
}

/// <summary>
/// 使用NavigationWindow弹出页面
/// </summary>
private void ShowPage(string title,string uri)
{
    NavigationWindow window = new NavigationWindow();
    window.Title = title;
    window.Width = 300;
    window.Height = 200;
    window.WindowStartupLocation = WindowStartupLocation.CenterScreen;
    window.ResizeMode = ResizeMode.NoResize;
    window.Source = new Uri(uri, UriKind.Relative);
    window.ShowsNavigationUI = false;
    window.Show();
}

2、TreeView的使用

2.1 前台代码

<Window x:Class="WpfApplication1.Test.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="菜单" Height="500" Width="800" WindowStartupLocation="CenterScreen">
    <Window.Resources>
        <!--菜单样式-->
        <Style TargetType="{x:Type TreeView}">
            <Setter Property="Height" Value="550"/>
            <Setter Property="FontSize" Value="14"/>
            <Setter Property="Background" Value="#059ad7"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="Padding" Value="5,10,0,0"/>
        </Style>
        <!--菜单项样式-->
        <Style TargetType="{x:Type TreeViewItem}">
            <Setter Property="FontSize" Value="16"/>
            <Setter Property="Padding" Value="5"/>
            <Setter Property="Cursor" Value="Hand"/>
        </Style>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="190"/>
            <ColumnDefinition Width="3"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <!--菜单-->
        <StackPanel Grid.Column="0" Background="#059ad7">
            <TreeView x:Name="tvMenu" SelectedItemChanged="TreeView_SelectedItemChanged">
                <TreeViewItem Header="菜单" IsExpanded="True" >
                    <TreeViewItem Header="部门管理" IsExpanded="True" >
                        <TreeViewItem Header="部门列表"   Uid="/Department/DpmtList.xaml"/>
                        <TreeViewItem Header="新增部门" Uid="/Department/AddDpmt.xaml"/>
                    </TreeViewItem >
                    <TreeViewItem Header="员工管理" IsExpanded="True">
                        <TreeViewItem Header="员工列表" Uid="/Employee/EmpList.xaml"/>
                        <TreeViewItem Header="新增员工" Uid="/Employee/AddEmp.xaml"/>
                    </TreeViewItem >
                </TreeViewItem>
            </TreeView>
        </StackPanel>
        <!--隔栏-->
        <GridSplitter Grid.Column="1" VerticalAlignment="Stretch" HorizontalAlignment="Center" Background="#c3c1c1" ShowsPreview="True" Width="3" />
        <!--中间内容-->
        <Frame Grid.Column="3" x:Name="mainFrame" Source="/Index.xaml" NavigationUIVisibility="Hidden"/>
    </Grid>
</Window>

2.2 后台代码

/// <summary>
/// 菜单跳转事件
/// </summary>
private void TreeView_SelectedItemChanged(object sender, RoutedPropertyChangedEventArgs<object> e)
{
    TreeView tvMenu = sender as TreeView;
    TreeViewItem tvItem = tvMenu.SelectedItem as TreeViewItem;
    string uid = tvItem.Uid;
    if (!String.IsNullOrWhiteSpace(uid))
    {
        this.mainFrame.Navigate(new Uri(uid, UriKind.Relative));
    }
}

3、其他内容

1、Menu

• Menu 是水平放置它的项的，默认情况下把灰色栏作为背景。
• 把Menu 添加到它的ItemsControl 基类的唯一公开的API 是IsMainMenu 属性。当为true（默认的）时，用户按下Alt 或者F10 键，菜单获得焦点。
• MenuItem 是带头的Items 控件（继承自HeaderedItemControl），它的头实际上是主对象。如果Items 是子元素的话就会被作为
  子菜单显示。MenuItem 使用下划线前缀来支持访问键（access key）。
• Separator（分隔线）是一种简单控件。
• Icon——允许把任意类型的对象添加到Header 旁边。Icon 对象会像Header 一样被渲染，尽管它通常是一幅小图片。
• IsCheckable——让MenuItem 的行为像一个CheckBox 控件。
• InputGestureText——用一个相关的手势（gesture）来标识一个项（最常见的就是键盘快捷方式，比如Ctrl+O）。
• 5个事件：Checked、Unchecked、SubmenuOpened、SubmenuClosed 和Click。
• 要为MenuItem 设置一个键盘快捷键，你应该用它的Command 属性。

2、ContextMenu（上下文菜单）

• 是一种保存MenuItem 和Separator 的简单容器。但不能直接把ContextMenu 嵌入到一个元素树中，必须通过一个适当的属性把它加载到控件上。
• IsOpen 属性以及Opened/Closed 事件。
• 默认情况下，菜单左上角位于鼠标指针处，但是可以把它的Placement 改成一个非MousePoint 的值（如Absolute），或者设置它的HorizontalOffset 以及VerticalOffset 属性，来调整这个行为。
• ContextMenuService 静态类，它包含了许多附加属性，分别对应那些由ContextMenu 直接定义的属性。

3、其他Items 控件

A、TreeView

• 用可展开和折叠的节点来分层显示数据。
• 在TreeView 中一定要显式地用TreeViewItem 包装Item，用TreeViewItem来填充，TreeViewItem 就像MenuItem 一样，是一种带有头的控件，它的Header 属性包含着当前的项，而它的Items 集合中保存着子项（子项也是TreeViewItem）。
• TreeViewItem 有两个方便的属性IsExpanded 和IsSelected。还有4 个事件，分别对应于这两个属性的4种状态：Expanded、Collapsed、Selected 和Unselected。
• 同样支持富键盘导航，加号和减号键可以展开或折叠一个项，箭头方向键、Page Up、Page Down、Home 和End 键可以从一个项向另一个项移动焦点。

B、ToolBar

• 对许多小的按钮（或者其他控件）进行分组。
• ToolBar 可以被放在元素树的任何地方，但是通常把它们放在一个叫作ToolBarTray 的FrameworkElement 中。
• 用户就可以拖曳ToolBar 或重新定义ToolBar，。除非ToolBarTray的IsLocked 属性被设置为true。
• ToolBarTray 有一个Orientation 属性，可以把它设置为Vertical 使其所有的ToolBar 垂直排列项。
• 默认都是最后一个元素第一个被移到溢出区域，但是你能通过OverflowMode 附加属性来控制每个项的溢出行为。有了这个属性，你就可以把一个项标记为AsNeeded（默认，按需要溢出）、Always 或Never。
• System.Windows.Input 命名空间中的KeyboardNavigat ion 类定义了一些用来自定义键盘行为的附加属性。
• ToolBar 实际上是一个带有头的Item 控件（就像MenuItem 和TreeViewItem）。它的Header 属性从来不会被显示，但是它可以被用来实现ToolBarTray 的其他特性。

C、StatusBar

• StatusBar 的行为就像Menu，它只是水平排列放它的项，通常用在窗口底部，以显示状态信息。
• StatusBar 为Separator 提供了一个控件模板，Separator 是作为垂直线被渲染的。
• StatusBar 中的项（除了Separator）是被隐式地包装在一个StatusBarItem 中，但是你依然能显式地进行包装。