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