微信公眾號：Dotnet9，網站：Dotnet9，問題或建議：請網站留言， 如果對您有所幫助：歡迎讚賞。
快到2020年了，祝大家新年快樂，今年2019最後一更，謝謝大家支持！
閱讀導航
- 本文背景
- 代碼實現
- 本文參考
- 源碼
1. 本文背景
一個系統主界面，放上一個菜單，點擊菜單在客戶區切換不同的展示界面，這是很常規的設計，見下面展示效果圖：
左側一個菜單，點擊菜單，右側切換界面，界面切換動畫使用MD控件的組件實現（自己使用動畫也能實現）。
2. 代碼實現
使用 .NET CORE 3.1 創建名為 “MenuChange” 的WPF模板項目，添加1個Nuget庫：MaterialDesignThemes，版本為最新預覽版3.1.0-ci948。
解決方案主要文件目錄組織結構：
- AnimatedMenuApp.xamlMainWindow.xamlMainWindow.xaml.cs..[數個演示模塊用戶控件]
2.1 引入樣式
文件【App.xaml】，在 StartupUri 中設置啟動的視圖【MainWindow.xaml】，並在【Application.Resources】節點增加 MaterialDesignThemes庫的樣式文件：
<code>
/<code>2.2 演示窗體
文件【MainWindow.xaml】，佈局代碼、動畫代碼都在此文件中，源碼如下：
<code>
![]()
![]()
/<code>簡單說明下：
- "GridPrincipal" 作為客戶區子模塊界面容器，展示新界面時，先移除舊用戶控件，再添加新用戶控件（站長以前使用時，是遍歷容器中所有用戶界面，對非選擇用戶控件作隱藏操作，然後添加新用戶控件或者對已存在的被選擇用戶控件作顯示操作）。
- 左側菜單項使用 "ListView" 進行佈局，實際開發需要運用模板，使用MVVM做成動態菜單，方便擴展。
- 右側切換的子模塊界面應該使用Prism或者其他框架（自已實現的模塊dll）實現的子界面，方便動態擴展（需要和左側菜單項進行關聯）。
文件【MainWindow.xaml.cs】，後臺關閉窗體、菜單點擊切換子模塊界面、窗體移動等事件處理：
<code>using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
namespace MenuChange
{
///
/// Interaction logic for MainWindow.xaml
///
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void ButtonFechar_Click(object sender, RoutedEventArgs e)
{
Application.Current.Shutdown();
}
private void Grid_MouseDown(object sender, MouseButtonEventArgs e)
{
DragMove();
}
private void ListViewMenu_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
int index = ListViewMenu.SelectedIndex;
MoveCursorMenu(index);
switch (index)
{
case 0:
GridPrincipal.Children.Clear();
GridPrincipal.Children.Add(new UserControlMain());
break;
case 1:
GridPrincipal.Children.Clear();
GridPrincipal.Children.Add(new UserControlWPF());
break;
case 2:
GridPrincipal.Children.Clear();
GridPrincipal.Children.Add(new UserControlWinform());
break;
case 3:
GridPrincipal.Children.Clear();
GridPrincipal.Children.Add(new UserControlASPNETCORE());
break;
case 4:
GridPrincipal.Children.Clear();
GridPrincipal.Children.Add(new UserControlXamarinForms());
break;
case 5:
GridPrincipal.Children.Clear();
GridPrincipal.Children.Add(new UserControlCPP());
break;
default:
break;
}
}
private void MoveCursorMenu(int index)
{
TrainsitionigContentSlide.OnApplyTemplate();
GridCursor.Margin = new Thickness(0, (100 + (60 * index)), 0, 0);
}
}
}/<code>方便演示，點擊菜單，切換子用戶控件時時寫死的，見上面的說明，左側菜單及右側切換的子用戶控件需要進行關聯配置，方便擴展，建議使用Prism的模塊化開發。
2.3 演示主模塊
文件【UserControlMain.xaml】，只展示其中一個子模塊用戶控件吧，其他類似，文末有源碼、可運行Demo供下載參考。
注意： 需要使用MD控件的 TransitioningContent 組件將用戶控件可視區域包裹起來，用於使用MD的移動切換動畫，其中 OpeningEffect 見名思意，即是展示此用戶控件時，動畫如何播放，見下面代碼，SlideInFromLeft 是指示展示時由左向右緩動，相反 SlideInFromRight即是由右向左緩動，其他屬性可查閱MD官網或者Demo研究。
<code>
![]()
/<code>已奉上關鍵代碼，全部代碼文末有下載鏈接...
3.本文參考
- 視頻一：C# WPF Material Design UI: Fast Food Sales，配套源碼：Pizzaria1。
- C# WPF開源控件庫《MaterialDesignInXAML》
4.源碼
站長方便演示，文中的圖片使用的本站外鏈圖片：
演示Demo下載
除非註明，文章均由 Dotnet9 整理發佈，歡迎轉載。
轉載請註明本文地址：https://dotnet9.com/7743.html
時間如流水，只能流去不流回！
