silverlight练习之----利用DridSplitter和Drid，Line制作可变行列宽度的表格

最新推荐文章于 2025-04-23 17:00:49 发布

weixin_30402085

最新推荐文章于 2025-04-23 17:00:49 发布

阅读量72

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/vimsk/archive/2010/10/15/1852350.html

本文详细介绍了如何使用Silverlight中的GridSplitter控件实现可变行列表格。通过实例展示了如何设置GridSplitter的各项属性以实现对Grid布局中行列宽度的动态调整。

今天练习的主角：GridSplitter 控件

今天完成目标：利用它结合Grid完成可变行列宽度的表格

在进入任务之前，我们先来了解一下GridSplitter 类-----

表示在 Grid 控件的行或列之间重新分配空间的控件。

命名空间： System.Windows.Controls
程序集： System.Windows.Controls（在 System.Windows.Controls.dll 中）

GridSplitter 控件能够在 Grid 的行或列之间重新分配空间，而不改变 Grid 的尺寸。例如，当 GridSplitter 调整两个列的列宽时，其中一列的 ActualWidth 属性将增加，与此同时，另一列的 ActualWidth 属性将减小相同的幅度。

一旦将 GridSplitter 放到 Grid 上的某个单元格中，就可以使用它来在垂直或水平方向调整行或列的大小。若要指定对 Grid 中相邻行的大小进行调整的 GridSplitter，请将 Grid.Row 附加属性设置为要调整大小的行之一。如果 Grid 有多列，请将 Grid.ColumnSpan 附加属性设置为指定列数，然后将 VerticalAlignment 属性设置为 Top 或 Bottom。（要设置的垂直对齐取决于要调整哪两行的大小。）最后将 HorizontalAlignment 属性设置为 Stretch。

若要指定 GridSplitter 来实现在 Grid 中相邻列大小的调整，则设定 Grid.Column 的固有属性给想要调整大小的那一列。如果 Grid 具有多个行，请将 Grid.RowSpan 附加属性设置为行数。然后将 HorizontalAlignment 属性设置为 Left 或 Right。（要设置的水平对齐取决于要调整哪两列的大小。）最后，将 VerticalAlignment 属性设置为 Stretch。

继承层次结构

System.Object
  System.Windows.DependencyObject
    System.Windows.UIElement
      System.Windows.FrameworkElement
        System.Windows.Controls.Control
          System.Windows.Controls.GridSplitter
大致就介绍这些，还要对它更进一步了解，请参考msdn相关文档

接下来，我们介绍使用GridSplitter的最佳做法：

将 GridSplitter 放在一个不包含其他任何控件的专用行或专用列中。
将包含 GridSplitter 的行的高度或者列的宽度设置为 Auto。
专为 GridSplitter 指定一个 Grid。向 Grid 中添加其他容器面板以完成布局。

了解了这些后，我们开始做我们的可变行列表格~~

首先建立一个silverlight Application 应用程序

打开MainPage.xaml文件，输入如下内容：

Code:

<Grid x:Name="LayoutRoot" Background="White" Width="720" Height="420">
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80" />
<ColumnDefinition Width="80" />
<ColumnDefinition Width="80" />
<ColumnDefinition Width="80" />
<ColumnDefinition Width="80" />
<ColumnDefinition Width="80" />
<ColumnDefinition Width="80" />
<ColumnDefinition Width="80" />
<ColumnDefinition Width="80" />
</Grid.ColumnDefinitions>
<sdk:GridSplitter Grid.Column="0" Grid.RowSpan="8" Width="1" VerticalAlignment="Stretch" HorizontalAlignment="Right" />
<sdk:GridSplitter Grid.Column="2" Grid.RowSpan="8" Width="1" VerticalAlignment="Stretch" HorizontalAlignment="Right" />
<sdk:GridSplitter Grid.Column="1" Grid.RowSpan="8" Width="1" VerticalAlignment="Stretch" HorizontalAlignment="Right" />
<sdk:GridSplitter Grid.Column="3" Grid.RowSpan="8" Width="1" VerticalAlignment="Stretch" HorizontalAlignment="Right" />
<sdk:GridSplitter Grid.Row="1" Grid.ColumnSpan="7" Height="1" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" />
<sdk:GridSplitter Grid.Row="2" Grid.ColumnSpan="7" Height="1" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" />
<sdk:GridSplitter Grid.Row="3" Grid.ColumnSpan="7" Height="1" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" />
<sdk:GridSplitter Grid.Row="4" Grid.ColumnSpan="7" Height="1" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" />
<sdk:GridSplitter Grid.Row="5" Grid.ColumnSpan="7" Height="1" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" />
<sdk:GridSplitter Grid.Row="0" Grid.ColumnSpan="7" Height="1" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" />
<sdk:GridSplitter Grid.Row="6" Grid.ColumnSpan="7" Height="1" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" />
<Line X1="0" Y1="0" X2="600" Y2="0" Stroke="Black" Grid.ColumnSpan="7" Grid.Row="0"/>
<Line X1="0" Y1="0" X2="600" Y2="0" Stroke="Black" Grid.ColumnSpan="7" Grid.Row="2"/>
<Line X1="0" Y1="0" X2="600" Y2="0" Stroke="Black" Grid.ColumnSpan="7" Grid.Row="1"/>
<Line X1="0" Y1="0" X2="600" Y2="0" Stroke="Black" Grid.ColumnSpan="7" Grid.Row="3"/>
<Line X1="0" Y1="0" X2="600" Y2="0" Stroke="Black" Grid.ColumnSpan="7" Grid.Row="4"/>
<Line X1="0" Y1="0" X2="600" Y2="0" Stroke="Black" Grid.ColumnSpan="7" Grid.Row="5"/>
<Line X1="0" Y1="0" X2="600" Y2="0" Stroke="Black" Grid.ColumnSpan="7" Grid.Row="6"/>
<Line X1="0" Y1="0" X2="600" Y2="0" Stroke="Black" Grid.ColumnSpan="7" Grid.Row="7"/>
<Line X1="0" Y1="0" X2="600" Y2="0" Stroke="Black" Grid.ColumnSpan="7" Grid.Row="8"/>
<Line X1="0" Y1="0" X2="0" Y2="560" Stroke="Black" Grid.RowSpan="8" Grid.Column="0"/>
<Line X1="0" Y1="0" X2="0" Y2="560" Stroke="Black" Grid.RowSpan="8" Grid.Column="1"/>
<Line X1="0" Y1="0" X2="0" Y2="560" Stroke="Black" Grid.RowSpan="8" Grid.Column="2"/>
<Line X1="0" Y1="0" X2="0" Y2="560" Stroke="Black" Grid.RowSpan="8" Grid.Column="3"/>
<Line X1="0" Y1="0" X2="0" Y2="560" Stroke="Black" Grid.RowSpan="8" Grid.Column="4"/>
<Line X1="0" Y1="0" X2="0" Y2="560" Stroke="Black" Grid.RowSpan="8" Grid.Column="5"/>
<Line X1="0" Y1="0" X2="0" Y2="560" Stroke="Black" Grid.RowSpan="8" Grid.Column="6"/>
<Line X1="0" Y1="0" X2="0" Y2="560" Stroke="Black" Grid.RowSpan="8" Grid.Column="7"/>
</Grid>

需要注意的是，在文件开头需要引入命名空间：

xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"

因为，GridSplitter控件位于这个命名空间内，现在我们来讲解下，描述代码的主要内容：

首先创建了一个8行7列的Grid布局，这样相当于html中的table，接着，开始画线，这些线用来表示表格的线。分别用

grid.row和grid.column相关属性定位到相应的行列，形成表格的行列线。注意：加上Grid.ColumnSpan和Grid.RowSpan使得线条能跨越多行和多列，不然的话，线条只会在一个行或者列中。

这样，一个表格就已经画好了，但是，这个表格的行列宽度是不能变的，怎么让它变呢？

就是今天的主角GridSplitter控件，我们对它这样设置：

如要使得表格第一列的宽度能使用鼠标进行拖动变化，那么就设置：

<sdk:GridSplitter Grid.Column="0" Grid.RowSpan="8" Width="1" VerticalAlignment="Stretch" HorizontalAlignment="Right" />

其中的属性具体含义如下：

属性	值
Grid.Column	0 表示放在第一列
Grid.RowSpan	Grid 中的总行数。
Width	一个不是零的数字。例如，10。
Height	Auto
HorizontalAlignment	Right 水平方向停靠在右边
VerticalAlignment	Stretch 垂直方向伸展
Margin	0