WPF常用佈局介紹
概述：本文簡要介紹了WPF中佈局常用控制元件及佈局相關的屬性
1 Canvas
Canvas是一個類似於座標系的面板，所有的元素通過設定座標來決定其在座標系中的位置.。具體表現為使用Left、Top、Right、 Bottom附加屬性在Canvas中定位控制元件。
示例：
<Canvas>
<Button Canvas.Left="50" Canvas.Top="50" Content="Left=50 Top=50"/>
<Button Canvas.Left="50" Canvas.Bottom="50" Content="Left=50 Bottom=50"/>
<Button Canvas.Right="50" Canvas.Top="50" Content="Right=50 Top=50"/>
<Button Canvas.Right="50" Canvas.Bottom="50" Content="Right=50 Bottom=50"/>
</Canvas>
顯示：
注意：如果同時設定 Canvas.Left="50"Canvas.Right="50"，則以Canvas.Left="50"為準
如果同時設定Canvas.Top="50" Canvas.Bottom="50"，則以Canvas.Top ="50"為準
2 StackPanel
StackPanel將控制元件按照行或列來順序排列，但不會換行。通過設定面板的Orientation屬性設定了兩種排列方式：橫排（Horizontal預設的）和豎排（Vertical），預設為豎排（Vertical）。
示例：
<StackPanel>
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
</StackPanel>
顯示：
示例：
<StackPanel Orientation="Horizontal">
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
</StackPanel>
顯示：
注意：Orientation="Horizontal"時，設定FlowDirection屬性為RightToLeft，，則元素將從右向左排列。
3 DockPanel
DockPanel支援讓元素簡單地停靠在整個面板的某一條邊上，然後拉伸元素以填滿全部寬度或高度。它也支援讓一個元素填充其他已停靠元素沒有佔用的剩餘空間。
DockPanel有一個Dock附加屬性，因此子元素用4個值來控制她們的停靠：Left、Top、Right、Bottom。Dock沒有Fill值。作為替代，最後的子元素將加入一個DockPanel並填滿所有剩餘的空間，除非DockPanel的LastChildFill屬性為false，它將朝某個方向停靠。
示例：
<DockPanel>
<Button Content="Button左" DockPanel.Dock="Left"/>
<Button Content="Button右" DockPanel.Dock="Right"/>
<Button Content="Button上" DockPanel.Dock="Top"/>
<Button Content="Button下" DockPanel.Dock="Bottom"/>
</DockPanel>
顯示：
設定LastChildFill屬性為false
示例：
<DockPanel LastChildFill="False">
<Button Content="Button左" DockPanel.Dock="Left"/>
<Button Content="Button右" DockPanel.Dock="Right"/>
<Button Content="Button上" DockPanel.Dock="Top"/>
<Button Content="Button下" DockPanel.Dock="Bottom"/>
</DockPanel>
顯示：
4 WrapPanel
WrapPanel佈局面板將各個控制元件按照一定方向羅列，當長度或高度不夠時自動調整進行換行換列。
Orientation="Horizontal"時各控制元件從左至右羅列，當面板長度不夠時，子控制元件就會自動換行，繼續按照從左至右的順序排列。
Orientation=" Vertical"時各控制元件從上至下羅列，當面板高度不夠時，子控制元件就會自動換列，繼續按照從上至下的順序排列。
示例：
<WrapPanel Orientation="Horizontal">
<Button Content="Burron" Width="150"/>
<Button Content="Burron" Width="200"/>
<Button Content="Burron" Width="150"/>
<Button Content="Burron" Width="200"/>
<Button Content="Burron" Width="150"/>
<Button Content="Burron" Width="200"/>
<Button Content="Burron" Width="150"/>
</WrapPanel>
顯示：
執行程式，拖動窗體邊緣改變窗體寬度，發現佈局會變成如下所示：
注意WrapPanel的兩個屬性：
ItemHeight——所有子元素都一致的高度，任何比ItemHeight高的元素都將被截斷。
ItemWidth——所有子元素都一致的寬度，任何比ItemWidth高的元素都將被截斷。
示例：
<WrapPanel Orientation="Horizontal" ItemWidth="120">
<Button Content="Burron" Width="150"/>
<Button Content="Burron" Width="200"/>
<Button Content="Burron" Width="150"/>
<Button Content="Burron" Width="200"/>
<Button Content="Burron" Width="150"/>
<Button Content="Burron" Width="200"/>
<Button Content="Burron" Width="150"/>
</WrapPanel>
顯示：
5 Grid
Grid允許我們通過自定義行列來進行佈局,這類似於表格.通過定義Grid的RowDifinitions和ColumnDifinitions來實現對於表格行和列的定義，元素根據附加屬性Grid.Row和Grid.Column確定自己的位置.
1）Grid的列寬與行高可採用固定、自動、按比列三種方式定義
第一種，固定長度——值為一個確定的數字
第二種，自動長度——值為Auto，實際作用就是取實際控制元件所需的最小值
第三種，比例長度—— *表示佔用剩餘的全部寬度；兩行都是*，將平分剩餘寬度；一個2*，一個*，則前者佔剩餘全部寬度的2/3，後者佔1/3；依此類推
示例：
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button Grid.Row="0" Content="Button"/>
<Button Grid.Row="1" Content="Button"/>
<Button Grid.Row="2" Content="Button"/>
<Button Grid.Row="3" Content="Button"/>
</Grid>
顯示：
注：可以放大窗體 觀察Grid每行高度是否變化
2） 合併行或列
示例：
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button Grid.Row="0" Content="Button"/>
<Button Grid.Row="1" Content="Button"/>
<Button Grid.Row="2" Grid.RowSpan="2" Content="Button"/>
</Grid>
顯示：
3）GridSplitter重新分佈Grid控制元件的列間距或行間距。（類似於WinForm中SplitContainer）
示例：
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="3"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button Grid.Row="0" Content="Button"/>
<GridSplitter Grid.Row="1" HorizontalAlignment="Stretch"/>
<Button Grid.Row="2" Content="Button"/>
</Grid>
顯示：
拖拽後 顯示：
6 UniformGrid
UniformGrid 就是Grid的簡化版，每個單元格的大小相同，不需要定義行列集合。每個單元格始終具有相同的大小，每個單元格只能容納一個控制元件。
若不設定Rows Colums，則按照定義在其內部的元素個數，自動建立行列，並通常保持相同的行列數。若只設置Rows則固定行數，自動擴充套件列數。若只設置Colums則固定列數，自動擴充套件行數。
UniformGrid 中沒有Row和Column附加屬性，也沒有空白單元格。
示例：
<UniformGrid>
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
</UniformGrid>
顯示：
示例：
<UniformGrid Rows="2">
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
</UniformGrid>
顯示：
7 ScrollViewer
ScrollViewer是帶有滾動條的面板。在ScrollViewer中只能有一個子控制元件，若要顯示多個子控制元件，需要將一個附加的 Panel控制元件放置在父 ScrollViewer中。然後可以將子控制元件放置在該控制元件中。
HorizontalScrollBarVisibility水平滾動條是否顯示預設為Hidden
VerticalScrollBarVisibility垂直滾動條是否顯示 預設為Visible。
一般我們都會設定 HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto"
意思是：當內容超出可視範圍時，才顯示橫向/縱向滾動條
示例：
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<Button Content="Button" Width="800" Height="800"/>
</ScrollViewer>
顯示：
8 Viewbox
Viewbox的作用是拉伸或延展位於其中的元件，以填滿可用空間。在Viewbox中只能有一個子控制元件，若要顯示多個子控制元件，需要將一個附加的 Panel控制元件放置在父 Viewbox中。然後可以將子控制元件放置在該控制元件中。
常用屬性：
Stretch：獲取或設定拉伸模式以決定該元件中的內容以怎樣的形式填充該元件的已有空間。具體設定值如下：
屬性值
說明
None
不進行拉伸，按子元素設定的長寬顯示。
Uniform
按原比例縮放子元素，使得一邊不足，另一邊恰好填充
Fill
縮放子元素，使得子元素的長變為Viewbox的長，寬變為Viewbox的寬
UniformToFill
按原比例縮放子元素，使得子元素一邊恰好填充，另一邊超出Viewbox的區域
Stretch預設值為Uniform。
示例：
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Viewbox Grid.Row="0" Grid.Column="0" Stretch="None">
<Button Width="100" Height="50" Content="None"/>
</Viewbox>
<Viewbox Grid.Row="0" Grid.Column="1" Stretch="Uniform">
<Button Width="100" Height="50" Content="Uniform"/>
</Viewbox>
<Viewbox Grid.Row="1" Grid.Column="0" Stretch="Fill">
<Button Width="100" Height="50" Content="Fill"/>
</Viewbox>
<Viewbox Grid.Row="1" Grid.Column="1" Stretch="UniformToFill">
<Button Width="100" Height="50" Content="UniformToFill"/>
</Viewbox>
</Grid>
顯示：
StretchDirection：獲取或設定該元件的拉伸方向以決定該元件中的內容將以何種形式被延展。具體的設定值如下。
屬性值
說明
UpOnly
僅當內容小於父項時，它才會放大。 如果內容大於父項，不會執行任何縮小操作。（子元素要麼放大，要麼不變，不會因為遷就父項而縮小）
DownOnly
僅當內容大於父項時，它才會縮小。 如果內容小於父項，不會執行任何放大操作。（子元素要麼縮小，要麼不變，不會因為遷就父項而放大）
Both
內容根據 Stretch屬性進行拉伸以適合父項的大小。
StretchDirection預設值為Both。
9 Border
Border 是一個裝飾的控制元件，此控制元件用於繪製邊框及背景，在 Border中只能有一個子控制元件，若要顯示多個子控制元件，需要將一個附加的 Panel控制元件放置在父 Border中。然後可以將子控制元件放置在該 Panel控制元件中。
常用屬性：
Background: 背景色 ；
BorderBrush: 邊框色 ；
BorderThickness: 邊框寬度；
CornerRadius: 各個角 圓的半徑；
示例：
<Border Background="YellowGreen" BorderBrush="Black" BorderThickness="0,2,4,6" CornerRadius="0,10,20,30"/>
顯示：
10 基本屬性:Alignment, Margin 和 Padding
在設計UI時，WPF為我們提供了一些屬性用於精確定位元素，其中最常用的有三個：Alignment(包括水平，垂直)，Margin，Padding，具體用法如下：
名稱
說明
HorizontalAlignment
子元素在水平方向的對齊方式，有左對齊，右對齊，中間對齊，拉伸填充等四種方式。
VerticalAlignment
子元素在垂直方向的對齊方式，有頂端對齊，底部對齊，中間對齊，拉伸填充等四種方式。
Margin
用於指定元素與其父級或同級之間的距離，包括上下左右四個值。也可通過使用 Margin="20"同時指定四個值。
Padding
用於指定元素與其子級之間的距離，包括上下左右四個值。也可通過使用 Padding="20"同時指定四個值。
示例：
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Button Grid.Row="0" Content="Center" HorizontalAlignment="Center"/>
<Button Grid.Row="1" Content="Left" HorizontalAlignment="Left"/>
<Button Grid.Row="2" Content="Right" HorizontalAlignment="Right"/>
<Button Grid.Row="3" Content="Stretch" HorizontalAlignment="Stretch"/>
</Grid>
顯示：
示例：
<Border Background="YellowGreen">
<Button Margin="0,50,100,150"/>
</Border>
顯示：
示例：
<Border Background="YellowGreen" Padding="0,50,100,150" >
<Button/>
</Border>
顯示：
---------------------
作者：孫家樂
來源：CSDN
原文：https://blog.csdn.net/woshisunjiale/article/details/54136323
版權宣告：本文為博主原創文章，轉載請附上博文連結！