VB のたまご

作成日: 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>