今天我來給大家講解在學習WPF過程中使用布局控件的一些心得，主要給大家介紹一下一個控件的用法。希望對大家學習Wpf有所幫助.

1.???????StackPanel棧面板

2.???????WrapPanel環(huán)繞面板

3.???????DockPanel停靠面板

4.???????Grid網(wǎng)格

5.???????UniformGrid均布網(wǎng)格

6.???????Canvas畫布

?

1.???????StackPanel棧面板

棧面板是WPF中最簡單的面板，用來在小范圍內(nèi)布局效果非常好。將它包含的元素按一行或者一列進行排列.StackPanel內(nèi)的元素不會換行。如果stackPanel內(nèi)沒有足夠的空間，它內(nèi)部的元素超過了它所容納的范圍時，內(nèi)部元素將被截取。

通過設置Orientation屬性為Horizontal, Vertical

可以使stackpanel內(nèi)部的元素水平或垂直排列，關(guān)于這點用戶可以自己試驗

效果圖如下：

?

代碼

??<Window?x:Class="WpfPanel.MainWindow"

????????xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

????????xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

????????Title="MainWindow"?Height="367"?Width="505">

????<Grid>

????????<StackPanel??Margin="0"?Name="stackPanel1"?Orientation="Vertical">

????????????<Button?Content="Button"??Name="button1" />

????????????<Button?Content="Button"??Name="button2" />

????????????<Button?Content="Button"??Name="button3"??/>

????????????<Button?Content="Button"?Name="button4" />

????????????<Button?Content="Button"??Name="button5" />

????????</StackPanel>

????</Grid>

</Window>

.

?

通過設置stackpanel內(nèi)部控件的VerticalAlignment屬性，可以設置其內(nèi)部控件的排列方式。

當StackPanel屬性為Orientation="Horizontal",可以設置內(nèi)部控件的VerticalAlignment來設置其對齊方式

當StackPanel屬性為Orientation=" Vertical ",可以設置內(nèi)部控件的HorizontalAlignment來設置其對齊方式

效果圖

?

?

代碼

<Window?x:Class="WpfPanel.MainWindow"

????????xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

????????xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

????????Title="MainWindow"?Height="367"?Width="505">

????<Grid>

????????<StackPanel??Margin="0"?Name="stackPanel1"?Orientation="Horizontal">

????????????<Button?Content="Button1"??Name="button1"?VerticalAlignment="Top" />

????????????<Button?Content="Button2"??Name="button2"??VerticalAlignment="Bottom"/>

????????????<Button?Content="Button3"??Name="button3"?VerticalAlignment="Center"??/>

????????????<Button?Content="Button4"?Name="button4"?VerticalAlignment="Stretch" />

????????????<Button?Content="Button5"??Name="button5"?VerticalAlignment="Top" />

????????</StackPanel>

????</Grid>

</Window>

2.????????WrapPanel環(huán)繞面板

Wrappanel面板的使用和stackpanel面板一樣，但是如果wrappanel面板內(nèi)部沒有足夠的空間，其子元素超出了其內(nèi)部可容納的寬度，可以換行顯示.

效果圖:

?

代碼

<Window?x:Class="WpfPanel.wrappanelOne"

????????xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

????????xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

????????Title="wrappanelOne"?Height="300"?Width="300">

????<Grid>

????????<WrapPanel?Height="100"?HorizontalAlignment="Left"?Margin="30,82,0,0"?Name="wrapPanel1"?VerticalAlignment="Top">

????????????<Button?Content="Button"?Height="23"?Name="button1"?Width="75" />

????????????<Button?Content="Button"?Height="23"?Name="button2"?Width="75" />

????????????<Button?Content="Button"?Height="23"?Name="button3"?Width="75" />

????????????<Button?Content="Button"?Height="23"?Name="button4"?Width="75" />

????????</WrapPanel>

????</Grid>

</Window>

3.????????Dockpanel布局面板

Dockpanel面板主要用來拉伸其內(nèi)部控件并使控件停靠在內(nèi)部的某個位置，主要用來做整體布局設計使用。

Dockpanel提供了四個屬性，用來設置其內(nèi)部控件布局

Left:位于DOCKPANEL左側(cè)的子元素

Top:位于DOCKPANEL頂部的子元素

Right:位于DOCKPANEL右側(cè)的子元素

BUTTON：位于DOCKPANLE底部的子元素.

效果圖

?

代碼

<Window?x:Class="WpfPanel.dockpanelOne"

????????xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

????????xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

????????Title="dockpanelOne"?Height="300"?Width="300">

????<Grid>

????????<DockPanel??Name="dockPanel1">

????????????<Button?Content="頂￡¤部?"??Name="button1"?DockPanel.Dock="Top"/>

????????????<Button?Content="左á¨?側(cè)¨¤"?Name="button2"?DockPanel.Dock="Left"/>

????????????<Button?Content="右?¨°側(cè)¨¤"??Name="button3"??DockPanel.Dock="Right" />

????????????<Button?Content="底ì?á部?"?Height="23"?Name="button4"?DockPanel.Dock="Bottom" />

????????????<Button?Content="剩o?ê余?¨¤空?間?"??Name="button5"/>

????????</DockPanel>

????</Grid>

</Window>

?

如果將DOCKPANEL的LastChildFill="False"，則最后一個子元素不會占滿剩余空間,默認情況下為true

效果圖

?

代碼

?

<Window?x:Class="WpfPanel.dockpanelOne"

????????xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

????????xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

????????Title="dockpanelOne"?Height="300"?Width="300">

????<Grid>

????????<DockPanel??Name="dockPanel1"?LastChildFill="False">

????????????<Button?Content="頂￡¤部?"??Name="button1"?DockPanel.Dock="Top"/>

????????????<Button?Content="左á¨?側(cè)¨¤"?Name="button2"?DockPanel.Dock="Left"/>

????????????<Button?Content="右?¨°側(cè)¨¤"??Name="button3"??DockPanel.Dock="Right" />

????????????<Button?Content="底ì?á部?"?Height="23"?Name="button4"?DockPanel.Dock="Bottom" />

????????????<Button?Content="剩o?ê余?¨¤空?間?"??Name="button5"/>

????????</DockPanel>

????</Grid>

</Window>

當然，你可以設置其內(nèi)部的元素的HorizontalAlignment和VerticalAlignment屬性來具體設置其內(nèi)部排列方式,讀者可以自己試驗

?

?

demo下載：http://download.csdn.net/source/2474542

在下?一節(jié)中我們將為大家講解其他控件的用法

?

?

總結(jié)

以上是生活随笔為你收集整理的【转】wpf从我炫系列1----布局控件的使用（上）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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