XAML Datagrid columns of * width automatically shrinks to minimum width

Question

I have a datagrid in XAML with 4 separate columns, all with * for their width. All seems fine in Visual Studio with the control, everything looks good in the design view.

When I run my program however, all my columns shrink down to just 5 or so pixels of width, and nothing, not even clicking and dragging on the borders of the columns to resize them will change their width. Occasionally when I run my program I even see the columns start at their normal width, and then shrink down to their minimum size one pixel at a time over several seconds.

Upon some investigation, it seems that the issue is somehow related to using * as the Width of the columns, as if I change all the columns to Auto or a fixed width everything works fine in that column for some reason.

Below is the XAML code I'm having trouble with.

<GroupBox Header="header text" Margin="4"
          Visibility="{Binding BindTarget, Converter={StaticResource BooleanToVisibilityConverter}}">
    <DataGrid Margin="4" ItemsSource="{Binding}" DataContext="{Binding DataContextTarget}"
              AutoGenerateColumns="False" MaxHeight="250" CanUserDeleteRows="False"
              EnableRowVirtualization="False" CanUserSortColumns="True" CanUserResizeColumns="True">
        <DataGrid.Columns>
            <DataGridTemplateColumn Width="0.8*">
        <DataGridTemplateColumn.Header>
        <TextBlock Text="ResourceHeader1" TextWrapping="Wrap" />
        </DataGridTemplateColumn.Header>

                <DataGridTemplateColumn.CellTemplate>
    <DataTemplate>
        <CheckBox
            IsChecked="{Binding IsChecked, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
            IsEnabled="True" />
    </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>
            <DataGridTemplateColumn Width="*" IsReadOnly="True">
                <DataGridTemplateColumn.Header>
    <TextBlock Text="Name" TextWrapping="Wrap" />
                </DataGridTemplateColumn.Header>
                <DataGridTemplateColumn.CellTemplate>
    <DataTemplate>
        <TextBlock Text="{Binding FieldName1}" IsEnabled="True" />
    </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>
            <DataGridTemplateColumn Width="*" IsReadOnly="True">
                <DataGridTemplateColumn.Header>
    <TextBlock Text="Model" TextWrapping="Wrap" />
                </DataGridTemplateColumn.Header>
                <DataGridTemplateColumn.CellTemplate>
    <DataTemplate>
        <TextBlock Text="{Binding FieldName2}" IsEnabled="True" />
    </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>
            <DataGridTemplateColumn Width="*" IsReadOnly="True">
                <DataGridTemplateColumn.Header>
    <TextBlock Text="Manufacturer" TextWrapping="Wrap" />
                </DataGridTemplateColumn.Header>
                <DataGridTemplateColumn.CellTemplate>
    <DataTemplate>
        <TextBlock Text="{Binding FieldName3}" IsEnabled="True" />
    </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>
        </DataGrid.Columns>
    </DataGrid>
</GroupBox>

As you can see in the XAML, I even enabled letting users manually resize the column width in the datagrid, but that doesn't make a difference, the columns still refuse to be resized if I set their width to *.

Any ideas what's causing this bizarre issue?

I copied this into a new WPF window and didn't have any issues with the column spacing. — Travis, Oct 19 '16 at 02:36
I've tried doing exactly that, it may show up just fine in the XAML preview, but any new control/window I paste my datagrid XAML into has the same issue, even if it's the only thing in the control. I've tried copy and pasting my datagrid into other existing windows in my project, and the same thing happens there to. I'm really scratching my head trying to figure this thing out. — ShadowLiberal, Oct 19 '16 at 14:40

Owen Johnson · Answer 1 · 2016-10-19T20:51:13.333

The datagrid is not in a panel, so when it measures itself, it will take up the smallest amount of space it can while still drawing its children. Since your columns desire *, they each get a proportion of that minimum space. The default desired size for things with width of * is the greater of 0 and MinWidth, so your columns get scrunched to their minimum width. If you put the DataGrid into a Grid or other panel, the DataGrid would fill the panel's space, and each column would get proportional amounts of the DataGrid's space. This would also happen if you set a Width or MinWidth on the DataGrid.

When you set the column widths to auto, they will take up the space they need, and when the datagrid measures itself, it will include all of the columns' desired sizes as part of its own desired size. The datagrid will grow to accommodate the columns.

score 0 · Answer 2 · edited May 23 '17 at 11:48

After doing some more searching on StackOverflow I've found a solution to my issue, though I still have no clue what caused my issue in the first place.

Nested Scroll Areas

See Daniel's answer in the above linked thread, wrapping my Datagrid in his RestrictDesiredSize class and giving it a minimum height and width like below fixes my issue.

<local:RestrictDesiredSize MinHeight="50" MinWidth="200">
    <!-- Datagrid XAML goes here -->
</local:RestrictDesiredSize>

XAML Datagrid columns of * width automatically shrinks to minimum width

2 Answers2