DockPanelにはお世話になります。

DockPanelの性質をメモメモ。

<Window x:Class="TawamureDays.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:nfc="http://nichia.jp/sys/foundation/component/gui"
Title="MainWindow" Height="350" Width="525">
<DockPanel>
<DockPanel.Resources>
<Style TargetType="Border">
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush" Value="Black"/>
</Style>
</DockPanel.Resources>
<Border Height="30" DockPanel.Dock="Top">
<TextBlock Text="Top1"/>
</Border>
<Border Height="30" DockPanel.Dock="Top">
<TextBlock Text="Top2"/>
</Border>
<Border Width="50" DockPanel.Dock="Left">
<TextBlock Text="Left1"/>
</Border>
<Border Width="50" DockPanel.Dock="Left">
<TextBlock Text="Left2"/>
</Border>
<Border Width="50" DockPanel.Dock="Right">
<TextBlock Text="Right1"/>
</Border>
<Border Width="50" DockPanel.Dock="Right">
<TextBlock Text="Right2"/>
</Border>
<Border Height="30" DockPanel.Dock="Bottom">
<TextBlock Text="Bottom1"/>
</Border>
<Border Height="30" DockPanel.Dock="Bottom">
<TextBlock Text="Bottom2"/>
</Border>
<Label Background="AliceBlue">Body(Fill)</Label>
</DockPanel>
</Window>

20120530_1
この順番を変えるとどうなるか見てみる。(Labelは変えない)

<Window x:Class="TawamureDays.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:nfc="http://nichia.jp/sys/foundation/component/gui"
Title="MainWindow" Height="350" Width="525">
<DockPanel>
<DockPanel.Resources>
<Style TargetType="Border">
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush" Value="Black"/>
</Style>
</DockPanel.Resources>
<Border Width="50" DockPanel.Dock="Left">
<TextBlock Text="Left1"/>
</Border>
<Border Width="50" DockPanel.Dock="Left">
<TextBlock Text="Left2"/>
</Border>
<Border Width="50" DockPanel.Dock="Right">
<TextBlock Text="Right1"/>
</Border>
<Border Width="50" DockPanel.Dock="Right">
<TextBlock Text="Right2"/>
</Border>
<Border Height="30" DockPanel.Dock="Bottom">
<TextBlock Text="Bottom1"/>
</Border>
<Border Height="30" DockPanel.Dock="Bottom">
<TextBlock Text="Bottom2"/>
</Border>
<Border Height="30" DockPanel.Dock="Top">
<TextBlock Text="Top1"/>
</Border>
<Border Height="30" DockPanel.Dock="Top">
<TextBlock Text="Top2"/>
</Border>
<Label Background="AliceBlue">Body(Fill)</Label>
</DockPanel>
</Window>

20120530_2


<Window x:Class="TawamureDays.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:nfc="http://nichia.jp/sys/foundation/component/gui"
Title="MainWindow" Height="350" Width="525">
<DockPanel>
<DockPanel.Resources>
<Style TargetType="Border">
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush" Value="Black"/>
</Style>
</DockPanel.Resources>
<Border Width="50" DockPanel.Dock="Right">
<TextBlock Text="Right1"/>
</Border>
<Border Width="50" DockPanel.Dock="Right">
<TextBlock Text="Right2"/>
</Border>
<Border Height="30" DockPanel.Dock="Bottom">
<TextBlock Text="Bottom1"/>
</Border>
<Border Height="30" DockPanel.Dock="Bottom">
<TextBlock Text="Bottom2"/>
</Border>
<Border Height="30" DockPanel.Dock="Top">
<TextBlock Text="Top1"/>
</Border>
<Border Height="30" DockPanel.Dock="Top">
<TextBlock Text="Top2"/>
</Border>
<Border Width="50" DockPanel.Dock="Left">
<TextBlock Text="Left1"/>
</Border>
<Border Width="50" DockPanel.Dock="Left">
<TextBlock Text="Left2"/>
</Border>
<Label Background="AliceBlue">Body(Fill)</Label>
</DockPanel>
</Window>

20120530_3


<Window x:Class="TawamureDays.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:nfc="http://nichia.jp/sys/foundation/component/gui"
Title="MainWindow" Height="350" Width="525">
<DockPanel>
<DockPanel.Resources>
<Style TargetType="Border">
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush" Value="Black"/>
</Style>
</DockPanel.Resources>
<Border Height="30" DockPanel.Dock="Bottom">
<TextBlock Text="Bottom1"/>
</Border>
<Border Height="30" DockPanel.Dock="Bottom">
<TextBlock Text="Bottom2"/>
</Border>
<Border Height="30" DockPanel.Dock="Top">
<TextBlock Text="Top1"/>
</Border>
<Border Height="30" DockPanel.Dock="Top">
<TextBlock Text="Top2"/>
</Border>
<Border Width="50" DockPanel.Dock="Left">
<TextBlock Text="Left1"/>
</Border>
<Border Width="50" DockPanel.Dock="Left">
<TextBlock Text="Left2"/>
</Border>
<Border Width="50" DockPanel.Dock="Right">
<TextBlock Text="Right1"/>
</Border>
<Border Width="50" DockPanel.Dock="Right">
<TextBlock Text="Right2"/>
</Border>
<Label Background="AliceBlue">Body(Fill)</Label>
</DockPanel>
</Window>

20120530_4
・宣言した順番から領域を占有する。≒順番はよく考えよう。
・後からくるDockPanelは先のDockPanelと重なる事はない。
・最後のLabelが残り領域を専有している(WidthもHeightも未設定なので)。

Dockプロパティ未設定のコントロールを追加してみる。

<Window x:Class="TawamureDays.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:nfc="http://nichia.jp/sys/foundation/component/gui"
Title="MainWindow" Height="350" Width="525">
<DockPanel>
<DockPanel.Resources>
<Style TargetType="Border">
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush" Value="Black"/>
</Style>
</DockPanel.Resources>
<Border Height="30" DockPanel.Dock="Top">
<TextBlock Text="Top1"/>
</Border>
<Border Height="30" DockPanel.Dock="Top">
<TextBlock Text="Top2"/>
</Border>
<Border Width="50" DockPanel.Dock="Left">
<TextBlock Text="Left1"/>
</Border>
<Border Width="50" DockPanel.Dock="Left">
<TextBlock Text="Left2"/>
</Border>
<Border Width="50" DockPanel.Dock="Right">
<TextBlock Text="Right1"/>
</Border>
<Border Width="50" DockPanel.Dock="Right">
<TextBlock Text="Right2"/>
</Border>
<Border Height="30" DockPanel.Dock="Bottom">
<TextBlock Text="Bottom1"/>
</Border>
<Border Height="30" DockPanel.Dock="Bottom">
<TextBlock Text="Bottom2"/>
</Border>
<Label Background="AliceBlue">Body1(Fill)</Label>
<TextBlock Background="Beige">Body2</TextBlock>
<TextBlock Background="Orange">Body3</TextBlock>
</DockPanel>
</Window>

20120530_5
・添付プロパティ無しは、最後に追加されたコントロールが領域を占有する。
 最後でないものは、最低限の領域だけを与えられる。
最後のコントロールが領域を専有しないようにするには、LastChildFillプロパティをFalseにする。

<Window x:Class="TawamureDays.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:nfc="http://nichia.jp/sys/foundation/component/gui"
Title="MainWindow" Height="350" Width="525">
<DockPanel LastChildFill="False" >
<DockPanel.Resources>
<Style TargetType="Border">
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush" Value="Black"/>
</Style>
</DockPanel.Resources>
<Border Height="30" DockPanel.Dock="Top">
<TextBlock Text="Top1"/>
</Border>
<Border Height="30" DockPanel.Dock="Top">
<TextBlock Text="Top2"/>
</Border>
<Border Width="50" DockPanel.Dock="Left">
<TextBlock Text="Left1"/>
</Border>
<Border Width="50" DockPanel.Dock="Left">
<TextBlock Text="Left2"/>
</Border>
<Border Width="50" DockPanel.Dock="Right">
<TextBlock Text="Right1"/>
</Border>
<Border Width="50" DockPanel.Dock="Right">
<TextBlock Text="Right2"/>
</Border>
<Border Height="30" DockPanel.Dock="Bottom">
<TextBlock Text="Bottom1"/>
</Border>
<Border Height="30" DockPanel.Dock="Bottom">
<TextBlock Text="Bottom2"/>
</Border>
<Label Background="AliceBlue">Body1(Fill)</Label>
<TextBlock Background="Beige">Body2</TextBlock>
<TextBlock Background="Orange">Body3</TextBlock>
</DockPanel>
</Window>

20120530_6
スポンサーサイト
当サイトは基本をすっ飛ばしてます。基本文法等は、@ITをどうぞ
カテゴリー: WPF4 | コメント: 0 | トラックバック: 0


この記事へのコメント

コメントの投稿

非公開コメント


サイドバー背後固定表示サンプル

当ブログに書かれたソースコードは流用自由です。

バグ、スペルミス等はありうる事です。

ご利用の際は自己責任でお願いしますm(_ _)m