1.1.????????? Canvas

在Canvas 布局中，控件使用Canvas.Top和Canvas.Left來定位內(nèi)容:

?

View Code 1 <Canvas x:Name="LayoutRoot" Background="White">
2 <Button Name="SampleButton"
3 Content="Sample Button"
4 Padding="14"
5 Canvas.Top="0"
6 Canvas.Left="0"></Button>
7 </Canvas>

?

?

?

以編碼的形式使用方法如下：

?

View Code 1 SampleButton.SetValue(Canvas.TopProperty, 120D);
2
3 SampleButton.SetValue(Canvas.LeftProperty, 140D);

?

1.2.????????? Grid

在Grid布局中，需要使用RowDefinition和ColumnDefinition定義行和列可以在Grid控件的開始和結(jié)束標記中間建立Grid.RowDefinitions節(jié)點和Grid.ColumnDefinitions節(jié)點，并在其子節(jié)點中聲名行或列。

控件使用Grid.Row和Grid.Column中來定義控件所處的行和列，使用Grid.RowSpan和Grid.ColumnSpan來定義控件可以占用多少行和多少列，當其值默認為1，為1時不用寫出。如果不指定控件的大小，控件將占滿指定給它的行和列:

?

?

View Code 1 <Grid x:Name="LayoutRoot"
2 Background="White">
3 <Grid.RowDefinitions>
4 <RowDefinition Height="49"></RowDefinition>
5 </Grid.RowDefinitions>
6 <Grid.ColumnDefinitions>
7 <ColumnDefinition Width="140"></ColumnDefinition>
8 </Grid.ColumnDefinitions>
9 <Button Name="SimpleButton"
10 Content="SimpleButton"
11 Grid.Row="0"
12 Grid.RowSpan="1"
13 Grid.Column="0"
14 Grid.ColumnSpan="1">
15
16 </Button>
17 </Grid>

?

?

1.3.????????? StackPanel

?

在StackPanel布局中，控件以垂直或水平堆積的方式排列。如果不指定控件的大小，那么控件將使用默認高度，寬度將占滿整個StackPanel的寬度。如果指定了Orientation="Horizontal"那么控件將使用默認寬度，高度占滿整個StackPanel。StackPanel默認使用Orientation="Vertical"

布局方式。

?

?

View Code 1 <StackPanel x:Name="LayoutRoot"
2 Orientation="Horizontal"
3 Background="White">
4 <Button Name="FristButton"
5 Content="FirstButtonaaaaaaaaaaaaaaa"></Button>
6 <Button Name="SecondButton"
7 Content="SecondButton" Width="100" HorizontalAlignment="Left"></Button>
8 </StackPanel>

?

1.1.????????? DockPanel

?

DockPanel包含在Silverlight ToolKit中，所以如果想要使用DockPanel而已，將需要安裝Silverlight ToolKit，并引入如下xmlns：

View Code 1 xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"

?

在DockPanel布局方式中，控件使用DockPanel.Dock屬性來指定其停靠方式，如果不指定其值，則控件停靠在中間位置，其可取值Top，Left，Right，Bottom。

在DockPanel布局中，先出現(xiàn)的控件有著更高的優(yōu)先級別來占用它所處的位置。

例如：DockPanel.Dock為Top的控件出現(xiàn)在了DockPanel.Dock為Left的控件的前面，那么，DockPanel.Dock為Top的控件則會至少占用停靠在中間位置的控件的寬度+DockPanel.Dock為Left的控件的寬度如圖1.4.1:

?

View Code 1 <toolkit:DockPanel Name="LayoutRoot">
2 <Button Content="Top Button" toolkit:DockPanel.Dock="Top"/>
3 <Button Content="Bottom Button" toolkit:DockPanel.Dock="Bottom"/>
4 <Button Content="Left Button" toolkit:DockPanel.Dock="Left"/>
5 <Button Content="Right Button" toolkit:DockPanel.Dock="Right"/>
6 <Button Content="Center"/>
7 </toolkit:DockPanel>

?

?

?

而DockPanel.Dock為Top的控件出現(xiàn)在了DockPanel.Dock為Left的控件的后面，那么，DockPanel.Dock為Top的控件則至少少占用了DockPanel.Dock為Left的控件的寬度的寬度,如圖1.4.2:

?

View Code 1 <toolkit:DockPanel Name="LayoutRoot">
2 <Button Content="Bottom Button" toolkit:DockPanel.Dock="Bottom"/>
3 <Button Content="Left Button" toolkit:DockPanel.Dock="Left"/>
4 <Button Content="Top Button" toolkit:DockPanel.Dock="Top"/>
5 <Button Content="Right Button" toolkit:DockPanel.Dock="Right"/>
6 <Button Content="Center"/>
7 </toolkit:DockPanel>

圖1.4.1

?

?

圖1.4.2

?

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/javennie/archive/2011/07/27/xamllayout.html

總結(jié)

以上是生活随笔為你收集整理的Silverlight 布局控件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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