CODEWITHSUNDEEP
c#wpfxamldatagridwpf-controls
Purplegoldfish
Purplegoldfish

Reputation: 5284

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?

Upvotes: 142

Views: 145725

Answers (12)

Alper
Alper

Reputation: 11

To stretch a control across multiple columns, just set the Column span to match the number of columns defined for the grid.

Grid.ColumnSpan="12"

Upvotes: 0

Vintage Coder
Vintage Coder

Reputation: 501

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="*" >

Upvotes: 0

Muhammad Waqas Aziz
Muhammad Waqas Aziz

Reputation: 851

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

Upvotes: 11

Steve
Steve

Reputation: 579

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

Upvotes: 3

PeripherySilence
PeripherySilence

Reputation: 174

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

Upvotes: 15

MStack
MStack

Reputation: 328

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.

Upvotes: 21

Exel Gamboa
Exel Gamboa

Reputation: 946

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.

Upvotes: 0

JBrooks
JBrooks

Reputation: 10013

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

Upvotes: 3

alkk
alkk

Reputation: 331

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

Upvotes: 0

pramod
pramod

Reputation: 11

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

Upvotes: 1

devdigital
devdigital

Reputation: 34349

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

Upvotes: 7

ChrisF
ChrisF

Reputation: 137108

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.

Upvotes: 293

Related Questions