Windowsストアアプリの画面構成部品、コントロール

速習 Windowsストアアプリケーション 第3回

StackPanel

　StackPanelコントロールは、文字通り子要素のコントロールを積み上げる（Stack）ことができるコントロールです。StackPanelの子要素は自動で水平方向（Horizontal）か垂直方向（Vertical）に積み重なるように配置されます。方向の指定がない場合はデフォルト値は垂直方向（Vertical）です。

　サンプルコードを見てみましょう。

StackPanelコントロールのサンプル

<StackPanel>
    <Canvas Height="100" Width="100" Background="Red" />
    <Canvas Height="100" Width="100" Background="Green" />
    <Canvas Height="100" Width="100" Background="Blue" />
    <StackPanel Orientation="Horizontal">
        <Canvas Height="100" Width="100" Background="Yellow" />
        <Canvas Height="100" Width="100" Background="Violet" />
        <Canvas Height="100" Width="100" Background="Chocolate" />
    </StackPanel>
</StackPanel>

StackPanelサンプルの実行結果

VariableSizedWrapGrid

　VariableSizedWrapGridコントロールは、サイズ可変の子要素を配置できるコントロールです。Gridコントロールと似ていますが、こちらはある程度自動で配置を調整します。

　ただし、サイズがはみ出してしまう場合は、子要素のコントロールが切り取られてしまう可能性があるので注意しましょう。

　VariableSizedWrapGridコントロールの動作サンプルは以下です。

VariableSizedWrapGridコントロールのサンプル

<VariableSizedWrapGrid Orientation="Vertical" ItemHeight="100" ItemWidth="100" MaximumRowsOrColumns="6">
    <Rectangle VariableSizedWrapGrid.ColumnSpan ="3" VariableSizedWrapGrid.RowSpan="2" Margin="5" Fill="Blue" />
    <Rectangle VariableSizedWrapGrid.ColumnSpan ="1" VariableSizedWrapGrid.RowSpan="1" Margin="5" Fill="Red" />
    <Rectangle VariableSizedWrapGrid.ColumnSpan ="2" VariableSizedWrapGrid.RowSpan="3" Margin="5" Fill="Green" />
    <Rectangle VariableSizedWrapGrid.ColumnSpan ="1" VariableSizedWrapGrid.RowSpan="1" Margin="5" Fill="Red" />
    <Rectangle VariableSizedWrapGrid.ColumnSpan ="1" VariableSizedWrapGrid.RowSpan="2" Margin="5" Fill="Red" />
    <Rectangle VariableSizedWrapGrid.ColumnSpan ="3" VariableSizedWrapGrid.RowSpan="2" Margin="5" Fill="Yellow" />
    <Rectangle VariableSizedWrapGrid.ColumnSpan ="2" VariableSizedWrapGrid.RowSpan="4" Margin="5" Fill="Red" />
</VariableSizedWrapGrid>

　記事に付属のサンプル（VariableSizedWrapGrid.zip）を実行した結果は、次のとおりです。

VariableSizedWrapGridサンプルの実行結果

Viewbox

　Viewboxコントロールは、ディスプレイサイズに合わせて画面を拡大したい場合や、いわゆる全画面表示をしたい場合に有効なコントロールです。

　Viewboxの動作はシミュレーターで画面サイズを変えることで確認できます。

Viewboxコントロールのサンプル

<Viewbox>
    <StackPanel>
        <Image Source="Assets/アイコン.gif" />
        <Button Height="40" Width="200" Content="Button"/>
    </StackPanel>
</Viewbox>

1027×768の画面サイズ

2560×1440の画面サイズ

　画面解像度の増減にかかわらず、拡大縮小して表示されていることが分かります。