C# MaterialDesign抽屉式风格

本案例主要是使用MaterialDesign Wpf库结合Prism框架进行编写

PageModel类

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

    public string Page { get; set; }
}

xaml代码编写

<UserControl
    x:Class="AssemblyLine.Views.UserControls.UserControlContainer"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:behaviors="http://schemas.microsoft.com/xaml/behaviors"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:prism="http://prismlibrary.com/"
    d:DesignHeight="450"
    d:DesignWidth="800"
    prism:ViewModelLocator.AutoWireViewModel="True"
    mc:Ignorable="d">
    <UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </UserControl.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <behaviors:Interaction.Triggers>
            <behaviors:EventTrigger EventName="Loaded">
                <behaviors:InvokeCommandAction Command="{Binding Path=UserControlContainerLoadedCommand}" />
            </behaviors:EventTrigger>
        </behaviors:Interaction.Triggers>

        <materialDesign:ColorZone
            Padding="16"
            materialDesign:ElevationAssist.Elevation="Dp4"
            DockPanel.Dock="Top"
            Mode="PrimaryMid">
            <DockPanel>
                <StackPanel Orientation="Horizontal">
                    <ToggleButton
                        AutomationProperties.Name="HamburgerToggleButton"
                        Command="{Binding OpenDrawerCommand}"
                        CommandParameter="{Binding ElementName=DrawerHost}"
                        IsEnabled="True"
                        Style="{StaticResource MaterialDesignHamburgerToggleButton}" />
                </StackPanel>

                <materialDesign:PopupBox
                    DockPanel.Dock="Right"
                    PlacementMode="BottomAndAlignRightEdges"
                    StaysOpen="False">

                    <StackPanel>
                        <Button Content="Can't Touch This" IsEnabled="False" />
                        <Separator />
                        <Button Content="Goodbye" />
                    </StackPanel>
                </materialDesign:PopupBox>

                <TextBlock
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    AutomationProperties.Name="Material Design In XAML Toolkit"
                    FontSize="22"
                    Text="这里写标题" />
            </DockPanel>
        </materialDesign:ColorZone>

        <materialDesign:DrawerHost x:Name="DrawerHost" Grid.Row="1">
            <materialDesign:DrawerHost.LeftDrawerContent>
                <ListBox
                    x:Name="ListBox"
                    Width="250"
                    DisplayMemberPath="Name"
                    ItemsSource="{Binding Pages}"
                    SelectedItem="{Binding SelectedItem}">
                    <behaviors:Interaction.Triggers>
                        <behaviors:EventTrigger EventName="SelectionChanged">
                            <behaviors:InvokeCommandAction Command="{Binding Path=SelectionChangedCommand}" />
                        </behaviors:EventTrigger>
                    </behaviors:Interaction.Triggers>
                </ListBox>
            </materialDesign:DrawerHost.LeftDrawerContent>

            <ContentControl prism:RegionManager.RegionName="ContentRegion" />
        </materialDesign:DrawerHost>
    </Grid>
</UserControl>

ViewModel类编写

using AssemblyLine.Models;
using AssemblyLine.Services;
using MaterialDesignThemes.Wpf;
using Prism.Commands;
using Prism.Mvvm;
using Prism.Regions;
using System;
using System.Collections.ObjectModel;

namespace AssemblyLine.ViewModels
{
    public class UserControlContainerViewModel : BindableBase
    {
        private ObservableCollection<PageModel> _pages;
        private object _selectedItem;

        public ObservableCollection<PageModel> Pages { get => _pages; set => SetProperty(ref _pages, value); }

        public object SelectedItem { get => _selectedItem; set => SetProperty(ref _selectedItem, value); }

        public DelegateCommand UserControlContainerLoadedCommand { get; }

        public DelegateCommand<DrawerHost> OpenDrawerCommand { get; }

        public DelegateCommand SelectionChangedCommand { get; }

        public UserControlContainerViewModel(IRegionManager regionManager)
        {
            Pages = new ObservableCollection<PageModel>(DataService.Instance.GetPages());

            UserControlContainerLoadedCommand = new DelegateCommand(() =>
            {
                // 窗体加载完成默认打开页面
                Navigate(regionManager, "UserControlMain");
            });

            OpenDrawerCommand = new DelegateCommand<DrawerHost>((drawerHost) =>
            {
                drawerHost.IsLeftDrawerOpen = !drawerHost.IsLeftDrawerOpen;
            });

            SelectionChangedCommand = new DelegateCommand(() =>
            {
                // 根据用户点击进行导航
                if(!(_selectedItem is PageModel pageModel)) return;
                Navigate(regionManager, pageModel.Page);
            });
        }

        private void Navigate(IRegionManager regionManager, string source)
        {
            regionManager.RequestNavigate("ContentRegion", source, result =>
            {
                Console.WriteLine(result.Context.Uri);
            });
        }
    }
}