VB のたまご

  1. ホーム　>　
  2. WPF　>　
  3. WPF 入門　>　
  4. コードビハインド　>　
  5. StackPanel

作成日: 2017/03/05, 更新日: 2017/03/05



StackPanel

    イメージ
  • 　StackPanel は、StackPanel 内に配置したコントロールに対して、縦一列か横一列に並べて管理するレイアウトコントロールです。 とりあえずどういう風に動くのか見てみましょう。 以下サンプルです。「StackPanelWindow1」という画面で作成していますが、「MainWindow」に書いても構いません。

    • スポンサーリンク


    <Window x:Class="StackPanelWindow1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:w02_LayoutControls"
        mc:Ignorable="d"
        Title="StackPanelWindow1" Height="300" Width="300">
    
    <StackPanel>

        <Button Content="button1" />
        <Button Content="button2" />
        <Button Content="button3" />
        <Button Content="button4" />
        <Button Content="button5" />

    </StackPanel>
    
</Window>

  • 　次に、少し細かい設定を追加してみます。 HorizontalAlignment は、コントロールの水平方向（横方向）を決めるプロパティで、「Left（左寄せ）」、「Center（中央寄せ）」、「Right（右寄せ）」、「Stretch（左右に広げる）」を指定することができます。 

    • <Window x:Class="StackPanelWindow2"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:w02_LayoutControls"
        mc:Ignorable="d"
        Title="StackPanelWindow2" Height="300" Width="300">

    <StackPanel>

        <Button Content="button1" />
        <Button Content="button2" HorizontalAlignment="Stretch" />
        <Button Content="button3" HorizontalAlignment="Left" />
        <Button Content="button4" HorizontalAlignment="Right" />
        <Button Content="button5" HorizontalAlignment="Center" />
        <Button Content="button6" Width="120" />
        <Button Content="button7" Width="120" HorizontalAlignment="Stretch" />
        <Button Content="button8" Width="120" HorizontalAlignment="Left" />
        <Button Content="button9" Width="120" HorizontalAlignment="Right" />
        <Button Content="button10" Width="120" HorizontalAlignment="Center" />

    </StackPanel>

</Window>

  • 　今度は、横方向です。 

    • <Window x:Class="StackPanelWindow3"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:w02_LayoutControls"
        mc:Ignorable="d"
        Title="StackPanelWindow3" Height="300" Width="300">

    <!-- <StackPanel Orientation="Vertical"> は <StackPanel> と同様です -->
    <StackPanel Orientation="Horizontal">

        <Button Content="button1" />
        <Button Content="button2" />
        <Button Content="button3" />
        <Button Content="button4" />
        <Button Content="button5" />

    </StackPanel>
    
</Window>

  • 　横方向も、少し細かい設定を追加してみます。 VerticalAlignment は、コントロールの垂直水平方向（縦方向）を決めるプロパティで、「Top（上寄せ）」、「Center（中央寄せ）」、「Bottom（下寄せ）」、「Stretch（上下に広げる）」を指定することができます。 Window の幅を 800 に変更しているところも忘れないでください。 

    • <Window x:Class="StackPanelWindow4"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:w02_LayoutControls"
        mc:Ignorable="d"
        Title="StackPanelWindow4" Height="300" Width="800">

    <StackPanel Orientation="Horizontal">

        <Button Content="button1" />
        <Button Content="button2" VerticalAlignment="Stretch" />
        <Button Content="button3" VerticalAlignment="Top" />
        <Button Content="button4" VerticalAlignment="Bottom" />
        <Button Content="button5" VerticalAlignment="Center" />
        <Button Content="button6" Height="120" />
        <Button Content="button7" Height="120" VerticalAlignment="Stretch" />
        <Button Content="button8" Height="120" VerticalAlignment="Top" />
        <Button Content="button9" Height="120" VerticalAlignment="Bottom" />
        <Button Content="button10" Height="120" VerticalAlignment="Center" />

    </StackPanel>

</Window>

    スポンサーリンク


  • 　次は、Margin と Padding についてです。コントロール位置の微調整、コントロール内の微調整に使います。 

    • <Window x:Class="StackPanelWindow5"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:w02_LayoutControls"
        mc:Ignorable="d"
        Title="StackPanelWindow5" Height="300" Width="300">
    
    <StackPanel>

        <Button Content="button1a" />
        <Button Content="button1b" Margin="10" />
        <Button Content="button1c" />

        <Button Content="button2a" />
        <Button Content="button2b" Margin="50,10" />
        <Button Content="button2c" />

        <Button Content="button3a" />
        <Button Content="button3b" Margin="50,5,100,10" />
        <Button Content="button3c" />

        <Button Content="button4" Padding="10,10,10,10" />

    </StackPanel>
    
</Window>

  • 　Margin, Padding は以下のようなイメージです。 Margin=xx の場合、左にxx, 上にxx, 右にxx, 下にxx 幅を取るという意味、 Margin=xx,yy の場合、左にxx, 上にyy, 右にxx, 下にyy 幅を取るという意味、 Margin=xx, yy, zz, nn の場合、左にxx, 上にyy, 右にzz, 下にnn 幅を取るという意味です。 Padding も同様の設定方法です。

    • イメージ
  • 　さて、StackPanel では、HorizontalAlignment, VerticalAlignment, Margin, Padding を説明しました。 しかし、StackPanel 自体の機能は、Orientation が「Vertical（縦方向）」、「Horizontal（横方向）」です。

  • 　HorizontalAlignment, VerticalAlignment, Margin, Padding は、ボタンやラベルなどコントロール一般のプロパティであり、 StackPanel 特有の機能ではなく StackPanel 以外でも使える設定です。 誤解の無いように理解しましょう。

  • 　ここで説明したのは、画面リサイズ時のコントロールの動き方のバリエーションを知っていただくことが狙いでした。

  • 　それでは以下のようなことになった場合どうするのでしょうか？ Height を 100 に変更して、ボタン全てが表示できないようにしています。 

    • <Window x:Class="StackPanelWindow6"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:w02_LayoutControls"
        mc:Ignorable="d"
        Title="StackPanelWindow6" Height="100" Width="300">
    
    <StackPanel>

        <Button Content="button1" />
        <Button Content="button2" />
        <Button Content="button3" />
        <Button Content="button4" />
        <Button Content="button5" />
        <Button Content="button6" />
        <Button Content="button7" />
        <Button Content="button8" />
        <Button Content="button9" />

    </StackPanel>
    
</Window>

  • 　スクロールバーが表示されないので、後半のボタン達が表示されません。 このような場合には、ScrollViewer コントロールの中に StackPanel を含めます。スクロール専用のコントロールにお任せするんですね。 テキストボックス等のコントロールは自前でスクロールできますが、スクロール機能が提供されていないコントロールの場合は、ScrollViewer を使います。 

    • <Window x:Class="StackPanelWindow6"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:w02_LayoutControls"
        mc:Ignorable="d"
        Title="StackPanelWindow6" Height="100" Width="300">

    <ScrollViewer>
        <StackPanel>
            <Button Content="button1" />
            <Button Content="button2" />
            <Button Content="button3" />
            <Button Content="button4" />
            <Button Content="button5" />
            <Button Content="button6" />
            <Button Content="button7" />
            <Button Content="button8" />
            <Button Content="button9" />
        </StackPanel>
    </ScrollViewer>

</Window>