かずきのBlog@hatena

すきな言語は C# + XAML の組み合わせ。Azure Functions も好き。最近は Go 言語勉強中。日本マイクロソフトで働いていますが、ここに書いていることは個人的なメモなので会社の公式見解ではありません。

Windows ストアアプリでページの共通の見た目を部品化したい…

すべてのページには、タイトルがあって戻るボタンがあってコンテンツがある。なので、Windowsストアアプリの基本ページとかを作ると自動的に、そこらへんのUIがくっついたものを作成してくれます。

それでも、いいっちゃいいんですが、自分たちでは、こういったヘッダー要素が必要なんです・・・!とかいう要望があった場合どういうふうにして共通化できるかどうか。考えてみました。今回はテンプレートコントロールを作ってみる方法はどうだろう?というのを考えたのでメモっておきます。コードは後日。

テンプレートコントロール

テンプレートコントロールを新規作成すると、Controlを継承したクラスが作られるので、これをContentControlを継承するようにします。

Generic.xamlにあるControlTemplateで、共通の見た目となる部分を組みます。ページによって表示文字列を変えたい箇所は、Bindingを記述しておいて、該当プロパティをもったクラスがDataContextに設定されたときに、表示されるようにしておくとかでいいと思います。

戻るボタンは、NavigationHelperのGoBackCommandとバインドできるようにコントロールにICommand型のプロパティを追加。ControlTemplate内の戻るボタンのCommandプロパティとバインドすることで、いい感じになってくれると思う。

あとは、全ページで共通化したい見た目をぺたぺたと定義しておく。

使うときは、基本ページを作成したら、作ったテンプレートコントロールを全体に広げて置けばOK。カスタムコントロールの中にGridを置いて、各ページのコンテンツを作りこんでいくと個別部分のみに注力できそう。

ほんとうは、マスターページみたいな機能があればいいんだけどなぁと思いつつ、最近かんがえていたことでした。