Silverlight学习笔记（2）——GridSplitter

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

---

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

    "LayoutRoot">
        
            
            
        
        
            
            
        
        "#00FF7F" Grid.Row="0" Grid.Column="0">
            "Spring" Foreground="#FFFFFF" FontSize="60" FontWeight="Bold" VerticalAlignment="Center" HorizontalAlignment="Center" />
        
        "#FF2400" Grid.Row="0" Grid.Column="1">
            "Summer" Foreground="#FFFFFF" FontSize="60" FontWeight="Bold" VerticalAlignment="Center" HorizontalAlignment="Center" />
        
        "#CFB53B" Grid.Row="1" Grid.Column="0">
            "Autumn" Foreground="#FFFFFF" FontSize="60" FontWeight="Bold" VerticalAlignment="Center" HorizontalAlignment="Center" />
        
        "#38B0DE" Grid.Row="1" Grid.Column="1">
            "Winter" Foreground="#FFFFFF" FontSize="60" FontWeight="Bold" VerticalAlignment="Center" HorizontalAlignment="Center" />
        
     

下有两行：表示Grid控件将被分为两行，下有两行：表示Grid控件将被分为两列，Border控件中的Grid.Row="0"、Grid.Column="0"：表示这个Border区域在Grid控件的第一行第一列中，依次添加了四个Border区域在Grid控件2*2共四个位置中

---

　　添加GridSplitter控件，

        "1" Grid.RowSpan="2" HorizontalAlignment="Left" VerticalAlignment="Stretch" Background="#FF484848" Width="5" ShowsPreview="True" />
        "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学习笔记目录

转载于:https://www.cnblogs.com/xwlyun/archive/2012/01/18/2325244.html