Viewbox Graphics

Viewbox はコンテンツをスケーリングして表示するデコレーターコンテナです。固定サイズのコンテンツ（アイコン、図形、UI パーツ）を任意のサイズに拡大縮小して表示します。ベクターグラフィックスのサイズフリーな表示に使われます。

概要

WPF の Viewbox は Decorator を継承したコンテナで、子要素を Stretch と StretchDirection の設定に従ってスケーリングして表示します。固定サイズで設計した UI コンポーネントやアイコンを、任意のサイズのコンテナに収めて表示するために使用します。

Stretch プロパティは Image と同じ 4 つのモードを持ちます。Uniform（デフォルト）はアスペクト比を保ちながら収まるようスケール、Fill はアスペクト比を無視して引き伸ばし、UniformToFill はアスペクト比を保ちながらコンテナを完全に埋めます。

Viewbox は子要素を無限大のサイズで測定してから、コンテナのサイズに合わせてスケールを計算します。これにより、Path や Polygon などのベクター図形をすべてのスケールで滑らかに表示できます（ラスター画像のようにぼけません）。

Canvas に描かれた複雑な図形や、固定 Width/Height で設計した UI パーツを Viewbox でラップすることで、どんなサイズの親コンテナにも適切にスケーリングできます。レスポンシブでないレガシー UI コンポーネントを再利用する際にも便利です。

画面キャプチャ

デモしているプロパティ

以下のプロパティが WPF 標準コントロールデモアプリでインタラクティブにデモされています。

プロパティ	設定値	説明
`Stretch`	`None / Fill / Uniform / UniformToFill`	コンテンツのスケーリング方法を設定します。`Uniform`（デフォルト）はアスペクト比を保ちながら収まるようスケールします。`Fill` はアスペクト比を無視してコンテナいっぱいに引き伸ばします（フルスクリーンオーバーレイなど歪みが許容される場面向き）。`UniformToFill` はアスペクト比を保ちコンテナを完全に埋めますが、はみ出した部分はクリップされます。はまりやすいポイント：`UniformToFill` でクリップされた場合でも子要素はクリップ前の完全なサイズでレイアウト計算を行うため、複雑な子レイアウトでは無駄な CPU を消費することがあります。
`StretchDirection`	`UpOnly / DownOnly / Both`	スケーリングの方向を制限します。`UpOnly` はコンテナが縮小しても子を縮小せず、コンテナが大きい時だけ拡大します（アイコンを縮小させたくない場合）。`DownOnly` はコンテナが拡大しても子を拡大せず、コンテナが小さい時だけ縮小します（小さなベースコンテンツを拡大して表示したい場合）。`Both`（デフォルト）は両方向に適用します。はまりやすいポイント：`StretchDirection=Both`（デフォルト）の場合、非常に大きなコンテナでは小さなアイコンが巨大に引き伸ばされて不自然な見た目になることがあります。アイコン用途では `DownOnly` の指定を検討してください。

XAML 使用例

<!-- 固定サイズの図形を Viewbox でスケーラブルに -->
<Viewbox Width="200" Height="200" Stretch="Uniform">
  <Canvas Width="100" Height="100">
    <Ellipse Canvas.Left="10" Canvas.Top="10"
             Width="80" Height="80" Fill="Gold" />
    <Path Fill="Black"
          Data="M 50,30 L 55,45 L 70,45 L 60,55 L 65,70 L 50,60 L 35,70 L 40,55 L 30,45 L 45,45 Z" />
  </Canvas>
</Viewbox>

<!-- アイコンのスケーリング -->
<Viewbox Width="{Binding IconSize}" Height="{Binding IconSize}">
  <Path Data="M 0,0 L 24,0 L 24,24 L 0,24 Z" Fill="Blue" />
</Viewbox>

主な使用例

アイコンのスケーリング — ベクター（Path）で描いたアイコンを Viewbox でラップして、任意のサイズで鮮明に表示します。
固定 UI のスケーリング — レガシーな固定サイズ UI コンポーネントを現代的なレスポンシブレイアウトに組み込む際に使用します。
プレゼンテーションスライド — 固定解像度で設計したスライドコンテンツを様々なウィンドウサイズに対応させます。
ゲームの拡大表示 — 固定サイズのゲームエリア（Canvas）を Viewbox でラップして、ウィンドウサイズに合わせて全画面表示します。
ダッシュボードのゲージ — ベクター描画のゲージや計器を Viewbox でスケーラブルにして、様々なサイズのダッシュボードタイルに配置します。

ヒントとベストプラクティス

ベクター要素に最適 — Viewbox は Path や Canvas のベクター描画と相性が最良です。ビットマップ画像は Viewbox でスケールするとぼけることがあります（Image の Stretch を直接使う方が良い）。
StretchDirection で縮小のみ許可 — アイコンが小さなコンテナに入れても拡大してほしくない場合は StretchDirection="DownOnly" を設定します。
テキストレンダリングに注意 — Viewbox はフォントサイズを変えるのではなくトランスフォーム（変形）でスケールするため、非 1x スケールでは ClearType/アンチエイリアスが失われ文字が滲むことがあります。テキストを含む要素には Viewbox でラップするより FontSize を直接調整することを優先してください。
レイアウトパフォーマンス — Viewbox は子要素を無限大のサイズで測定してからスケールを計算するため、複雑な子レイアウトではこの二重レイアウトパスがコストになります。パフォーマンスが問題になる場合はシンプルな代替手段を検討してください。
レイアウト問題に注意 — Viewbox は子要素のサイズを無限大で測定するため、子要素に MaxWidth/MaxHeight が設定されていないと予期しない動作をすることがあります。
フォントを含む場合はテキスト品質に注意 — Viewbox でテキストを含む要素をスケールすると、フォントのヒンティングが無効になり品質が低下することがあります。テキストには直接 FontSize を変更することを検討します。
パフォーマンス — Viewbox は毎フレームのレイアウト計算でスケールを再計算します。アニメーション中のViewbox は重くなる可能性があります。

ソースコード

このデモ画面のソースコードは GitHub で公開しています。

GitHub で Viewbox のソースコードを見る →