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在性能上提升了很多。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章