WPF ScrollViewer around DataGrid affects column width
Solution 1
Yeah, I had this problem a while ago, I resorted to a workaround, I will post here just incase its useful
<ScrollViewer HorizontalScrollBarVisibility="Auto">
<Grid x:Name="grid" MinWidth="200">
<DataGrid Width="{Binding ElementName=grid, Path=ActualWidth}">
<DataGrid.Columns>
<DataGridCheckBoxColumn Header="Column A" Width="1*"/>
<DataGridCheckBoxColumn Header="Column B" Width="1*"/>
</DataGrid.Columns>
</DataGrid>
</Grid>
</ScrollViewer>
The trick was to give the DataGrid
a width, in this case I bound back to the containing element
Or if you don't use the HorizontalScrollBar
you can disable it, this will allow the ScrollViewer
to calculate a width allowing the DataGrid to calculate a width.
Solution 2
I experienced the same thing last week.
Typically, this problem occurs when you have the following elements :
- A
DataGrid
with undefined width placed inside aScrollViewer
with theHorizontalScrollBarVisibility
property set toAuto
- At least one
DataGridColumn
has an unlimited/undefined width (e.g :Width="*"
)
Actually, the solution depends on your needs :
- Either you want your
DataGridColumns
to take all the available space of yourDataGrid
when the Window is showing (even if there's no displayed data) : in this case, sa_ddam213's answer can help you to cope with. - Or you don't mind having some blank spaces between your last column and the
DataGrid
right border on Window's first show.
For the last option, you just need to set fixed widths for your DataGridColumns
(or just don't define it if you don't want to, this is not very important as columns can be easily resized by the user through a double-click). In this context, your DataGrid
can be defined without a width.
Here is an example :
<ScrollViewer HorizontalScrollBarVisibility="Auto">
<Grid x:Name="grid" MinWidth="200">
<DataGrid>
<DataGrid.Columns>
<DataGridCheckBoxColumn Header="Column A" Width="100"/>
<DataGridCheckBoxColumn Header="Column B" />
</DataGrid.Columns>
</DataGrid>
</Grid>
</ScrollViewer>
By this way, if a column content runs over the container after a column auto-resizing, a horizontal scroll bar will appear.
Related videos on Youtube
Comments
-
Jay over 1 year
I have a problem with a ScrollViewer that I use to scroll a user control that contains a data grid. Without the scroll viewer the columns fill the data grid as I want but when adding a scroll viewer the columns shrink to ~15px. I was able to simplify my layout and can still reproduce this behaviour.
When binding the datagrid width to another control the columns have their normal with, but that has unsuprisingly the same effect as a fixed width on the datagrid. I guess I'm not the first one who has this problem. How can I work around this behaviour to have my grid adjusting its size to the available space and give it's columns a propotional width?
With scrollviewer: and without:
<Window x:Class="GridTest.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525"> <ScrollViewer HorizontalScrollBarVisibility="Auto"> <Grid MinWidth="200"> <DataGrid Margin="0" AutoGenerateColumns="False"> <DataGrid.Columns> <DataGridCheckBoxColumn Header="Column A" Width="*"/> <DataGridCheckBoxColumn Header="Column B" Width="*"/> </DataGrid.Columns> </DataGrid> </Grid> </ScrollViewer>
-
ninja hedgehog over 10 yearsHave you tried this: <DataGrid HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" ColumnWidth="*" />
-
Jay over 10 yearsYes, same result unfortunately.
-
ninja hedgehog over 10 yearsRemove HorizontalScrollBarVisibility="Auto" and try it out.
-
-
mardok over 10 yearsGrid is resized when I resize window width but only when width is increased. Any idea how to resize grid when width of window is decreased too?
-
Hardryv almost 10 yearsThank you for this fine example of how to fix a bit of XAML using XAML. ^^
-
juFo over 9 yearsThis proposed solution crashes VS2010 :-) Looks like a bug
-
Bradley Uffner over 9 years@mardok I fixed your problem by binding to the
ScrollContentPresenter
's ActualWidth using a RelativeSource binding. -
Roemer about 8 yearsAs already mentioned, it works only when the width is increased. The way I could bring it to work is with @BradleyUffner 's help:
<Grid x:Name="grid" MinWidth="400" Width="{Binding Path=ActualWidth, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ScrollContentPresenter}}}"> <DataGrid> <DataGrid.Columns> <DataGridTextColumn Header="Test" Width="*"></DataGridTextColumn> <DataGridTextColumn Header="Test2" Width="*"></DataGridTextColumn> <DataGridTextColumn Header="Test3" Width="*"></DataGridTextColumn> </DataGrid.Columns> </DataGrid> </Grid>
-
Rudi over 4 yearsSetting HorizontalScrollBarVisibility of the ScrollViewer to None worked for me.