Tutorial :Increase columns width in Silverlight DataGrid to fill whole DG width


I have a DataGrid Control which is bound to a SQL Table.

The XAML Code is:

<data:DataGrid x:Name="dg_sql_data"                          Grid.Row="1"                          Visibility="Collapsed"                          Height="auto"                          Margin="0,5,5,5"                         AutoGenerateColumns="false"                         AlternatingRowBackground="Aqua"                         Opacity="80"                         >      <data:DataGrid.Columns>          <data:DataGridTextColumn Header="Latitude" Binding="{Binding lat}" />          <data:DataGridTextColumn Header="Longitude" Binding="{Binding long}" />          <data:DataGridTextColumn Header="Time" Binding="{Binding time}" />      </data:DataGrid.Columns>  </data:DataGrid>  

Is it possible increase the single columns sizes to fill out the complete width of the datagrid?


Edit: Columns with "*" as width are coming with the Silverlight SDK 4.



    void dg_sql_data_SizeChanged(object sender, SizeChangedEventArgs e)      {          DataGrid myDataGrid = (DataGrid)sender;          // Do not change column size if Visibility State Changed          if (myDataGrid.RenderSize.Width != 0)          {              double all_columns_sizes = 0.0;              foreach (DataGridColumn dg_c in myDataGrid.Columns)              {                  all_columns_sizes += dg_c.ActualWidth;              }              // Space available to fill ( -18 Standard vScrollbar)              double space_available = (myDataGrid.RenderSize.Width - 18) - all_columns_sizes;              foreach (DataGridColumn dg_c in myDataGrid.Columns)              {                  dg_c.Width = new DataGridLength(dg_c.ActualWidth + (space_available / myDataGrid.Columns.Count));              }          }      }  


alt text


Tested only in WPF, not in Silverlight:

I set up in WPF 3.5 SP1 and it works perfect, no guaranties about Silverlight, but if it works it's indeed charming.

<data:DataGridTextColumn Header="Time" Binding="{Binding}" Width="*" />  


I have created an attached property for the DataGrid that lets you do this in XAML:

<UserControl       xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"        x:Class="GridProperties.Page"      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"       xmlns:gp="clr-namespace:GridProperties">  <Grid x:Name="LayoutRoot" Background="White">      <data:DataGrid gp:GridEx.StarColumn="2">          <data:DataGrid.Columns>              <data:DataGridTextColumn Header="Column 1"/>              <data:DataGridTextColumn Header="Column 2"/>              <data:DataGridTextColumn Header="Column 3"/>          </data:DataGrid.Columns>      </data:DataGrid>  </Grid>  </UserControl>  


Building on Henrik P's answer, this solution simply straightens out the bug with Width='*' so that you can set any column to be proportional like you can on a grid:

    private void DgSQLDataSizeChanged(object sender, SizeChangedEventArgs e)      {          var myDataGrid = (DataGrid)sender;            // Do not change column size if Visibility State Changed          if (myDataGrid.RenderSize.Width == 0) return;            double totalActualWidthOfNonStarColumns = myDataGrid.Columns.Sum(              c => c.Width.IsStar ? 0 : c.ActualWidth);            double totalDesiredWidthOfStarColumns =               myDataGrid.Columns.Sum(c => c.Width.IsStar ? c.Width.Value : 0);            if ( totalDesiredWidthOfStarColumns == 0 )               return;  // No star columns            // Space available to fill ( -18 Standard vScrollbar)          double spaceAvailable = (myDataGrid.RenderSize.Width - 18) - totalActualWidthOfNonStarColumns;            double inIncrementsOf = spaceAvailable/totalDesiredWidthOfStarColumns;            foreach (var column in myDataGrid.Columns)          {              if ( !column.Width.IsStar ) continue;                var width = inIncrementsOf * column.Width.Value;              column.Width = new DataGridLength(width, DataGridLengthUnitType.Star);          }      }  

I liked Henrik's answer but needed two columns to fill the extra space, like a grid.


In silverlight 4: simply set ColumnWidth="*" on the DataGrid

<data:DataGrid ColumnWidth="*" />  


You can set it programmatically:

var col = new DataGridTextColumn();  col.Width = new DataGridLength(100, DataGridLengthUnitType.Star);                          Grid1.Columns.Add(col);  

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »