WPF 左侧按钮导航页示例

WPF 左侧按钮导航页示例

一、程序运行效果如下：

二、程序框架：

三、主窗体xaml代码如下：

<Window x:Class="WPFTest0707.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:WPFTest0707"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="250"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <ItemsControl ItemsSource="{Binding Modules}" BorderBrush="Gray" BorderThickness="0 0 1 0" Background="AliceBlue">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel></StackPanel>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Button Command="{Binding RelativeSource={RelativeSource AncestorType=local:MainWindow},Path=DataContext.OpenCommand}" CommandParameter="{Binding Name}" Content="{Binding Name}" Height="40" Margin="5"/>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>

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

后台代码：

public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            this.DataContext = new MainViewModel();
        }
    }

四、Module类代码：

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

五、启用NuGet添加MVVMLight程序包，然后MainViewModel代码如下：

public class MainViewModel : ViewModelBase
    {

        public MainViewModel()
        {
            Modules = new List<Module>();
            Modules.Add(new Module() { Name = "文件"});
            Modules.Add(new Module() { Name = "编辑" });
            Modules.Add(new Module() { Name = "视图" });
            Modules.Add(new Module() { Name = "项目" });
            Modules.Add(new Module() { Name = "生成" });

            OpenCommand = new RelayCommand<string>(OpenPage);
        }

        public List<Module> Modules { get; private set; }

        public RelayCommand<string> OpenCommand { get; private set; }

        private object page;

        public object Page
        {
            get { return page; }
            set { page = value; RaisePropertyChanged(); }
        }


        public void OpenPage(string Name)
        {
            //MessageBox.Show("good");
            switch(Name)
            {
                case "文件":
                    Page = new Page1();
                    break;
                case "编辑":
                    Page = new Page2();
                    break;
                case "视图":
                    Page = new Page3();
                    break;
                case "项目": break;
                case "生成": break;
            }
        }
    }

六、Views文件夹中的Page1、Page2、Page3是三个用户控件，代码如下：

<UserControl x:Class="WPFTest0707.Views.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:WPFTest0707.Views"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid Background="AntiqueWhite">
        <TextBlock Text="文件" FontSize="30"/>
    </Grid>
</UserControl>

<UserControl x:Class="WPFTest0707.Views.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:WPFTest0707.Views"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid Background="BlueViolet">
        <TextBlock Text="编辑" FontSize="30"/>
    </Grid>
</UserControl>

<UserControl x:Class="WPFTest0707.Views.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:WPFTest0707.Views"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid Background="Orchid">
        <TextBlock Text="视图" FontSize="30"/>
    </Grid>
</UserControl>