WPF4.5入門 その16 「ViewBoxコントロール」

過去記事

• WPF4.5入門 その1 「はじめに」
• WPF4.5入門 その2 「WPFとは」
• WPF4.5入門 その3 「Hello world」
• WPF4.5入門 その4 「Mainメソッドはどこにいった？」
• WPF4.5入門 その5 「全てC#でHello world」
• WPF4.5入門 その6 「WPFを構成するものを考えてみる」
• WPF4.5入門 その7 「XAMLのオブジェクト要素と名前空間」
• WPF4.5入門 その8 「オブジェクト要素のプロパティ」
• WPF4.5入門 その9 「コレクション構文」
• WPF4.5入門 その10 「コンテンツ構文」
• WPF4.5入門 その11 「マークアップ拡張」
• WPF4.5入門 その12 「その他のXAMLの機能」
• WPF4.5入門 その13 「簡単なレイアウトを行うコントロール」
• WPF4.5入門 その14 「レイアウトコントロールのCanvasとStackPanel」
• WPF4.5入門 その15 「レイアウトコントロールのDockPanelとWrapPanel」

ViewBoxコントロール

ViewBoxコントロールは、子要素を拡大縮小して表示するコントロールです。拡大縮小されたコントロールは、もとの動作を100%保った状態なので操作できます。ここら辺の動作は、WPFがベクターベースのテクノロジである強みだといえます。
ViewBoxコントロールで使用する主なプロパティを以下に示します。

プロパティ	説明
Stretch Stretc { get; set; }	拡大縮小を行う時に、どのように行うか指定します。何も行わないNoneと、領域を埋めるようにサイズを調整するFillと、縦横比を維持しながら領域内に収まるようにサイズを調整するUniformと、縦横比を維持しながら領域いっぱいにサイズを調整するUniformFillがあります。デフォルトはUniformです。
StretchDirection StretchDirection { get; set; }	拡大を行うのか縮小を行うのか、両方やるのかを指定します。拡大のみを行うUpOnlyと、縮小のみを行うDownOnlyと、拡大縮小を行うBothがあります。デフォルトはBothです。

75px × 75pxのViewBoxにボタンを置いてStretchプロパティを変えて違いを確認します。XAMLを以下に示します。

<Window x:Class="ViewBoxSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <WrapPanel>
        <Viewbox Width="75" Height="75" Stretch="None">
            <Button Content="Button" />
        </Viewbox>
        <Viewbox Width="75" Height="75" Stretch="Fill">
            <Button Content="Button" />
        </Viewbox>
        <Viewbox Width="75" Height="75" Stretch="Uniform">
            <Button Content="Button" />
        </Viewbox>
        <Viewbox Width="75" Height="75" Stretch="UniformToFill">
            <Button Content="Button" />
        </Viewbox>
    </WrapPanel>
</Window>

これを実行すると、以下のような結果になります。

左からNone, Fill, Uniform, UniformToFillになります。文章ではわかりにくかったUniformとUniformToFillの違いですが、Uniformが領域内に収まるように拡大していて、UniformToFillが領域いっぱいになるように拡大していてはみ出た部分は表示されていないことが確認できます。さらに、ボタンが動くことをマウスオーバーやクリックするなどして確認してみてください。ViewBoxは使いどころが難しいですが、簡単にサイズに合わせて拡大縮小できる機能を実現する手段があるということは頭に入れておくといいでしょう。たまに使います。