VB のたまご

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



DockPanel

    イメージ
  •  DockPanel は、DockPanel 内に配置したコントロールに対して、上下左右のいづれかにドッキングさせて管理するレイアウトコントロールです。 とりあえずどういう風に動くのか見てみましょう。 以下サンプルです。「DockPanelWindow1」という画面で作成していますが、「MainWindow」に書いても構いません。

  • スポンサーリンク


    <Window x:Class="DockPanelWindow1"
            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="DockPanelWindow1" Height="300" Width="300">
        
        <DockPanel LastChildFill="False">
    
            <Button Content="Dock=Left" DockPanel.Dock="Left" />
            <Button Content="Dock=Left" DockPanel.Dock="Left" />
            <Button Content="Dock=Top" DockPanel.Dock="Top" />
            <Button Content="Dock=Bottom" DockPanel.Dock="Bottom" />
            <Button Content="Dock=Right" DockPanel.Dock="Right" />
            <Button Content="button1" />
    
        </DockPanel>
        
    </Window>
    

  •  1つ1つボタンコントロールを書いていく過程(ボタンの配置)にも注目です。 書いたら実行しましょう。画面をリサイズしてみて、ボタンコントロールがどう動くのか確認しましょう。

  •  DockPanel はこんな感じで内部のコントロールを管理します。ポイントは、DockPanel.Dock の値、「Top」、「Left」、「Right」、「Bottom」ですね。

  • イメージ
  •  LastChildFill は、最後に記載したコントロールを残りの領域にサイズを合わせるかどうかを指定します。 デフォルトでは True なので、今度はこちらで実装してみましょう。

  • <Window x:Class="DockPanelWindow2"
            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="DockPanelWindow2" Height="300" Width="300">
    
        <!-- または、<DockPanel LastChildFill="True"> -->
        <DockPanel>
    
            <Button Content="Dock=Left" DockPanel.Dock="Left" />
            <Button Content="Dock=Left" DockPanel.Dock="Left" />
            <Button Content="Dock=Top" DockPanel.Dock="Top" />
            <Button Content="Dock=Bottom" DockPanel.Dock="Bottom" />
            <Button Content="Dock=Right" DockPanel.Dock="Right" />
            <Button Content="button1" />
    
        </DockPanel>
    
    </Window>
    

  •  最後に記載したボタンのサイズが、残りの領域に合わせて広がっていることが分かるかと思います。