Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I make XAML DataGridColumns fill the entire DataGrid?

I am using DataGrids in XAML (not Silverlight) with resizable columns, the DataGrid will expand if the user resizes the screen.

Currently if the widths of all the DataGrid columns are less than the width of the DataGrid I get an extra "column" appearing which is unclickable and serves no purpose.

Does anyone know how to make one column always resize to fill all the remaining space?

like image 349
Purplegoldfish Avatar asked Feb 17 '11 12:02

Purplegoldfish


People also ask

How do I add a DataGrid toolbox?

Right Click the Toolbox. Select "Choose Items...". In the WPF Components Tab, in the Filter Textbox type DataGrid. From there you can add it to the Toolbox.

What is DataGrid WPF?

A DataGrid is a control that displays data in a customizable grid. It provides a flexible way to display a collection of data in rows and columns.


8 Answers

If you use Width="*" the column will fill to expand the available space.

If you want all columns to divide the grid equally apply this to all columns. If you just want one to fill the remaining space just apply it to that column with the rest being "Auto" or a specific width.

You can also use Width="0.25*" (for example) if you want the column to take up 1/4 of the available width.

like image 107
ChrisF Avatar answered Oct 08 '22 08:10

ChrisF


Make sure your DataGrid has Width set to something like {Binding Path=ActualWidth, RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=Window,AncestorLevel=1}}.

Like that, your setting of Width="*" attribute on DataGrid.Columns/DataGridXXXXColumn elements should work.

like image 45
MStack Avatar answered Oct 08 '22 09:10

MStack


As noted, the ColumnWidth="*" worked perfectly well for a DataGrid in XAML.

I used it in this context:

<DataGrid ColumnWidth="*" ItemsSource="{Binding AllFolders, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
like image 27
PeripherySilence Avatar answered Oct 08 '22 10:10

PeripherySilence


Set the columns Width property to be a proportional width such as *

like image 34
devdigital Avatar answered Oct 08 '22 10:10

devdigital


My 2 Cent ->

Very late to party

DataGrid -> Column -> Width="*" only work if DataGrid parent container has fix width.

example : i put the DataGrid in Grid -> Column whose width="Auto" then Width="*" in DataGrid does not work but if you set Grid -> Column Width="450" mean fixed then it work fine

like image 45
Muhammad Waqas Aziz Avatar answered Oct 08 '22 10:10

Muhammad Waqas Aziz


Another spin on the same theme:

protected void OnWindowSizeChanged(object sender, SizeChangedEventArgs e)
{
    dataGrid.Width = e.NewSize.Width - (e.NewSize.Width * .1);

    foreach (var column in dataGrid.Columns)
    {
       column.Width = dataGrid.Width / dataGrid.Columns.Count;
    }
 }
like image 33
Steve Avatar answered Oct 08 '22 10:10

Steve


I added a HorizontalAlignment="Center" (The default is "Strech") and it solved my problem because it made the datagrid only as wide as needed. (Removed the datagrid's Width setting if you have one.)

enter image description here

like image 24
JBrooks Avatar answered Oct 08 '22 10:10

JBrooks


This will not expand the last column of the xaml grid to take the remaining space if AutoGeneratedColumns="True".

like image 32
pramod Avatar answered Oct 08 '22 09:10

pramod