How do I make XAML DataGridColumns fill the entire DataGrid?

Question

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?

score 288 · Accepted Answer · answered Feb 17 '11 at 12:31

288

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.

answered Feb 17 '11 at 12:31

ChrisF

134,786
31
255
325

3

and how to do similar thing if i'm using `AutoGenerateColumns="True"`? – Oleg Vazhnev Nov 21 '11 at 07:54
2

@javapowered - I'd suggest asking your own question, referencing this one. – ChrisF Nov 21 '11 at 09:02
25

@javapowered `` – Xavier May 18 '12 at 17:51
note: if for some reason, after setting ColumnWidth to "*" you dont see any effect, change the ItemsSource for a second and then undo it - the designer has to be kicked to reload the data, or else the columns may stay stale and dont notice the new style. – quetzalcoatl Aug 08 '12 at 22:01
13

@MohamedSakherSawan it does indeed work for datagrid. Both `ColumnWidth="*"` on the _DataGrid_ and `Width="*"` on the indivdual columns have the desired effect – Steve Jul 31 '15 at 08:45
1

Gives an Error Sting cannot be converted to '*' – not 0x12 Feb 05 '16 at 09:07
@Steve it works only if you set width on DataGrid itself. – Rudolf Dvoracek Nov 21 '19 at 12:45
@co2f2e did u do it inside DataGridTextColumn (Sorry it late but i see nobody replied your Error) ==> – Rock Junior Jun 18 '20 at 08:41
If the datagrid width changes, the column width will not update the layout immediately.update only when ItemsSource is added or deleted – CodingNinja Aug 20 '22 at 13:10

score 21 · Answer 2 · edited Nov 08 '17 at 23:28

21

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.

edited Nov 08 '17 at 23:28

Nicolas Straub

3,381
6
21
42

answered Aug 05 '14 at 13:14

MStack

328
3
6

score 15 · Answer 3 · edited Jan 29 '19 at 14:15

15

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}" />

edited Jan 29 '19 at 14:15

Hakan Fıstık

16,800
14
110
131

answered Nov 04 '17 at 08:05

PeripherySilence

174
1
3

score 8 · Answer 4 · answered Aug 17 '19 at 09:16

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

devdigital · Answer 5 · 2014-03-28T10:52:19.827

7

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

edited Mar 28 '14 at 10:52

answered Feb 17 '11 at 12:31

devdigital

34,151
9
98
120

score 3 · Answer 6 · edited Jan 29 '19 at 14:16

3

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;
    }
 }

edited Jan 29 '19 at 14:16

Hakan Fıstık

16,800
14
110
131

answered Nov 12 '15 at 01:45

Steve

549
6
21

score 2 · Answer 7 · answered Jun 09 '15 at 20:32

2

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

answered Jun 09 '15 at 20:32

JBrooks

9,901
2
28
32

1

Combined with the selected answer and this one it solved the problem for me. I needed to remove the width on the Datagrid itself. Thanks. – Bryan Harrington Feb 26 '19 at 16:25
In my case the accepted answer also wasn't enough. After adding `HorizontalAlignment="Center"` like you mentioned, it fixed the issue. Thanks! – Stan1k Jan 22 '21 at 18:26

score 1 · Answer 8 · edited Jul 14 '14 at 13:32

1

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

edited Jul 14 '14 at 13:32

Philip Pittle

11,821
8
59
123

answered Jul 14 '14 at 13:07

pramod

11
2

I have removed the AutoGenerateColumns, even though the columns are not divided or stretched the entire width of the data grid/screen. I have the corresponding row of the grid to be "*" and the columns width does not have any width specified (either "auto" or "some value"). But still I am having the issues, here is the xaml code of my design http://pastie.org/10085815 – G K Apr 11 '15 at 04:38

score 0 · Answer 9 · answered May 12 '15 at 05:14

0

set ONE column's width to any value, i.e. width="*"

answered May 12 '15 at 05:14

alkk

331
5
11

score 0 · Answer 10 · answered Jun 26 '15 at 15:28

For those looking for a C# workaround:

If you need for some reason to have the "AutoGeneratedColumns" enabled, one thing you can do is to specify all the columns's width except the ones you want to be auto resized (it will not take the remaining space, but it will resize to the cell's content).

Example (dgShopppingCart is my DataGrid):

dgShoppingCart.Columns[0].Visibility = Visibility.Hidden; 
dgShoppingCart.Columns[1].Header = "Qty";
dgShoppingCart.Columns[1].Width = 100;
dgShoppingCart.Columns[2].Header = "Product Name"; /*This will be resized to cell content*/
dgShoppingCart.Columns[3].Header = "Price";
dgShoppingCart.Columns[3].Width = 100;
dgShoppingCart.Columns[4].Visibility = Visibility.Hidden;

For me it works as a workaround because I needed to have the DataGrid resized when the user maximize the Window.

score 0 · Answer 11 · answered Dec 13 '21 at 09:27

It worked well for me, just put columnwidth dependency property as columnwidth="*" it will fill columns widths to datagrid width like as winforms(autosize=fill)

 <DataGrid Grid.Row="0" x:Name="dg1" VerticalAlignment="Top" AutoGenerateColumns="False" Margin="0,0,-6,0" Width="1520" Height="700"  CanUserAddRows="True" 
        
        CanUserDeleteRows="True" ItemsSource="{Binding EmployeeData}" RowDetailsVisibilityMode="Visible" HorizontalGridLinesBrush="DarkBlue" VerticalGridLinesBrush="DarkGreen" ColumnWidth="*" >

How do I make XAML DataGridColumns fill the entire DataGrid?

11 Answers11

Linked