How to implement automatic column width filling of the Silverlight DataGrid Control

In winform, set the autosizemode attribute of the column in The datagridview control to fill, and then set the fillweight attribute to the weight occupied by the column width, so that the column width can be automatically filled, describes the algorithm for automatically filling the width:

However, in Silverlight, the column width of the DataGrid Control is only in four modes: auto, pixel, sizetocells, and sizetoheader. The column width cannot be automatically filled without the fill mode.

How can this function be implemented? Use a custom template? It seems complicated and difficult to implement reuse. It seems that only custom controls are used. First, we need to make a preliminary analysis. First, we need to control the column width and certainly have to handle the sizechanged event of the DataGrid. Second, we must define the fill mode of each column width in the DataGrid. Finally, we must define the weight of each column width. How can we implement the next two steps? The columns in the Silverlight DataGrid Control have three types: datagridtextcolumn, datagridcheckboxcolumn, and datagridtemplatecolumn. If we create subclasses for these three types to add custom attributes, it is obviously too troublesome.

The DataGrid needs to know the width mode and fill ratio of each datagridcolumn to set the width of each column in The DataGrid sizechanged event, but we need to avoid redefining each datagridcolumn type. Silverlight provides a design pattern for this problem: Additional attributes. We commonly use grid layout controls, where grid. row and grid. the column attribute is an additional attribute. The control added to the grid does not have the row and column attributes, but the row and column attributes of the grid can be used to notify the row and column of the grid control. Similarly, we add an additional attribute for the DataGrid to show each column in The DataGrid the fill mode and weight of the column width to the DataGrid. For ease of use, we add an additional Property: widthweight, int type. If it is 0, it indicates that the column is fixed width; otherwise, it indicates that the column occupies the weight.

For more information about additional attributes, see the Silverlight SDK documentation. The Chinese version is easy to learn :)

Code:

Hide row number copy code? Autofilldatagrid. CS

1. using System;

2. using System.Net;

3. using System.Windows;

4. using System.Windows.Controls;

5. using System.Windows.Documents;

6. using System.Windows.Ink;

7. using System.Windows.Input;

8. using System.Windows.Media;

9. using System.Windows.Media.Animation;

10. using System.Windows.Shapes;

11. using System.Collections.Generic;

13. namespace Test

14. {

15.     public class AutoFillDataGrid : DataGrid

16.     {

17.         public static readonly DependencyProperty WidthWeightProperty = DependencyProperty.RegisterAttached(

18.             "WidthWeight", typeof(int), typeof(AutoFillDataGrid), new PropertyMetadata(0));

19.         private double paddingRight = 0;

21.         public AutoFillDataGrid()

22.         {

23.             this.SizeChanged += new SizeChangedEventHandler(AutoFillDataGrid_SizeChanged);

25.         }

27.         void AutoFillDataGrid_SizeChanged(object sender, SizeChangedEventArgs e)

28.         {

29.             int weight = 0;

30.             double fix = 0;

31.             int temp = 0;

32.             Queue<DataGridColumn> queue = new Queue<DataGridColumn>();

34.             foreach (DataGridColumn column in this.Columns)

35.             {

36.                 temp = (int)column.GetValue(WidthWeightProperty);

37.                 if (temp > 0)

38.                 {

39.                     weight += temp;

40.                     queue.Enqueue(column);

41.                 }

42.                 else

43.                 {

44.                     fix += column.ActualWidth;

45.                 }

46.             }

48.             double width = e.NewSize.Width - this.paddingRight - fix - this.Padding.Left - this.Padding.Right;

49.             double actualWidth = 0;

51.             while (queue.Count > 0)

52.             {

53.                 DataGridColumn column = queue.Dequeue();

54.                 temp = (int)column.GetValue(WidthWeightProperty);

55.                 actualWidth = width * (double)temp / weight;

56.                 if (actualWidth < column.MinWidth)

57.                 {

58.                     actualWidth = column.MinWidth;

59.                 }

60.                 if (actualWidth > column.MaxWidth)

61.                 {

62.                     actualWidth = column.MaxWidth;

63.                 }

64.                 column.Width = new DataGridLength(actualWidth);

66.             }

67.         }

69.         /// <summary>

70. /// Right side? Between? ,? Keré? Which is adatagrid? Roll? Dynamic record? Kuan ídoué

71.         /// </summary>

72.         public double PaddingRight

73.         {

74.             get

75.             {

76.                 return this.paddingRight;

77.             }

78.             set

79.             {

80.                 this.paddingRight = value;

81.             }

82.         }

84.         public static void SetWidthWeight(DataGridColumn column, int value)

85.         {

86.             column.SetValue(WidthWeightProperty, value);

87.         }

89.         public static int GetWidthWeight(DataGridColumn column)

90.         {

91.             return (int)column.GetValue(WidthWeightProperty);

92.         }

93.     }

94. }

 

OK, we have implemented our own DataGrid Control. The next step is how to use it:

In the simplest way, right-click the Silverlight project, select generate, and open our XAML file. Our autofilldatagrid control will appear in the toolbox, drag it to The XAML file. Then, just like using the DataGrid Control, add columns to the autofilldatagrid. The key point is to set the autofilldatagrid. widthweight attribute on the datagridcolumn where the column width needs to be automatically filled.

Download the sample source code <--- visual 2010. If you use visual 2008, create a new project and paste the code.