レイアウトを定義する SizeDefinition と ScalingPolicy : Windows リボンフレームワーク
コントロールのレイアウトを定義する SizeDefinition と ScalingPolicy
リボンフレームワークにおいて、コントロールのレイアウトは XAML の SizeDefinition と ScalingPolicy で行います。
そう言っても、ピンと来ないかもしれませんので、具体的な例を見てみましょう。 以下の二つの UI は ScalingPolicy を除いて全く同様のソースコードで出来ています。 スプリットボタン１個と、普通のボタンを２個並べています。
こちらは SizeDefinition が ThreeButtons-OneBigAndTwoSmall で、ScalingPolicy が Medium です。
一方、こちらは SizeDefinition が同じく ThreeButtons-OneBigAndTwoSmall で、ScalingPolicy が Large です。
リボンフレームワークではこのように、XAML による UI の定義方法を変えるだけで、 UI の表示方法が簡単に変更できます。
事前定義の SizeDefinition と ScalingPolicy
SizeDefinition には「カスタム」レイアウトと、「事前に定義された」 レイアウトの二種類あり、 上で出てきた ThreeButtons-OneBigAndTwoSmall というのは、リボンフレームワークで事前に定義された SizeDefinition です。 他にも事前定義された SizeDefinition は多数あります。
上で例に取った ThreeButtons-OneBigAndTwoSmall のように、リボンフレームワークで定義されたレイアウトが多数あります。 奇をてらったレイアウトを行わないのであれば、基本的にはこの事前定義のレイアウトを選択してください。
SizeDefinition と ScalingPolicy の組み合わせ一覧については、MSDN の記事をみてください。 あまりに多いのでここでは紹介しません。
具体例として、次の UI を考えます。
ここではひとつのスプリットボタン (Circle) と三つのボタン (New, Save, Exit) が配置されています。 これらを上のスクリーンショットのように、Circle だけ大きなボタン、残りを小さくして並べる、というように表示したい場合は、 どのようにしたらよいでしょうか。
上記の MSDN 文書を参照すると、SizeDefinition を FourButtons、ScalingPolicy にてサイズを Medium とすれば、 同様のレイアウトになることがわかります。これらを XAML で指定すればよいのです。
実際の XAML マークアップは次のようになります。マークアップ以外のプログラムコードについては、 Windows リボンフレームワークの概要とスケルトンプログラムの作成 を参照してください。
<Application.Views> <Ribbon> <Ribbon.ApplicationMenu> <ApplicationMenu> <ApplicationMenu.RecentItems> <RecentItems CommandName="cmdMRUList" MaxCount="10" /> </ApplicationMenu.RecentItems> <MenuGroup Class="MajorItems"> <Button CommandName="cmdExit"/> </MenuGroup> </ApplicationMenu> </Ribbon.ApplicationMenu> <Ribbon.Tabs> <Tab CommandName="cmdTab1"> <Tab.ScalingPolicy> <ScalingPolicy> <ScalingPolicy.IdealSizes> <Scale Group="cmdGroup1" Size="Medium"/> </ScalingPolicy.IdealSizes> <Scale Group="cmdGroup1" Size="Small"/> <Scale Group="cmdGroup1" Size="Popup"/> </ScalingPolicy> </Tab.ScalingPolicy> <Group CommandName="cmdGroup1" SizeDefinition="FourButtons"> <SplitButton> <SplitButton.MenuGroups> <MenuGroup CommandName="cmdDraw" Class="MajorItems"> <Button CommandName="cmdCircle"/> <Button CommandName="cmdRect"/> </MenuGroup> </SplitButton.MenuGroups> </SplitButton> <Button CommandName="cmdNew"/> <Button CommandName="cmdSave"/> <Button CommandName="cmdExit"/> </Group> </Tab> </Ribbon.Tabs> </Ribbon> </Application.Views>
このコードでは cmdGroup1 という名前の付いた Group の SizeDefinition が FourButtons として定義されています。 そして、ScalingPolicy については ScalingPolicy.IdealSizes の下に、理想的なサイズとして Medium が設定されています。 これによって、事前定義の SizeDefinition の 「FourButtons」の「Medium」 サイズが選択されることになります。