VirtualizingStackPanel虛擬化元素

VirtualizingStackPanel 類（虛擬化元素）和StackPanel 類在用法上幾乎差不多。其作用是在水平或垂直的一行中排列并顯示內(nèi)容。它繼承于一個(gè)叫VirtualizingPanel的抽象類，而這個(gè)VirtualizingPanel抽象類繼承于Panel布局基類。

1. VirtualizingStackPanel 作用

比如在ListBox集合控件中需要顯示500條數(shù)據(jù)，那整個(gè)屏幕只能顯示20條，剩余的480條數(shù)據(jù)在ListBox控件要不要一次性繪制出來？其實(shí)就算繪制出來，用戶的屏幕也看不見，只能是拖動(dòng)滾動(dòng)條才能看見后面的數(shù)據(jù)。既然屏幕只能顯示20條數(shù)據(jù)，何不只繪制20條數(shù)據(jù)的UI子元素，剩下的480條數(shù)據(jù)的子元素在拖動(dòng)滾動(dòng)條時(shí)才繪制，這將大大減少計(jì)算機(jī)的性能消耗，提高UI界面的呈現(xiàn)速度，提高軟件的流暢性。其實(shí)就是所謂的延遲加載。

所以，VirtualizingStackPanel 類的作用是開啟虛擬化技術(shù)，延遲那些看不見的子元素的繪制與渲染。

要開啟這項(xiàng)技術(shù)，只需要設(shè)置Listbox集合控件的附加屬性**VirtualizingStackPanel.IsVirtualizing=“True”**即可。因?yàn)長istBox的ItemsPanel（元素布局模板）默認(rèn)采用了VirtualizingStackPanel控件布局。

Canvas控件（絕對(duì)布局）

Canvas控件允許我們像Winform一樣拖拽子控件進(jìn)行布局，而子控件的位置相對(duì)于Canvas來說是絕對(duì)的，所以我將它稱為絕對(duì)布局。我們來看看它的結(jié)構(gòu)定義：

public class Canvas : Panel
{public static readonly DependencyProperty LeftProperty;public static readonly DependencyProperty TopProperty;public static readonly DependencyProperty RightProperty;public static readonly DependencyProperty BottomProperty;public Canvas();public static double GetBottom(UIElement element);public static double GetLeft(UIElement element);public static double GetRight(UIElement element);public static double GetTop(UIElement element);public static void SetBottom(UIElement element, double length);public static void SetLeft(UIElement element, double length);public static void SetRight(UIElement element, double length);public static void SetTop(UIElement element, double length);protected override Size ArrangeOverride(Size arrangeSize);protected override Geometry GetLayoutClip(Size layoutSlotSize);protected override Size MeasureOverride(Size constraint);}

觀察它的結(jié)構(gòu)，我們可以看到它提供了4個(gè)依賴屬性，分別是LeftProperty，RightProperty，TopProperty和BottomProperty。其實(shí)是將這4個(gè)屬性附加到子元素身上，以此來設(shè)置子元素距離Canvas上下左右的像素位置。

1. 不設(shè)置屬性情況下

    <Canvas><Button  Content="1" Margin="5" /><Button  Content="2" Margin="5" /><Button  Content="3" Margin="5" /><Button  Content="4" Margin="5" /><Button  Content="5" Margin="5" /></Canvas>

沒有指定button控件在Canvas控件中的上下左右停靠位置，所以這5個(gè)button默認(rèn)會(huì)顯示在Canvas的左上角，且只能顯示最后一個(gè)，前面4個(gè)會(huì)被遮蓋。

2. 設(shè)置布局屬性

    <Canvas><Button  Content="1" Margin="5" Canvas.Left="50"/><Button  Content="2" Margin="5" Canvas.Top="50"/><Button  Content="3" Margin="5" Canvas.Right="50"/><Button  Content="4" Margin="5" Canvas.Bottom="50"/><Button  Content="5" Canvas.Left="200" Canvas.Top="150" /></Canvas>

第一個(gè)button，設(shè)置了Canvas.Left=“50”，它將保持距離Canvas左邊50像素。
第二個(gè)button，設(shè)置了Canvas.Top=“50”，它將保持距離Canvas頂部50像素。
第三個(gè)button，設(shè)置了Canvas.Right=“50”，它將保持距離Canvas右側(cè)50像素。
第四個(gè)button，設(shè)置了Canvas.Bottom=“50”，它將保持距離Canvas底部50像素。
第五個(gè)button，設(shè)置了Canvas.Left=“200” Canvas.Top=“150”，也就是同時(shí)距離Canvas左邊200像素，頂部150像素。