Web/DB プログラミング徹底解説

ホーム > Windows 徹底解説 > レイアウトを定義する SizeDefinition と ScalingPolicy : Windows リボンフレームワーク

レイアウトを定義する SizeDefinition と ScalingPolicy : Windows リボンフレームワーク

コントロールのレイアウトを定義する SizeDefinition と ScalingPolicy

リボンフレームワークにおいて、コントロールのレイアウトは XAML の SizeDefinition と ScalingPolicy で行います。

そう言っても、ピンと来ないかもしれませんので、具体的な例を見てみましょう。 以下の二つの UI は ScalingPolicy を除いて全く同様のソースコードで出来ています。 スプリットボタン1個と、普通のボタンを2個並べています。

こちらは 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」 サイズが選択されることになります。

ホーム > Windows 徹底解説 > レイアウトを定義する SizeDefinition と ScalingPolicy : Windows リボンフレームワーク