VB のたまご

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



WrapPanel

    イメージ
  •  WrapPanel は、StackPanel の機能+画面リサイズ時の非表示コントロールを折り返して表示する機能があるレイアウトコントロールです。 とりあえずどういう風に動くのか見てみましょう。 以下サンプルです。「WrapPanelWindow1」という画面で作成していますが、「MainWindow」に書いても構いません。

  • スポンサーリンク


    <Window x:Class="WrapPanelWindow1"
            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="WrapPanelWindow1" Height="300" Width="300">
        
        <WrapPanel Orientation="Vertical">
    
            <Button Content="button1" Width="120" />
            <Button Content="button2" Width="120" />
            <Button Content="button3" Width="120" />
            <Button Content="button4" Width="120" />
            <Button Content="button5" Width="120" />
    
        </WrapPanel>
        
    </Window>
    

  •  書いたら実行しましょう。画面をリサイズしてみて、ボタンコントロールがどう動くのか確認しましょう。 ここで、Orientation に「Vertical(縦方向)」を指定しましたが、WrapPanel のデフォルトは横方向です。 それでは、横方向の場合を見てみましょう。

  • <Window x:Class="WrapPanelWindow2"
            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="WrapPanelWindow2" Height="300" Width="300">
    
        <WrapPanel>
    
            <Button Content="button1" Width="120" />
            <Button Content="button2" Width="120" />
            <Button Content="button3" Width="120" />
            <Button Content="button4" Width="120" />
            <Button Content="button5" Width="120" />
    
        </WrapPanel>
    
    </Window>
    

  •  書いたら実行しましょう。画面をリサイズしてみて、ボタンコントロールがどう動くのか確認しましょう。