Silverlight学习笔记(2)——GridSplitter

本文将建立一个silverlight项目中的运用GridSplitter控件动态改变Grid控件单元格宽、高的简单实例,以下是详细步骤:


  在silverlight项目中新建一个silverlight页,将Grid做如下的布局修改,

    <Grid x:Name="LayoutRoot">
<Grid.RowDefinitions >
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions >
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Border Background="#00FF7F" Grid.Row="0" Grid.Column="0">
<TextBlock Text="Spring" Foreground="#FFFFFF" FontSize="60" FontWeight="Bold" VerticalAlignment="Center" HorizontalAlignment="Center" />
</Border>
<Border Background="#FF2400" Grid.Row="0" Grid.Column="1">
<TextBlock Text="Summer" Foreground="#FFFFFF" FontSize="60" FontWeight="Bold" VerticalAlignment="Center" HorizontalAlignment="Center" />
</Border>
<Border Background="#CFB53B" Grid.Row="1" Grid.Column="0">
<TextBlock Text="Autumn" Foreground="#FFFFFF" FontSize="60" FontWeight="Bold" VerticalAlignment="Center" HorizontalAlignment="Center" />
</Border>
<Border Background="#38B0DE" Grid.Row="1" Grid.Column="1">
<TextBlock Text="Winter" Foreground="#FFFFFF" FontSize="60" FontWeight="Bold" VerticalAlignment="Center" HorizontalAlignment="Center" />
</Border>
</Grid>

<Grid.RowDefinitions >下有两行<RowDefinition />:表示Grid控件将被分为两行,<Grid.ColumnDefinitions >下有两行<ColumnDefinition />:表示Grid控件将被分为两列,Border控件中的Grid.Row="0"、Grid.Column="0":表示这个Border区域在Grid控件的第一行第一列中,依次添加了四个Border区域在Grid控件2*2共四个位置中


  添加GridSplitter控件,

        <sdk:GridSplitter Grid.Column="1" Grid.RowSpan="2" HorizontalAlignment="Left" VerticalAlignment="Stretch" Background="#FF484848" Width="5" ShowsPreview="True" />
<sdk:GridSplitter Grid.Row="1" Grid.ColumnSpan="2" HorizontalAlignment="Stretch" VerticalAlignment="Top" Background="#FF484848" Height="5" ShowsPreview="False" />

第一个GridSplitter控件,放置在第二列的位置,占两行,水平对齐HorizontalAlignment设置靠左,垂直对齐VerticalAlignment设置撑满Stretch,这样看起来GridSplitter就是在Grid两列的中间位置;第二个GridSplitter控件,放置在第二行的位置,占两列,垂直对齐VerticalAlignment设置靠上,水平对齐HorizontalAlignment设置撑满Stretch,这样看起来GridSplitter就是在Grid两行的中间位置


  重新生成项目,F5运行,用鼠标试着拖动Grid中2*2区域中间的分割线(GridSplitter控件),会发现两个GridSplitter控件会有区别,

因为我们设置了,竖直的GridSplitter的ShowsPreview="True",这样在拖动的时候会看到虚线痕迹,而水平的GridSplitter保持这默认的ShowsPreview="False",这样在拖动的时候会实时看到效果


 

Silverlight学习笔记目录

posted on 2012-01-18 10:21  影天  阅读(964)  评论(0编辑  收藏  举报

导航