WPF布局原則

不應顯式設置大小

為了布局的穩定性，控件的大小應該可以自動適應容器。如下為新建一個窗體，默認包含一個Grid容器，該控件沒有顯式設置寬高，所以，在改變窗體大小的時候，該容器的大小也隨著變化，但如果顯式的加了寬或高，在改變窗體大小后，該容器的大小受限并且位置不再穩定

?

?

使用相對坐標

容器的子元素應該以父級位置相對定位，而不是使用窗體的坐標

與子元素共享空間

如果空間允許，布局容器會根據每個元素的內容盡可能為元素設置更合理的尺寸。它們還會向一個或多個子元素分配多余的空間

支持嵌套布局

多種容器可相互嵌套使用，完成最優布局

StackPanel 控件

它是一個布局容器，在單行單列中放置子元素，叫做堆棧面板

在窗體中添加一個StackPanel容器，在工具箱中先擇StackPanel控件，將其拖動到窗體上，在這里，StackPanel容器被嵌套在了Grid容器中，也可以將Grid容器刪除，單獨使用StackPanel容器；StackPanel的默認XMAL標簽是個單標簽，如果需要在StackPanel中包含子級，需要將其設置為雙標簽格式

?

將StackPanel所有的屬性先刪除掉，然后添加一個標簽控件，三個按鈕控件，一個文本框控件，效果如下；可以看出，StackPanel默認會將子元素垂直排列

?

可以通過Orientation屬性來控制子元素排列方向

Orientation="Horizontal"?表示水平排列

Orientation="Vertical"?表示垂直排列，它是默認的

?

HorizontalAlignment屬性可以控制子元素水平方向的位置，控制元素是靠左還中靠右等

該屬性對應的值有Right/Left/Center/Stretch，該屬性只對于橫向伸展（垂直排列）的元素有效果

HorizontalAlignment="Right"表示將元素水平區于右，結果如下圖

?

VerticalAlignment屬性可以控制子元素垂直方向的位置

VerticalAlignment對應的值有Bottom/Center/Stretch/Top

VerticalAlignment="Top"會將橫向分布（垂直伸展）的元素區于上方，如下圖

?

因為子元素的排列方向發生了變化，這里看到，HorizontalAlignment="Right"已經不再起作用

Margin屬性為元素添加外邊距

Margin="10,15,20,25"的四個值分別表示左、上、右、下的位置，如下圖

?

如果Margin屬性只有一個值的話表示的是上下位置，如果只有兩個值的話，第一個值表示上下，第二個值表示的是左右

MinWidth屬性可以控制元素的最小尺寸，也就是說該元素不可以小于設定的最小寬度值

MaxWidth屬性可以控制元素的最大尺寸，也就是說該元素不可以大于設定的最大寬度值

Border控件

Border 是一個裝飾的控件，用此控件繪制一個邊框、一個背景.在 Border 中只能有一個子控件，但它的子控件是可以包含多個子控件的

示例與代碼如下

?

<Border><StackPanel Orientation="Vertical"><Label Content="Label"/><Button Content="Button" /><Button Content="Button" /><Button Content="Button" /><TextBox Height="23" TextWrapping="Wrap" Text="TextBox"/></StackPanel></Border>

從上例可以看出，Border中只包含了一個子元素StackPanel，而StackPanel中包含了多個子元素

BorderThickness屬性可以設置Border控件邊的寬度，而BorderBrush屬性可以設置邊的顏色，如下

?

<Border BorderThickness="16" BorderBrush="BlueViolet"><StackPanel Orientation="Vertical"><Label Content="Label"/><Button Content="Button" /><Button Content="Button" /><Button Content="Button" /><TextBox Height="23" TextWrapping="Wrap" Text="TextBox"/><Border BorderBrush="Black" BorderThickness="1" Height="100"/></StackPanel></Border>

Padding屬性可以為元素設置內填充，效果如下

?

<Border BorderThickness="16" BorderBrush="BlueViolet" Padding="30"><StackPanel Orientation="Vertical"><Label Content="Label"/><Button Content="Button" /><Button Content="Button" /><Button Content="Button" /><TextBox Height="23" TextWrapping="Wrap" Text="TextBox"/><Border BorderBrush="Black" BorderThickness="1" Height="100"/></StackPanel></Border>

CornerRadius屬性可以為Border控件設置邊度的弧度，如下圖

?

<Border BorderThickness="16" BorderBrush="BlueViolet" Padding="30" CornerRadius="45"><StackPanel Orientation="Vertical"><Label Content="Label"/><Button Content="Button" /> <Button Content="Button" /><Button Content="Button" /><TextBox Height="23" TextWrapping="Wrap" Text="TextBox"/><Border BorderBrush="Black" BorderThickness="1" Height="100"/></StackPanel></Border>

WrapPanel面板

WrapPanel容器將子元素按行或列一個接一個進行排列，如果一行或一列放不下，元素會被擠到下一行或一列；同一行元素的高度一樣，同一列元素的寬度是一樣的

示例如下：

?

<Window x:Class="WPF_Code.WarpPanel_wpf"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"Title="WarpPanel_wpf" Height="300" Width="300"><WrapPanel><Button Content="Button" /><Button Content="Button" /><!--這里只設置了一個button的高度，與它同一行的元素都變成了一樣的高度--><Button Content="Button" Height="30" /><Button Content="Button" /><Button Content="Button" /><Button Content="Button" /><Button Content="Button" /><Button Content="Button" /></WrapPanel> </Window>

?

<Window x:Class="WPF_Code.WarpPanel_wpf"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"Title="WarpPanel_wpf" Height="300" Width="300"><!--將WrapPanel元素排列方向改為垂直方向--><WrapPanel Orientation="Vertical"><!--在垂直方向上，如果改變一個元素的高度的話對其它元素沒有影響--><Button Content="Button" Height="164" /><Button Content="Button" /><!--在垂直方向上，如果改變一個元素的寬度則同列上的元素的寬度都會有變化--><Button Content="Button" Width="100" /><Button Content="Button" /><Button Content="Button" /><Button Content="Button" /><Button Content="Button" /><Button Content="Button" /></WrapPanel> </Window>

DockPanel面板

DockPanel支持讓元素簡單地停靠在整個面板的某一條邊上，然后拉伸元素以填滿全部寬度或高度。它也支持讓一個元素填充其他已停靠元素沒有占用的剩余空間

DockPanel有一個Dock附加屬性，因此子元素用4個值來控制她們的停靠：Left、Top、Right、Bottom。Dock 沒有Fill值。作為替代，最后的子元素將加入一個DockPanel并填滿所有剩余的空間，除非DockPanel的LastChildFill屬性為false，它將朝某個方向停靠

示例如下：

?

<Window x:Class="WPF_Code.WarpPanel_wpf"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"Title="WarpPanel_wpf" Height="300" Width="300"><DockPanel><Button Content="Button"/><Button Content="Button"/><Button Content="Button"/><Button Content="Button"/><Button Content="Button"/></DockPanel> </Window>

默認情況下，元素會依次橫向排列，并填充整個空間

?

<Window x:Class="WPF_Code.WarpPanel_wpf"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"Title="WarpPanel_wpf" Height="300" Width="300"><!--LastChildFill="True"允許最后一個元素填充整個空間，默認是Ture--><DockPanel LastChildFill="True"><!--DockPanel.Dock屬性可控制元素在DockPanle中依靠的位置--><Button Content="Button" DockPanel.Dock="Top" /><Button Content="Button" DockPanel.Dock="Bottom"/><Button Content="Button" DockPanel.Dock="Left"/><Button Content="Button" DockPanel.Dock="Right"/><Button Content="Button"/></DockPanel> </Window>

嵌套布局容器

一個簡單示例

?

<Window x:Class="WPF_Code.WarpPanel_wpf"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"Title="WarpPanel_wpf" Height="300" Width="300"><!--一個DockPanel容器，LastChildFill允許最后一個元素填充整個剩余空間--><DockPanel LastChildFill="True"><!--嵌套一個StackPanel容器，將子元素橫向排列，并領先到DockPanel的底部，然后居中--><StackPanel DockPanel.Dock="Bottom" HorizontalAlignment="Center" Orientation="Horizontal"><Button Name="btn1" Content="OK" Padding="10"/><Button Name="btn2" Content="No" Padding="10"/></StackPanel><!--DockPanel的最后一個元素，默認填充整個剩余空間--><TextBox DockPanel.Dock="Top">文本輸入……</TextBox></DockPanel> </Window>

注：可以通過文檔大綱欄來查看元素節點樹狀圖

?

編輯于 2018-09-13

Windows Presentation Foundation (WPF)

C# 編程

程序員

總結

以上是生活随笔為你收集整理的【转】WPF之路-常用布局控件一的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。