WPF佈局-面板類（二）

DockPanel，停靠模板，DockPanel默認的停靠方式是水平，而且最後一個放入的元素，默認是填充模式。 在WinForm中，是經過設置Dock屬性，停靠控件的，不過這個屬性要優先於控件的Height和Width屬性，即設置Dock後，會改變Height和Width的值。但在WPF中，標籤沒有了Dock屬性，若是標籤放在DockPanel中，這個標籤就中增長一個屬性「DockPanel.Dock」，它是控制標籤自己在DockPanel中的呈現方式，有四個值「Top，Bootom，Left，Right」不過這個屬性設置後，不會更改標籤的Height和Width的值。

<DockPanel Margin="12,94,65,49" Background="Green" >

<Rectangle DockPanel.Dock="Top" Height="52" Name="rectangle1" Fill="#FFD13E3E"/>

<Rectangle DockPanel.Dock="Left" Fill="#FF22D53E" Name="rectangle2" ;88" />

<Rectangle Fill="#FFD5AC22" Name="rectangle3" />

</DockPanel>

效果以下：

紅色向頂端對齊，因此DockPanel.Dock=」Top」，綠色居左DockPanel.Dock=」Left」，×××是填充，因此不用設置這個屬性，因此Width和Height都是Auto，Auto是默認值。

StackPanel，是一個放置橫平堅直標籤的面板，能夠經過設置面板的Orientation屬性來設置StackPanel子標籤的放置，Vertical爲縱向，Horizontal爲橫向。

例如：

<StackPanel Orientation="Horizontal" Height="82" VerticalAlignment="Top" Margin="20,12,334,0">

<Rectangle ;20" Name="rectangle4" Fill="#FFD13E3E"/>

<Rectangle ;20" Fill="#FF22D53E" Name="rectangle5" />

<Rectangle ;20" Fill="#FFD5AC22" Name="rectangle6" />

</StackPanel>

<StackPanel Margin="20,100,334,119" Orientation="Vertical">

<Rectangle Height="20" Name="rectangle1" Fill="#FFD13E3E"/>

<Rectangle Height="20" Fill="#FF22D53E" Name="rectangle2" />

<Rectangle Height="20" Fill="#FFD5AC22" Name="rectangle3" />

</StackPanel>

WrapPanel是默認從左到右順序排放控件的面板，回在超到面板寬度後自動排放到下一行。

<WrapPanel Margin="0,0,266,133" Orientation="Horizontal" FlowDirection="LeftToRight">

<Rectangle Height="50" ;50" Name="rectangle1" Fill="#FFD13E3E"/>

<Rectangle Height="50" ;50" Fill="#FF22D53E" Name="rectangle2" />

<Rectangle Height="50" ;50" Fill="#FFD5AC22" Name="rectangle3" />

<Rectangle Height="50" ;50" Name="rectangle4" Fill="#FF011570"/>

<Rectangle Height="50" ;50" Fill="#FFD022D5" Name="rectangle5" />

<Rectangle Height="50" ;50" Fill="#FFB0D522" Name="rectangle6" />

</WrapPanel>

以下圖

VirtualizingStackPanel是一個比較特別的面板，MSDN是這樣撒描術的「標準佈局系統能夠建立項容器併爲每一個與列表控件關聯的項計算佈局。「虛擬化」是指一種技術，經過該技術，可根據屏幕上所顯示的項來從大量數據項中生成用戶界面 (UI) 元素的子集。」彷佛很難懂，意思就是在給一些列表控件加載子項時，VirtualizingStackPanel 佈局子項。例如：

ListBox通常狀況下是垂直的，咱們能夠經過修改VirtualizingStackPanel的Orientation=」Horizontal」可改變排布，代碼以下：

<ListBox Height="167" Name="personList" ;120">

<ListBox.ItemsPanel>

<ItemsPanelTemplate>

<VirtualizingStackPanel Orientation="Horizontal">

</VirtualizingStackPanel>

</ItemsPanelTemplate>

</ListBox.ItemsPanel>

<ListBox.ItemTemplate>

<DataTemplate>

<Label Content="{Binding Path=control}"></Label>

</DataTemplate>

</ListBox.ItemTemplate>

</ListBox>

<Label Height="30" Name="Count_Lab" Background="#FFCCF8F8" />

<Button Height="23" Name="Fill_But" ;75" Click="Fill_But_Click">填充</Button>

後臺代碼：

public partial class MainWindow : Window

{

public MainWindow()

{

InitializeComponent();

}

private void Fill_But_Click(object sender, RoutedEventArgs e)

{

List<PanelConstrols> cons = new List<PanelConstrols>();

DateTime dt1 = DateTime.Now;

for (int i = 0; i < 5; i++)

{

Label label = new Label();

label.Content = "Label"+i.ToString ();

label.Height =30;

PanelConstrols pc = new PanelConstrols();

pc.control = label;

cons.Add(pc);

}

this.personList.ItemsSource =cons;

DateTime dt2 = DateTime.Now;

TimeSpan ts = dt2 - dt1;

Count_Lab.Content ="用時"+ ts.Milliseconds+"毫秒";

}

}

class PanelConstrols

{

public Control control

{

get;

set;

}

}

會發現，ListBox中的控件會橫向顯示。可能有人想，不用VirtualizingStackPanel也能達到目的呀，是的，這都是通用的，但VirtualizingStackPanel提供了一種虛擬技術，來快加載顯示的列表子項，數據量大時，效果更明顯，下面來作個測試：

在xaml中， &lt;ItemsPanelTemplate>中若是是VirtualizingStackPanel時，點擊按鈕，會計算出用時，幾回平均值爲45ms左右，若是把VirtualizingStackPanel換成StackPanel，平均時間爲135ms左右，能夠見用VirtualizingStackPanel在性能上提高了不少。