User control inside ScrollViewer doesn't scroll in WPF
Solution 1
You need to set it like this. I changed the RowDefinition for Row0 to Height="*" So it will use as much space it can. Then changed place between the ScrollViewer and the TabControl. So the TabControl is a content of the ScrollViewer.
<Window>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<ScrollViewer HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto"
Grid.Column="0" Grid.Row="0">
<TabControl HorizontalAlignment="Stretch" Margin="0" VerticalAlignment="Stretch"
Height="Auto" Width="Auto">
<TabItem Header="TEST">
<my:MY_USER_CONTROL x:Name="myUserControl"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
ScrollViewer.CanContentScroll="True" />
</TabItem>
</TabControl>
</ScrollViewer>
<Button Grid.Column="0" Grid.Row="2" >a button</Button>
<WrapPanel Grid.Column="0" Grid.Row="3" >
</WrapPanel>
</Grid>
Solution 2
When you set CanContentScroll to True, the ScrollViewer assumes that your content implements IScrollInfo (which i guess doesn´t).
Try setting CanContentScroll on the ScrollViewer to false, this allows the content to use as much space as it wants and the ScrollViewer takes care of scrolling.
However, depending on the size, number of visuals etc. of your control, this might become a performance issue (e.g. no UI Virtualization when CanContentScroll is set to False).
Related videos on Youtube
Onur
Updated on March 01, 2020Comments
-
Onur about 4 years
I have the following code (abbreviated) in my main window:
Although I set both scroll bar visibilities and
CanContentScroll
properties it doesn't scroll. I assume it has to do with my user control.<Window> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition/> </Grid.ColumnDefinitions> <TabControl Grid.Column="0" Grid.Row="0" HorizontalAlignment="Stretch" Margin="0" VerticalAlignment="Stretch" Height="Auto" Width="Auto"> <TabItem Header="TEST"> <ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"> <my:MY_USER_CONTROL x:Name="myUserControl" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ScrollViewer.CanContentScroll="True" /> </ScrollViewer> </TabItem> </TabControl> <Button Grid.Column="0" Grid.Row="2" >a button</Button> <WrapPanel Grid.Column="0" Grid.Row="3" > </WrapPanel> </Grid> </Window>
Abbreviated structure of my user control:
<UserControl> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="183*" /> <ColumnDefinition Width="117*" /> </Grid.ColumnDefinitions> <TreeView ItemsSource="{Binding Children}" Grid.ColumnSpan="2"> <TreeView.ItemContainerStyle> <Style TargetType="{x:Type TreeViewItem}"> <Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}" /> <Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}" /> <Setter Property="FontWeight" Value="Normal" /> <Style.Triggers> <Trigger Property="IsSelected" Value="True"> <Setter Property="FontWeight" Value="Bold" /> </Trigger> </Style.Triggers> </Style> </TreeView.ItemContainerStyle> <TreeView.ItemTemplate> <HierarchicalDataTemplate ItemsSource="{Binding Children}" > <Grid> <Grid.ColumnDefinitions> <ColumnDefinition></ColumnDefinition> <ColumnDefinition></ColumnDefinition> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition></RowDefinition> </Grid.RowDefinitions> <Grid.Children> <TextBlock Background="LightGray" Padding="2" Margin="2" Grid.Row="0" Grid.Column="0" Text="{Binding Name}" /> <TextBlock Padding="2" Margin="2" Grid.Row="0" Grid.Column="1" Text="{Binding Content}" /> </Grid.Children> </Grid> </HierarchicalDataTemplate> </TreeView.ItemTemplate> </TreeView> </Grid> </UserControl>
-
Onur about 11 yearsSetting
<my:MY_USER_CONTROL>
's height to a fixed value didn't really help. The control has now a fixed height but it cannot be scrolled. Setting theScrollViewer
's height to a fixed value allowed the content to be scrolled but I'd really like theScrollViewer
to take the available space. -
Onur about 11 yearsSetting
CanContentScroll
tofalse
didn't help. I assume now the reason is that theScrollViewer
itself thinks it can use up unlimited space and therefore doesn't need to scroll the content since it fits in the unlimited largeScrollViewer
. This is because settings theScrollViewer
to a defined Height/Width enables scrolling. But I don't want to limit the size of theScollViewer
which should use all available space. -
hijack about 11 yearsTry change your RowDefinition for Row0 to; <RowDefinition Height="*" />
-
hijack about 11 yearsDone. Glad it worked. I struggled with the scrollviewer aswell recently.
-
Onur about 11 yearsIt also works if the
ScrollViewer
is inside theTabItem
as in my original version. The only point is not allowing theScrollViewer
to use up as much space as it want's (as was the case by settings height to auto)