WPFでマテリアルデザイン

どうも、もりもりです。

WPFでアプリ作ってると、サクっと見た目をキレイにしたいですよね。 そんな時に便利なのが Material Design In XAML Toolkit と MahApps.Metro です。

目次
■ 適用前
■ 導入
■ 適用
■ 適用後
■ さいごに

適用前

まずはマテリアルデザイン適用前だとこんな感じ。 Label、TextBox、ComboBox、CheckBox、RadioButton、Button、ProgressBarを使用してます。

導入

ということで、NuGetで Material Design In XAML Toolkit を入れましょう。

MahApps.Metro も一緒に入るのですが現時点での最新は v2.4.4 なので手動で入れます。

適用

App.xamlにリソースを追加します。

下記のIssueの例をそのまま使います。
https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/issues/1896

App.xaml

<Application x:Class="AsyncSample.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:AsyncSample"
             StartupUri="Views/MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>

            <ResourceDictionary.MergedDictionaries>

                <!--  MahApps  -->
                <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.Violet.xaml" />

                <!--  Material Design  -->
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.LightBlue.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" />

                <!--  Material Design: MahApps Compatibility  -->
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.MahApps;component/Themes/MaterialDesignTheme.MahApps.Fonts.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.MahApps;component/Themes/MaterialDesignTheme.MahApps.Flyout.xaml" />

            </ResourceDictionary.MergedDictionaries>

            <!--  MahApps Brushes  -->
            <SolidColorBrush x:Key="MahApps.Brushes.Highlight" Color="{DynamicResource Primary700}" />
            <SolidColorBrush x:Key="MahApps.Brushes.AccentBase" Color="{DynamicResource Primary600}" />
            <SolidColorBrush x:Key="MahApps.Brushes.Accent" Color="{DynamicResource Primary500}" />
            <SolidColorBrush x:Key="MahApps.Brushes.Accent2" Color="{DynamicResource Primary400}" />
            <SolidColorBrush x:Key="MahApps.Brushes.Accent3" Color="{DynamicResource Primary300}" />
            <SolidColorBrush x:Key="MahApps.Brushes.Accent4" Color="{DynamicResource Primary200}" />
            <SolidColorBrush x:Key="MahApps.Brushes.WindowTitle" Color="{DynamicResource Primary700}" />
            <SolidColorBrush x:Key="MahApps.Brushes.Selected.Foreground" Color="{DynamicResource Primary500Foreground}" />
            <LinearGradientBrush x:Key="MahApps.Brushes.Progress" StartPoint="1.002,0.5" EndPoint="0.001,0.5">
                <GradientStop Offset="0" Color="{DynamicResource Primary700}" />
                <GradientStop Offset="1" Color="{DynamicResource Primary300}" />
            </LinearGradientBrush>
            <SolidColorBrush x:Key="MahApps.Brushes.CheckmarkFill" Color="{DynamicResource Primary500}" />
            <SolidColorBrush x:Key="MahApps.Brushes.RightArrowFill" Color="{DynamicResource Primary500}" />
            <SolidColorBrush x:Key="MahApps.Brushes.IdealForeground" Color="{DynamicResource Primary500Foreground}" />
            <SolidColorBrush x:Key="MahApps.Brushes.IdealForegroundDisabled" Color="{DynamicResource Primary500}" Opacity="0.4" />

        </ResourceDictionary>
    </Application.Resources>
</Application>

MainWindow は MetroWindow を継承するよう変更します。

MainWindow.xaml

<mah:MetroWindow x:Class="AsyncSample.Views.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:mah="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:AsyncSample"
        mc:Ignorable="d"
        GlowBrush="{DynamicResource AccentColorBrush}"
        BorderThickness="1"
        Title="MainWindow" Height="550" Width="545" MinHeight="550" MinWidth="545"
        TitleCharacterCasing="Normal">
    <Grid Margin="15">
        <Grid.RowDefinitions>
            <RowDefinition Height="30"/>
            <RowDefinition Height="30"/>
            <RowDefinition Height="30"/>
            <RowDefinition Height="30"/>
            <RowDefinition Height="30"/>
            <RowDefinition Height="30"/>
            <RowDefinition Height="30"/>
            <RowDefinition Height="30"/>
            <RowDefinition Height="30"/>
            <RowDefinition Height="100*"/>
            <RowDefinition Height="46"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100"/>
            <ColumnDefinition Width="100"/>
            <ColumnDefinition Width="100"/>
            <ColumnDefinition Width="100"/>
            <ColumnDefinition Width="100"/>
            <ColumnDefinition Width="100*"/>
        </Grid.ColumnDefinitions>

        <Label Grid.Row="0" Grid.Column="0" Content="処理時間：" Margin="3" HorizontalAlignment="Right"/>
        <TextBox Grid.Row="0" Grid.Column="1" Text="{Binding Time}" TextAlignment="Right" Margin="3"/>
        <Label Grid.Row="0" Grid.Column="2" Content="s" VerticalAlignment="Bottom"/>

        <Button Grid.Row="1" Grid.Column="0" Grid.RowSpan="2" Grid.ColumnSpan="2" Name="btnStart" Content="Start" Margin="3" Command="{Binding StartCommand}"/>
        <Button Grid.Row="1" Grid.Column="3" Grid.RowSpan="2" Grid.ColumnSpan="2" Name="btnStop" Content="Stop" Margin="3" Command="{Binding StopCommand}"/>

        <Label Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" Name="lblStatus" Content="{Binding Status, Mode=OneWay}" Margin="3"/>
        <Label Grid.Row="3" Grid.Column="4" Name="lblRate" Content="{Binding Rate, Mode=OneWay}" Margin="3" HorizontalAlignment="Right"/>

        <ProgressBar Grid.Row="4" Grid.RowSpan="2" Grid.ColumnSpan="5" Name="progressBar" Value="{Binding Value, Mode=OneWay}" Margin="3"/>

        <StackPanel Grid.Row="9" Grid.Column="0" Grid.ColumnSpan="6">
            <Label Content="Label" />
            <TextBox Text="TextBox" />
            <ComboBox />
            <CheckBox Content="CheckBox"/>
            <RadioButton Content="RadioButton1" GroupName="Group" IsChecked="True"/>
            <RadioButton Content="RadioButton2" GroupName="Group"/>

        </StackPanel>
    </Grid>
</mah:MetroWindow>

MainWindow.xaml.cs も忘れずに。

MainWindow.xaml.cs

using AsyncSample.ViewModels;
using MahApps.Metro.Controls;

namespace AsyncSample.Views
{
    /// 

    /// Interaction logic for MainWindow.xaml
    /// 
    public partial class MainWindow : MetroWindow
    {
        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = new MainViewModel();
        }
    }
}

適用後

実行してみるとこんな感じです。

下記の定義で全体的な色を LightBlue に変えています。

App.xaml

<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.LightBlue.xaml" />

指定できる色は下記で確認できます。
https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/tree/master/MaterialDesignColors.Wpf/Themes/Recommended/Accent

さいごに

自分でイチから作るのは大変なので非常にありがたいですね。

以上、もりもりでした。