|
在Silverlight沒有像HTML中的table標(biāo)簽,，如果我們想創(chuàng)建一個(gè)類似表格的界面或者說想創(chuàng)建一個(gè)類似Excel表格，那該如何創(chuàng)建呢,，對(duì)于一般的可以使用DataGrid控件實(shí)現(xiàn)表格的顯示,，但是如果出現(xiàn)跨行跨列需要合并的表格，那DataGrid就無法實(shí)現(xiàn)了。接下來,，我就介紹,，如何使用Grid控件實(shí)現(xiàn)這樣的功能。 首先,，對(duì)于Gird布局控件,，我們知道它有行和列的屬性，以及可以在每行每列的單元格中放入控件,。首先我們需要知道我們創(chuàng)建的表格有多少行或多少列,，然后我們?cè)趧?dòng)態(tài)創(chuàng)建行和列。 /// <summary> /// 創(chuàng)建Grid,實(shí)現(xiàn)表格的主體 /// </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); } }  自定義創(chuàng)建行和列的方法：CreateRow()和CreateColumn()：/// <summary> /// 創(chuàng)建表格的一行 /// </summary> /// <returns>返回Grid的一行</returns> private RowDefinition CreateRow() { RowDefinition row = new RowDefinition() { Height = new GridLength(1, GridUnitType.Star) }; return row; } /// <summary> /// 創(chuàng)建表格的一列 /// </summary> /// <returns>返回Grid的一列</returns> private ColumnDefinition CreateColumn() { ColumnDefinition column = new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) }; return column; } 上面的代碼,，實(shí)現(xiàn)了一個(gè)表格的框架的創(chuàng)建,，沒有邊框沒有內(nèi)容，接下來我們創(chuàng)建它的表頭以及邊框： 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); } } 創(chuàng)建Border是為了讓單元格有邊框,，上面創(chuàng)建的Border的寬度為1Px,，創(chuàng)建完后，你會(huì)發(fā)現(xiàn)最外層的邊框?qū)挾葧?huì)細(xì)一些,，中間內(nèi)容的邊框會(huì)粗一些,，這是因?yàn)橹虚g的部分是兩個(gè)Border的寬度，如果要追求完美,，你可以將表格最外層單元格的Border的寬度逐一設(shè)置一下。 創(chuàng)建TextBlock的方法,，創(chuàng)建TextBlock主要是用來顯示表格里面的內(nèi)容： /// <summary> /// 創(chuàng)建一個(gè)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; }
顏色轉(zhuǎn)換的方法ConvertColor()： /// <summary> /// 將ARGB顏色轉(zhuǎn)化成系統(tǒng)的顏色 /// </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); } } 以上就完成了表格的表頭的創(chuàng)建,，下面介紹一下有關(guān)表頭需要合并的操作： /// <summary> /// 創(chuàng)建表格的表頭 /// </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); }  表格內(nèi)容的填充：
/// <summary> /// 將數(shù)據(jù)綁定到表格里 /// </summary> protected virtual void BindingContent() { int index = 1; foreach (var data in dataSource) { BindingOneColumn(index, data); index++; } } /// <summary> /// 綁定一行數(shù)據(jù) /// </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); } 以上代碼實(shí)現(xiàn)了，將我們的數(shù)據(jù)集合循環(huán)添加到Gird的每一行,，每一列中去,。其中的dataSource是我們的數(shù)據(jù)集合，它是我們自定義類型Model的集合,。 以上就完成了通過Grid控件實(shí)現(xiàn)Table的創(chuàng)建,，效果圖，如下所示：
|
|
|
