どうも、もりもりです。
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
さいごに
自分でイチから作るのは大変なので非常にありがたいですね。
以上、もりもりでした。
