BETA

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

投稿日:2019-06-22
最終更新:2019-06-22
※この記事は外部サイト(https://www.doraxdora.com/blog/2017/07/27/...)からのクロス投稿です

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

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

プログラムは前回のものを利用します。
【WPF】MySQL(MariaDB)に接続してデータを DataGrid に表示してみる

MahApps.Metro

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

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


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

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

ではでは。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@doraxdoraの技術ブログ 主に Java, C#, Python, Javascript の記事を載せていく予定。

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!