silverlight練習之----利用DridSplitter和Drid，Line製做可變行列寬度的表格

時間  2019-11-24
標籤 silverlight 練習 利用 dridsplitter drid line 製做 可變 行列 寬度 表格 欄目 Silverlight 简体版
原文   原文鏈接

今天練習的主角：GridSplitter 控件html

今天完成目標：利用它結合Grid完成可變行列寬度的表格vim

在進入任務以前，咱們先來了解一下GridSplitter 類-----windows

表示在 Grid 控件的行或列之間從新分配空間的控件。app

 

命名空間：  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。ui

若要指定 GridSplitter 來實如今 Grid 中相鄰列大小的調整，則設定 Grid.Column 的固有屬性給想要調整大小的那一列。若是 Grid 具備多個行，請將 Grid.RowSpan 附加屬性設置爲行數。而後將 HorizontalAlignment 屬性設置爲 Left 或 Right。（要設置的水平對齊取決於要調整哪兩列的大小。）最後，將 VerticalAlignment 屬性設置爲 Stretch。spa

繼承層次結構xml

System.Object
  System.Windows.DependencyObject
    System.Windows.UIElement
      System.Windows.FrameworkElement
        System.Windows.Controls.Control
          System.Windows.Controls.GridSplitter
大體就介紹這些，還要對它更進一步瞭解，請參考msdn相關文檔htm

 

接下來，咱們介紹使用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

 

其它各個行列相似處理。這樣就完成了今天的任務~

測試效果：

 

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程