前言：使用MahApps.Metro和Prism作為基礎進行WPF框架搭建

第一步：工具準備：VS2019，.net 5 sdk

下載連結：https://visualstudio.microsoft.com/zh-hans/downloads/ https://dotnet.microsoft.com/download/dotnet/5.0

第二步：新建WPF應用程式，一直下一步，選擇目標框架.NET 5.0

第三步：在包管理器中安裝MahApps.Metro（後續文章中都用metro作為簡稱）最新版

第四步：使用metro控制元件替換標準控制元件。

1.引入metro樣式 在App.xaml中新增資源字典

<Applicationx:Class="AIStudio.Wpf.Client.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:AIStudio.Wpf.Client"
StartupUri="MainWindow.xaml">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionarySource="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml"/>
<ResourceDictionarySource="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml"/>
<ResourceDictionarySource="pack://application:,,,/MahApps.Metro;component/Styles/Themes/Light.Blue.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
 

2.把主視窗MainWindow換成metro視窗

<mah:MetroWindowx: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"
mc:Ignorable="d"
Title="MainWindow"Height="450"Width="800">
<Grid>

</Grid>
</mah:MetroWindow>
 

usingMahApps.Metro.Controls;
namespaceAIStudio.Wpf.Client
{
///<summary>
///InteractionlogicforMainWindow.xaml
///</summary>
publicpartialclassMainWindow:MetroWindow
{
publicMainWindow()
{
InitializeComponent();
}
}
}

執行一下看效果

第五步：按照慣例，我們得helloworld一下：

把窗體Title改成AIStudio.Wpf.Client，並在視窗中拖入一個TextBlock和Button，通過拖拽調整位置。

<Grid>
<TextBlockHorizontalAlignment="Center"Margin="0,160,0,0"Text="歡迎來到AIStudio.Wpf.Client,讓我們一起從0開始學Wpf框架搭建吧！"TextWrapping="Wrap"VerticalAlignment="Top"/>
<ButtonContent="點選我"HorizontalAlignment="Left"Margin="355,236,0,0"VerticalAlignment="Top"/>
</Grid>

第六步：新增點選事件，Button後面輸入Click，vs會自動提醒新增事件，在自動新增的Button_Click新增MessageBox提示框。

<ButtonContent="點選我"HorizontalAlignment="Left"Margin="355,236,0,0"VerticalAlignment="Top"Click="Button_Click"/>

privatevoidButton_Click(objectsender,System.Windows.RoutedEventArgse)
{
MessageBox.Show("HelloWorld,您點選了一下Button按鈕");
}

本章較為簡單，下一章將引入Prism，實現MVVM功能。