MahApps.Metro使用

MahApps.Metro使用

下載MahApps.Metro

PM> Install-Package MahApps.Metro

MainWindow.xaml中添加

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

而後將Window標籤替換爲以下標籤

<Controls:MetroWindow x:Class="WpfApplication.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="600"
                  Width="800">

</Controls:MetroWindow>

MainWindow.xaml.cs添加

using MahApps.Metro.Controls;

namespace WpfApplication
{
  public partial class MainWindow : MetroWindow
  {
    public MainWindow()
    {
      InitializeComponent();
    }
  }
}

使用內置的樣式App.xaml

<Application x:Class="WpfApplication.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml">
  <Application.Resources>
    <ResourceDictionary>
      <ResourceDictionary.MergedDictionaries>
        <!-- MahApps.Metro resource dictionaries. Make sure that all file names are Case Sensitive! -->
        <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/Colors.xaml" />
        <!-- Accent and AppTheme setting -->
        <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>
</Application>

修改標題欄

能夠添加本身的控制 LeftWindowsCommands 或 RightWindowsCommands

<MetroWindow> ... </MetroWindow>

內添加：

<Controls:MetroWindow.RightWindowCommands>
  <Controls:WindowCommands>
    <Button Content="settings" />
    <Button>
      <StackPanel Orientation="Horizontal">
        <Rectangle Width="20"
                   Height="20"
                   Fill="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=Foreground}">
          <Rectangle.OpacityMask>
            <VisualBrush Stretch="Fill" Visual="{StaticResource appbar_cupcake}" />
          </Rectangle.OpacityMask>
        </Rectangle>
        <TextBlock Margin="4 0 0 0"
                   VerticalAlignment="Center"
                   Text="deploy cupcakes" />
      </StackPanel>
    </Button>
  </Controls:WindowCommands>
</Controls:MetroWindow.RightWindowCommands>

顯示圖標須要加載MahApps.Metro.Resources資源

MahApps.Metro.Resources使用

下載MahApps.Metro.Resources

PM> Install-Package MahApps.Metro.Resources

MainWindow.xaml文件中添加

<Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/Resources/Icons.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>

如何改變目前的主題 Styles

You can choose between these available accents:

「Red」, 「Green」, 「Blue」, 「Purple」, 「Orange」, 「Lime」, 「Emerald」, 「Teal」, 「Cyan」, 「Cobalt」, 「Indigo」, 「Violet」, 「Pink」, 「Magenta」, 「Crimson」, 「Amber」, 「Yellow」, 「Brown」, 「Olive」, 「Steel」, 「Mauve」, 「Taupe」, 「Sienna」

and these themes:

「BaseLight」, 「BaseDark」

經過App.xaml，直接修改其中對應的部分

<Application x:Class="MahAppsMetroThemesSample.App"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         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/Colors.xaml" />

                <!-- accent resource -->
                <!-- change "Cobalt" to the accent color you want -->

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

                <!-- theme resource -->
                <!-- change "BaseLight" to the theme you want -->
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

經過ThemeManager

public partial class App : Application
{
    protected override void OnStartup(StartupEventArgs e)
    {
        // get the current app style (theme and accent) from the application
        // you can then use the current theme and custom accent instead set a new theme
        Tuple<AppTheme, Accent> appStyle = ThemeManager.DetectAppStyle(Application.Current);

        // now set the Green accent and dark theme
        ThemeManager.ChangeAppStyle(Application.Current,
                                    ThemeManager.GetAccent("Green"),
                                    ThemeManager.GetAppTheme("BaseDark")); // or appStyle.Item1

        base.OnStartup(e);
    }
}

在主窗口中修改

MainWindow.xaml文件

<Controls:MetroWindow.Resources>
    <ResourceDictionary>
       <ResourceDictionary.MergedDictionaries>
            <!-- this window should be blue -->
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />
            <!-- and should use the light theme -->
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Controls:MetroWindow.Resources>

主類MetroWindow中

public partial class AccentStyleWindow : MetroWindow
{
    public void ChangeAppStyle()
    {
        // set the Red accent and dark theme only to the current window
        ThemeManager.ChangeAppStyle(this,
                                    ThemeManager.GetAccent("Red"),
                                    ThemeManager.GetAppTheme("BaseDark"));
    }
}

還能夠自定義主題

參考：

• http://rehansaeed.com/wpf-metro-part1-modern-ui-for-wpf/
• https://github.com/MahApps/MahApps.Metro
• http://mahapps.com/guides/quick-start.html
• http://www.wxzzz.com/1202.html
• http://mahapps.com/guides/icons-and-resources.html
• http://mahapps.com/guides/styles.html
• http://mahapps.com/controls/
• https://github.com/MahApps/MahApps.Metro.IconPacks
• http://fontawesome.io/icons/
• https://materialdesignicons.com/