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学习笔记目录