WPF布局介紹(1)

開局一張圖,內容全靠...,本系列的文章, 主要針對剛入門、亦或是從 winform/bs轉過來的開發人員快速入門的指南, 相對於其它一些文章中會詳細的從項目如何建立到其實現的原理及組成部分, 本系列的文章則旨在如果快速的構建: 從布局、樣式、觸發器、綁定、顯示、MVVM架構一系列的階段學習,構建一個基礎的呈現以達到學習的目的。

WPF相關資料合集 (含書籍、框架、及開源UI組件等)

• WPF編程寶典.pdf
• 深入淺出WPF.pdf
• MaterialDesignInXamlToolkit
• MVVM Light Toolkit
• Prism-Samples-Wpf

---

WPF布局基礎

• WPF布局原則

  • 一個窗口中只能包含一個元素
  • 不應顯示設置元素尺寸
  • 不應使用坐標設置元素的位置
  • 可以嵌套布局容器

• WPF布局容器

  • StackPanel: 水平或垂直排列元素、Orientation屬性分別: Horizontal / Vertical
  • WrapPanel : 水平或垂直排列元素、針對剩余空間不足會進行換行或換列進行排列
  • DockPanel : 根據容器的邊界、元素進行Dock.Top、Left、Right、Bottom設置
  • Grid : 類似table表格、可靈活設置行列並放置控件元素、比較常用
  • Canvas : 使用固定的坐標設置元素的位置、不具備錨定停靠等功能。

布局容器詳解

• StackPanel

  StackPanel主要用於垂直或水平排列元素、在容器的可用尺寸內放置有限個元素，元素的
  尺寸總和(長/高)不允許超過StackPanel的尺寸, 否則超出的部分不可見。
  

• WrapPanel

  WrapPanel默認排列方向與StackPanel相反、WrapPanel的Orientation默認為Horizontal。
  WrapPanel具備StackPanel的功能基礎上具備在尺寸變更后自動適應容器的寬高進行換行換列處理。
  

• DockPanel

  默認DockPanel中的元素具備DockPanel.Dock屬性, 該屬性為枚舉具備: Top、Left、Right、Bottom。
  默認情況下, DockPanel中的元素不添加DockPanel.Dock屬性, 則系統則會默認添加 Left。
  DockPanel有一個LastChildFill屬性, 該屬性默認為true, 該屬性作用為, 當容器中的最后一個元素時, 默認該元素填充DockPanel所有空間。
  

• Grid

  學過web的老弟應該知道table表格, 而Grid與其類似, Grid具備分割空間的能力。
  RowDefinitions / ColumnDefinitions 用於給Grid分配行與列。
  ColumnSpan / RowSpan 則用於設置空間元素的 跨列與闊行。
  

• Canvas

  該容器就相當於一個 "地圖", 包含內的所有控件元素, 則都通過使用XY來定位, 由於不太常用, 所以簡單掠過。