読者です 読者をやめる 読者になる 読者になる

Modern UI for WPFのデフォルトレイアウトを変更する方法

どーも。panjaです。

最近WPFを触っています。
WPFはWinFormsに変わるユーザーインターフェースシステムでなんかかっこいいことが出来そうな感じのものです。
Windows Presentation Foundation - Wikipedia

UIのライブラリ(違う?フレームワーク?)としてModern UI for WPF(MUI)を使用しています。
github.com

あるアプリの作成にMUIを使用していたのですが、どーにもデフォルトのレイアウトが気に入らない!と思ったので変更する方法を調べてみました。
今回はその結果を紹介してみます。

手順は以下の通りです。

  1. Modern UI for WPF(MUI)をダウンロードしてきます。GitHub - firstfloorsoftware/mui: Modern UI for WPF
  2. ダウンロードしたものの中に「FirstFloor.ModernUI.sln」が入っているので開きます。
  3. 「$(SolutionDir)¥FirstFloor.ModernUI¥Themes¥ModernWindow.xaml」を開きます。
  4. 29行目(2017/01/25現在)の
<ControlTemplate TargetType="controls:ModernWindow">

から197行目の

</ControlTemplate>

の中でMUIのテンプレートプロジェクトのメインウィンドウであるModernWindowのレイアウトを決定しているので、変更したい項目を探し出して好きなように変更する。
5. ソリューションをビルドする

これでOKです。
あとは、新しいテンプレートを使用したいプロジェクトの参照に先ほどビルドしたFirstFloor.ModernUI.dll追加すれば使用できるようになります。



以下に、私が実際に行った変更を載せておきます。
具体的には下の画像の赤枠のスペースを無くす変更を行いました。
(青色のRectangleを目一杯広げたページを表示しています。赤枠はGimpで追加しました。)
f:id:panda531531:20170125232135p:plain


ここに表示されるページに関する変更は「ModernWindow.xaml」の160、161行目

<!-- content frame -->
<controls:ModernFrame x:Name="ContentFrame" Grid.Row="3" Grid.RowSpan="2" Margin="42,8,16,16" Source="{Binding ContentSource, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}" ContentLoader="{TemplateBinding ContentLoader}"/>

で行います。
赤枠のスペースを無くすためには、ここに設定してある「Margin="42,8,16,16"」を好きな値に変更してあげれば変更完了です。
今回は「Margin="5,0,5,5"」に変更しました。
結果は以下のようになりました。
f:id:panda531531:20170125231757p:plain

はい。変更できました。



まだまだわからないことだらけのWPF
今後も忘備録的にまとめていきたいと思います。
内容に誤りなどありましたら是非コメントよろしくお願いします。