かずきのBlog@hatena

日本マイクロソフトに勤めています。XAML + C#の組み合わせをメインに、たまにASP.NETやJavaなどの.NET系以外のことも書いています。掲載内容は個人の見解であり、所属する企業を代表するものではありません。

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

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は使いどころが難しいですが、簡単にサイズに合わせて拡大縮小できる機能を実現する手段があるということは頭に入れておくといいでしょう。たまに使います。