WPF布局

? ? ? ?WPF的窗口也就是Window類，是一個內(nèi)容控件，該控件派生自ContentControl。內(nèi)容控件有一個Content屬性，該屬性有一個限制，只能放置一個用戶界面元素，或一個字符串。為了在窗口上放置多個界面控件，通常在窗口上放置一個容器控件。

WFP布局原則

1、? 元素不應(yīng)該指定 確定的尺寸大小，同很慘更應(yīng)該使其大小自動適應(yīng)內(nèi)容。比如按鈕根據(jù)所添加的文本來擴(kuò)展其大小。可以通過設(shè)置maximun和minimun尺寸來限制控件可接受的尺寸大小。

2、? 元素不應(yīng)該使用屏幕坐標(biāo)來指定其位置，通常是基于其尺寸來進(jìn)行自動排列位置。

3、? 布局容器將在其子元素之間共享其可用控件。通常由容器嘗試為其每個子元素分配合適的尺寸。

4、? 布局容器允許嵌套。?

WP核心布局面板

?

面板名稱	說明
StackPanel	使用水平或垂直堆疊的方式放置元素，適用于一些小范圍布局。
WarpPanel	水平方向：從左到右排列子元素。當(dāng)寬度不夠時，則開啟一個新的行從左到右進(jìn)行排列。 垂直方向：從上到下排列子元素，當(dāng)高度不夠時，則開啟一個新的列從上到下進(jìn)行排列。
DockPanel	時子元素依賴于容器的特定邊緣，左、右、上、下邊緣等，該面板通常用于全局布局。
Grid	WPF最強(qiáng)最好用的布局控件。類似一個不可見的HTML表格，將子元素放在特定的行和列中。
UniformGrid	放置子元素在一個不可見的表中，但強(qiáng)制所有的單元格都具有相同的尺寸。使用頻率較低
Canvas	使用固定的坐標(biāo)來絕對定位子元素。與傳統(tǒng)winForm布局方式類似。但是沒有Anchoring和Docking特性。在處理圖形圖像的場合，使用這個布局非常有用，在動態(tài)用戶界面上，這個控件將事半功倍。

StackPanel?

1、? 新建StackPaneDemo窗體。

2、? 去掉Grid布局容器，然后添加StackPanel布局容器

3、? 添加5個button按鈕。然后運(yùn)行查看效果。?

<Window x:Class="WPFDemo.StackPanelDemo"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:local="clr-namespace:WPFDemo"mc:Ignorable="d"WindowStartupLocation="CenterScreen"Title="StackPanelDemo" Height="500" Width="800"><StackPanel><Button Name="button1" Content="按鈕1"/><Button Name="button2" Content="按鈕2"/><Button Name="button3" Content="按鈕3"/><Button Name="button4" Content="按鈕4"/><Button Name="button5" Content="按鈕5"/></StackPanel></Window>

?

默認(rèn)情況下，StackPanel從上到下排列控件，控件的高度與其內(nèi)容的高度相匹配，可以使用Orientation屬性設(shè)置為Horizontal使其從左到右進(jìn)行排列。

<StackPanel Orientation="Horizontal"><Button Name="button1" Content="按鈕1"/><Button Name="button2" Content="按鈕2"/><Button Name="button3" Content="按鈕3"/><Button Name="button4" Content="按鈕4"/><Button Name="button5" Content="按鈕5"/></StackPanel>

?

?

?當(dāng)設(shè)置Horizontal之后，按鈕將占滿StackPanel的高度，但寬度則為內(nèi)容的大小。StackPanel有兩個依賴屬性，可以使開發(fā)人員可以控制水平或垂直方向，控件如何占滿窗體可用寬度和高度。?

HorizontalAlignment枚舉屬性：獲取或設(shè)置在父元素中構(gòu)成此元素時應(yīng)用于此元素的水平對齊特征。

VerticalAlignment枚舉屬性：獲取或設(shè)置在父元素中構(gòu)成此元素時應(yīng)用于此元素的垂直對齊特征。

默認(rèn)情況下，這兩個屬性的Stretch，表示根據(jù)StackPanel的排列方向自動拉伸到相應(yīng)的寬度和高度。

?

當(dāng)StackPanel控件設(shè)為水平方向時，可以通過VerticalAlignment屬性來設(shè)置button控件的對齊方式。

<StackPanel Orientation="Horizontal"><Button Name="button1" Content="按鈕1" VerticalAlignment="Top"/><Button Name="button2" Content="按鈕2" VerticalAlignment="Center"/><Button Name="button3" Content="按鈕3" VerticalAlignment="Bottom"/><Button Name="button4" Content="按鈕4" VerticalAlignment="Stretch"/><Button Name="button5" Content="按鈕5" VerticalAlignment="Stretch"/></StackPanel>

?

?

同樣在Orientation為Vertical時，可以設(shè)置HorizontalAlignment屬性來指定對齊方式。

<StackPanel Orientation="Vertical"><Button Name="button1" Content="按鈕1" HorizontalAlignment="Left"/><Button Name="button2" Content="按鈕2" HorizontalAlignment="Center"/><Button Name="button3" Content="按鈕3" HorizontalAlignment="Right"/><Button Name="button4" Content="按鈕4" HorizontalAlignment="Stretch"/><Button Name="button5" Content="按鈕5" HorizontalAlignment="Stretch"/></StackPanel>

?

?

其他布局屬性

屬性名稱	屬性說明
Margin	可以在子元素的四周添加空白，同CSS中的Margin使用方法一致，Margin是System.Windows.thickness結(jié)構(gòu)的屬性。
MinWidth和MinHeight	設(shè)置元素的最小尺寸，如果元素大于容器會被裁剪。
MaxWidth和MaxHeight	設(shè)置元素的最大尺寸，如果元素大于容器會被裁剪。
Width和Height	設(shè)置固定的元素大小。這個屬性將會覆蓋HorizontalAlignment和VerticalAlignment屬性。

?

Margin屬性

Margin屬性可以指定一個值設(shè)置四條邊的值一樣，可以設(shè)置兩個值設(shè)置上下、左右的值一樣，可以設(shè)置四個值分別指定左上右下的值。

<StackPanel Orientation="Horizontal"><Button Name="button1" Content="按鈕1" Margin="5,10" /><Button Name="button2" Content="按鈕2" /><Button Name="button3" Content="按鈕3" Margin="5,10,15,20" /><Button Name="button4" Content="按鈕4" /><Button Name="button5" Content="按鈕5" Margin="5" /></StackPanel>

?

?

最大化、最小化和明確的尺寸屬性

?如果希望按鈕可以自動地根據(jù)內(nèi)容進(jìn)行縮放，但是不能小于100個單位，不能大于200個單位。可以使用MaxWidth和MinWidth屬性進(jìn)行設(shè)置。

<StackPanel Orientation="Horizontal"><Button Name="button1" Content="按鈕1" MaxWidth="200" MinWidth="100" Margin="5,10" /><Button Name="button2" Content="按鈕2" MaxWidth="200" MinWidth="100" /><Button Name="button3" Content="按鈕3" MaxWidth="200" MinWidth="100" Margin="5,10,15,20" /><Button Name="button4" Content="按鈕4" MaxWidth="200" MinWidth="100" /><Button Name="button5" Content="按鈕5" MaxWidth="200" MinWidth="100" Margin="5" /></StackPanel>

?

設(shè)置最大和最小尺寸效果

?

?

容器尺寸小于控件尺寸裁剪

??

如果想在Window中獲取元素的實(shí)際大小，不能直接使用Width和Height屬性，它們代表的不是實(shí)際尺寸大小而是希望的尺寸大小。開發(fā)人員可以訪問元素的ActualWidth和ActualHeigth屬性來獲取當(dāng)前窗口中元素的實(shí)際尺寸，這個兩個尺寸會隨著窗口大小的調(diào)整而變化。

?WrapPanel?

? ? ? ?與StackPanel控件類似，WrapPanel也有一個Orientation屬性，默認(rèn)為Horizontal，控件從左到右進(jìn)行排列。如果寬度不夠時將會換一個新行。WrapPanel通常用于一些小范圍的布局場合。而不是整體窗口的總體布局。

<WrapPanel><Button Name="button1" Content="按鈕1" VerticalAlignment="Top" /><Button Name="button2" Content="按鈕2" MinHeight="100" /><Button Name="button3" Content="按鈕3" VerticalAlignment="Bottom"/><Button Name="button4" Content="按鈕4" /><Button Name="button5" Content="按鈕5" VerticalAlignment="Center" /></WrapPanel>

?

默認(rèn)樣式

?

?

?縮小窗體，自動換行?

?

?DockPanel

???????? 用于拉伸控件，以停靠在指定的窗口邊緣，DockPanel中的控件將被拉伸以適應(yīng)容器的邊緣。

???????? DockPanel控件的附加屬性Dock。這是一個枚舉類型屬性：可選值如下：

???????? Left：位于DockPanel左側(cè)的子元素

???????? Top：位于DockPanel頂部的資源

???????? Right：位于DockPanel右側(cè)的子元素

???????? Bottom：位于DockPanel底部的子元素

<DockPanel><Button Name="button1" Content="頂部" DockPanel.Dock="Top"/><Button Name="button2" Content="下側(cè)" DockPanel.Dock="Bottom"/><Button Name="button3" Content="左側(cè)" DockPanel.Dock="Left" /><Button Name="button4" Content="右側(cè)" DockPanel.Dock="Right"/><Button Name="button5" Content="剩余空間" /></DockPanel>

　

?上面代碼中分別設(shè)置了四個方向，最后一個方向沒有設(shè)置則自動占滿了剩余空間，這是因?yàn)镈ockPanel控件指定了LastChildFill屬性。默認(rèn)情況下這個屬性為True。如果將LastChildFille設(shè)置為True無論最后一個元素停靠屬性設(shè)置為何值，此元素也是自動填充剩余空間。

<DockPanel><Button Name="button1" Content="頂部" DockPanel.Dock="Top"/><Button Name="button2" Content="下側(cè)" DockPanel.Dock="Bottom"/><Button Name="button3" Content="左側(cè)" DockPanel.Dock="Left" /><Button Name="button4" Content="右側(cè)" DockPanel.Dock="Right"/><Button Name="button5" Content="剩余空間" DockPanel.Dock="Top" /></DockPanel>

　

下面示例中將LastChildFill屬性設(shè)置為False，然后將最后一個元素的Dock屬性設(shè)置為top。

<DockPanel LastChildFill="False"><Button Name="button1" Content="頂部" DockPanel.Dock="Top"/><Button Name="button2" Content="下側(cè)" DockPanel.Dock="Bottom"/><Button Name="button3" Content="左側(cè)" DockPanel.Dock="Left" /><Button Name="button4" Content="右側(cè)" DockPanel.Dock="Right"/><Button Name="button5" Content="剩余空間" DockPanel.Dock="Top" /></DockPanel>

?

在上面示例中上下兩側(cè)都是占滿了窗體的全部寬度，如果想使左右兩側(cè)占滿全部高度，只需要改變子元素的順序即可。

<DockPanel LastChildFill="False"><Button Name="button3" Content="左側(cè)" DockPanel.Dock="Left" /><Button Name="button4" Content="右側(cè)" DockPanel.Dock="Right"/><Button Name="button1" Content="頂部" DockPanel.Dock="Top"/><Button Name="button2" Content="下側(cè)" DockPanel.Dock="Bottom"/><Button Name="button5" Content="剩余空間" DockPanel.Dock="Top" /></DockPanel>

　　

開發(fā)人員也可以使用HorizontaAlignment和VerticalAlignment屬性來控制子元素的顯示方式。

<DockPanel LastChildFill="False"><Button Name="button1" Content="頂部" DockPanel.Dock="Top"/><Button Name="button6" Content="頂部-居中" HorizontalAlignment="Center" DockPanel.Dock="Top"/><Button Name="button7" Content="頂部-右側(cè)" HorizontalAlignment="Right" DockPanel.Dock="Top"/><Button Name="button2" Content="下側(cè)" DockPanel.Dock="Bottom"/><Button Name="button3" Content="左側(cè)" DockPanel.Dock="Left" /><Button Name="button4" Content="右側(cè)" DockPanel.Dock="Right"/><Button Name="button5" Content="剩余空間" DockPanel.Dock="Top" /></DockPanel>

　

?

使用StackPanel、WarpPanel和DockPanel來實(shí)現(xiàn)一個簡單的對話框窗口。

<DockPanel LastChildFill="True" ><StackPanel Orientation="Horizontal" DockPanel.Dock="Bottom" HorizontalAlignment="Right"><Button Name="btn1" Margin="5" Content="確定"/><Button Name="btn2" Margin="5" Content="取消"/></StackPanel><TextBlock Margin="10" Text="簡單對話框示例"></TextBlock></DockPanel>

?

?

?

Grid

Grid就是表格布局，使用Grid可以設(shè)置行列，添加子元素需要指定所屬的行列，多個子元素可以放在同一個單元格中。

<!---定義一個3行3列的表格-->
<Grid ShowGridLines="True"><!--定義3行--><Grid.RowDefinitions><RowDefinition /><RowDefinition /><RowDefinition /></Grid.RowDefinitions><!--定義3列--><Grid.ColumnDefinitions><ColumnDefinition /><ColumnDefinition /><ColumnDefinition /></Grid.ColumnDefinitions></Grid>

?

?

默認(rèn)情況下所有的單元格大小是均分的，可以通過ColumnDefinition的Widht屬性來指定每一列的寬，通過RowDefinition的Height屬性來指定每一列的高。

Grid控件尺寸設(shè)置和其他控件的尺寸設(shè)置不一樣，Grid尺寸設(shè)置主要支持下面三種：

1、? 絕對尺寸：指定精確的單位大小。例如定義100個單位高度<RowDefinition Height=”100” />? 一般情況下絕對尺寸在Grid中使用較少，因?yàn)橹付ㄖ蟊悴荒芨鶕?jù)內(nèi)容大小自動伸縮。

2、? 自動內(nèi)容尺寸：Grid尺寸的變化將給予行或列的子元素內(nèi)容而定。在Xaml中通常使用Auto來指定。<RowDefinition Height=”Auto”/>

3、? 按比例分配剩余空間：這是默認(rèn)設(shè)置，通常使用 * ，1*，2* 等樣式來指定的。按比例分配空間是指，當(dāng)使用精確尺寸或自動內(nèi)容尺寸分配之后，所剩的空間如何進(jìn)行分配。?

這是一個相對單位，默認(rèn)情況下只有一個*。當(dāng)有兩個列都設(shè)置為*時，表示將其空間按比例各一半進(jìn)行分配。如果一列指定為2*。則平均分為3份，*占3分之一；2*占3分之二。

??

使用不同尺寸定義方法定義Grid行高

<!---定義一個3行3列的表格--><Grid ShowGridLines="True"><!--定義3行--><Grid.RowDefinitions><RowDefinition Height="Auto" /><RowDefinition Height="*"/><RowDefinition Height="2*"/></Grid.RowDefinitions><!--定義3列--><Grid.ColumnDefinitions><ColumnDefinition /><ColumnDefinition /><ColumnDefinition /></Grid.ColumnDefinitions><Button Content="button1" Grid.Row="0" Grid.Column="0"/><Button Content="button2" Grid.Row="1" Grid.Column="1"/><Button Content="button3" Grid.Row="2" Grid.Column="2"/></Grid>

　　

?

合并行列

???????合并單元格與HTML中table的合并單元格一樣，使用RowSpan合并行ColumnSpan合并列。

<!---定義一個3行3列的表格--><Grid ShowGridLines="True"><!--定義3行--><Grid.RowDefinitions><RowDefinition Height="Auto" /><RowDefinition Height="*"/><RowDefinition Height="2*"/></Grid.RowDefinitions><!--定義3列--><Grid.ColumnDefinitions><ColumnDefinition /><ColumnDefinition /><ColumnDefinition /></Grid.ColumnDefinitions><Button Content="button1" Grid.RowSpan="3" Grid.Row="0" Grid.Column="0"/><Button Content="button2" Grid.ColumnSpan="2" Grid.Row="1" Grid.Column="1"/><Button Content="button3" Grid.Row="2" Grid.Column="2"/></Grid>

　　

窗體分割

? ? ? ? 在Grid中，通過使用GridSplitter控件為布局添加一個窗體分隔條，使布局可以由用戶來調(diào)整其大小。GridSplitter必須放置在Grid控件中，在使用GridSplitter之前需要理解下面幾點(diǎn)：

1、? GridSplitter控件必須放置在一個Grid中，可以與已經(jīng)存在的內(nèi)容放在一起。為了放置覆蓋已存在的內(nèi)容，需要調(diào)整其Margin屬性。

2、? GridSplitter控件總是調(diào)整整個行或列的尺寸，而不是特定單元格的尺寸。

3、? GridSplitter的對齊屬性，比如HorizontalAlignment或VerticalAlignment屬性決定了分隔條可以拖動的方向。當(dāng)設(shè)置HorizontalAlignment為Left時，則只能向左拖動分隔條，設(shè)置為Center則可以左右同時拖動。

窗體分割應(yīng)用Demo

<!---定義一個3行3列的表格--><Grid ShowGridLines="True"><!--定義3行--><Grid.RowDefinitions><RowDefinition Height="Auto" /><RowDefinition Height="Auto"/><RowDefinition Height="*"/><RowDefinition Height="2*"/></Grid.RowDefinitions><!--定義3列--><Grid.ColumnDefinitions><ColumnDefinition /><ColumnDefinition Width="Auto"/><ColumnDefinition /><ColumnDefinition /></Grid.ColumnDefinitions><!--垂直Splitter--><GridSplitter Grid.Row="0" Grid.Column="1" Width="10" HorizontalAlignment="Center" Background="Blue" Grid.RowSpan="4"></GridSplitter><!---水平Splitter--><GridSplitter Grid.Row="1" Grid.Column="0" Height="10" HorizontalAlignment="Stretch" Background="Red" Grid.ColumnSpan="4"></GridSplitter><Button Content="button1" Grid.Row="0" Grid.Column="0"/><Button Content="button2" Grid.Row="2" Grid.Column="2"/><Button Content="button3" Grid.Row="3" Grid.Column="3"/></Grid>

　　

?

UniformGrid

?　　UniformGrid控件是一個簡化版的Grid控件，使用該控件不需要定義行列。只需要指定Rows和Columns屬性即可，該控件會將所有的行列使用相同的尺寸。在添加子元素時不需要指定所在的行列，所有的子元素都是按從左到右的順序進(jìn)行排列的。

<UniformGrid Rows="2" Columns="4"><Button Content="按鈕1" Background="Black" ></Button><Button Content="按鈕2" Background="Red"></Button><Button Content="按鈕3" Background="AntiqueWhite"></Button><Button Content="按鈕4" Background="Aqua"></Button><Button Content="按鈕5" Background="Aquamarine"></Button><Button Content="按鈕6" Background="Azure"></Button><Button Content="按鈕7" Background="Beige"></Button></UniformGrid>

　　

?

?

如果想讓子元素進(jìn)行從右到左進(jìn)行排列時只需要指定FlowDirection屬性為RightToLeft即可。

<UniformGrid Rows="2" Columns="4" FlowDirection="RightToLeft"><Button Content="按鈕1" Background="Black" ></Button><Button Content="按鈕2" Background="Red"></Button><Button Content="按鈕3" Background="AntiqueWhite"></Button><Button Content="按鈕4" Background="Aqua"></Button><Button Content="按鈕5" Background="Aquamarine"></Button><Button Content="按鈕6" Background="Azure"></Button><Button Content="按鈕7" Background="Beige"></Button></UniformGrid>

　　

?

轉(zhuǎn)載于:https://www.cnblogs.com/zhaochengshen/p/7482502.html

總結(jié)

以上是生活随笔為你收集整理的WPF 10天修炼 第四天- WPF布局容器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。