WPF or Silverligth使用WGrid和ScrollViewer自定义GridView控件（附源码）

　　Grid作为WPF及Silverlight中最常用的一个容器组件，类似web设计中的Table，可以让你一个多行和多列的表中排列子元素，并进行控制；
　　要使用Grid先要向RowDefinitions和ColumnDefinitionis中添加一定数量的RowDefinition和ColumnDefinition,以定义行数和列数(如果没有显示设置则会隐式加入一个单元格)

<Grid x:Name="gridRoot" Margin="0"> <Grid.RowDefinitions > <RowDefinition Height="25"/> <RowDefinition /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition /> </Grid.ColumnDefinitions> <Grid x:Name="gridHeader" Grid.Row="0"> <Grid.Background> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FF8EB7E5" Offset="0"/> <GradientStop Color="#FF6EA2DE" Offset="1"/> </LinearGradientBrush> </Grid.Background> </Grid> <ScrollViewer Grid.Row="1" ScrollViewer.VerticalScrollBarVisibility="Visible" ScrollViewer.HorizontalScrollBarVisibility="Hidden" Padding="0" Background="#FF848EA3"> <Grid x:Name="gridData" Margin="0" /> </ScrollViewer> </Grid>

　　　通过设置元素 Grid.Row 及 Grid.Column属性指定元素所在单元格，设置Grid.RowSpan 及 Grid.ColumnSpan属性让元素跨多行或者多列（如综合示例中我们背景Rect的设置）；
   
  　　除了手动设置RowDefinitiont和ColumnDefinition的高度和宽度以改变行列宽高外还可以为Grid添加GridSplitter以支持用鼠标，键盘等交互改变列列尺寸；

  其它扩展属性：
  ShowGridLines    ：显示单元格边缘线（效果较差主要用于调试）
  Margin    ：控制元素与单元格边缘间距
  ...

 

　　　综合示例(以下代码可直接迁移至Silverlight中使用)：
　　　最终效果：

　　

　　　XAML前台代码：

　　　<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" x:Class="WPF_Test.UserControl1" x:Name="UserControl" Width="600" Height="480"> <Grid x:Name="gridRoot" Margin="0"> <Grid.RowDefinitions > <RowDefinition Height="25"/> <RowDefinition /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition /> </Grid.ColumnDefinitions> <Grid x:Name="gridHeader" Grid.Row="0"> <Grid.Background> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FF8EB7E5" Offset="0"/> <GradientStop Color="#FF6EA2DE" Offset="1"/> </LinearGradientBrush> </Grid.Background> </Grid> <ScrollViewer Grid.Row="1" ScrollViewer.VerticalScrollBarVisibility="Visible" ScrollViewer.HorizontalScrollBarVisibility="Hidden" Padding="0" Background="#FF848EA3"> <Grid x:Name="gridData" Margin="0" /> </ScrollViewer> </Grid> </UserControl>
　　　C＃后台代码：

　　　using System; using System.Collections.Generic; using System.Text; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; using System.Text.RegularExpressions; namespace WPF_Test { /// <summary> /// Interaction logic for UserControl1.xaml /// </summary> public partial class UserControl1 : UserControl { #region 测试准备数据真实环境应该动态获取 //测试数据准备 public String[] strRows = {"AA,90%以上,1.0,0.9", "BB,90%-80%,0.9,0.8", "CC,80%-70%,0.8,0.7", "DD,70%-60%,0.7,0.6", "EE,60%-50%,0.6,0.5", "FF,50%-40%,0.5,0.4", "GG,40%-30%,0.4,0.3", "HH,30%-20%,0.3,0.2", "II,20%-10%,0.2,0.1", "JJ,10%以下,0.1,0.0" }; public String[] strHeader = { "列名", "比例", "开始范围", "结束范围" }; double[] colWidthPercents = { 0.3, 0.4, 0.15, 0.15 }; /// <summary> /// 交替行及背景颜色设置 /// </summary> SolidColorBrush[] SolidColors = { new SolidColorBrush(Color.FromArgb(255, 132, 142, 163)), //交替行颜色 new SolidColorBrush(Color.FromArgb(255, 122, 150, 148)), new SolidColorBrush(Color.FromArgb(255, 58, 115, 186)),//选中行颜色 new SolidColorBrush(Color.FromArgb(255,255,255,255)) //分隔符颜色 }; public double RowHeight = 25; //单行高度 Thickness tn = new Thickness(0, 0, 0, 0); //文本填充边距 #endregion /// <summary> /// 鼠标当前所在行下标 /// </summary> public int CurrIndex { get; set; } /// <summary> /// 控件宽度 /// </summary> public double CWidth { get; set; } /// <summary> /// 控件高度 /// </summary> public double CHeight { get; set; } public UserControl1() { this.InitializeComponent(); this.Loaded += new RoutedEventHandler(UserControl1_Loaded); } public UserControl1(double cW,double cH) { this.InitializeComponent(); this.CWidth = cW; this.CHeight = cH; this.Loaded += new RoutedEventHandler(UserControl1_Loaded); } void UserControl1_Loaded(object sender, RoutedEventArgs e) { this.Height = gridRoot.Height = CHeight; this.Width = gridRoot.Width = CWidth; boundGrid(); } //初始化并循环绑定数据到Grid中 void boundGrid() { int colCount = strHeader.Length; int rowCount = strRows.Length; CreateGridRowAndCol(rowCount, colCount, colWidthPercents,gridHeader,gridData,gridRoot); String[] datas; TextBlock tb; for (int i = 0; i < strRows.Length; i++) { datas = strRows[i].Split(','); for (int j = 0; j < datas.Length; j++) { tb = new TextBlock(); tb.Text = datas[j]; tb.Margin = tn; tb.VerticalAlignment = VerticalAlignment.Center; tb.HorizontalAlignment = HorizontalAlignment.Center; tb.SetValue(Grid.RowProperty, i); tb.SetValue(Grid.ColumnProperty, j); tb.Name = String.Format("_{0}_{1}_TextBlock_Details",i,j); gridData.Children.Add(tb); } } } /// <summary> /// 动态创建DataGrid行列 /// </summary> /// <param name="rowCount">行数</param> /// <param name="colCount">列数</param> /// <param name="colPercents">各列所占的比例</param> /// <param name="headGrid">表头Grid</param> /// <param name="dataGrid">数据Grid</param> /// <param name="rootGrid">顶层Grid（需要包含Width　和　Height属性）</param> void CreateGridRowAndCol(int rowCount, int colCount, double[] colPercents,Grid headGrid,Grid dataGrid,Grid rootGrid) { RowDefinition rd; ColumnDefinition cd; Rectangle rectRowBG; // 背景 for (int j = 0; j < rowCount; j++) //创建Grid行 { rd = new RowDefinition(); rd.Height = new GridLength(RowHeight); dataGrid.RowDefinitions.Add(rd); rectRowBG = new Rectangle(); rectRowBG.SetValue(Grid.RowProperty, j); rectRowBG.SetValue(Grid.ColumnProperty, 0); rectRowBG.SetValue(Grid.ColumnSpanProperty, colCount); rectRowBG.Margin = new Thickness(0, 0, 0, 0); rectRowBG.Cursor = Cursors.Hand; rectRowBG.Name = String.Format("_{0}_0_Rect_BG_ROW", j); rectRowBG.MouseEnter += new MouseEventHandler(GridRowBG_MouseEnter); rectRowBG.MouseLeave += new MouseEventHandler(GridRowBG_MouseLeave); rectRowBG.MouseLeftButtonUp += new MouseButtonEventHandler(rectRowBG_MouseLeftButtonUp); if (j % 2 == 0) { rectRowBG.Fill = SolidColors[0]; } else { rectRowBG.Fill = SolidColors[1]; } dataGrid.Children.Add(rectRowBG); } TextBlock tb; for (int i = 0; i < colCount; i++) //创建Grid列 { cd = new ColumnDefinition(); cd.Width = new GridLength(colPercents[i] * CWidth); headGrid.ColumnDefinitions.Add(cd); //创建表头列分隔符 rectRowBG = new Rectangle(); rectRowBG.SetValue(Grid.RowProperty, 0); rectRowBG.SetValue(Grid.ColumnProperty, i); rectRowBG.Fill = SolidColors[3]; rectRowBG.Margin = new Thickness(CWidth * colWidthPercents[i] - 1, 0, 0, 0); //创建表头文本 tb = new TextBlock(); tb.Text = strHeader[i]; tb.Margin = tn; tb.VerticalAlignment = VerticalAlignment.Center; tb.HorizontalAlignment = HorizontalAlignment.Center; tb.SetValue(Grid.ColumnProperty, i); headGrid.Children.Add(rectRowBG); headGrid.SetValue(Grid.ColumnProperty, i); headGrid.Children.Add(tb); //创建表数据列分隔符 cd = new ColumnDefinition(); cd.Width = new GridLength(colPercents[i] * CWidth); dataGrid.ColumnDefinitions.Add(cd); //创建数据列分隔符 rectRowBG = new Rectangle(); rectRowBG.SetValue(Grid.RowProperty, 0); rectRowBG.SetValue(Grid.RowSpanProperty, rowCount); rectRowBG.SetValue(Grid.ColumnProperty, i); rectRowBG.Fill = SolidColors[3]; rectRowBG.Margin = new Thickness(CWidth * colWidthPercents[i] - 1, 0, 0, 0); dataGrid.Children.Add(rectRowBG); } } /// <summary> /// 手动移除Grid指定行 /// </summary> /// <param name="rowIndex"></param> void RemoveGridChildrenByRowIndex(int rowIndex) { if (gridData.Children.Count > 0) { FrameworkElement dataGridChild; //循环子控件临时变量 String postionInfo; //检查获取行列信息 String[] rowAndCol; //获取到的行列信息 for (int i = gridData.Children.Count-1; i >=0; i--) { dataGridChild = gridData.Children[i] as FrameworkElement; if (dataGridChild != null && dataGridChild.Name != String.Empty) { postionInfo = ValidateName(dataGridChild.Name); if (postionInfo != String.Empty) { rowAndCol = postionInfo.Split(','); if (int.Parse(rowAndCol[0]) == rowIndex) { gridData.Children.RemoveAt(i); } else if (int.Parse(rowAndCol[0]) > rowIndex) { dataGridChild.SetValue(Grid.RowProperty, ((int)dataGridChild.GetValue(Grid.RowProperty)) - 1); } } } } gridData.RowDefinitions.RemoveAt(gridData.RowDefinitions.Count-1); //移除最后行 //这里添加方法同步strRows数据源信息 } } #region 鼠标操作及相关事件响应 void rectRowBG_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) { if(MessageBox.Show("您确定要删除本行数据？操作将不可恢复","删除记录",MessageBoxButton.YesNo) == MessageBoxResult.Yes) { Rectangle rect = sender as Rectangle; if (rect != null) { string postionInfo = ValidateName(rect.Name); if (postionInfo != String.Empty) { int rowIndex = int.Parse(postionInfo.Substring(0, postionInfo.IndexOf(','))); RemoveGridChildrenByRowIndex(rowIndex); } } } } void GridRowBG_MouseLeave(object sender, MouseEventArgs e) { Rectangle rect = sender as Rectangle; if (rect != null) { string postionInfo = ValidateName(rect.Name); if (postionInfo != String.Empty) { int rowIndex = int.Parse(postionInfo.Substring(0, postionInfo.IndexOf(','))); if (rowIndex % 2 == 0) { rect.Fill = SolidColors[0]; } else { rect.Fill = SolidColors[1]; } } } } void GridRowBG_MouseEnter(object sender, MouseEventArgs e) { Rectangle rect = sender as Rectangle; if (rect != null) { rect.Fill = SolidColors[2]; } } #endregion Regex regex = new Regex(@"^_(/d{1,9})_(/d{1,9})_(/w{0,100})$", RegexOptions.Compiled); String ValidateName(String controlName) //检查组件名称是否包含行列信息 { //组件名称如："_5_0_Rect_BG" if (regex.IsMatch(controlName)) return Regex.Match(controlName, @"^_(?<row>/d{1,9})_(?<Col>/d{1,9})_(/w{0,100})$").Result("${row},${Col}"); else return String.Empty; } } }
　　　源代码下载：http://download.youkuaiyun.com/source/1869791