SourceChordスマートフォン用の表示で見るSourceChordC#とXAML好きなプログラマの備忘録。最近はWPF系の話題が中心です。C#お手軽にWPFアプリにモダンなデザインを適用できる、MahApps.Metroというライブラリを使ってみました。WPF(MUI)というのもあります。使ってみただけですが、MUIと比較してみるとMahApps.Metroの方がクセが少なくてシンプルで使いやすそうな印象です。元のウィンドウまずは、こんな感じのウィンドウを作ります。TextBlockとTextBox、Buttonを配置しただけのシンプルなページです。</Grid></Window>インストールNugetからMahApps.Metroで検索してインストールします。準備WindowをMetroWindow派生クラスになるように修正します。xamlとコードビハインドをそれぞれ以下のように修正します。}}コードビハインド側は、クラスの継承の部分を省略してもokとの事。windowはパーシャルクラスとして定義されてるんで、xaml側でちゃんとクラスの宣言されてますもんね。続いて、app.xamlにデザインのテーマを決めるためのリソースを追加します。</Application.Resources></Application>スタイルは他にもいろいろあります。スタイルについてはまた後程。これだけで、こんな感じにイカしたデザインのウィンドウが出来上がります。スタイルの変更アプリ全体のスタイルは、App.xamlに設定するResourceDictionaryを切り替えることで選択できます。・・・などのアクセントカラーの選択と、BaseLight/BaseDarkのどちらかから白基調/黒基調のどちらにするかを選ぶことができます。/>用意されているスタイル類は以下に書かれてます。http://mahapps.com/guides/styles.html#appBaseLight/BaseDarkの比較BaseLightBaseDarkResourceをApp.xamlにではなく、各MetroWindowに書けば、Windowごとに別々のスタイルを設定することもできます。コードビハインドからのスタイル切替ThemeManagerクラスを使うと、コードから動的にアプリのデザインを変更することができます。ボタンクリックのイベントハンドラに、↓みたいなコードを書けば、ボタン押下時にGreen/BaseDarkなデザインに切り替わります。}ウィンドウのカスタマイズMetroWindowクラスは、以下のようなプロパティでカスタマイズできます。こいつをNoResizeにしたりCanMinimizeにしたりすると、最大化/最小化ボタンの表示有無も併せて切り替わります。ウィンドウの表示位置を保存するか否か。こいつをTrueにしておくと、次回ウィンドウ表示時には、依然閉じた際の座標で表示されるようになります。WindowCommandsMetroWindowクラスには、LeftWindowCommands/RightWindowCommandsというプロパティがあり、タイトルバーの左右にコマンド実行のためのボタン類が作れるようになっています。以下略Windowのデザインボーダー付きウィンドウMetroWindowに、以下のプロパティをつけることでこんな枠付きのデザインになります。AccentColorBrush}"BorderThickness="1"VisualStudio風のWindow枠GrowBrushプロパティの指定を行うと、こんな感じのVS風の光ったウィンドウ枠になります。AccentColorBrush}"BorderThickness="1"GlowBrushをBlackにして、枠線の太さを0にしておけば、ウィンドウにドロップシャドウを付けたようなデザインになります。GlowBrush="Black"BorderThickness="0"各種コントロールButton系Button/ToggleButtonに使える、以下のようなスタイルが用意されてます。</WrapPanel>アイコン類のパッケージMetroCircleButtonは、アイコンリソースとともに使うといい感じになります。アイコンなどはMarApps.Metro本体には含めず、MahApps.Metro.Resourcesという別パッケージで配布されています。以下のコマンドで、色々なアイコン類を含んだリソースファイルがプロジェクトに追加されます。MahApps.Metro.Resourcesアイコンの使い方App.xamlのリソース定義に↓を加えておきます。/>すると、こんな風にリソースとして色んなアイコンが使えるようになります。</Button>TextBoxTextBoxの動作をカスタマイズするための以下のような添付プロパティが用意されています。テキストが空のときに説明文のような透かし文字を表示できます。/>MahApps.Metroのカスタムコントロール類MahApps.Metroでは、他にも色々と便利なコントロールが用意されています。MetroProgressBarWin8風なプログレスバーです。/>ProgressRingこんな感じのよく見かけるタイプのプログレス表示。キャプチャ画像にしてしまうと、なんだかよくわかりませんが、、、くるくる回ってる進捗表示。/>RangeSlider下限値と上限値で範囲指定ができるスライダー。MinRange="5"/>↓こんな風に表示されます。SplitButton/DropDownButtonSplitButtonはボタン右端の部分をクリックすると、コンボボックスみたいなドロップダウンリストが出てきて、要素を選択することができます。選択した要素がボタンのコンテンツとして表示されます。SplitButton/DropDownButtonともに、ComboBoxなどと同じようにItemsSourceやDisplayMemberPathなどのプロパティを使ってリストに表示する要素を設定できます。SampleList}"/>Tilewin8以降のストアアプリ風なタイルのコントロール。/>ToggleSwitchこんな風にトグルスイッチ表示ができるコントロールです。主なプロパティはこんな感じ。IsChecked="True"/>NumericUpDown数値入力用のテキストボックスで、コントロール右端に数値を増減させるためのボタンが付いたコントロールです。上下のカーソルキーで、数値の増減をできるようにするかを設定。マウスのホイールで数値の増減をできるようにするかを設定。キーボードから数値以外のテキスト入力を抑制するかどうかを設定。/>FlipViewUWPなどにある同名のコントロールと同じようなものです。表示する要素は、以下の例のようにXAMLで直接定義もできますし、ItemsSourceプロパティで設定することもできます。</Controls:FlipView>こんなプロパティが用意されてます。BannerTextを表示するか否かを設定Dialogs系コントロール今度はダイアログ表示用のコントロール。全画面でメッセージを表示するMessageDialogと、プログレス表示もできるタイプのProgressDialogというクラスがあります。それぞれ、ShowMessageAsync/ShowProgressAsyncというメソッドで開くことができます。}↓MessageDialogはこんな感じの表示です。続いてProgressDialog。MessageDialogの下部にプログレス表示がくっついた感じです。ここでは省略しますが、CustomDialogというクラスを使うと、任意の要素をこの形のダイアログで表示することができるようです。Flyoutswin8系のストアアプリで使われてたFlyoutコントロールを再現したもの。デスクトップアプリだと、この辺のコントロールはあんま使わないかな、って気がします。</Grid></Controls:MetroWindow>コードビハインドから以下のようにIsOpenプロパティをtrueにすることでFlyoutを表示できます。}もちろん、XAML上でIsOpenプロパティをバインドして開いてもOK!!主なプロパティはこんな感じ。0.6.0をリリースしました。2017メモここ最近、Build2017の動画を色々と見て回ってました。その中...2016-04-03WPF用にLightBox的なポップアップ表示をするライブラリを作ってみたこんな風に、LightBox的なダイアログ表示を行うライブラリを作...2015-09-02SplitViewを使ってみるWin10のUWPではあちこちで使うことになりそうなコントロール。アプリ開発Windows開発者はてなブログをはじめよう!minami_SCさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。