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.csdn.net/source/1869791