柚子快報(bào)邀請(qǐng)碼778899分享：c# WPF常用的布局面板

http://yzkb.51969.com/

概述：本文簡要介紹了WPF布局面板的使用以及其相關(guān)的屬性。

目錄

一、面板

二、面板控件的使用

1.StackPanel

2.WrapPanel

3.DockPanel

?4.Canvas

5.Grid

6.VirtualizingStackPanel

前言

如果是初次學(xué)習(xí)WPF，建議先了解一下WPF概述，以便選著合適的章節(jié)學(xué)習(xí)。

一、面板

面板控件含義StackPanel在堆疊面板中，子元素允許以水平或垂直方式堆疊。WrapPanel基于orientation屬性，子元素按照從左到右或從上到下的順序排列。DockPanel以排列相對(duì)于彼此的子元素，水平或垂直。Dock屬性可以將子元素?？吭陧敳?，底部，右側(cè)，左側(cè)和中部。Canvas畫布面板可以使用相對(duì)于畫布任意一側(cè)（例如左，右，頂部和底部）的坐標(biāo)來定位子元素。Grid網(wǎng)格面板由行和列組成。網(wǎng)格中的子元素可以以表格形式排列。VirtualizingStackPanel虛擬化的 StackPanel，可以顯示其中一部分的內(nèi)容，使用此控件則可大幅提高呈現(xiàn)效率。

二、面板控件的使用

1.StackPanel

按照水平線方向或垂直線方向排列子控件。

常用的屬性：

屬性含義Margin控制內(nèi)部控件的外邊距HorizontalAlignment設(shè)定控件的豎直對(duì)齊方式，如，設(shè)置水平對(duì)齊為Left、Right或CenterVerticalAlignment設(shè)定控件的水平對(duì)齊方式，設(shè)置水平對(duì)齊為Top、Center、Stretch或BottomMinWidth允許的最小寬度MinHeight允許的最小高度MaxWidth隨控件變化時(shí)，允許的最大寬度MaxHeight隨控件變化時(shí)，允許的最大高度

代碼如下（示例）：

效果圖：

注意：

Margin="10"表示各邊距均為10； Margin="10,20,30,40"表示設(shè)定左、上、右、下各邊緣分別為10、20、30、40。 HorizontalAlignment屬性需要在StackPanel面板設(shè)置Orientation="Vertical"的前提下； VerticalAlignment屬性需要在StackPanel面板設(shè)置Orientation="Horizontal"的前提下。

2.WrapPanel

WrapPanel 可以讓元素水平和垂直方向固定，在空間不足會(huì)自動(dòng)換行。

常用屬性：

屬性含義Orientation獲取或設(shè)置一個(gè)值，該值指定子內(nèi)容的排列方向，默認(rèn)是按水平方向排列Background獲取或設(shè)置用于填充 Brush 的邊框之間的區(qū)域的 PanelHorizontalAlignment獲取或設(shè)置在父元素中組合此元素時(shí)所應(yīng)用的水平對(duì)齊特征VerticalAlignment獲取或設(shè)置在父元素中組合此元素時(shí)所應(yīng)用的垂直對(duì)齊特征Margin獲取或設(shè)置元素的外邊距Opacity透明度

代碼如下（示例）：

效果圖：

3.DockPanel

DockPanel可以將內(nèi)容布局到4個(gè)方向Top，Left，Bottom，Right。?

常用屬性：

屬性含義Dock子元素用4個(gè)值Left、Top、Right、Bottom來控制它們的?？縃orizontalAlignment獲取或設(shè)置在父元素中組合此元素時(shí)所應(yīng)用的水平對(duì)齊特征VerticalAlignment獲取或設(shè)置在父元素中組合此元素時(shí)所應(yīng)用的垂直對(duì)齊特征Margin獲取或設(shè)置元素的外邊距Opacity透明度LastChildFill該值指示 DockPanel 中的最后一個(gè)子元素是否拉伸以填充剩余的可用空間，默認(rèn)填充

代碼如下（示例）：

效果圖：?

?4.Canvas

Canvas設(shè)置其子控件相對(duì)于它的Top, Left, Bottom., Right值來進(jìn)行定位其子控件 如果坐標(biāo)區(qū)域重合，會(huì)產(chǎn)生重疊。

常用屬性：

屬性含義Background背景Opacity透明度Margin獲取或設(shè)置元素的外邊距RenderTransform獲取或設(shè)置影響此元素的呈現(xiàn)位置的轉(zhuǎn)換信息RenderTransformOrigin獲取或設(shè)置由 RenderTransform 聲明的任何可能呈現(xiàn)轉(zhuǎn)換的中心點(diǎn)，相對(duì)于元素的邊界

代碼如下（示例）：

效果圖：?

5.Grid

Grid常用屬性：

屬性含義BackgroundBrush對(duì)象，背景顏色的設(shè)置和獲取Clip獲取或設(shè)置用于定義元素內(nèi)容輪廓的幾何圖形IsHitTestVisible該值聲明是否可以返回此元素作為其呈現(xiàn)內(nèi)容的某些部分的點(diǎn)擊測(cè)試結(jié)果，是否穿透控件Margin獲取或設(shè)置元素的外邊距Opacity透明度Style獲取或設(shè)置此元素呈現(xiàn)時(shí)所使用的樣式

關(guān)于行列表格設(shè)置屬性：

屬性含義RowDefinitionCollection一個(gè)或多個(gè) RowDefinition 元素。每個(gè)此類 RowDefinition 都成為表示最終網(wǎng)格布局中的行的占位符。ColumnDefinitionCollection一個(gè)或多個(gè) ColumnDefinition 元素。每個(gè)此類 ColumnDefinition 都將成為表示最終網(wǎng)格布局中的列的占位符。Grid.RowDefinitions屬性值為RowDefinition標(biāo)簽，每一個(gè)RowDefinition標(biāo)簽將該Grid對(duì)象分為一行Grid.ColumnDefinitions屬性值為ColumnDefinition標(biāo)簽，每一個(gè)ColumnDefinition標(biāo)簽將該Grid對(duì)象分為一列Grid.ColumnSpan該控件占幾列，或者說是跨多少列Grid.RowSpan該控件占幾行，或者說是跨幾行

代碼如下（示例）：

Button 1

Button 2

Button 3

Button 4

Button 5

Button 6

Button 7

Button 8

Button 9

效果圖：

?

6.VirtualizingStackPanel

VirtualizingStackPanel是StackPanel的變體，該控件支持對(duì)數(shù)據(jù)綁定的虛擬化，在承載許多子項(xiàng)時(shí)，這將大幅提高性能。

代碼如下（示例）：

使用 VirtualizingStackPanel來代替ComboBox默認(rèn)的項(xiàng)目面板StackPanel。

效果圖：

柚子快報(bào)邀請(qǐng)碼778899分享：c# WPF常用的布局面板

http://yzkb.51969.com/

精彩鏈接