今天我來(lái)給大家講解在學(xué)習(xí)WPF過(guò)程中使用布局控件的一些心得，主要給大家介紹一下一個(gè)控件的用法。希望對(duì)大家學(xué)習(xí)Wpf有所幫助.

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

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

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

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

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

6.???????Canvas畫(huà)布

?

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

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

通過(guò)設(shè)置Orientation屬性為Horizontal, Vertical

可以使stackpanel內(nèi)部的元素水平或垂直排列，關(guān)于這點(diǎn)用戶可以自己試驗(yà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>

.

?

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

當(dāng)StackPanel屬性為Orientation="Horizontal",可以設(shè)置內(nèi)部控件的VerticalAlignment來(lái)設(shè)置其對(duì)齊方式

當(dāng)StackPanel屬性為Orientation=" Vertical ",可以設(shè)置內(nèi)部控件的HorizontalAlignment來(lái)設(shè)置其對(duì)齊方式

效果圖

?

?

代碼

<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)部沒(mé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面板主要用來(lái)拉伸其內(nèi)部控件并使控件停靠在內(nèi)部的某個(gè)位置，主要用來(lái)做整體布局設(shè)計(jì)使用。

Dockpanel提供了四個(gè)屬性，用來(lái)設(shè)置其內(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"，則最后一個(gè)子元素不會(huì)占滿剩余空間,默認(rèn)情況下為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>

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

?

?

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

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

?

?

總結(jié)

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

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