【WPF】MahApps.Metro で見た目をスタイリッシュにしてみる
おはようございます。
急なカミングアウトとなりますが
Windowsクライアントアプリの見た目（デフォルト）が好きじゃありません。
今ではスマートフォンやタブレットをほとんどの人が使っていることもあり
見た目や操作性が重視される世の中になりましたよね。
WPFはスタイルなんかも結構簡単に弄れるし、
自力でかっこよくすることもできるんだと思いますが、
今回は簡単にスタイリッシュに変更できるパッケージを紹介します。
プログラムは前回のものを利用します。
https://www.doraxdora.com/blog/2017/07/24/post-1729/スポンサーリンク
目次
MahApps.Metro
公式から紹介文を訳して転載
Mahapps.Metroは、デフォルトのコントロールのスタイルをオーバーライドし、それらにメトロアッシュの外観を与えます。スタイルだけではありません。 MahApps.Metroには、Windows Phoneのコンセプトに基づいたカスタムコントロールもいくつか含まれています。
簡単に言うと、少しの修正で既存のWPFアプリをかっこよく出来まっせってことですね。
NuGetでパッケージをダウンロード
パッケージエクスプローラの「参照」を右クリックし、「NuGetパッケージの管理」を選択します。
MahApps で絞り込みし、「MahApps.Metro」を選択、
「インストール」ボタンをクリックします。
プレビュー画面が表示された場合は「OK」ボタンをクリックします。
出力ビューに「終了」が出力されれば完了です。
画面の修正
XML名前空間の追加
MainWindow.xaml
抜粋
1 | xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro" |
Windowの変更
1 2 3 4 5 6 | WindowをMah:MetroWindowに変更 <Mah:MetroWindow x:Class="WpfApp1.MainWindow" 枠線をつける GlowBrush="Blue" BorderThickness="0" |
全体
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <Mah:MetroWindow x:Class="WpfApp1.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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:WpfApp1" xmlns:Mah="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro" mc:Ignorable="d" Title="一覧"Height="350"Width="530" GlowBrush="Blue" BorderThickness="0" > <Window.Resources> <ResourceDictionary Source="/Style/StyleDic.xaml"/> </Window.Resources> <Grid> <Grid.Resources> <local:KindConverter x:Key="KindConv"/> </Grid.Resources> <Label Content="名前："Margin="10,10,0,0"Style="{StaticResource lb-normal}"/> <TextBox x:Name="search_name"Margin="56,12,0,0"HorizontalAlignment="Left"VerticalAlignment="Top"Width="120" Style="{StaticResource MetroTextBox}"/> <Label Content="種別："Margin="201,10,0,0"Style="{StaticResource lb-normal}"/> <ComboBox x:Name="search_kind"Margin="252,12,0,0"HorizontalAlignment="Left"VerticalAlignment="Top"Width="125" Style="{StaticResource MetroComboBox}"/> <Button x:Name="search_button"Content="検索"HorizontalAlignment="Left"Margin="432,12,0,0"VerticalAlignment="Top"Width="75" Click="search_button_Click"Style="{DynamicResource SquareButtonStyle}"/> <DataGrid Name="dataGrid"HorizontalAlignment="Left"Margin="10,43,0,0"Width="497"Height="225"Style="{StaticResource grid-normal}" > <DataGrid.Columns> <DataGridTextColumn Binding="{Binding No}"ClipboardContentBinding="{x:Null}"Header="No"IsReadOnly="True"Width="50"/> <DataGridTextColumn Binding="{Binding Name}"ClipboardContentBinding="{x:Null}"Header="名前"IsReadOnly="True"Width="100"/> <DataGridTextColumn Binding="{Binding Sex}"ClipboardContentBinding="{x:Null}"Header="性別"IsReadOnly="True"Width="40"/> <DataGridTextColumn Binding="{Binding Age}"ClipboardContentBinding="{x:Null}"Header="年齢"IsReadOnly="True"Width="40"/> <DataGridTextColumn Binding="{Binding Kind, Converter={StaticResource KindConv}}"ClipboardContentBinding="{x:Null}"Header="種別"IsReadOnly="True"Width="120"/> <DataGridTextColumn Binding="{Binding Favorite}"ClipboardContentBinding="{x:Null}"Header="好物"IsReadOnly="True"Width="*"/> </DataGrid.Columns> </DataGrid> <Button x:Name="add_button"Content="追加"HorizontalAlignment="Left"Margin="10,273,0,0"VerticalAlignment="Top"Width="75"Height="30"Click="add_button_Click"Style="{DynamicResource AccentedSquareButtonStyle}"/> <Button x:Name="upd_button"Content="更新"HorizontalAlignment="Left"Margin="90,273,0,0"VerticalAlignment="Top"Width="75"Height="30"Click="upd_button_Click"Style="{DynamicResource AccentedSquareButtonStyle}"/> <Button x:Name="del_button"Content="削除"HorizontalAlignment="Left"Margin="170,273,0,0"VerticalAlignment="Top"Width="75"Height="30"Click="del_button_Click"Style="{DynamicResource AccentedSquareButtonStyle}"/> <Button x:Name="imp_button"Content="CSV読込"HorizontalAlignment="Left"Margin="250,273,0,0"VerticalAlignment="Top"Width="75"Height="30"Click="imp_button_Click"Style="{DynamicResource AccentedSquareButtonStyle}"/> <Button x:Name="exp_button"Content="CSV出力"HorizontalAlignment="Left"Margin="330,273,0,0"VerticalAlignment="Top"Width="75"Height="30"Click="exp_button_Click"Style="{DynamicResource AccentedSquareButtonStyle}"/> <Button x:Name="fld_button"Content="フォルダ参照"HorizontalAlignment="Left"Margin="410,273,0,0"VerticalAlignment="Top"Width="97"Height="30"Click="fld_button_Click"Style="{DynamicResource AccentedSquareButtonStyle}"/> </Grid> </Mah:MetroWindow> |
プログラムの修正
パッケージ利用宣言
MainWindow.xaml.cs
抜粋
1 | usingMahApps.Metro.Controls |
クラス変更
MainWindow.xaml.cs
抜粋
1 | publicpartial classMainWindow:MetroWindow |
リソースの追加
App.xaml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <Application x:Class="WpfApp1.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:WpfApp1" 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> |
起動してみる
簡単に変更できましたね。
まとめ
Mahapps は他にも色々と出来るみたいなのでそのうちやってみたいと思います。
ソースはこちら
ではでは。