前言：有個朋友非常喜歡MaterialDesignToolkit控件，而且好多開源框架都用這個風格，確實比較省事寫。關鍵點：可以和MahApps.Metro完全兼容，之前做的完全不收影響，那么我們就要嘗試一下。
第一步：按照MaterialDesign依賴包，在AIStudio.Wpf.Home工程下安裝。
還要安裝MaterialDesignThemes.MahApps包，這個是兼容MahApps主題的。 
第二步：改變App.Xaml中引用的資源
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<!--<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Themes/Light.Blue.xaml" />
--><!-- Dragablz MahApps Design --><!--
<ResourceDictionary Source="pack://application:,,,/Dragablz;component/Themes/MahApps.xaml"/>-->
<materialDesign:MahAppsBundledTheme BaseTheme="Inherit" PrimaryColor="DeepPurple" SecondaryColor="Purple"/>
<!-- MahApps -->
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
<!-- Material Design -->
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
<!-- Material Design: MahApps Compatibility -->
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.MahApps;component/Themes/MaterialDesignTheme.MahApps.Defaults.xaml"/>
<!-- Dragablz Material Design -->
<ResourceDictionary Source="pack://application:,,,/Dragablz;component/Themes/materialdesign.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
因為Dragablz也切到了Material風格，所以Style="{StaticResource MaterialDesignTabablzControlStyle}"也改一下。
<dragablz:TabablzControl Grid.Row="1" prism:RegionManager.RegionName="MainContentRegion"
ShowDefaultCloseButton="True"
ClosingItemCallback="{Binding ClosingTabItemHandler}"
Style="{StaticResource MaterialDesignTabablzControlStyle}" >
好了，可以運行了。 
好看點吧。
第三步：美化下LoginWin,直接使用MaterialDesign的Demo樣式
<UserControl x:Class="AIStudio.Wpf.Client.Views.LoginView"
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:core="clr-namespace:AIStudio.Core"
xmlns:local="clr-namespace:AIStudio.Wpf.Client.Views"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
xmlns:domain="clr-namespace:MaterialDesignDemo.Domain"
xmlns:prism="http://prismlibrary.com/"
prism:ViewModelLocator.AutoWireViewModel="True"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<Grid>
<Grid x:Name="LoginGrid" HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="35"/>
<RowDefinition Height="35"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="200"></ColumnDefinition>
</Grid.ColumnDefinitions>
<materialDesign:PackIcon
Grid.Row="0"
Grid.Column="0"
Kind="Account"
VerticalAlignment="Bottom"
Foreground="{Binding ElementName=NameTextBox, Path=BorderBrush}"/>
<TextBox Grid.Row="0" Grid.Column="1" x:Name="NameTextBox"
materialDesign:HintAssist.Hint="用戶名"
Style="{StaticResource MaterialDesignFloatingHintTextBox}">
<TextBox.Text>
<Binding
Path="UserName"
UpdateSourceTrigger="PropertyChanged">
<Binding.ValidationRules>
<domain:NotEmptyValidationRule ValidatesOnTargetUpdated="True" />
</Binding.ValidationRules>
</Binding>
</TextBox.Text>
</TextBox>
<materialDesign:PackIcon
Grid.Row="1"
Kind="Key"
VerticalAlignment="Bottom"
Foreground="{Binding ElementName=FloatingPasswordBox, Path=BorderBrush}"/>
<PasswordBox Grid.Row="1" Grid.Column="1" core:PasswordBoxHelper.Password="{Binding Password,Mode=TwoWay}"
x:Name="FloatingPasswordBox"
materialDesign:HintAssist.Hint="密碼"
materialDesign:HintAssist.Foreground="Green"
materialDesign:TextFieldAssist.UnderlineBrush="Green"
Style="{StaticResource MaterialDesignFloatingHintPasswordBox}"/>
<CheckBox Grid.Row="2" Grid.ColumnSpan="2" Content="記住密碼" VerticalAlignment="Center" IsChecked="{Binding IsRmembered}" />
<Button Grid.Row="3" Grid.ColumnSpan="2" Content="登錄" Command="{Binding LoginCommand}" CommandParameter="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type Window}}}" IsDefault="True" />
</Grid>
</Grid>
</UserControl>
第四步：將MaterialDesign的DialogHost作為主內容容器。
第五步：將MainWindow中的內容移動到AIStudio.Wpf.Home的MainView中，MainWindowViewModel的內容移動到MainViewModel中,相關內容請下載源碼。
（不在啟動工程做太多業務的邏輯） 主窗口就變得很簡潔
<mah:MetroWindow x:Class="AIStudio.Wpf.Client.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:AIStudio.Wpf.Client"
xmlns:mah="http://metro.mahapps.com/winfx/xaml/controls"
xmlns:view="clr-namespace:AIStudio.Wpf.Home.Views;assembly=AIStudio.Wpf.Home"
mc:Ignorable="d"
WindowStartupLocation="CenterScreen"
Title="AIStudio.Wpf.Client" Height="450" Width="800">
<Grid>
<view:MainView/>
</Grid>
</mah:MetroWindow>
第六步：將MaterialDesign的Snackbar作為提示框，在DrawerHost添加<materialDesign:Snackbar x:Name="MainSnackbar" MessageQueue="{materialDesign:MessageQueue}" Grid.Row="1"/>
並賦值給靜態變量，以便別的地方能引用。
public partial class MainView : UserControl
{
public static Snackbar Snackbar = new();
public MainView()
{
InitializeComponent();
Snackbar = MainSnackbar;
}
}
使用的地方：
private void Click()
{
//MessageBox.Show("HelloWorld, 您點擊了一下Button按鈕");
MainView.Snackbar.MessageQueue?.Enqueue("HelloWorld, 您點擊了一下Button按鈕");
}
好了，本章就這些內容吧。（隨着內容的發展，經常會調整內容的位置，以便適應框架）
下一章：接入Api數據，實現用戶菜單根據接口來。
源碼地址：https://gitee.com/akwkevin/aistudio.-wpf.-client.-stepby-step
每一章都有自己的Tag，按照鏈接進去直接下載就是本章內容。
另外推薦一下我的Wpf客戶端框架：https://gitee.com/akwkevin/aistudio.-wpf.-aclient