MahApps.Metro控件更換微軟視窗主題

先來看一下微軟默認的視窗主題(左:Window)與MahApps.Metro的視窗主題(右:MetroWindow)，

Window

MetroWindow

MetroWindow似乎美觀多了，接著就開始介紹如何以MahApps.Metro更換視窗主題。

第一步：NuGet載入MahApps.Metro.ReSources

第二步:將Window改為MetroWindow

<controls:MetroWindow x:Class="MetroControlStyleDemo.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"

        Title="MainWindow" Height="350" Width="525">

    <Grid>

    </Grid>

</controls:MetroWindow>

別忘了MainWindow.Xaml.cs中也要修改，否則編譯時就會出現錯誤了。

    public partial class MainWindow : MetroWindow

    {

        public MainWindow()

        {

            InitializeComponent();

        }

    }

到這裡已經完成一半了，現在視窗的樣式如下，

第三步:給定MetroWindow樣式

我的做法是將設定樣式的Xaml碼放在App.Xaml中，如此Metro亦會去改寫全域的微軟控件樣式，而不用分別對一個一個下指令。

程式碼如下，

    <Application.Resources>

        <ResourceDictionary>

            <ResourceDictionary.MergedDictionaries>

                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colours.xaml" />

                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />

                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />

                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />

                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />

            </ResourceDictionary.MergedDictionaries>

        </ResourceDictionary>

    </Application.Resources>

如此一來就完成囉。

http://elysium.asvishnyakov.com/Downloads.cshtml#header

可以去以上網址下載Demo檔，有更多的樣式可以玩玩看。

參考資料：

mahapps.metro documentation