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

かずきのBlog@hatena

日本マイクロソフトに勤めています。XAML + C#の組み合わせをメインに、たまにASP.NETやJavaなどの.NET系以外のことも書いています。掲載内容は個人の見解であり、所属する企業を代表するものではありません。

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

WinRT XAML C#

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

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

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

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

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

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

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

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

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