我们简单实现一个通过点击菜单切换显示页面的功能，实现效果：

 

 

xaml：

<UserControl x:Class="MyWpf.MyNavigation"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:MyWpf"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200"></ColumnDefinition>
            <ColumnDefinition  ></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <ItemsControl ItemsSource="{Binding Modules}">
            <!--作为数据展示，总要有个容器吧，这个panel就是为了设置容器用的，设置为StackPanel，WrapPanel都可以 -->
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel>

                    </StackPanel>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>

            <!--每一个数据条目应该是个什么样子，负责具体呈现的-->
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <!--里面填充按钮控件  点击按钮执行command命令，并带Name参数；如果使用被注释掉的这个<Button>按钮标签的写法的话，后台在写OpenPage命令的时候
                     就得写在模型Modules中，和Name属性同一级，就是写在Navigation类中，因为这个标签是在ItemTemplate每一条数据模板中，
                       所以就要为每一个按钮都对应一个命令方法，下面那种写法就是可以避免这种情况，避免了每生成一个对象都要生成一个对应的command命令，-->
                    <!--<Button Command="{Binding OpenPage}" CommandParameter="{Binding Name}" 
                        Content="{Binding Name}"  Height="30" Margin="5"> </Button>-->
                    <!--AncestorType:上级节点的类型 Path:绑定源的路径-->
                    <Button Command="{Binding RelativeSource={RelativeSource AncestorType=local:MyNavigation},Path=DataContext.OpenPage}" 
                CommandParameter="{Binding Name}" Content="{Binding Name}"  Height="30" Margin="5"></Button>
                </DataTemplate>
            </ItemsControl.ItemTemplate>

        </ItemsControl>
        <ContentControl Content="{Binding Page}"  Grid.Column="1">

        </ContentControl>

    </Grid>
</UserControl>

 

后台：

using GalaSoft.MvvmLight;
using GalaSoft.MvvmLight.Command;
using MyWpf.NavigationView;
using System.Collections.Generic;
using System.Windows.Controls;

namespace MyWpf
{
    /// <summary>
    /// MyNavigation.xaml 的交互逻辑
    /// </summary>
    public partial class MyNavigation : UserControl
    {
        public MyNavigation()
        {
            InitializeComponent();
            this.DataContext = new MainMoudle();
        }
    }
    public class MainMoudle : ViewModelBase
    {
        public MainMoudle()
        {
            Modules = new List<Navigation>() { new Navigation() { Name = "菜单一" }, 

                        new Navigation() { Name = "菜单二" }, new Navigation() { Name = "菜单三" } };
            OpenPage = new RelayCommand<string>(t => open(t));
        }

        public List<Navigation> Modules { get; set; }

        private object _page;
        /// <summary>
        /// 打开的页面 只能读，不能改
        /// </summary>
        public object Page
        {
            get { return _page; }
            set
            {
                _page = value;
                RaisePropertyChanged();
            }
        }

        private void open(string name)
        {
            switch (name)
            {
                case "菜单一":
                    Page = new Page1();
                    break;
                case "菜单二":
                    Page = new Page2();
                    break;
                case "菜单三":
                    Page = new Page3();
                    break;
            }
        }
        /// <summary>
        /// 创建点击按钮的command命令
        /// </summary>
        public RelayCommand<string> OpenPage { get; set; }
    }

    public class Navigation
    {
        public string Name { get; set; }
    }
}

 

 

 Page1:

<UserControl x:Class="MyWpf.NavigationView.Page1"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:MyWpf.NavigationView"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid>
        <TextBlock Width="300" Height="300" FontSize="100">菜单1</TextBlock>
    </Grid>
</UserControl>

 

Page2:

<UserControl x:Class="MyWpf.NavigationView.Page2"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:MyWpf.NavigationView"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid>
        <TextBlock Width="300" Height="300" FontSize="100">菜单2</TextBlock>
    </Grid>
</UserControl>

 

Page3:

<UserControl x:Class="MyWpf.NavigationView.Page3"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:MyWpf.NavigationView"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid>
        <TextBlock Width="300" Height="300" FontSize="100">菜单3</TextBlock>  
    </Grid>
</UserControl>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

1