silverlight（一）布局

在这里主要是介绍silverlight的三种布局方式Grid,Canvas,StackPanel。

（一）Grid:表格布局

例子：

<Grid x:Name="LayoutRoot" Background="White" ShowGridLines="True" >
        <Grid.RowDefinitions>
            <RowDefinition Height="39*" />
            <RowDefinition Height="45*" />
            <RowDefinition Height="37*" />
            <RowDefinition Height="42*" />
            <RowDefinition Height="40*" />
            <RowDefinition Height="50*" />
            <RowDefinition Height="47*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="75*" />
            <ColumnDefinition Width="72*" />
            <ColumnDefinition Width="65*" />
            <ColumnDefinition Width="74*" />
            <ColumnDefinition Width="62*" />
            <ColumnDefinition Width="52*" />
        </Grid.ColumnDefinitions>
        <Button Content="Button"   Margin="0,14,0,0" Name="button1"   Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="2" />
        <Button Content="Button"     Margin="0,11,0,0" Name="button2"  Grid.Column="2" Grid.Row="3" />
    </Grid>

在这里根本就不需要敲代码，只需要拉控件，在制作表格的时候，只需要在画布边点几下，就可以绘制成表格了。如下图所示：

（二）Canvas的布局：

Canvas是一种简单的布局模式，适合做一些简单的布局

例子：

 <Canvas   Name="canvas1" >
        <Button Canvas.Left="149" Canvas.Top="86" Content="Button1" Height="23" Name="button1" Width="75" Click="button1_Click" />
        <Button Canvas.Left="149" Canvas.Top="136" Content="Button2" Height="23" Name="button2" Width="75" />
    </Canvas>

后台：

 private void button1_Click(object sender, RoutedEventArgs e)
        {
            button1.SetValue(Canvas.TopProperty,200.0);//附加属性
           
        }

这个单击事件是采用依赖属性来设置其位置

（三）StackPanel的布局

StackPanel有两种布局模式：水平布局和垂直布局

1.水平布局：Orientation="Horizontal"

例子：

 <StackPanel   Name="stackPanel1"  VerticalAlignment="Stretch" HorizontalAlignment="Center"  Orientation="Horizontal">
        <Button Content="Button"  Name="button1" Margin="10 10 10 10"  />
        <Button Content="Button"  Name="button2"  Margin="10 10 10 10" />
        <Button Content="Button"  Name="button3" Margin="10 10 10 10"  />
    </StackPanel>

如图

2.垂直布局；Orientation= "Vertical"

    <StackPanel   Name="stackPanel1"  HorizontalAlignment="Stretch"  VerticalAlignment="Center"  Orientation= "Vertical">
        <Button Content="Button"  Name="button1" Margin="10 10 10 10"  />
        <Button Content="Button"  Name="button2"  Margin="10 10 10 10" />
        <Button Content="Button"  Name="button3" Margin="10 10 10 10"  />
    </StackPanel>如图：

个人建议：在进行拉控件的时候，把控件的宽和高去掉，选择填充Margin进行配置最好，不然在不同的电脑会出现位置错乱