以前、カスタムコントロールを使用した「アプリバーボタンの実装方法」についてご紹介しました。アプリなら是非使ってみたい「セマンティックズーム」をカスタムコントロールで実装するポイントについてご紹介したいと思います。WinRTのセマンティックズームコントロールに使用できるのは、GridViewとListViewのみとなっており、カスタマイズしたグリッドビューや他のコントロールを配置しようとすると意外と面倒です。上図のタイムライン型の掲示板アプリを例に説明していきます。】セマンティックズームコントロールに使用する場合には、「ListViewBase」「GridView」「ListView」を継承したカスタムコントロールをつくります。設定して、「Themes/Generic.xaml」というリソースディクショナリーにスタイルを定義することで、プラットフォームが自動的にスタイルを参照してくれます。下記の掲示板アプリの例では、投稿用のパネルを出すためのボタン「AddCommentAppBarBtn」「AddImageAppBarBtn」と、通常非表示の投稿用パネル「AddPanel」をデフォルトのGridViewのテンプレートに追加しています。セマンティックズームを実装するときに利用する「ScrollViewer」の名称を設定しています。】グリッドビューのコンテンツによってアイテムの高さと幅を変えるためには、カスタムコントロールの「ItemsPanel」にVariableSizedWrapGridを使います。】アイテムに使用するモデル(下の例はCommentクラス)に高さと幅を判別する数値などを持っておき、VariableSizedWrapGridのColumnSpanPropertyやRowSpanPropertyにセットすることで高さと幅を設定できます。】カスタムコントロールに値を渡したいときにはプロパティを設定します。PropertyMetadata(null));受け取った値から他のプロパティを設定したい場合などには、コールバックメソッドを指定します。】テンプレートが適用されると、OnApplyTemplateメソッドが呼び出されるため、メソッド内でGetTemplateChildを使うと、カスタムコントロール内の要素の参照を取得できます。カスタムコントロール内の要素にイベントを登録したい場合には、このメソッドを使用してイベントを追加できます。下の例では、ボタンにClickイベントを登録することで、Clickで投稿用のパネル(AddPanel)が表示されるようにしています。GetTemplateChildを使用する場合、[1]のThemes/Generic.xamlで指定した要素にNameを設定しておく必要があります。セマンティックズームのスクロールを実装する下の例では、セマンティックズームのスクロールの実装を以下の流れでおこなっています。SemanticZoomOutViewにおいてアイテムのタップイベントを登録する掲示板のようにアイテムが変化する場合には、VariableSizedWrapGridのLoadedイベントでVariableSizedWrapGridを確保し、SemanticZoomのViewChangeStartedイベントでSemanticZoomOutViewのアイテムタップイベントを登録するという流れをとっています。アイテムのタップイベントでカスタムコントロールに対象となるGridViewItemを渡すSemanticZoomOutViewのアイテムタップイベントで、1で確保したVariableSizedWrapGridのChildrenから、対象となるアイテム(GridViewItem)を探してカスタムコントロールのイベントに渡します。】TipicGridViewWrapGrid.ChildrenのGridViewItemからスクロールのターゲットとなるアイテムを見つけます。下の例では、基準となるコントロールは位置が不変の部品(下の例はメニュー部分のAddPanel)を選びます。下記のScrollViewerは、[1]のスタイルで名称を設定し、[4]で参照を取得したScrollViewerコントロールです。UIならではの、便利な操作感があるのでいろんな場面で使いたいのに、GridViewとListViewしか入らないのは正直残念です。「グループを俯瞰して見る」という使い方だけ守って、カスタムコントロールを使って自由な表現ができればオリジナリティも出しやすいかなと感じています。サイトのご利用にあたって。