zoukankan      html  css  js  c++  java

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

    今天练习的主角：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:
    1. <Grid x:Name="LayoutRoot" Background="White"  Width="720" Height="420">  
    2.        <Grid.RowDefinitions>  
    3.            <RowDefinition Height="30" />  
    4.            <RowDefinition Height="30" />  
    5.            <RowDefinition Height="30" />  
    6.            <RowDefinition Height="30" />  
    7.            <RowDefinition Height="30" />  
    8.            <RowDefinition Height="30" />  
    9.            <RowDefinition Height="30" />  
    10.            <RowDefinition Height="30" />  
    11.            <RowDefinition Height="30" />  
    12.            <RowDefinition Height="30" />  
    13.            <RowDefinition Height="30" />  
    14.            <RowDefinition Height="30" />  
    15.            <RowDefinition Height="30" />  
    16.            <RowDefinition Height="30" />  
    17.            <RowDefinition Height="30" />  
    18.              
    19.        </Grid.RowDefinitions>  
    20.        <Grid.ColumnDefinitions>  
    21.            <ColumnDefinition Width="80" />  
    22.            <ColumnDefinition Width="80" />  
    23.            <ColumnDefinition Width="80" />  
    24.            <ColumnDefinition Width="80" />  
    25.            <ColumnDefinition Width="80" />  
    26.            <ColumnDefinition Width="80" />  
    27.            <ColumnDefinition Width="80" />  
    28.            <ColumnDefinition Width="80" />  
    29.            <ColumnDefinition Width="80" />  
    30.        </Grid.ColumnDefinitions>  
    31.        <sdk:GridSplitter Grid.Column="0"  Grid.RowSpan="8"  Width="1"  VerticalAlignment="Stretch" HorizontalAlignment="Right"  />  
    32.        <sdk:GridSplitter Grid.Column="2"  Grid.RowSpan="8"  Width="1"  VerticalAlignment="Stretch" HorizontalAlignment="Right"  />  
    33.        <sdk:GridSplitter Grid.Column="1"  Grid.RowSpan="8"  Width="1"  VerticalAlignment="Stretch" HorizontalAlignment="Right"  />  
    34.        <sdk:GridSplitter Grid.Column="3"  Grid.RowSpan="8"  Width="1"  VerticalAlignment="Stretch" HorizontalAlignment="Right"  />  
    35.        <sdk:GridSplitter Grid.Row="1" Grid.ColumnSpan="7" Height="1" HorizontalAlignment="Stretch" VerticalAlignment="Bottom"  />  
    36.        <sdk:GridSplitter Grid.Row="2" Grid.ColumnSpan="7" Height="1" HorizontalAlignment="Stretch" VerticalAlignment="Bottom"  />  
    37.        <sdk:GridSplitter Grid.Row="3" Grid.ColumnSpan="7" Height="1" HorizontalAlignment="Stretch" VerticalAlignment="Bottom"  />  
    38.        <sdk:GridSplitter Grid.Row="4" Grid.ColumnSpan="7" Height="1" HorizontalAlignment="Stretch" VerticalAlignment="Bottom"  />  
    39.        <sdk:GridSplitter Grid.Row="5" Grid.ColumnSpan="7" Height="1" HorizontalAlignment="Stretch" VerticalAlignment="Bottom"  />  
    40.        <sdk:GridSplitter Grid.Row="0" Grid.ColumnSpan="7" Height="1" HorizontalAlignment="Stretch" VerticalAlignment="Bottom"  />  
    41.        <sdk:GridSplitter Grid.Row="6" Grid.ColumnSpan="7" Height="1" HorizontalAlignment="Stretch" VerticalAlignment="Bottom"  />  
    42.        <Line X1="0" Y1="0" X2="600" Y2="0" Stroke="Black" Grid.ColumnSpan="7" Grid.Row="0"/>  
    43.        <Line X1="0" Y1="0" X2="600" Y2="0" Stroke="Black"  Grid.ColumnSpan="7" Grid.Row="2"/>  
    44.        <Line X1="0" Y1="0" X2="600" Y2="0" Stroke="Black"  Grid.ColumnSpan="7" Grid.Row="1"/>  
    45.        <Line X1="0" Y1="0" X2="600" Y2="0" Stroke="Black" Grid.ColumnSpan="7" Grid.Row="3"/>  
    46.        <Line X1="0" Y1="0" X2="600" Y2="0" Stroke="Black" Grid.ColumnSpan="7" Grid.Row="4"/>  
    47.        <Line X1="0" Y1="0" X2="600" Y2="0" Stroke="Black" Grid.ColumnSpan="7" Grid.Row="5"/>  
    48.        <Line X1="0" Y1="0" X2="600" Y2="0" Stroke="Black" Grid.ColumnSpan="7" Grid.Row="6"/>  
    49.        <Line X1="0" Y1="0" X2="600" Y2="0" Stroke="Black" Grid.ColumnSpan="7" Grid.Row="7"/>  
    50.        <Line X1="0" Y1="0" X2="600" Y2="0" Stroke="Black" Grid.ColumnSpan="7" Grid.Row="8"/>  
    51.   
    52.        <Line X1="0" Y1="0" X2="0" Y2="560" Stroke="Black" Grid.RowSpan="8" Grid.Column="0"/>  
    53.        <Line X1="0" Y1="0" X2="0" Y2="560" Stroke="Black" Grid.RowSpan="8" Grid.Column="1"/>  
    54.        <Line X1="0" Y1="0" X2="0" Y2="560" Stroke="Black" Grid.RowSpan="8" Grid.Column="2"/>  
    55.        <Line X1="0" Y1="0" X2="0" Y2="560" Stroke="Black" Grid.RowSpan="8" Grid.Column="3"/>  
    56.        <Line X1="0" Y1="0" X2="0" Y2="560" Stroke="Black" Grid.RowSpan="8" Grid.Column="4"/>  
    57.        <Line X1="0" Y1="0" X2="0" Y2="560" Stroke="Black" Grid.RowSpan="8" Grid.Column="5"/>  
    58.        <Line X1="0" Y1="0" X2="0" Y2="560" Stroke="Black" Grid.RowSpan="8" Grid.Column="6"/>  
    59.        <Line X1="0" Y1="0" X2="0" Y2="560" Stroke="Black" Grid.RowSpan="8" Grid.Column="7"/>  
    60.         
    61.   
    62.   
    63.    </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

    其它各个行列类似处理。这样就完成了今天的任务~

    测试效果：
  • 相关阅读:
    设计模-设计原则-开闭原则
    使用export/import导出和导入docker容器
    Docker学习笔记（二）
    redis-cli的一些有趣也很有用的功能
    Redis命令总结
    使用domain模块捕获异步回调中的异常
    大话程序猿眼里的高并发
    使用pm2躺着实现负载均衡
    Request —— 让 Node.js http请求变得超简单
    避免uncaughtException错误引起node.js进程崩溃
  • 原文地址：https://www.cnblogs.com/vimsk/p/1852350.html
Copyright © 2011-2022 走看看