[三] 控件和布局

控件

日常使用最多的六類控件

1. 布局控件
2. 内容控件
3. 帶标題的内容控件
4. 帶标題條目控件
5. 條目控件
6. 特殊内容控件

派生關系

内容模型

繼承相同父類的歸為同一類，以父類名字為這一類的統稱

名稱	注釋
ContentControl	單一内容控件
ItemsControl	條目為集合内容的控件
HeaderedItemsControl	帶标題的以條目為集合内容的控件
Decorator	UI裝飾
Shape	2d繪制
Panel	布局
Adorner	文字點綴
Flow Text	流式文本元素
TextBox / TextBlock	文本框 、 靜态文字

詳解

1.ContentControl 族

特點

• 派生自ContentControl類
• 都是控件
• 内容屬性都是 Content
• 隻能有單一進制素充當内容

清單

button	buttonbase	checkbox	comboxitem
contentControl	Frame	GridViewColumnHeader	GroupItem
laber	ListBoxItem	ListViewitem	NavigationWindow
RadioButton	RepeatButton	ScrollViewer	StatusBarItem
ToggleButton	ToolTip	UserControl	Window

2.ItemsControl 族

特點

• 派生自 ItemsControl 類
• 都是控件，用于顯示清單話資料
• 内容屬性為 item 或 itemSource
• 每種 ItemsControl 都有對應有自己的條目容器 （Item Container）

清單

Menu	MeunBase	ContextMenu	ComBox
ItemControl	ListBox	ListView	TabControl
TreeView	Selector	StatusBar

ItemsControl 對應的 Item Contaimer

**ItemsControl	Item Contaimer**
Menu	MenuItem
Combox	ComboxItem
ContextMenu	MenuItem
ListBox	ListBoxItem
ListView	ListViewItem
TabControl	TabItem
TreeView	TreeViewItem
StatusBar	StatusBarItem

3.HeaderedItemsControl 族

特點

• 派生自 HeaderedItemsControl 類
• 都是控件，顯示清單化的資料，同時可以顯示一個标題
• 内容屬性為 Items，ItemsSource，Header

清單

MenuItem	TreeViewItem	ToolBar

4.Decorator族

特點

• 派生自 Decorator類
• UI 裝飾作用
• 内容屬性為 child
• 隻能有單一進制素充當内容

清單

ButtonChrome	ClassicBooderDecorator	ListBoxChrome	SystemDropShadowDecorator
Border	InkPresenter	BulletDecorator	ViewBox
AdornerDecorator

5.Shape族

特點

• 派生自 Shape類
• 2d圖形繪制
• 無内容屬性
• Fill 填充，Strock 設定邊線

6.Panel族

特點

• 派生自 Panel類
• 布局
• 内容屬性Children
• 可以是多個元素，Panel 控制他們布局

Canvas	DockPanel	Grid	StackPanel
WrapPanel	TapPanel	ToolBarOverflowPanel	ToolBarPanel
UniformGrid	VirtualizingPanel	VirtualizingStackPanel

布局 （Layout）

在 winform 中，控件之間的關系為相鄰和疊壓

在 WPF 中控件之間多了 包含的關系，這種 包含 的關系形成樹形結構，稱為可視化樹 (Vistual Tree)

在上述控件族中有部分控件隻接受一個元素作為自己的内容，此時就可以使用布局作為其單一控件，在布局中添加多個控件元素

布局元素清單

名稱	說明
Grid	網格，自定義網格數量，寬高
StackPanel	棧式面闆，将包含的元素在水準或垂直方向排成一條線，删除元素，後面的元素會自動往前填充
canvas	畫布，内部元素可以使用絕對坐标定位
DockPanel	泊靠式面闆，内部元素可以向某一方向貼靠
WrapPanel	自動折行面闆，内部元素排滿一行自動換行

詳解

1.Grid

特點

• 定義任意數量的行列，并設定寬高，寬高可以使用絕對數值，比例（數值+ *），自動
• 内部元素可以設定行列，跨行，跨列
• 設定内部元素 Children 的對齊方式

适用場合

• 大架構，後期變動大的地方
• 成行成列對其
• UI 改變時，原有元素需要抱持固有尺寸

2.StackPanel

特點

• 在行或者列的方向上成棧式排列，一個跟一個
• 删除一個元素時，後面的元素會向前補齊（可以定義補齊的動畫）

3.Canvas

特點

• 小型布局，一旦确定，不會在更改
• 藝術性比較強的
• 需要使用大量橫縱坐标的布局或動畫

4.DockPanel

特點

• 泊靠式，為子元素指定停靠的方向，子元素就會像船一樣像某一個方向靠攏

5.WrapPanel

特點

• 流式布局，指定一個延伸的方向，内部元素會沿着這個方向排列（類似StackPanel）,排滿時會另起一行

小結：

在更改

• 藝術性比較強的
• 需要使用大量橫縱坐标的布局或動畫

4.DockPanel

特點

• 泊靠式，為子元素指定停靠的方向，子元素就會像船一樣像某一個方向靠攏

5.WrapPanel

特點

• 流式布局，指定一個延伸的方向，内部元素會沿着這個方向排列（類似StackPanel）,排滿時會另起一行

小結：

以上就是整個 WPF 的UI架構，wpf 後面所有的操作都在這一套架構之下進行，日常中 Grid 和 StackPanel 使用較多