控件中国网现已改版,您看到的是老版本网站的镜像,系统正在为您跳转到新网站首页,请稍候.......
中国最专业的商业控件资讯网产品咨询电话:023-67870900 023-67871946
产品咨询EMAIL:SALES@COMPONENTCN.COM

Silverlight中使用Grid创建自定义的Table表格

作者:未知 出处:cnblog 2013年06月06日 阅读:

 在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的创建。
 

热推产品

  • ActiveReport... 强大的.NET报表设计、浏览、打印、转换控件,可以同时用于WindowsForms谀坔攀戀Forms平台下......
  • AnyChart AnyChart使你可以创建出绚丽的交互式的Flash和HTML5的图表和仪表控件。可以用于仪表盘的创......
首页 | 新闻中心 | 产品中心 | 技术文档 | 友情连接 | 关于磐岩 | 技术支持中心 | 联系我们 | 帮助中心 Copyright-2006 ComponentCN.com all rights reserved.重庆磐岩科技有限公司(控件中国网) 版权所有 电话:023 - 67870900 传真:023 - 67870270 产品咨询:sales@componentcn.com 渝ICP备12000264号 法律顾问:元炳律师事务所 重庆市江北区塔坪36号维丰创意绿苑A座28-5 邮编:400020
在线客服
在线客服系统
在线客服
在线客服系统