【WPF】MahApps.Metro で見た目をスタイリッシュにしてみる

2017年7月27日C#,開発

おはようございます。

急なカミングアウトとなりますが
Windowsクライアントアプリの見た目(デフォルト)が好きじゃありません。

今ではスマートフォンやタブレットをほとんどの人が使っていることもあり
見た目や操作性が重視される世の中になりましたよね。

WPFはスタイルなんかも結構簡単に弄れるし、
自力でかっこよくすることもできるんだと思いますが、
今回は簡単にスタイリッシュに変更できるパッケージを紹介します。

プログラムは前回のものを利用します。

スポンサーリンク

MahApps.Metro

公式から紹介文を訳して転載

Mahapps.Metroは、デフォルトのコントロールのスタイルをオーバーライドし、それらにメトロアッシュの外観を与えます。スタイルだけではありません。 MahApps.Metroには、Windows Phoneのコンセプトに基づいたカスタムコントロールもいくつか含まれています。

簡単に言うと、少しの修正で既存のWPFアプリをかっこよく出来まっせってことですね。

NuGetでパッケージをダウンロード

NuGetパッケージ管理

パッケージエクスプローラの「参照」を右クリックし、「NuGetパッケージの管理」を選択します。

パッケージのインストール

MahApps で絞り込みし、「MahApps.Metro」を選択、
「インストール」ボタンをクリックします。

プレビュー画面

プレビュー画面が表示された場合は「OK」ボタンをクリックします。

出力ビュー

出力ビューに「終了」が出力されれば完了です。

画面の修正

XML名前空間の追加

MainWindow.xaml

抜粋

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

Windowの変更

Window を Mah:MetroWindow に変更
<Mah:MetroWindow x:Class="WpfApp1.MainWindow"

枠線をつける
 GlowBrush="Blue"
 BorderThickness="0"

全体

<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

抜粋

using MahApps.Metro.Controls

クラス変更

MainWindow.xaml.cs

抜粋

public partial class MainWindow : MetroWindow

リソースの追加

App.xaml

<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 は他にも色々と出来るみたいなのでそのうちやってみたいと思います。

ソースはこちら

GitHub

ではでは。

 

スポンサーリンク


関連するコンテンツ

2017年7月27日C#,開発C#,WPF,プログラミング

Posted by doradora