前言：使用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中添加資源字典
<Application x: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>
<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" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
2.把主窗口MainWindow換成metro窗口
<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"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
</Grid>
</mah:MetroWindow>
using MahApps.Metro.Controls;
namespace AIStudio.Wpf.Client
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : MetroWindow
{
public MainWindow()
{
InitializeComponent();
}
}
}
運行一下看效果
第五步：按照慣例，我們得helloworld一下：
把窗體Title改成AIStudio.Wpf.Client，並在窗口中拖入一個TextBlock和Button，通過拖拽調整位置。
<Grid>
<TextBlock HorizontalAlignment="Center" Margin="0,160,0,0" Text="歡迎來到AIStudio.Wpf.Client,讓我們一起從0開始學Wpf框架搭建吧！" TextWrapping="Wrap" VerticalAlignment="Top"/>
<Button Content="點擊我" HorizontalAlignment="Left" Margin="355,236,0,0" VerticalAlignment="Top"/>
</Grid>
第六步：添加點擊事件，Button后面輸入Click，vs會自動提醒添加事件，在自動添加的Button_Click添加MessageBox提示框。
<Button Content="點擊我" HorizontalAlignment="Left" Margin="355,236,0,0" VerticalAlignment="Top" Click="Button_Click"/>
private void Button_Click(object sender, System.Windows.RoutedEventArgs e)
{
MessageBox.Show("HelloWorld, 您點擊了一下Button按鈕");
}
后續：本章較為簡單，下一章將引入Prism，實現MVVM功能。
源碼地址：https://gitee.com/akwkevin/aistudio.-wpf.-client.-stepby-step
另外推薦一下我的Wpf客戶端框架：https://gitee.com/akwkevin/aistudio.-wpf.-aclient