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 < subHeadList.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的创建，效果图，如下所示：