在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),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,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,16); b = Convert.ToByte(color.Substring(4,16); brush = new SolidColorBrush(Color.FromArgb(a,b,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,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),BorderBrush = ConvertColor("FFC9CACA") }; border.Child = block; border.SetValue(Grid.RowProperty,1); border.SetValue(Grid.ColumnSpanProperty,2);//合并两列 grid.Children.Add(border); block = CreateTextBlock(headList[2]); border = new Border() { Background = new SolidColorBrush(Colors.Transparent),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,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),1); grid.Children.Add(border); text = ConverterToString(data.Sex); block = CreateTextBlock(text); border = new Border() { Background = new SolidColorBrush(Colors.Transparent),2); grid.Children.Add(border); text = ConverterToString(data.Age); block = CreateTextBlock(text); border = new Border() { Background = new SolidColorBrush(Colors.Transparent),3); grid.Children.Add(border); text = ConverterToString(data.Address); block = CreateTextBlock(text); border = new Border() { Background = new SolidColorBrush(Colors.Transparent),4); grid.Children.Add(border); }
以上代码实现了，将我们的数据集合循环添加到Gird的每一行，每一列中去。其中的dataSource是我们的数据集合，它是我们自定义类型Model的集合。
以上就完成了通过Grid控件实现Table的创建，效果图，如下所示：
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。