NET Core 3 WPF MVVM框架 Prism系列之导航系统

文将介绍如何在.NET Core3环境下使用MVVM框架Prism基于区域Region的导航系统

在讲解Prism导航系统之前，我们先来看看一个例子,我在之前的demo项目创建一个登录界面：

我们看到这里是不是一开始想象到使用WPF带有的导航系统，通过Frame和Page进行页面跳转，然后通过导航日志的GoBack和GoForward实现后退和前进，其实这是通过使用Prism的导航框架实现的,下面我们来看看如何在Prism的MVVM模式下实现该功能

一.区域导航#

我们在上一篇介绍了Prism的区域管理，而Prism的导航系统也是基于区域的，首先我们来看看如何在区域导航

1.注册区域#

LoginWindow.xaml：

Copy<Window x:Class="PrismMetroSample.Shell.Views.Login.LoginWindow"
        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:PrismMetroSample.Shell.Views.Login"
        xmlns:region="clr-namespace:PrismMetroSample.Infrastructure.Constants;assembly=PrismMetroSample.Infrastructure"
        mc:Ignorable="d"
        xmlns:prism="http://prismlibrary.com/"
        xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
         Height="600" Width="400" prism:ViewModelLocator.AutoWireViewModel="True" ResizeMode="NoResize" WindowStartupLocation="CenterScreen"
        Icon="pack://application:,,,/PrismMetroSample.Infrastructure;Component/Assets/Photos/Home, homepage, menu.png" >
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="Loaded">
            <i:InvokeCommandAction Command="{Binding LoginLoadingCommand}"/>
        </i:EventTrigger>
    </i:Interaction.Triggers>
    <Grid>
        <ContentControl prism:RegionManager.RegionName="{x:Static region:RegionNames.LoginContentRegion}" Margin="5"/>
    </Grid>
</Window>

2.注册导航#

App.cs：

Copy  protected override void RegisterTypes(IContainerRegistry containerRegistry)
  {
        containerRegistry.Register<IMedicineSerivce, MedicineSerivce>();
        containerRegistry.Register<IPatientService, PatientService>();
        containerRegistry.Register<IUserService, UserService>();

        //注册全局命令
        containerRegistry.RegisterSingleton<IApplicationCommands, ApplicationCommands>();
        containerRegistry.RegisterInstance<IFlyoutService>(Container.Resolve<FlyoutService>());

        //注册导航
        containerRegistry.RegisterForNavigation<LoginMainContent>();
        containerRegistry.RegisterForNavigation<CreateAccount>();
  }

3.区域导航#

LoginWindowViewModel.cs：

Copypublic class LoginWindowViewModel:BindableBase
{

    private readonly IRegionManager _regionManager;
    private readonly IUserService _userService;
    private DelegateCommand _loginLoadingCommand;
    public DelegateCommand LoginLoadingCommand =>
            _loginLoadingCommand ?? (_loginLoadingCommand = new DelegateCommand(ExecuteLoginLoadingCommand));

    void ExecuteLoginLoadingCommand()
    {
        //在LoginContentRegion区域导航到LoginMainContent
        _regionManager.RequestNavigate(RegionNames.LoginContentRegion, "LoginMainContent");

         Global.AllUsers = _userService.GetAllUsers();
    }

    public LoginWindowViewModel(IRegionManager regionManager, IUserService userService)
    {
          _regionManager = regionManager;
          _userService = userService;            
    }

}

LoginMainContentViewModel.cs：

Copypublic class LoginMainContentViewModel : BindableBase
{
    private readonly IRegionManager _regionManager;

    private DelegateCommand _createAccountCommand;
    public DelegateCommand CreateAccountCommand =>
            _createAccountCommand ?? (_createAccountCommand = new DelegateCommand(ExecuteCreateAccountCommand));

    //导航到CreateAccount
    void ExecuteCreateAccountCommand()
    {
         Navigate("CreateAccount");
    }

    private void Navigate(string navigatePath)
    {
         if (navigatePath != null)
              _regionManager.RequestNavigate(RegionNames.LoginContentRegion, navigatePath);
        
    }


    public LoginMainContentViewModel(IRegionManager regionManager)
    {
         _regionManager = regionManager;
    }

 }

效果如下：

这里我们可以看到我们调用RegionMannager的RequestNavigate方法，其实这样看不能很好的说明是基于区域的做法，如果将换成下面的写法可能更好理解一点：

Copy   //在LoginContentRegion区域导航到LoginMainContent
  _regionManager.RequestNavigate(RegionNames.LoginContentRegion, "LoginMainContent");

换成

Copy //在LoginContentRegion区域导航到LoginMainContent
 IRegion region = _regionManager.Regions[RegionNames.LoginContentRegion];
 region.RequestNavigate("LoginMainContent");

其实RegionMannager的RequestNavigate源码也是大概实现也是大概如此，就是去调Region的RequestNavigate的方法，而Region的导航是实现了一个INavigateAsync接口：

Copypublic interface INavigateAsync
{
   void RequestNavigate(Uri target, Action<NavigationResult> navigationCallback);
   void RequestNavigate(Uri target, Action<NavigationResult> navigationCallback, NavigationParameters navigationParameters);
    
}

我们可以看到有RequestNavigate方法三个形参：

target：表示将要导航的页面Uri
navigationCallback:导航后的回调方法
navigationParameters:导航传递参数(下面会详解)

那么我们将上述加上回调方法：

Copy //在LoginContentRegion区域导航到LoginMainContent
 IRegion region = _regionManager.Regions[RegionNames.LoginContentRegion];
 region.RequestNavigate("LoginMainContent", NavigationCompelted);

 private void NavigationCompelted(NavigationResult result)
 {
     if (result.Result==true)
     {
         MessageBox.Show("导航到LoginMainContent页面成功");
     }
     else
     {
         MessageBox.Show("导航到LoginMainContent页面失败");
     }
 }

效果如下：

二.View和ViewModel参与导航过程#

1.INavigationAware#

我们经常在两个页面之间导航需要处理一些逻辑，例如，LoginMainContent页面导航到CreateAccount页面时候，LoginMainContent退出页面的时刻要保存页面数据，导航到CreateAccount页面的时刻处理逻辑(例如获取从LoginMainContent页面的信息)，Prism的导航系统通过一个INavigationAware接口：

Copy    public interface INavigationAware : Object
    {
        Void OnNavigatedTo(NavigationContext navigationContext);

        Boolean IsNavigationTarget(NavigationContext navigationContext);

        Void OnNavigatedFrom(NavigationContext navigationContext);
    }

OnNavigatedFrom：导航之前触发,一般用于保存该页面的数据
OnNavigatedTo：导航后目的页面触发，一般用于初始化或者接受上页面的传递参数
IsNavigationTarget：True则重用该View实例，Flase则每一次导航到该页面都会实例化一次

我们用代码来演示这三个方法：

LoginMainContentViewModel.cs：

Copypublic class LoginMainContentViewModel : BindableBase, INavigationAware
{
     private readonly IRegionManager _regionManager;

     private DelegateCommand _createAccountCommand;
     public DelegateCommand CreateAccountCommand =>
            _createAccountCommand ?? (_createAccountCommand = new DelegateCommand(ExecuteCreateAccountCommand));

     void ExecuteCreateAccountCommand()
     {
         Navigate("CreateAccount");
     }

     private void Navigate(string navigatePath)
     {
         if (navigatePath != null)
            _regionManager.RequestNavigate(RegionNames.LoginContentRegion, navigatePath);
     }

     public LoginMainContentViewModel(IRegionManager regionManager)
     {
          _regionManager = regionManager;
     }

     public bool IsNavigationTarget(NavigationContext navigationContext)
     {            
          return true;
     }

     public void OnNavigatedFrom(NavigationContext navigationContext)
     {
          MessageBox.Show("退出了LoginMainContent");
     }

     public void OnNavigatedTo(NavigationContext navigationContext)
     {
          MessageBox.Show("从CreateAccount导航到LoginMainContent");
     }
 }

CreateAccountViewModel.cs:

Copypublic class CreateAccountViewModel : BindableBase,INavigationAware
{
     private DelegateCommand _loginMainContentCommand;
     public DelegateCommand LoginMainContentCommand =>
            _loginMainContentCommand ?? (_loginMainContentCommand = new DelegateCommand(ExecuteLoginMainContentCommand));

     void ExecuteLoginMainContentCommand()
     {
         Navigate("LoginMainContent");
     }

     public CreateAccountViewModel(IRegionManager regionManager)
     {
         _regionManager = regionManager;
     }

     private void Navigate(string navigatePath)
     {
        if (navigatePath != null)
            _regionManager.RequestNavigate(RegionNames.LoginContentRegion, navigatePath);
     }

     public bool IsNavigationTarget(NavigationContext navigationContext)
     {
         return true;
     }

     public void OnNavigatedFrom(NavigationContext navigationContext)
     {
         MessageBox.Show("退出了CreateAccount");
     }

     public void OnNavigatedTo(NavigationContext navigationContext)
     {
         MessageBox.Show("从LoginMainContent导航到CreateAccount");
     }

 }

效果如下：

修改IsNavigationTarget为false：

Copypublic class LoginMainContentViewModel : BindableBase, INavigationAware
{
     public bool IsNavigationTarget(NavigationContext navigationContext)
     {            
          return false;
     }
}

public class CreateAccountViewModel : BindableBase,INavigationAware
{
     public bool IsNavigationTarget(NavigationContext navigationContext)
     {
         return false;
     }
 }

效果如下:

我们会发现LoginMainContent和CreateAccount页面的数据不见了，这是因为第二次导航到页面的时候当IsNavigationTarget为false时，View将会重新实例化，导致ViewModel也重新加载,因此所有数据都清空了

2.IRegionMemberLifetime#

同时，Prism还可以通过IRegionMemberLifetime接口的KeepAlive布尔属性控制区域的视图的生命周期,我们在上一篇关于区域管理器说到，当视图添加到区域时候，像ContentControl这种单独显示一个活动视图，可以通过Region的Activate和Deactivate方法激活和失效视图，像ItemsControl这种可以同时显示多个活动视图的，可以通过Region的Add和Remove方法控制增加活动视图和失效视图，而当视图的KeepAlive为false，Region的Activate另外一个视图时，则该视图的实例则会去除出区域，为什么我们不在区域管理器讲解该接口呢？因为当导航的时候，同样的是在触发了Region的Activate和Deactivate，当有IRegionMemberLifetime接口时则会触发Region的Add和Remove方法，这里可以去看下Prism的RegionMemberLifetimeBehavior源码

我们将LoginMainContentViewModel实现IRegionMemberLifetime接口，并且把KeepAlive设置为false，同样的将IsNavigationTarget设置为true

LoginMainContentViewModel.cs:

Copypublic class LoginMainContentViewModel : BindableBase, INavigationAware，IRegionMemberLifetime
{

     public bool KeepAlive => false;
     
     private readonly IRegionManager _regionManager;

     private DelegateCommand _createAccountCommand;
     public DelegateCommand CreateAccountCommand =>
            _createAccountCommand ?? (_createAccountCommand = new DelegateCommand(ExecuteCreateAccountCommand));

     void ExecuteCreateAccountCommand()
     {
         Navigate("CreateAccount");
     }

     private void Navigate(string navigatePath)
     {
         if (navigatePath != null)
            _regionManager.RequestNavigate(RegionNames.LoginContentRegion, navigatePath);
     }

     public LoginMainContentViewModel(IRegionManager regionManager)
     {
          _regionManager = regionManager;
     }

     public bool IsNavigationTarget(NavigationContext navigationContext)
     {            
          return true;
     }

     public void OnNavigatedFrom(NavigationContext navigationContext)
     {
          MessageBox.Show("退出了LoginMainContent");
     }

     public void OnNavigatedTo(NavigationContext navigationContext)
     {
          MessageBox.Show("从CreateAccount导航到LoginMainContent");
     }
 }

效果如下：

我们会发现跟没实现IRegionMemberLifetime接口和IsNavigationTarget设置为false情况一样，当KeepAlive为false时，通过断点知道，重新导航回LoginMainContent页面时不会触发IsNavigationTarget方法，因此可以

知道判断顺序是：KeepAlive -->IsNavigationTarget

3.IConfirmNavigationRequest#

Prism的导航系统还支持再导航前允许是否需要导航的交互需求，这里我们在CreateAccount注册完用户后寻问是否需要导航回LoginMainContent页面，代码如下：

CreateAccountViewModel.cs:

Copypublic class CreateAccountViewModel : BindableBase, INavigationAware，IConfirmNavigationRequest
{
     private DelegateCommand _loginMainContentCommand;
     public DelegateCommand LoginMainContentCommand =>
            _loginMainContentCommand ?? (_loginMainContentCommand = new DelegateCommand(ExecuteLoginMainContentCommand));
    
     private DelegateCommand<object> _verityCommand;
     public DelegateCommand<object> VerityCommand =>
            _verityCommand ?? (_verityCommand = new DelegateCommand<object>(ExecuteVerityCommand));

     void ExecuteLoginMainContentCommand()
     {
         Navigate("LoginMainContent");
     }

     public CreateAccountViewModel(IRegionManager regionManager)
     {
         _regionManager = regionManager;
     }

     private void Navigate(string navigatePath)
     {
        if (navigatePath != null)
            _regionManager.RequestNavigate(RegionNames.LoginContentRegion, navigatePath);
     }

     public bool IsNavigationTarget(NavigationContext navigationContext)
     {
         return true;
     }

     public void OnNavigatedFrom(NavigationContext navigationContext)
     {
         MessageBox.Show("退出了CreateAccount");
     }

     public void OnNavigatedTo(NavigationContext navigationContext)
     {
         MessageBox.Show("从LoginMainContent导航到CreateAccount");
     }
    
     //注册账号
     void ExecuteVerityCommand(object parameter)
     {
         if (!VerityRegister(parameter))
         {
                return;
         }
         MessageBox.Show("注册成功!");
         LoginMainContentCommand.Execute();
     }
    
     //导航前询问
     public void ConfirmNavigationRequest(NavigationContext navigationContext, Action<bool> continuationCallback)
     {
         var result = false;
         if (MessageBox.Show("是否需要导航到LoginMainContent页面?", "Naviagte?",MessageBoxButton.YesNo) ==MessageBoxResult.Yes)
         {
             result = true;
         }
         continuationCallback(result);
      }
 }

效果如下：

三.导航期间传递参数#

Prism提供NavigationParameters类以帮助指定和检索导航参数，在导航期间，可以通过访问以下方法来传递导航参数：

INavigationAware接口的IsNavigationTarget，OnNavigatedFrom和OnNavigatedTo方法中IsNavigationTarget，OnNavigatedFrom和OnNavigatedTo中形参NavigationContext对象的NavigationParameters属性
IConfirmNavigationRequest接口的ConfirmNavigationRequest形参NavigationContext对象的NavigationParameters属性
区域导航的INavigateAsync接口的RequestNavigate方法赋值给其形参navigationParameters
导航日志IRegionNavigationJournal接口CurrentEntry属性的NavigationParameters类型的Parameters属性(下面会介绍导航日志)

这里我们CreateAccount页面注册完用户后询问是否需要用当前注册用户来作为登录LoginId，来演示传递导航参数，代码如下：

CreateAccountViewModel.cs(修改代码部分):

Copyprivate string _registeredLoginId;
public string RegisteredLoginId
{
    get { return _registeredLoginId; }
    set { SetProperty(ref _registeredLoginId, value); }
}

public bool IsUseRequest { get; set; }

void ExecuteVerityCommand(object parameter)
{
    if (!VerityRegister(parameter))
    {
        return;
    }
    this.IsUseRequest = true;
    MessageBox.Show("注册成功!");
    LoginMainContentCommand.Execute();
}   

public void ConfirmNavigationRequest(NavigationContext navigationContext, Action<bool> continuationCallback)
{
    if (!string.IsNullOrEmpty(RegisteredLoginId) && this.IsUseRequest)
    {
         if (MessageBox.Show("是否需要用当前注册的用户登录?", "Naviagte?", MessageBoxButton.YesNo) == MessageBoxResult.Yes)
         {
              navigationContext.Parameters.Add("loginId", RegisteredLoginId);
         }
    }
    continuationCallback(true);
}

LoginMainContentViewModel.cs(修改代码部分):

Copypublic void OnNavigatedTo(NavigationContext navigationContext)
{
     MessageBox.Show("从CreateAccount导航到LoginMainContent");
            
     var loginId= navigationContext.Parameters["loginId"] as string;
     if (loginId!=null)
     {
         this.CurrentUser = new User() { LoginId=loginId};
     }
            
 }

效果如下：

四.导航日志#

Prism导航系统同样的和WPF导航系统一样，都支持导航日志，Prism是通过IRegionNavigationJournal接口来提供区域导航日志功能，

Copy    public interface IRegionNavigationJournal
    {
        bool CanGoBack { get; }

        bool CanGoForward { get; }

        IRegionNavigationJournalEntry CurrentEntry {get;}

        INavigateAsync NavigationTarget { get; set; }

        void GoBack();

        void GoForward();

        void RecordNavigation(IRegionNavigationJournalEntry entry, bool persistInHistory);

        void Clear();
    }

我们将在登录界面接入导航日志功能,代码如下:

LoginMainContent.xaml(前进箭头代码部分):

Copy<TextBlock Width="30" Height="30" HorizontalAlignment="Right" Text="" FontWeight="Bold" FontFamily="pack://application:,,,/PrismMetroSample.Infrastructure;Component/Assets/Fonts/#iconfont" FontSize="30" Margin="10" Visibility="{Binding IsCanExcute,Converter={StaticResource boolToVisibilityConverter}}">
      <i:Interaction.Triggers>
           <i:EventTrigger EventName="MouseLeftButtonDown">
                 <i:InvokeCommandAction Command="{Binding GoForwardCommand}"/>
            </i:EventTrigger>
      </i:Interaction.Triggers>
      <TextBlock.Style>
           <Style TargetType="TextBlock">
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                          <Setter Property="Background" Value="#F9F9F9"/>
                    </Trigger>
                 </Style.Triggers>
            </Style>
      </TextBlock.Style>
 </TextBlock>

BoolToVisibilityConverter.cs:

Copypublic class BoolToVisibilityConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
          if (value==null)
          {
              return DependencyProperty.UnsetValue;
          }
          var isCanExcute = (bool)value;
          if (isCanExcute)
          {
              return Visibility.Visible;
          }
          else
          {
              return Visibility.Hidden;
          }
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
            throw new NotImplementedException();
    }
 }

LoginMainContentViewModel.cs(修改代码部分):

CopyIRegionNavigationJournal _journal;

private DelegateCommand<PasswordBox> _loginCommand;
public DelegateCommand<PasswordBox> LoginCommand =>
            _loginCommand ?? (_loginCommand = new DelegateCommand<PasswordBox>(ExecuteLoginCommand, CanExecuteGoForwardCommand));

private DelegateCommand _goForwardCommand;
public DelegateCommand GoForwardCommand =>
            _goForwardCommand ?? (_goForwardCommand = new DelegateCommand(ExecuteGoForwardCommand));

private void ExecuteGoForwardCommand()
{
    _journal.GoForward();
}

private bool CanExecuteGoForwardCommand(PasswordBox passwordBox)
{
    this.IsCanExcute=_journal != null && _journal.CanGoForward;
    return true;
}

public void OnNavigatedTo(NavigationContext navigationContext)
{
     //MessageBox.Show("从CreateAccount导航到LoginMainContent");
     _journal = navigationContext.NavigationService.Journal;

     var loginId= navigationContext.Parameters["loginId"] as string;
     if (loginId!=null)
     {
                this.CurrentUser = new User() { LoginId=loginId};
     }
     LoginCommand.RaiseCanExecuteChanged();
}

CreateAccountViewModel.cs(修改代码部分):

CopyIRegionNavigationJournal _journal;

private DelegateCommand _goBackCommand;
public DelegateCommand GoBackCommand =>
            _goBackCommand ?? (_goBackCommand = new DelegateCommand(ExecuteGoBackCommand));

void ExecuteGoBackCommand()
{
     _journal.GoBack();
}

 public void OnNavigatedTo(NavigationContext navigationContext)
 {
     //MessageBox.Show("从LoginMainContent导航到CreateAccount");
     _journal = navigationContext.NavigationService.Journal;
 }

效果如下：

选择退出导航日志#

如果不打算将页面在导航过程中不加入导航日志，例如LoginMainContent页面，可以通过实现IJournalAware并从PersistInHistory（）返回false

Copy    public class LoginMainContentViewModel : IJournalAware
    {
        public bool PersistInHistory() => false;
    }

五.小结：#

prism的导航系统可以跟wpf导航并行使用，这是prism官方文档也支持的，因为prism的导航系统是基于区域的，不依赖于wpf，不过更推荐于单独使用prism的导航系统，因为在MVVM模式下更灵活，支持依赖注入,通过区域管理器能够更好的管理视图View,更能适应复杂应用程序需求，wpf导航系统不支持依赖注入模式，也依赖于Frame元素，而且在导航过程中也是容易强依赖View部分，下一篇将会讲解Prism的对话框服务

六.源码#

最后，附上整个demo的源代码：PrismDemo源码

作者： RyzenAdorer

出处：https://www.cnblogs.com/ryzen/p/12703914.html

信公众号：Dotnet9，网站：Dotnet9，问题或建议：请网站留言，如果对您有所帮助：欢迎赞赏。

.NET CORE(C#) WPF 抽屉式菜单

阅读导航

本文背景
代码实现
本文参考
源码

1. 本文背景

使用简单动画实现抽屉式菜单

2. 代码实现

使用 .NET CORE 3.1 创建名为 “AnimatedColorfulMenu” 的WPF模板项目，添加1个Nuget库：MaterialDesignThemes，版本为最新预览版3.1.0-ci948。

解决方案主要文件目录组织结构：

AnimatedColorfulMenuApp.xamlMainWindow.xaml

2.1 引入样式

文件【App.xaml】，在 StartupUri 中设置启动的视图【MainWindow.xaml】，并在【Application.Resources】节点增加 MaterialDesignThemes库的样式文件：

<Application.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/Primary/MaterialDesignColor.Blue.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Indigo.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

2.2 演示窗体布局

文件【MainWindow.xaml】，代码不多，主要看左侧菜单，启动时，菜单在显示窗体左侧-150位置；点击展开菜单，使用简单的动画，慢慢呈现在显示窗体左侧，源码如下：

<Window x:Class="AnimatedColorfulMenu.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:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        mc:Ignorable="d" Height="600" Width="1080" ResizeMode="NoResize" 
        WindowStartupLocation="CenterScreen" WindowStyle="None">
    <Window.Resources>
        <Storyboard x:Key="CloseMenu">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="GridMenu">
                <EasingDoubleKeyFrame KeyTime="0" Value="150"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="GridBackground">
                <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="OpenMenu">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="GridMenu">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="150"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="GridBackground">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>
    <Window.Triggers>
        <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="ButtonClose">
            <BeginStoryboard x:Name="CloseMenu_BeginStoryboard" Storyboard="{StaticResource CloseMenu}"/>
        </EventTrigger>
        <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="ButtonOpen">
            <BeginStoryboard Storyboard="{StaticResource OpenMenu}"/>
        </EventTrigger>
    </Window.Triggers>
    <Grid>
        <Grid x:Name="GridBackground" Background="#55313131" Opacity="0"/>
        <Button x:Name="ButtonOpen" HorizontalAlignment="Left" VerticalAlignment="Top" Background="{x:Null}" BorderBrush="{x:Null}" Width="30" Height="30" Padding="0">
            <materialDesign:PackIcon Kind="Menu" Foreground="#FF313131"/>
        </Button>
        <!--左侧抽屉菜单，默认在显示窗体之外，点击菜单图标再通过简单的动画呈现出来-->
        <Grid x:Name="GridMenu" Width="150" HorizontalAlignment="Left" Margin="-150 0 0 0" Background="White" RenderTransformOrigin="0.5,0.5">
            <Grid.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </Grid.RenderTransform>
            <StackPanel>
                <Image Height="140" Source="https://img.dotnet9.com/logo-foot.png" Stretch="Fill"/>
                <ListView Foreground="#FF313131" FontFamily="Champagne & Limousines" FontSize="18">
                    <ListViewItem Height="45" Padding="0">
                        <StackPanel Orientation="Horizontal" Margin="10 0">
                            <materialDesign:PackIcon Kind="Recycle" Width="20" Height="20" Foreground="Gray" Margin="5" VerticalAlignment="Center"/>
                            <TextBlock Text="回收" Margin="10"/>
                        </StackPanel>
                    </ListViewItem>
                    <ListViewItem Height="45" Padding="0">
                        <StackPanel Orientation="Horizontal" Margin="10 0">
                            <materialDesign:PackIcon Kind="HelpCircleOutline" Width="20" Height="20" Foreground="#FFF08033" Margin="5" VerticalAlignment="Center"/>
                            <TextBlock Text="帮助" Margin="10"/>
                        </StackPanel>
                    </ListViewItem>
                    <ListViewItem Height="45" Padding="0">
                        <StackPanel Orientation="Horizontal" Margin="10 0">
                            <materialDesign:PackIcon Kind="Lightbulb" Width="20" Height="20" Foreground="Green" Margin="5" VerticalAlignment="Center"/>
                            <TextBlock Text="发送反馈" Margin="10"/>
                        </StackPanel>
                    </ListViewItem>
                    <ListViewItem Height="45" Padding="0">
                        <StackPanel Orientation="Horizontal" Margin="10 0">
                            <materialDesign:PackIcon Kind="Heart" Width="20" Height="20" Foreground="#FFD41515" Margin="5" VerticalAlignment="Center"/>
                            <TextBlock Text="推荐" Margin="10"/>
                        </StackPanel>
                    </ListViewItem>
                    <ListViewItem Height="45" Padding="0">
                        <StackPanel Orientation="Horizontal" Margin="10 0">
                            <materialDesign:PackIcon Kind="StarCircle" Width="20" Height="20" Foreground="#FFE6A701" Margin="5" VerticalAlignment="Center"/>
                            <TextBlock Text="溢价认购" Margin="10"/>
                        </StackPanel>
                    </ListViewItem>
                    <ListViewItem Height="45" Padding="0">
                        <StackPanel Orientation="Horizontal" Margin="10 0">
                            <materialDesign:PackIcon Kind="Settings" Width="20" Height="20" Foreground="#FF0069C1" Margin="5" VerticalAlignment="Center"/>
                            <TextBlock Text="设置" Margin="10"/>
                        </StackPanel>
                    </ListViewItem>
                </ListView>
            </StackPanel>
            <Button x:Name="ButtonClose" HorizontalAlignment="Right" VerticalAlignment="Top" Background="{x:Null}" Foreground="#CCC" BorderBrush="{x:Null}" Width="30" Height="30" Padding="0">
                <materialDesign:PackIcon Kind="Close"/>
            </Button>
        </Grid>
    </Grid>
</Window>

3.本文参考

视频一：C# WPF Material Design UI: Animated Colorful Navigation Drawer，配套源码：AnimatedColorfulMenu。
C# WPF开源控件库《MaterialDesignInXAML》

4.源码

效果图实现代码在文中已经全部给出，可直接Copy，按解决方案目录组织代码文件即可运行。

除非注明，文章均由 Dotnet9 整理发布，欢迎转载。
转载请注明本文地址：https://dotnet9.com/7397.html
欢迎扫描下方二维码关注 Dotnet9 的微信公众号，本站会及时推送最新技术文章

时间如流水，只能流去不流回！

点击《【阅读原文】》，本站还有更多技术类文章等着您哦！！！

此刻顺便为我点个《【再看】》可好？

信公众号：Dotnet9，网站：Dotnet9，问题或建议：请网站留言，如果对您有所帮助：欢迎赞赏。

.NET CORE(C#) WPF 值得推荐的动画菜单设计

阅读导航

本文背景
代码实现
本文参考
源码

1. 本文背景

YouTube上老外的一个设计，站长觉得不错，分享给大家作为参考，抽屉菜单的动画做的非常不错。

运行起始界面：

站长运行操作一遍，录制了动画大家看看：

2. 代码实现

使用 .NET CORE 3.1 创建名为 “AnimatedMenu” 的WPF模板项目，添加1个Nuget库：MaterialDesignThemes，版本为最新预览版3.1.0-ci948。

解决方案主要文件目录组织结构：

AnimatedMenu
App.xaml
MainWindow.xaml
MainWindow.xaml.cs

2.1 引入样式

文件【App.xaml】，在 StartupUri 中设置启动的视图【MainWindow.xaml】，并在【Application.Resources】节点增加 MaterialDesignThemes库的样式文件：

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Dark.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.Blue.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Blue.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

2.2 演示窗体

文件【MainWindow.xaml】，布局代码、动画代码都在此文件中，源码如下：

<Window x:Class="AnimatedMenu.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" MouseLeftButtonDown="MoveWindow_MouseLeftButtonDown"
        Height="600" Width="1024" WindowStyle="None" WindowStartupLocation="CenterScreen">
    <WindowChrome.WindowChrome>
        <WindowChrome CaptionHeight="0"/>
    </WindowChrome.WindowChrome>
    <Window.Resources>
        <Storyboard x:Key="OpenMenu">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="GridMain">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="250"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="GridMain">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="50"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="StackPanelMenu">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="250"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="listViewItem">
                <EasingDoubleKeyFrame KeyTime="0" Value="-250"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="-250"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="listViewItem1">
                <EasingDoubleKeyFrame KeyTime="0" Value="-250"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="-250"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="listViewItem2">
                <EasingDoubleKeyFrame KeyTime="0" Value="-250"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="-250"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1.1" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="listViewItem3">
                <EasingDoubleKeyFrame KeyTime="0" Value="-250"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="-250"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="listViewItem4">
                <EasingDoubleKeyFrame KeyTime="0" Value="-250"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="-250"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="button">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="button">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="CloseMenu">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="GridMain">
                <EasingDoubleKeyFrame KeyTime="0" Value="250"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="GridMain">
                <EasingDoubleKeyFrame KeyTime="0" Value="50"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="StackPanelMenu">
                <EasingDoubleKeyFrame KeyTime="0" Value="250"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>
    <Window.Triggers>
        <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="ButtonOpenMenu">
            <BeginStoryboard Storyboard="{StaticResource OpenMenu}"/>
        </EventTrigger>
        <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="ButtonCloseMenu">
            <BeginStoryboard x:Name="CloseMenu_BeginStoryboard" Storyboard="{StaticResource CloseMenu}"/>
        </EventTrigger>
    </Window.Triggers>
    <Grid Background="#FF3580BF">
        <StackPanel x:Name="StackPanelMenu" Width="250" HorizontalAlignment="Left" Margin="-250 0 0 0" RenderTransformOrigin="0.5,0.5">
            <StackPanel.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </StackPanel.RenderTransform>
            <StackPanel Orientation="Horizontal" VerticalAlignment="Top" Height="100" HorizontalAlignment="Center">
                <Button Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}" Background="{x:Null}" BorderBrush="{x:Null}" Padding="0" Width="50" Height="50" Margin="10">
                    <materialDesign:PackIcon Kind="Settings" Width="40" Height="40"/>
                </Button>
                <Button x:Name="button" Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}" BorderBrush="{x:Null}" Padding="0" Width="80" Height="80" Margin="10" RenderTransformOrigin="0.5,0.5">
                    <Button.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform/>
                            <SkewTransform/>
                            <RotateTransform/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </Button.RenderTransform>
                    <Button.Background>
                        <ImageBrush ImageSource="https://img.dotnet9.com/logo.png" Stretch="UniformToFill"/>
                    </Button.Background>
                </Button>
                <Button Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}" Background="{x:Null}" BorderBrush="{x:Null}" Padding="0" Width="50" Height="50" Margin="10">
                    <materialDesign:PackIcon Kind="InformationOutline" Width="40" Height="40"/>
                </Button>
            </StackPanel>
            <ListView>
                <ListViewItem x:Name="listViewItem" Height="60" RenderTransformOrigin="0.5,0.5">
                    <ListViewItem.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform/>
                            <SkewTransform/>
                            <RotateTransform/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </ListViewItem.RenderTransform>
                    <StackPanel Orientation="Horizontal" Margin="10 0">
                        <materialDesign:PackIcon Kind="Home" Width="30" Height="30" VerticalAlignment="Center" Margin="5"/>
                        <TextBlock Text="主页" Margin="10" VerticalAlignment="Center"/>
                    </StackPanel>
                </ListViewItem>
                <ListViewItem x:Name="listViewItem1" Height="60" RenderTransformOrigin="0.5,0.5">
                    <ListViewItem.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform/>
                            <SkewTransform/>
                            <RotateTransform/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </ListViewItem.RenderTransform>
                    <StackPanel Orientation="Horizontal" Margin="10 0">
                        <materialDesign:PackIcon Kind="AccountSearch" Width="30" Height="30" VerticalAlignment="Center" Margin="5"/>
                        <TextBlock Text="搜索" Margin="10" VerticalAlignment="Center"/>
                    </StackPanel>
                </ListViewItem>
                <ListViewItem x:Name="listViewItem2" Height="60" RenderTransformOrigin="0.5,0.5">
                    <ListViewItem.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform/>
                            <SkewTransform/>
                            <RotateTransform/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </ListViewItem.RenderTransform>
                    <StackPanel Orientation="Horizontal" Margin="10 0">
                        <materialDesign:PackIcon Kind="Wechat" Width="30" Height="30" VerticalAlignment="Center" Margin="5"/>
                        <TextBlock Text="微信" Margin="10" VerticalAlignment="Center"/>
                    </StackPanel>
                </ListViewItem>
                <ListViewItem x:Name="listViewItem3" Height="60" RenderTransformOrigin="0.5,0.5">
                    <ListViewItem.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform/>
                            <SkewTransform/>
                            <RotateTransform/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </ListViewItem.RenderTransform>
                    <StackPanel Orientation="Horizontal" Margin="10 0">
                        <materialDesign:PackIcon Kind="Qqchat" Width="30" Height="30" VerticalAlignment="Center" Margin="5"/>
                        <TextBlock Text="QQ" Margin="10" VerticalAlignment="Center"/>
                    </StackPanel>
                </ListViewItem>
                <ListViewItem x:Name="listViewItem4" Height="60" RenderTransformOrigin="0.5,0.5">
                    <ListViewItem.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform/>
                            <SkewTransform/>
                            <RotateTransform/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </ListViewItem.RenderTransform>
                    <StackPanel Orientation="Horizontal" Margin="10 0">
                        <materialDesign:PackIcon Kind="Facebook" Width="30" Height="30" VerticalAlignment="Center" Margin="5"/>
                        <TextBlock Text="脸书" Margin="10" VerticalAlignment="Center"/>
                    </StackPanel>
                </ListViewItem>
            </ListView>
        </StackPanel>
        <Grid x:Name="GridMain" Background="#FFFBFBFB" Width="1024" RenderTransformOrigin="0.5,0.5">
            <Grid.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </Grid.RenderTransform>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="250"/>
            </Grid.ColumnDefinitions>

            <Grid Grid.Column="1" Background="#FF3580BF">
                <Image Height="150" VerticalAlignment="Top" Source="https://dotnet9.com/wp-content/uploads/2017/04/About-Header.jpg" Stretch="UniformToFill"/>
                <Ellipse Height="100" Width="100" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="20 100" Stroke="White">
                    <Ellipse.Fill>
                        <ImageBrush ImageSource="https://img.dotnet9.com/logo.png" Stretch="UniformToFill"/>
                    </Ellipse.Fill>
                </Ellipse>
                <TextBlock Text="Dotnet9" Foreground="White" FontSize="28" FontFamily="Nirmala UI Semilight" Margin="10 100" VerticalAlignment="Top"/>
                <StackPanel Margin="0 150">
                    <Grid Height="60" Margin="20 50 20 0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="30"/>
                            <RowDefinition Height="30"/>
                        </Grid.RowDefinitions>
                        <TextBlock Text="追随者" VerticalAlignment="Bottom" Foreground="#FFFBFBFB" Margin="5,0,5,5"/>
                        <TextBlock Text="1.5K" VerticalAlignment="Top" Foreground="#FFFBFBFB" Grid.Row="1" Margin="10 0"/>

                        <TextBlock Text="跟随" VerticalAlignment="Bottom" Foreground="#FFFBFBFB" Margin="5,0,5,5" Grid.Column="1"/>
                        <TextBlock Text="2.3K" VerticalAlignment="Top" Foreground="#FFFBFBFB" Grid.Row="1" Margin="10 0" Grid.Column="1"/>
                    </Grid>

                    <TextBlock TextWrapping="Wrap" Margin="10" Foreground="#FFFBFBFB" FontSize="14">
                        <Run Text="网名：沙漠尽头的狼"/>
                        <LineBreak/>
                        <LineBreak/>
                        <Run Text="网站：https://dotnet9.com"/>
                        <LineBreak/>
                        <Run Text="    Dotnet9的博客 - 一个热衷于互联网分享精神的个人博客站点"/>
                        <LineBreak/>
                        <LineBreak/>
                        <Run Text="座右铭：时间如流水，只能流去不流回。"/>
                    </TextBlock>
                </StackPanel>
            </Grid>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="40"/>
                    <RowDefinition Height="50"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>

                <Button x:Name="ButtonCloseMenu" Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}" Width="30" Height="30" Padding="0" Background="{x:Null}" BorderBrush="{x:Null}" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="5" Click="ButtonCloseMenu_Click" Visibility="Collapsed">
                    <materialDesign:PackIcon Kind="Menu" Foreground="#FF3580BF"/>
                </Button>
                <Button x:Name="ButtonOpenMenu" Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}" Width="30" Height="30" Padding="0" Background="{x:Null}" BorderBrush="{x:Null}" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="5" Click="ButtonOpenMenu_Click">
                    <materialDesign:PackIcon Kind="Menu" Foreground="#FF3580BF"/>
                </Button>


                <TextBlock Text="照片" Foreground="#FF3580BF" FontSize="30" FontWeight="Bold" Margin="5" Grid.Row="1"/>

                <Grid Margin="5" Grid.Row="2" Grid.Column="0">
                    <Grid.Effect>
                        <DropShadowEffect BlurRadius="20" Color="#FFEEEEEE" ShadowDepth="1"/>
                    </Grid.Effect>
                    <Image Source="https://dotnet9.com/wp-content/uploads/2019/12/wpf.png" Stretch="UniformToFill"/>
                    <StackPanel Orientation="Horizontal" Margin="5" HorizontalAlignment="Right" VerticalAlignment="Bottom">
                        <materialDesign:PackIcon Kind="Heart" Foreground="#FFFBFBFB"/>
                        <TextBlock Text="25" Foreground="#FFFBFBFB"/>
                    </StackPanel>
                </Grid>
                <Grid Margin="5" Grid.Row="2" Grid.Column="1">
                    <Grid.Effect>
                        <DropShadowEffect BlurRadius="20" Color="#FFEEEEEE" ShadowDepth="1"/>
                    </Grid.Effect>
                    <Image Source="https://dotnet9.com/wp-content/uploads/2019/12/winform.png" Stretch="UniformToFill"/>
                    <StackPanel Orientation="Horizontal" Margin="5" HorizontalAlignment="Right" VerticalAlignment="Bottom">
                        <materialDesign:PackIcon Kind="Heart" Foreground="#FFFBFBFB"/>
                        <TextBlock Text="50" Foreground="#FFFBFBFB"/>
                    </StackPanel>
                </Grid>
                <Grid Margin="5" Grid.Row="2" Grid.Column="2">
                    <Grid.Effect>
                        <DropShadowEffect BlurRadius="20" Color="#FFEEEEEE" ShadowDepth="1"/>
                    </Grid.Effect>
                    <Image Source="https://dotnet9.com/wp-content/uploads/2019/12/asp-net-core.png" Stretch="UniformToFill"/>
                    <StackPanel Orientation="Horizontal" Margin="5" HorizontalAlignment="Right" VerticalAlignment="Bottom">
                        <materialDesign:PackIcon Kind="Heart" Foreground="#FFFBFBFB"/>
                        <TextBlock Text="18" Foreground="#FFFBFBFB"/>
                    </StackPanel>
                </Grid>
                <Grid Margin="5" Grid.Row="3" Grid.Column="0">
                    <Grid.Effect>
                        <DropShadowEffect BlurRadius="20" Color="#FFEEEEEE" ShadowDepth="1"/>
                    </Grid.Effect>
                    <Image Source="https://img.dotnet9.com/Xamarin.Forms.png" Stretch="UniformToFill"/>
                    <StackPanel Orientation="Horizontal" Margin="5" HorizontalAlignment="Right" VerticalAlignment="Bottom">
                        <materialDesign:PackIcon Kind="Heart" Foreground="#FFFBFBFB"/>
                        <TextBlock Text="32" Foreground="#FFFBFBFB"/>
                    </StackPanel>
                </Grid>
                <Grid Margin="5" Grid.Row="3" Grid.Column="1">
                    <Grid.Effect>
                        <DropShadowEffect BlurRadius="20" Color="#FFEEEEEE" ShadowDepth="1"/>
                    </Grid.Effect>
                    <Image Source="https://dotnet9.com/wp-content/uploads/2019/12/front-end.png" Stretch="UniformToFill"/>
                    <StackPanel Orientation="Horizontal" Margin="5" HorizontalAlignment="Right" VerticalAlignment="Bottom">
                        <materialDesign:PackIcon Kind="Heart" Foreground="#FFFBFBFB"/>
                        <TextBlock Text="32" Foreground="#FFFBFBFB"/>
                    </StackPanel>
                </Grid>
            </Grid>
        </Grid>
        <StackPanel Orientation="Horizontal" VerticalAlignment="Top" Height="40" HorizontalAlignment="Right" Margin="10">
            <Button Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}" Width="30" Height="30" Padding="0" Background="{x:Null}" BorderBrush="{x:Null}">
                <materialDesign:PackIcon Kind="Bell"/>
            </Button>
            <Button x:Name="ButtonClose" Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}" Width="30" Height="30" Padding="0" Background="{x:Null}" BorderBrush="{x:Null}" Click="ButtonClose_Click">
                <materialDesign:PackIcon Kind="Close"/>
            </Button>
        </StackPanel>
    </Grid>
</Window>

简单说明下：

"StackPanelMenu" 作为左侧菜单容器，默认是显示在窗体外，距离窗体左边缘-250，点击左上角菜单按钮图标可控制此容器的显示与隐藏，注：菜单开关由两个按钮组成 "ButtonOpenMenu" 和 "ButtonCloseMenu"。
左侧菜单项使用 "ListView" 进行布局，实际开发需要运用模板，使用MVVM做成动态菜单，方便扩展。
中间的5张演示照片，也和2类似。直接使用Grid进行的布局，实际上都需要做成模板。
抽屉菜单动画见 Window.Resouces 中的动画代码，展开抽屉菜单动画是 "OpenMenu"，左侧菜单向右、向下移动，右侧展示区域及个人信息概况界面同时也是向右、向下移动；关闭抽屉菜单动画是 "CloseMenu"，动画移动方向与展开时相反（说的是废话），这段动画代码值得好好学习、复用。

文件【MainWindow.xaml.cs】，后台关闭窗体、抽屉菜单按钮切换、窗体移动等事件处理：

private void ButtonClose_Click(object sender, RoutedEventArgs e)
{
    Application.Current.Shutdown();
}

private void ButtonOpenMenu_Click(object sender, RoutedEventArgs e)
{
    ButtonOpenMenu.Visibility = Visibility.Collapsed;
    ButtonCloseMenu.Visibility = Visibility.Visible;
}

private void ButtonCloseMenu_Click(object sender, RoutedEventArgs e)
{
    ButtonOpenMenu.Visibility = Visibility.Visible;
    ButtonCloseMenu.Visibility = Visibility.Collapsed;
}

private void MoveWindow_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
    DragMove();
}

代码已全部奉上...

3.本文参考

视频一：C# WPF Material Design UI: Animated Menu，配套源码：AnimatedMenu1。
C# WPF开源控件库《MaterialDesignInXAML》

4.源码

效果图实现代码在文中已经全部给出，站长方便演示，文中的图片使用的本站外链图片，代码可直接Copy，按解决方案目录组织代码文件即可运行。

演示Demo下载

除非注明，文章均由 Dotnet9 整理发布，欢迎转载。转载请注明本文地址：https://dotnet9.com/7669.html欢迎扫描下方二维码关注 Dotnet9 的微信公众号，本站会及时推送最新技术文章

时间如流水，只能流去不流回！

点击《【阅读原文】》，本站还有更多技术类文章等着您哦！！！

在线咨询

上一篇：HTML表标题标签的定义与用法
下一篇：“图片滑动样式”修改HTML教程

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

NET Core 3 WPF MVVM框架 Prism系列之导航系统

一.区域导航#

1.注册区域#

2.注册导航#

3.区域导航#

二.View和ViewModel参与导航过程#

1.INavigationAware#

2.IRegionMemberLifetime#

3.IConfirmNavigationRequest#

三.导航期间传递参数#

四.导航日志#

选择退出导航日志#

五.小结：#

六.源码#

.NET CORE(C#) WPF 抽屉式菜单

1. 本文背景

2. 代码实现

2.1 引入样式

2.2 演示窗体布局

3.本文参考

4.源码

.NET CORE(C#) WPF 值得推荐的动画菜单设计

1. 本文背景

2. 代码实现

2.1 引入样式

2.2 演示窗体

代码已全部奉上...

3.本文参考

4.源码

您的项目需求