.Net3.0使用Panel來進(jìn)行布局.其中繼承于Panel的5中布局版面包括: Canvas, DockPanel, Grid, StackPanel, VirtualizingStackPanel, WrapPanel.

1, Cavas:簡單地設(shè)置坐標(biāo)值來布局

   Canvas很單純地設(shè)置其子控件相對(duì)于它的Top, Left, Bottom., Right值來進(jìn)行定位其子控件. 那么請(qǐng)調(diào)用相關(guān)方法 public static void SetLeft (UIElement element,double length)等

假設(shè)border1是canvas1的Children, 那么我們應(yīng)該這樣設(shè)置border1在canvas1中的位置:

Canvas.SetTop(border1, 100);
Canvas.SetLeft(border1, 50);

    注意這里有些奇怪的是調(diào)用Cavas的靜態(tài)方法SetTop,SetLeft.

    特別地, 當(dāng)同時(shí)設(shè)置了Top與Bottom時(shí),只有Top生效;同理同時(shí)設(shè)置了Left和Right時(shí)則只有Left生效,而不會(huì)拉伸控件.

要設(shè)置控件大小請(qǐng)使用控件的Width和Height屬性.

以下是一個(gè)示例:

<Page xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation xmlns:sys="clr-namespace:System;assembly=mscorlib"   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
<Canvas Background="Pink" Name="MyCanvas">
    <!--定義畫布-->
    <Rectangle Height="100" Width="100" Canvas.Top="100" Canvas.Left="100" Fill="Red" />
    <Rectangle Height="100" Width="150"  Canvas.Top="100" Canvas.Left="300" Fill="Blue"/>
    <Rectangle Height="100" Width="200"  Canvas.Top="100" Canvas.Left="500" Fill="Yellow" />
  </Canvas>
</Page>
 2, DockPanel: 與.net3.0之前的控件的Dock屬性類似.

DockPanel為其子控件提供相對(duì)的停靠位置, 包括向左?？?/span>(Dock.Left),向右?？?/span>(Dock.Right),向下停靠(Dock.Bottom),向上?？?/span>. 請(qǐng)調(diào)用DockPanel的靜態(tài)方法SetDock(UIElement e, Dock dock)

假設(shè)border1是dockPanel1的子控件,那么我們可以這樣來設(shè)置border1的位置:

DockPanel.SetDock(border1, Dock.Left|Dock.Top);

以下是一個(gè)示例:

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" WindowTitle="DockPanel Sample">
  <DockPanel LastChildFill="True">

<Border Height="25" Background="SkyBlue" BorderBrush="Black" BorderThickness="1" DockPanel.Dock="Top>

      <TextBlock Foreground="Black">Dock = "Top"</TextBlock>

  </Border>
    <Border Height="25" Background="SkyBlue" BorderBrush="Black" BorderThickness="1" DockPanel.Dock="Top">
      <TextBlock Foreground="Black">Dock = "Top"</TextBlock>
    </Border>
    <Border Height="25" Background="LemonChiffon" BorderBrush="Black" BorderThickness="1" DockPanel.Dock="Bottom,Right" >

  <TextBlock Foreground="Black">Dock = "Bottom"</TextBlock>
    </Border>
    <Border Width="200" Background="PaleGreen" BorderBrush="Black" BorderThickness="1" DockPanel.Dock="Left">
      <TextBlock Foreground="Black">Dock = "Left"</TextBlock>
    </Border>
    <Border Background="White" BorderBrush="Black" BorderThickness="1">
      <TextBlock Foreground="Black">This content will "Fill" the remaining space</TextBlock>
    </Border>
  </DockPanel>
</Page>
3, StackPanel :按照水平線方向或垂直線方向排列控件
    StackPanel允許你按照指定的方向(HorizontalAlignment, VerticalAlignment)向其中添加子控件.
關(guān)于StackPanel與DockPanel的區(qū)別SDK中是這樣闡述的:”Although you can use either DockPanel or StackPanel to stack child elements, the two controls do not always produce the same results. For example, the order that you place child elements can affect the size of child elements in a DockPanel but not in a StackPanel. This different behavior occurs because StackPanel measures in the direction of stacking at Double.PositiveInfinity; however, DockPanel measures only the available size.”

以下是一個(gè)示例:

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
  <Grid>

<StackPanel Orientation="Horizontal" Background="silver" Margin="20">
<Label Margin="5" Content="Username" />
<Button  Content="123eqweqweq"/>
<Button Name="test" Width="100" Height="50" Content="Test"/>
<Button  Content="123eqweqweq"/>
<Label Name="testlabel"  Content="king"/>
 </StackPanel>
  </Grid>
</Page>

4,WrapPanel: 自動(dòng)換行子控件的布局

當(dāng)子一行(或一列)不足以放置新控件時(shí),WrapPanel將自動(dòng)地將子控件放置到新行(或新列,這取決于Orientation屬性)

以下是一個(gè)示例:

<Window

  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xml:lang="zh-CN"

  x:Name="Window"

  Title="Window1"
  Width="640" Height="480" xmlns:d="http://schemas.microsoft.com/expression/blend/2006" xmlns:mc="http://schemas./markup-compatibility/2006" mc:Ignorable="d">
  <Grid x:Name="LayoutRoot">
                <Grid.RowDefinitions>

 <RowDefinition Height="0.83*"/>

 <RowDefinition Height="0.17*"/>
                </Grid.RowDefinitions>

; <WrapPanel x:Name="wrapPanel1">

 <Rectangle Fill="#FFAA5E5E" Stroke="#FF000000" Width="{Binding Path=Value, ElementName=slider1, Mode=Default}" Height="{Binding Path=Value, ElementName=slider1, Mode=Default}"/>
                              <Rectangle Fill="#FFAA5E5E" Stroke="#FF000000" Width="{Binding Path=Value, ElementName=slider1, Mode=Default}" Height="{Binding Path=Value, ElementName=slider1, Mode=Default}"/>
                              <Rectangle Fill="#FFAA5E5E" Stroke="#FF000000" Width="{Binding Path=Value, ElementName=slider1, Mode=Default}" Height="{Binding Path=Value, ElementName=slider1, Mode=Default}"/>
                              <Rectangle Fill="#FFAA5E5E" Stroke="#FF000000" Width="{Binding Path=Value, ElementName=slider1, Mode=Default}" Height="{Binding Path=Value, ElementName=slider1, Mode=Default}"/>
                              <Rectangle Fill="#FFAA5E5E" Stroke="#FF000000" Width="{Binding Path=Value, ElementName=slider1, Mode=Default}" Height="{Binding Path=Value, ElementName=slider1, Mode=Default}"/>
                              <Rectangle Fill="#FFAA5E5E" Stroke="#FF000000" Width="{Binding Path=Value, ElementName=slider1, Mode=Default}" Height="{Binding Path=Value, ElementName=slider1, Mode=Default}"/>
                              <Rectangle Fill="#FFAA5E5E" Stroke="#FF000000" Width="{Binding Path=Value, ElementName=slider1, Mode=Default}" Height="{Binding Path=Value, ElementName=slider1, Mode=Default}"/>
                          <Rectangle Fill="#FFAA5E5E" Stroke="#FF000000" Width="{Binding Path=Value, ElementName=slider1, Mode=Default}" Height="{Binding Path=Value, ElementName=slider1, Mode=Default}"/>      

     </WrapPanel>
                <Slider d:LayoutOverrides="Margin" HorizontalAlignment="Right" Margin="0,19.01,24,29" x:Name="slider1" Width="128" Grid.Row="1" Maximum="300" Minimum="50" Value="50"/>
  </Grid>
</Window>

5 Grid:表格布局

Grid允許我們通過自定義行列來進(jìn)行布局,這類似于表格. 我們可以通過表格來進(jìn)行交復(fù)雜框架的布局,然后再在表格內(nèi)部利用其他布局方式或嵌套表格個(gè)方式進(jìn)行布局.

可以通過設(shè)置Columns和Rows的屬性，通過定義Grid的ColumnDifinitions和RowDifinitions來實(shí)現(xiàn)對(duì)于表格的定義，然后根據(jù)Grid.Column和Grid.Row的對(duì)象來制定位置的方式實(shí)現(xiàn)布局.

這里是一個(gè)示例:

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" WindowTitle="Grid Sample">
    <Grid VerticalAlignment="Top" HorizontalAlignment="Left" ShowGridLines="True" Width="250" Height="100">
      <Grid.ColumnDefinitions>
        <ColumnDefinition />

<ColumnDefinition />
        <ColumnDefinition />
      </Grid.ColumnDefinitions>
      <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
      </Grid.RowDefinitions>
      <TextBlock FontSize="20" FontWeight="Bold" Grid.ColumnSpan="3" Grid.Row="0">2005 Products Shipped</TextBlock>
      <TextBlock FontSize="12" FontWeight="Bold" Grid.Row="1" Grid.Column="0">Quarter 1</TextBlock>
      <TextBlock FontSize="12" FontWeight="Bold" Grid.Row="1" Grid.Column="1">Quarter 2</TextBlock>
      <TextBlock FontSize="12" FontWeight="Bold" Grid.Row="1" Grid.Column="2">Quarter 3</TextBlock>
      <TextBlock Grid.Row="2" Grid.Column="0">50000</TextBlock>
      <TextBlock Grid.Row="2" Grid.Column="1">100000</TextBlock>
      <TextBlock Grid.Row="2" Grid.Column="2">150000</TextBlock>
      <TextBlock FontSize="16" FontWeight="Bold" Grid.ColumnSpan="3" Grid.Row="3">Total Units: 300000</TextBlock>

</Grid>
</Page>