tag:crieit.net,2005:https://crieit.net/tags/MahApps.Metro/feed Crieitでタグ「MahApps.Metro」に投稿された最近の記事 2019-06-22T11:28:45+09:00 https://crieit.net/tags/MahApps.Metro/feed tag:crieit.net,2005:PublicArticle/15147 2019-06-22T11:28:45+09:00 2019-06-22T11:28:45+09:00 https://crieit.net/posts/WPF-MahApps-Metro <p>今ではスマートフォンやタブレットをほとんどの人が使っていることもあり<br /> 見た目や操作性が重視される世の中になりましたよね。</p> <p>WPFはスタイルなんかも結構簡単に弄れるし、<br /> 自力でかっこよくすることもできるんだと思いますが、<br /> 今回は簡単にスタイリッシュに変更できるパッケージを紹介します。</p> <p>プログラムは前回のものを利用します。<br /> <a target="_blank" rel="nofollow noopener" href="https://www.doraxdora.com/blog/2017/07/24/post-1729/" target="_blank" rel="noopener noreferrer" data-blogcard="1">【WPF】MySQL（MariaDB）に接続してデータを DataGrid に表示してみる</a></p> <h2 id="MahApps.Metro"><a href="#MahApps.Metro">MahApps.Metro</a></h2> <blockquote>公式から紹介文を訳して転載 Mahapps.Metroは、デフォルトのコントロールのスタイルをオーバーライドし、それらにメトロアッシュの外観を与えます。スタイルだけではありません。 MahApps.Metroには、Windows Phoneのコンセプトに基づいたカスタムコントロールもいくつか含まれています。</blockquote> <p>簡単に言うと、少しの修正で既存のWPFアプリをかっこよく出来まっせってことですね。</p> <h2 id="NuGetでパッケージをダウンロード"><a href="#NuGet%E3%81%A7%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8%E3%82%92%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89">NuGetでパッケージをダウンロード</a></h2> <p><a target="_blank" rel="nofollow noopener" href="https://www.doraxdora.com/wp-content/uploads/2017/07/MahAppsMetoro000.jpg"><img class="wp-image-1866 size-full" src="https://www.doraxdora.com/wp-content/uploads/2017/07/MahAppsMetoro000.jpg" alt="NuGetパッケージ管理" /></a></p> <p>パッケージエクスプローラの「参照」を右クリックし、「NuGetパッケージの管理」を選択します。</p> <p><img src="https://www.doraxdora.com/wp-content/uploads/2017/07/MahAppsMetoro001.jpg" alt="パッケージのインストール" /></p> <p>MahApps で絞り込みし、「MahApps.Metro」を選択、<br /> 「インストール」ボタンをクリックします。</p> <p><img src="https://www.doraxdora.com/wp-content/uploads/2017/07/MahAppsMetoro002.jpg" alt="プレビュー画面" /></p> <p>プレビュー画面が表示された場合は「OK」ボタンをクリックします。</p> <p><img src="https://www.doraxdora.com/wp-content/uploads/2017/07/MahAppsMetoro003.jpg" alt="出力ビュー" /></p> <p>出力ビューに「終了」が出力されれば完了です。</p> <h2 id="画面の修正"><a href="#%E7%94%BB%E9%9D%A2%E3%81%AE%E4%BF%AE%E6%AD%A3">画面の修正</a></h2> <h3 id="XML名前空間の追加"><a href="#XML%E5%90%8D%E5%89%8D%E7%A9%BA%E9%96%93%E3%81%AE%E8%BF%BD%E5%8A%A0">XML名前空間の追加</a></h3> <p>MainWindow.xaml</p> <p>抜粋</p> <pre><code> xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro" </code></pre> <h3 id="Windowの変更"><a href="#Window%E3%81%AE%E5%A4%89%E6%9B%B4">Windowの変更</a></h3> <pre><code>Window を Mah:MetroWindow に変更 <Mah:MetroWindow x:Class="WpfApp1.MainWindow" 枠線をつける GlowBrush="Blue" BorderThickness="0" </code></pre> <p>全体</p> <pre><code><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<span>}</span><span>}</span>" 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> </code></pre> <h2 id="プログラムの修正"><a href="#%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0%E3%81%AE%E4%BF%AE%E6%AD%A3">プログラムの修正</a></h2> <h3 id="パッケージ利用宣言"><a href="#%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8%E5%88%A9%E7%94%A8%E5%AE%A3%E8%A8%80">パッケージ利用宣言</a></h3> <p>MainWindow.xaml.cs</p> <p>抜粋</p> <pre><code>using MahApps.Metro.Controls </code></pre> <h3 id="クラス変更"><a href="#%E3%82%AF%E3%83%A9%E3%82%B9%E5%A4%89%E6%9B%B4">クラス変更</a></h3> <p>MainWindow.xaml.cs</p> <p>抜粋</p> <pre><code>public partial class MainWindow : MetroWindow </code></pre> <h2 id="リソースの追加"><a href="#%E3%83%AA%E3%82%BD%E3%83%BC%E3%82%B9%E3%81%AE%E8%BF%BD%E5%8A%A0">リソースの追加</a></h2> <p>App.xaml</p> <pre><code><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> </code></pre> <p> </p> <h2 id="起動してみる"><a href="#%E8%B5%B7%E5%8B%95%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B">起動してみる</a></h2> <p><img src="https://www.doraxdora.com/wp-content/uploads/2017/07/MahAppsMetoro004.jpg" alt="変更後の画面" /></p> <p>簡単に変更できましたね。</p> <h2 id="まとめ"><a href="#%E3%81%BE%E3%81%A8%E3%82%81">まとめ</a></h2> <p>Mahapps は他にも色々と出来るみたいなのでそのうちやってみたいと思います。</p> <p>ソースはこちら</p> <p><a target="_blank" rel="nofollow noopener" href="https://github.com/doraxdora/SampleWpfMySQL2" target="_blank" rel="noopener noreferrer">GitHub</a></p> <p>ではでは。</p> <p> </p> doraxdora