I'm trying to figure out how to make my ContentControl
to correctly scroll Horizontally (Vertically its fine at the moment). By correctly i mean i would like to see the content to stretch (expand infinitely) while having minimum sizes to which a scrollbar would appear in order for the content not to overflow behind the ContentControl
's area, so here's a quick introduction:
The main window is structured in this way:
- Grid (2 columns of .3* and .7*)
- Border
- Grid (7 rows, one set to * where ContentControl is)
- ScrollViewer with StackPanel (purely for test) wrapping a ContentControl that has Auto Width
- Grid (7 rows, one set to * where ContentControl is)
- Border
ContentControl
's Template:
- Grid (Width set to UserControl's ActualWidth, 6 rows with one set to Auto where ItemsControl go
- ItemsControl that describes an ItemTemplate of a type DataTemplate which contains a Grid inside of which i have a DataGrid
The actual problem is that the ContentControl grows as you resize the window, but does not shrink with window resize.
Main View XAML (truncated for clarity):
<ScrollViewer Grid.Row="5" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
<ContentControl Grid.Row="5" Background="Transparent" Focusable="False" Margin="0,5,0,0"
Content="{Binding CurrentSection}" ContentTemplateSelector="{StaticResource templateSelector}/>
</ScrollViewer>
Tempate XAML (truncated for clarity):
<Grid>
...
<ItemsControl Grid.Row="4" ItemsSource="{Binding Data.QualifyingDistributionsDividends}" x:Name="QualifyingItemsControl">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid x:Name="DTLayoutGrid">
...
<Grid Grid.Row="1" x:Name="DataLayout" Width="{Binding ElementName=DTLayoutGrid, Path=ActualWidth}" HorizontalAlignment="Stretch">
...
<DataGrid Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="8" HorizontalScrollBarVisibility="Disabled"
ItemsSource="{Binding Payments}" Style="{StaticResource DataGridStyle}" CellStyle="{StaticResource DataGridNormalCellStyle}">
</DataGrid>
</Grid>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
So what happens? Datagrid
assumes width of the entire DataTemplate
(well its underlying controls that are set to be DataTemplates
size, then * column assumes all empty space. When you try to resize the entire window that holds this code it will grow correctly, expanding the * column but it seems shrinking is not "registered" and it keeps the size you expanded it to, applies a scrollbar over that and forgets about it.
What i've tried so far was to set widths for ItemsControl
, its underlying parents like Grid etc, also setting size to ContentControl
, StackPanel
, ScrollViewer
and parent Grid of that.
I've also tried using scrollviewer
s directly on the Datagrid
which produces an epileptic "1 million resizes a second" scenario. I've also played around with HorizontalAlignments
Under certain situations i DID managed to get the horizontal scrollbar to appear correctly but unfortunately that makes my DataGrid
's * column to assume Auto
Width rather then Star
so DataGrid
starts having an empty area to the right (unacceptable unfortunately…)
I understand that in order for horizontal scrollbar to work the parent or child of the scrollviewer needs Width set, i guess i can't work out where exactly do i need to restrict it. DataGrids NEED to infinitely expand with the main window while having first column fill all the available space.
Do let me now if you need more information on this and I will gladly answer.
Best Answer
It seems to me that this is just another case of the dreaded
StackPanel
layout problem. This problem comes up again and again and I confess that I had the very same problem when I started learning WPF. TheStackPanel
does not take the available size of its parent into consideration whereas otherPanel
s such as aDockPanel
or aGrid
(yes, that's actually aPanel
too) do.It's explained in the How to: Choose Between StackPanel and DockPanel page on MSDN:
The
StackPanel
should only really be used to align a number of items, such asButton
s or other controls in a straight line where available space is not a concern. So anyway, the solution should be simple... just remove theStackPanel
from theScrollViewer
. It doesn't appear to serve any purpose there anyway.UPDATE >>>
After looking again, it seems as though you're saying that the problem is inside the
DataTemplate
, right? You might be able to fix that by setting theItemsControl.HorizontalContentAlignment
property toStretch
. That would ensure that each item remains within the boundary of theItemsControl
.I'd also remove your
Binding
on theGrid.Width
as you don't need it... a childGrid
will take up the full space of a parentGrid
by default. If these ideas don't work, just simplify your problem. Seriously, if you follow the advise in the linked page from the Help Center that I gave you in the comments, then you'll either fix the problem, or be able to come back here and provide a complete, but concise example that we could test.