User control inside ScrollViewer doesn't scroll in WPF

Question

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>

hijack · Accepted Answer · 2013-02-28 13:34:40Z

6

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>

edited Feb 28, 2013 at 13:34

answered Feb 28, 2013 at 13:07

hijack

2632 gold badges3 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Onur Over a year ago

Only works if I also set the Height for the ScrollViewer. But setting the ScrollViewer's height is not what I want.

hijack Over a year ago

Try change your RowDefinition for Row0 to; <RowDefinition Height="*" />

hijack Over a year ago

Done. Glad it worked. I struggled with the scrollviewer aswell recently.

Onur Over a year ago

It also works if the ScrollViewer is inside the TabItem as in my original version. The only point is not allowing the ScrollViewer to use up as much space as it want's (as was the case by settings height to auto)

Joachim Kerschbaumer · Accepted Answer · 2013-02-28 12:38:09Z

1

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).

answered Feb 28, 2013 at 12:38

Joachim Kerschbaumer

9,8917 gold badges52 silver badges84 bronze badges

1 Comment

Onur Over a year ago

Setting CanContentScroll to false didn't help. I assume now the reason is that the ScrollViewer itself thinks it can use up unlimited space and therefore doesn't need to scroll the content since it fits in the unlimited large ScrollViewer. This is because settings the ScrollViewer to a defined Height/Width enables scrolling. But I don't want to limit the size of the ScollViewer which should use all available space.

Andy · Accepted Answer · 2013-02-28 12:24:53Z

0

Looks like the content inside your scrollviewer is the same size as the viewer so there is nothing to scroll?

if you do something like

<ScrollViewer HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
    <Grid Background="Red">

    </Grid>
</ScrollViewer>

Then the grid is the same size as the scroll viewer and will never allow scrolling, if you set the height of the grid to more than the viewer can display you'll get a scroller.

<ScrollViewer HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
    <Grid Background="Red" Height="500">

    </Grid>
</ScrollViewer>

answered Feb 28, 2013 at 12:24

Andy

6,4761 gold badge35 silver badges38 bronze badges

1 Comment

Onur Over a year ago

Setting <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 the ScrollViewer's height to a fixed value allowed the content to be scrolled but I'd really like the ScrollViewer to take the available space.

Collectives™ on Stack Overflow

User control inside ScrollViewer doesn't scroll in WPF

3 Answers 3

4 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related