Silverlight学习之布局

silverlight布局主要有三种布局方式 Grid StackPanel和Canvas

Canvas

Canvas 采用的是相对定位布局，通过Canvas.Left和Canvas.Top两个属性来控制元素在Canvas中的位置。

 <Canvas >
            <Button Canvas.Left="50" Canvas.Top="50" Width="150" Height="50" Content="Hello"/>
            <Button Canvas.Left="50" Canvas.Top="110" Width="150" Height="50" Content="World"/>
</Canvas>

效果

其中从上往下第一个按钮距左50，距上50。第二个距左50，距上为110。

两个控件的left和top属性的值相同时，需要默认的是显示后一个控件，可以通过Canvas的Canvas.ZIndex属性，来改变显示的先后顺序，ZIndex越大的控件越靠前。

两个坐标相同时,Content为World的按钮在上边。

 <Canvas >
            <Button Canvas.Left="50" Canvas.Top="50" Width="150" Height="50" Content="Hello" />
            <Button Canvas.Left="50" Canvas.Top="50" Width="150" Height="50" Content="World"/>
 </Canvas>

效果

设置ZIndex，Content为Hello的按钮在上边。

 <Canvas >
            <Button Canvas.Left="50" Canvas.Top="50" Width="150" Height="50" Content="Hello" Canvas.ZIndex="1" />
            <Button Canvas.Left="50" Canvas.Top="50" Width="150" Height="50" Content="World"/>
        </Canvas>

效果

 

StackPanel

StackPanel通过行或列来排列它内部的元素，并且默认的情况下不会产生重叠。StackPanel默认的排列方式为Vertical，可以通过Orienzation来设置排列的方式。

默认情况下

<StackPanel>
        <Button Width="150" Height="50" Content="StackPanel"  Margin="0,50,0,0"></Button>
        <Button Width="150" Height="50" Content="Vetical" Margin="0,50,0,0"></Button>
 </StackPanel>

效果

设置Orienzation属性为Horizontal

 <StackPanel Orientation="Horizontal">
        <Button Width="150" Height="50" Content="Hello"  Margin="0,50,0,0"></Button>
        <Button Width="150" Height="50" Content="World" Margin="0,50,0,0"></Button>
    </StackPanel>

效果

 

Grid

Grid相当于Html中的Tabel，可以Grid.RowDefinitions和Grid.ColumnDefinitions定义行和列，然后通过Grid.Row和Grid.Column属性来定义控件在Grid的位置。

 

  <Grid Width="300" Height="200" Background="Orange" ShowGridLines="True">
        <Grid.RowDefinitions>
         <RowDefinition Height="50"/>
         <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
         <ColumnDefinition Width="150"/>
         <ColumnDefinition/>
        </Grid.ColumnDefinitions>
            <Button Content="Hello" Grid.Row="0" Grid.Column="0" Height="30" Width="100"></Button>
            <Button Content="World" Grid.Row="0" Grid.Column="1" Height="30" Width="100"></Button>
            <Button Content="Welcome" Grid.Row="1" Grid.Column="0" Height="30" Width="100"></Button>
            <Button Content="Nihao" Grid.Row="1" Grid.Column="1" Height="30" Width="100"></Button>
        </Grid>

上面代码定义了一个Grid有两行两列，通过ShowGridLines属性可以显示Grid中的分隔线。

效果