本稿に掲載したコードを試すだけなら、無償のExpressエディションやCommunityエディションで構わない。Windows(製品版)はマイクロソフトのページから無償で入手できる。Desktop」はデスクトップで動作するアプリ用)。4(製品版)もマイクロソフトのページから無償で入手できる。Packの日本語版を追加インストールし、[オプション]ダイアログで言語を切り替える必要がある。3/4も)では、残念なことにVB用のユニバーサルプロジェクトのテンプレートは含まれていない*6。そのため、本稿で紹介するVBのコードはユニバーサルプロジェクトではなく、PCL(ポータブルクラスライブラリ)を使ったプロジェクトのものである。14」)からの提供となるようだ。プレビュー版で、すでに共有プロジェクトは利用可能になっている。14の新機能ベスト10〜もう「VBだから」とは言わせない!」参照。画面幅いっぱいにGridコントロールを置き、その中で列を比例配分すれば、そのセルに入れたコントロールの幅はウィンドウのサイズに応じて変化することになる(次のコードと画像)。FontSize="30">......省略(長い文字列)......</TextBlock></Grid>Gridコントロールを比例配分する例(XAML)この例では、Gridの中を左右に6対4の割合で分割している(太字の部分)。左側のセルに入れたImageコントロール(Windows.UI.Xaml.Controls名前空間)の幅は画面の60%になり、右側に入れたTextBlockコントロール(Windows.UI.Xaml.Controls名前空間)は画面の40%の幅になる(このGridコントロールが画面幅いっぱいに収まっている場合)。2013)画像と長い文字列が画面幅いっぱいに並び、その幅の比率は4対6になっている。ところが、場合によってはセルに入れたコントロールが「いうことを聞かない」ことがあるのだ。Hubコントロール(Windows.UI.Xaml.Controls名前空間)に先ほどのGridコントロールを入れてみよう(次のコードと画像)。TextWrapping="Wrap">......省略(長い文字列)......</TextBlock></Grid></DataTemplate></HubSection.ContentTemplate></HubSection>......省略(二つ目のHubSection)......</Hub>Gridコントロールの比例配分がうまく行かない例(XAML)先ほどのGridコントロールを、Hubコントロールの中のHubSectionコントロール(Windows.UI.Xaml.Controls名前空間)に置いた。別途公開のサンプルでは、このコードは共有プロジェクト(VBではPCL)に置いたユーザーコントロールの中にあり、WindowsとPhoneのそれぞれの画面に貼り付けて利用している。2013、上:Windows/下:Phone)Windows(上)では、右側のTextBlockコントロールが、Gridコントロールの分割を無視して横に広がってしまった(赤矢印の範囲)。実はHubSectionコントロールの幅はウィンドウの幅では決まらない。Windowsでは、HubSectionコントロールの幅はその中のコンテンツ次第なのだ。そのために、Gridコントロール自身の幅も、その列幅の配分も、想定したようにはならない。Phone(下)では、HubSectionコントロールの幅を指定しなかったときの既定値は360ピクセルになっているため、Gridコントロール内の分割は想定通りになる。固定幅では、「コントロールの幅をウィンドウ幅の一定割合にしたい」という意図は満たせない。この例では、HubSectionコントロールの幅をウィンドウのサイズに比例して設定できればよさそうである。それにはどうすればよいのだろうか?コードビハインドで調整するウィンドウのサイズが変わるときに、コントロールの幅を調整すればよいのである。Pageコントロール(Windows.UI.Xaml.Controls名前空間)でもユーザーコントロールでも、サイズが変わるときにSizeChangedイベントが発生するので、そこでウィンドウの幅を取得して、その値を基に算出した幅を目的のコントロールに設定すればよい(次のコードと画像)。<UserControlx:Class="MetroTips105CS.MyUserControl1"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"......省略......SizeChanged="UserControl_SizeChanged">コードビハインドでコントロールの幅を調整する例(XAML)Pageコントロールやユーザーコントロールの冒頭で、SizeChangedイベントハンドラーの設定を追加する(太字の部分)。ここではユーザーコントロールを使っているが、Pageコントロールでも追加する部分は同じである。Subコードビハインドでコントロールの幅を調整する例(上:C#/下:VB)ここでは、幅を調整したいコントロールが二つある(二つのHubSectionコントロール)。それぞれの幅をウィンドウの90%に設定している。ユーザーコントロールでは、ウィンドウの幅よりも自身の幅(自身のActualWidthプロパティ)を使う方が適切かもしれない。コードビハインドでコントロールの幅を調整した結果HubSectionコントロールの幅(=Gridコントロールの幅)は、画面の幅に応じて変化している。Gridコントロールの横の分割(左に画像/右に文章)は、常に6対4となっている。カスタムビヘイビアーで調整する調整する対象のコントロールが増えてくると、コードビハインドでサイズを調整するのが面倒になってくる。そんなときは、カスタムビヘイビアーを作成して使うとよい。そのようなカスタムビヘイビアーのサンプルは、探せばいくつも見つかるだろう。adaption」という項に掲載されている「WindowDimensionBehavior」クラスというカスタムビヘイビアーを使わせてもらうことにする。そのC#のコードは長いのでここでは省略させていただくが、別途公開のサンプルには収録してある。カスタムビヘイビアーはPCLでは使えないため、別途公開サンプルのVBのコードにはこの方法を含めていない(Windows/Phone個別のプロジェクトならば利用可)。(XAML)」への参照を追加しておく(次の画像)。SDKへの参照を追加しておく(PCLでは利用できない)。参照を追加するには、追加したいプロジェクトをソリューションエクスプローラーで選んで右クリック、コンテキストメニューで[追加]−[参照]を選ぶ。(XAML)]にチェックを入れ、[OK]ボタンをクリックする。この作業は、Windows/Phoneそれぞれのプロジェクトで行う。WindowDimensionBehaviorカスタムビヘイビアーを使ってコントロールの幅を調整するXAMLコードは、次のようになる。/></Grid.ColumnDefinitions>......省略......WindowDimensionBehaviorカスタムビヘイビアーを使ってコントロールの幅を調整する例(XAML)「Gridコントロールの比例配分がうまく行かない例(XAML)」に掲載したXAMLコードに、太字の部分を追加した。WindowDimensionBehaviorクラスを使った幅の指定は、コントロールごとに行う。WindowDimensionBehaviorクラスの名前空間は、このユーザーコントロールと同じにしてある(異なる場合は名前空間定義の追加と、接頭辞「local:」の修正が必要)。実行結果は、前述のコードビハインドで調整したときと同様になる。まとめウィンドウ幅を基準にしてコントロールの幅を調整するには、コードビハインドで調整するか、カスタムビヘイビアーを作成して使用するとよい。調整対象のコントロールが多数あるときは、XAMLコードの書き換えだけで済むカスタムビヘイビアーが楽だ。本稿では幅だけを扱ったが、高さでも同様である。10で動かすと、高さも思いの他小さくなり得る(画面によるが、1024×768ピクセルのモニターではウィンドウの高さが500ピクセルほどになるようだ)。ウィンドウサイズに応じたUIが求められたときには、このTIPSも思い出してほしい。メールマガジンをご購読ください。申し込みページへITmediaはアイティメディア株式会社の登録商標です。