Silverlight中使用Grid創建自定義的Table表格

　　在Silverlight沒有像HTML中的table標簽，如果我們想創建一個類似表格的界面或者說想創建一個類似Excel表格，那該如何創建呢，對於一般的可以使用DataGrid控件實現表格的顯示，但是如果出現跨行跨列需要合並的表格，那DataGrid就無法實現了。接下來，我就介紹，如何使用Grid控件實現這樣的功能。

 　　首先，對於Gird布局控件，我們知道它有行和列的屬性，以及可以在每行每列的單元格中放入控件。首先我們需要知道我們創建的表格有多少行或多少列，然后我們在動態創建行和列。　　

        /// <summary>
        /// 創建Grid,實現表格的主體
        /// </summary>
        protected  void CreateGrid(int rows,int columns)
        {
            grid = new Grid()
                    {
                        Background = null,
                        HorizontalAlignment = HorizontalAlignment.Stretch,
                        VerticalAlignment = VerticalAlignment.Top,
                        Margin = new Thickness(10, 0, 10, 0)
                    };
            for (int i = 0; i < rows; i++)
            {
                RowDefinition row = CreateRow();
                grid.RowDefinitions.Add(row);
            }

            for (int i = 0; i < columns; i++)
            {
                ColumnDefinition column = CreateColumn();
                grid.ColumnDefinitions.Add(column);
            }
        }

　　自定義創建行和列的方法：CreateRow()和CreateColumn()：

　　　　 /// <summary>
        /// 創建表格的一行
         /// </summary>
        /// <returns>返回Grid的一行</returns>
        private RowDefinition CreateRow()
        {
            RowDefinition row = new RowDefinition()
                                  {
                                      Height = new GridLength(1, GridUnitType.Star)
                                  };
            return row;
        }

        /// <summary>
        /// 創建表格的一列
        /// </summary>
        /// <returns>返回Grid的一列</returns>
        private ColumnDefinition CreateColumn()
        {
            ColumnDefinition column = new ColumnDefinition()
                                          {
                                              Width = new GridLength(1, GridUnitType.Star)
                                          };
            return column;
        }

　　上面的代碼，實現了一個表格的框架的創建，沒有邊框沒有內容，接下來我們創建它的表頭以及邊框：

        protected virtual void CreateHeader(List<string> headList)
        {
            for (int i = 0; i < headList.Count; i++)
            {
                TextBlock block = CreateTextBlock(headList[i]);
                Border border = new Border() { Background = new SolidColorBrush(Colors.Transparent), BorderThickness = new Thickness(1, 1, 1, 1), BorderBrush = ConvertColor("FFC9CACA") };
                border.Child = block;
                border.SetValue(Grid.RowProperty, 0);
                border.SetValue(Grid.ColumnProperty, i);
                grid.Children.Add(border); 
            }
        }

　　　　創建Border是為了讓單元格有邊框，上面創建的Border的寬度為1Px，創建完后，你會發現最外層的邊框寬度會細一些，中間內容的邊框會粗一些，這是因為中間的部分是兩個Border的寬度，如果要追求完美，你可以將表格最外層單元格的Border的寬度逐一設置一下。

　　　　創建TextBlock的方法，創建TextBlock主要是用來顯示表格里面的內容：　　　　

/// <summary>
        /// 創建一個TextBlock控件
        /// </summary>
        /// <param name="text">控件的Text</param>
        /// <returns></returns>
        protected TextBlock CreateTextBlock(string text)
        {
            TextBlock block = new TextBlock()
            {
                Text = text,
                FontSize = 12,
                Foreground = new SolidColorBrush(Colors.Black),
                Margin = new Thickness(0, 5, 0, 5),
                TextWrapping = TextWrapping.Wrap,
                HorizontalAlignment = HorizontalAlignment.Center,
                VerticalAlignment = VerticalAlignment.Center
            };
            return block;
        }

 

　　　　顏色轉換的方法ConvertColor()：

/// <summary>
        /// 將ARGB顏色轉化成系統的顏色
        /// </summary>
        /// <param name="color">ARGB色彩的字符串</param>
        /// <returns></returns>
        protected SolidColorBrush ConvertColor(string color)
        {
            SolidColorBrush brush;
            try
            {
                byte a, r, g, b;
                a = r = g = b = 255;
                r = Convert.ToByte(color.Substring(0, 2), 16);
                g = Convert.ToByte(color.Substring(2, 2), 16);
                b = Convert.ToByte(color.Substring(4, 2), 16);
                brush = new SolidColorBrush(Color.FromArgb(a, b, g, r));
                return brush;
            }
            catch
            {
                return new SolidColorBrush(Colors.Black); 
            }
        }

　　　　以上就完成了表格的表頭的創建，下面介紹一下有關表頭需要合並的操作：　　

        /// <summary>
        /// 創建表格的表頭
        /// </summary>
        protected virtual void CreateHeaderOne()
        {
            TextBlock block;
            block=CreateTextBlock(headList[0]);
            Border border =new Border(){ Background=new SolidColorBrush(Colors.Transparent),BorderThickness=new Thickness(2,2,1,1) ,BorderBrush = ConvertColor("FFC9CACA")};                
            border.Child = block;
            border.SetValue(Grid.RowProperty,0);
            border.SetValue(Grid.ColumnProperty, 0);
            grid.Children.Add(border);

            block = CreateTextBlock(headList[1]);
            border = new Border() { Background = new SolidColorBrush(Colors.Transparent), BorderThickness = new Thickness(1, 2, 1, 1), BorderBrush = ConvertColor("FFC9CACA") };
            border.Child = block;
            border.SetValue(Grid.RowProperty, 0);
            border.SetValue(Grid.ColumnProperty, 1);
            border.SetValue(Grid.ColumnSpanProperty, 2);//合並兩列
            grid.Children.Add(border);

            block = CreateTextBlock(headList[2]);
            border = new Border() { Background = new SolidColorBrush(Colors.Transparent), BorderThickness = new Thickness(1, 2, 1, 1), BorderBrush = ConvertColor("FFC9CACA") };
            border.Child = block;
            border.SetValue(Grid.RowProperty, 0);
            border.SetValue(Grid.ColumnProperty, 3);    
            border.SetValue(Grid.RowSpanProperty, 2);//合並兩行
            grid.Children.Add(border);           
          
        }

　　　表格內容的填充：

　　　　

/// <summary>
        /// 將數據綁定到表格里
        /// </summary>
        protected virtual void BindingContent()
        {
            int index = 1;
            foreach (var data in dataSource)
            {
                BindingOneColumn(index, data);
                index++;
            }
        }
        /// <summary>
        /// 綁定一行數據
        /// </summary>
        private void BindingOneColumn(int index,Model data)
        {
            TextBlock block;
            block=CreateTextBlock(data.ID.ToString());
            Border border =new Border(){ Background=new SolidColorBrush(Colors.Transparent),BorderThickness=new Thickness(1,1,1,1) ,BorderBrush = ConvertColor("FFC9CACA")};                
            border.Child = block;
            border.SetValue(Grid.RowProperty,index);
            border.SetValue(Grid.ColumnProperty, 0);
            grid.Children.Add(border);

            string text = ConverterToString(data.Name);
            block = CreateTextBlock(text);
            border = new Border() { Background = new SolidColorBrush(Colors.Transparent), BorderThickness = new Thickness(1, 1, 1, 1), BorderBrush = ConvertColor("FFC9CACA") };
            border.Child = block;
            border.SetValue(Grid.RowProperty, index);
            border.SetValue(Grid.ColumnProperty, 1);
            grid.Children.Add(border);

            text = ConverterToString(data.Sex);
            block = CreateTextBlock(text);
            border = new Border() { Background = new SolidColorBrush(Colors.Transparent), BorderThickness = new Thickness(1, 1, 1, 1), BorderBrush = ConvertColor("FFC9CACA") };
            border.Child = block;
            border.SetValue(Grid.RowProperty, index);
            border.SetValue(Grid.ColumnProperty, 2);
            grid.Children.Add(border);


            text = ConverterToString(data.Age);
            block = CreateTextBlock(text);
            border = new Border() { Background = new SolidColorBrush(Colors.Transparent), BorderThickness = new Thickness(1, 1, 1, 1), BorderBrush = ConvertColor("FFC9CACA") };
            border.Child = block;
            border.SetValue(Grid.RowProperty, index);
            border.SetValue(Grid.ColumnProperty, 3);
            grid.Children.Add(border);

            text = ConverterToString(data.Address);
            block = CreateTextBlock(text);
            border = new Border() { Background = new SolidColorBrush(Colors.Transparent), BorderThickness = new Thickness(1, 1, 1, 1), BorderBrush = ConvertColor("FFC9CACA") };
            border.Child = block;
            border.SetValue(Grid.RowProperty, index);
            border.SetValue(Grid.ColumnProperty, 4);
            grid.Children.Add(border);
           
        }

　　以上代碼實現了，將我們的數據集合循環添加到Gird的每一行，每一列中去。其中的dataSource是我們的數據集合，它是我們自定義類型Model的集合。

　　以上就完成了通過Grid控件實現Table的創建，效果圖，如下所示：