StackPanel は文字通りコントロールをスタックして(積み重ねて)表示するコンテナです。
MainPage.xamlに標準で配置されているGridの代わりに配置することもできますし、もちろんGrid上に配置することも可能です。
まずは、Grid上にStackPanelを配置する例を見てみましょう。
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <StackPanel HorizontalAlignment="Left" Height="100" Margin="10,10,0,0" VerticalAlignment="Top" Width="100"/> </Grid>
上記Xamlのデザインは以下の通りです。
左上にある正方形の枠が配置したStackPanelです。このままではコントロールを配置できないので、任意のサイズに変更しましょう。以下は幅を300に、高さを500にしたStackPanelです。
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <StackPanel HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Height="500" Width="300"/> </Grid>
上記のStackPanelにButtonを2つ配置してみましょう。
配置してみるとわかりますが、ButtonはStackPanelの上側に吸い付くように配置されます。
他のコントロールを配置した場合も同様に上側に吸い付くように配置されます。
ここまでは縦方向でしたので、横方向にスタックされるように変更してみましょう。
横方向にする場合はStackPanelのOrientationプロパティにHorizontalを指定します(既定ではVerticalになっています)。
以下にOrientationプロパティにHorizontalを指定する例を示します。
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <StackPanel HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Height="500" Width="300" Orientation="Horizontal"> <Button x:Name="button" Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/> <Button x:Name="button1" Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/> </StackPanel> </Grid>
上記のXamlをデザイナで確認すると以下のようになります。
Please follow and like us:
コメント