ScrollViewer's ScrollBar Doesn't Appear

Question

ScrollViewer's ScrollBar Doesn't Appear

RogerSchlueter-7899 1,446

There are two very simple wpf Windows involved in this problem. The first is a UserControl which contains just one TreeView wrapped in a ScrollViewer:

<UserControl
    x:Class="Categories"
    ....
    <ScrollViewer
        HorizontalScrollBarVisibility="Disabled"
        VerticalScrollBarVisibility="Auto">
        <TreeView
            x:Name="trvCategories"
            ....
        </TreeView>
    </ScrollViewer>
</UserControl>

I use this UserControl in three Windows; in two it works just fine but in the third the vertical ScrollBar does not appear. Here is the XAML:

<Window>
    ....
    xmlns:self="clr-namespace:PIM"
    <StackPanel>
        <ToolBarTray>
            <ToolBar>
                <Button
                    Click="ExitMe"
                    Content="Exit"
                    FontWeight="SemiBold" />
            </ToolBar>
        </ToolBarTray>
        <self:Categories />   <---- Here is the UserControl
    </StackPanel>
</Window>

I've tried numerous ideas but none work. for example, setting

    VerticalScrollBarVisibility="Visioble"

in the UserControl shows a disabled ScrollBar. Setting the SizeToContent property of the containing Window just makes the Window as high as the TreeView no matter which value I set it to. Putting the UserControl inside a Grid on the containing Window makes no difference. Binding the Height or MaxHeight of the ScrollViewer to the ActualHeight of the containing Window makes the TreeView disappear entirely. Neither the suggested answers here or in a wider, independent search have helped. What am I missing?

Viorel 122.6K Reputation points

2023-04-21T03:47:38.5466667+00:00

What is the difference between windows?
Hui Liu-MSFT 48,676 Reputation points Microsoft External Staff

2023-04-21T04:08:17.26+00:00

Hi,@Roger Schlueter. What is the height of your UserControl? Or are there different heights in the first two Windows and the third? Is it possible to show different result Windows complete code and screenshots of their results?
RogerSchlueter-7899 1,446 Reputation points

2023-04-21T17:00:15.58+00:00

Viorel, the first is a UserControl, the second a regular wpf Window.

RogerSchlueter-7899 1,446

Hui Liu, the UserControl has these settings:

d:DesignHeight="250" d:DesignWidth="200"

There are different heights in every wpf Window that I drop the UserControl unto. The Window XAML that I showed in the second code block is complete (minus the namespace declarations). The following is the UserControl (again minus the namespace declarations):

<UserControl
	x:Class="Categories"
	x:Name="Categories"
	....
	d:DesignHeight="250" d:DesignWidth="200">
	<UserControl.Resources>
		<CollectionViewSource x:Key="cvsCategories" />
		<Style
			TargetType="{x:Type TreeViewItem}">
			<EventSetter Event="MouseLeftButtonUp" Handler="SelectCategory" />
			<EventSetter Event="PreviewMouseRightButtonUp" Handler="OpenContextMenu" />
			<Setter Property="HorizontalContentAlignment" Value="Left" />
			<Setter Property="IsExpanded" Value="True" />
			<Setter Property="VerticalContentAlignment" Value="Top" />
		</Style>
	</UserControl.Resources>
	<ScrollViewer 
		HorizontalScrollBarVisibility="Disabled"
		VerticalScrollBarVisibility="Auto">
		<TreeView
			x:Name="trvCategories"
			FontFamily="Segoe UI SemiBold"
			ItemsSource="{Binding Source={StaticResource cvsCategories}}"
			SelectedValuePath="CategoryID">
			<TreeView.ItemTemplate>
				<HierarchicalDataTemplate
					ItemsSource="{Binding Subcategories}">
					<TextBlock
						Text="{Binding Name}">
						<TextBlock.Style>
							<Style
								TargetType="TextBlock">
								<Setter Property="Foreground" Value="Black" />
								<Style.Triggers>
									<DataTrigger Binding="{Binding Path=SubCategoryCount}" Value="0">
										<Setter Property="Foreground" Value="Blue" />
									</DataTrigger>
								</Style.Triggers>
							</Style>
						</TextBlock.Style>
					</TextBlock>
				</HierarchicalDataTemplate>
			</TreeView.ItemTemplate>
		</TreeView>
	</ScrollViewer>
</UserControl>

Finally, here is my Category class

Public Class Category

	Public Property CategoryID() As Integer
	Public Property Name() As String
	Public Property ParentID() As Integer
	Public Property Subcategories() As ObservableCollection(Of Category)
	Public Property Usage As Integer

    Public ReadOnly Property SubCategoryCount As Integer

End Class

Accepted answer

0 additional answers

Your answer

Viorel 122.6K Reputation points

2023-04-21T03:47:38.5466667+00:00

What is the difference between windows?
Hui Liu-MSFT 48,676 Reputation points Microsoft External Staff

2023-04-21T04:08:17.26+00:00

Hi,@Roger Schlueter. What is the height of your UserControl? Or are there different heights in the first two Windows and the third? Is it possible to show different result Windows complete code and screenshots of their results?
RogerSchlueter-7899 1,446 Reputation points

2023-04-21T17:00:15.58+00:00

Viorel, the first is a UserControl, the second a regular wpf Window.

Answer 1

Hui Liu-MSFT 48,676 Microsoft External Staff

Hi,@Roger Schlueter. If you don't set the height, it won't show the ScrollBar because the height is enough. You set up VerticalScrollBarVisibility = "Auo" in the UserControl. It will display the VerticalScrollBar based on the height of the control. I set the height to 100 in the window and it will display the following.

 <self:Categories Height="100" />

User's image

When I set VerticalScrollBarVisibility="Visible" in UserControl, the result is shown as follows. <self:Categories />

User's image

If the response is helpful, please click "Accept Answer" and upvote it. Note: Please follow the steps in our [documentation][5] to enable e-mail notifications if you want to receive the related email notification for this thread.

RogerSchlueter-7899 1,446 Reputation points

2023-04-26T23:42:51.19+00:00
Hui Liu got me on the path to the final answer. Rather than set the Height to a set value, I did a binding of the Height of the UserControl to the ActualHeght of the containi8ng Window:

<self:Categories Height="{Binding ElementName= MainCategories, Path=ActualHeight}" />

where MainCategories is the Window that contains the UserControl.

Share via

ScrollViewer's ScrollBar Doesn't Appear

0 additional answers

Your answer