We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

How to show scrollbars automatically

Hi,

if I got an SfTreeNavigator, how to I tell it to automatically show/hide scrollbars as needed? (For example, if the number of items is too big to fit on the currently allocated space.)
It seems the control itself got no property to control this. Would I need to add something to my ItemTemplate or tot the HierarchicalDataTemplate?

My XAML looks like this:

<navigation:SfTreeNavigator NavigationMode="Extended" ItemsSource="{Binding Nodes}">
    <navigation:SfTreeNavigator.ItemTemplate>
       <primitives:HierarchicalDataTemplate ItemsSource="{Binding Children}">
          <DataTemplate>
               <TextBlock Text="{Binding Name}" />
          </DataTemplate>
       </primitives:HierarchicalDataTemplate>
    </navigation:SfTreeNavigator.ItemTemplate>
</navigation:SfTreeNavigator>

Many thanks (and a big thumbsup for making your library available without cost for small-timers like me!),
Max Hajek, Bratislava

5 Replies

SK Senthil Kumaran Rajan Syncfusion Team December 12, 2016 05:58 AM UTC

Hi Markus, 
 
Thank you for contacting Syncfusion support. 
 
We were analyzed your query "How to show scrollbars automatically" in SfTreeNavigator control and have prepared a sample based on your requirement. In this sample we have edited the template  of  the TreeNavigatorItemsHost to show or hide  ScrollBar visibility. Please download the sample from the below link. 
 
 
Could you check with the above solution and let us know whether it is helpful? If not please share some additional details about the reported requirement. It will be help for us to analyze and provide you a prompt solution at the earliest.   
 
Regards, 
Senthil 



MH Markus Hajek December 13, 2016 04:31 PM UTC

Hi, 
thanks for your reply.

Your sample works just fine. But when I adapt my XAML accordingly, the scrollbars still don't appear. Any idea what I am missing?
Here's my XAML:


<UserControl
    x:Class="November.Audite.Player.Views.FileSystemLibraryView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:November.Audite.Player.Views"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:navigation="using:Syncfusion.UI.Xaml.Controls.Navigation"
    xmlns:primitives="using:Syncfusion.UI.Xaml.Primitives"

    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">
    <UserControl.Resources>
        <Style TargetType="navigation:TreeNavigatorItemsHost">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="navigation:TreeNavigatorItemsHost">
                        <Grid>
                            <Border
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                                <Grid>
                                    <ScrollViewer VerticalScrollBarVisibility="Auto">
                                        <ItemsPresenter Grid.Row="1"/>
                                    </ScrollViewer>
                                </Grid>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>
    <StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <navigation:SfTreeNavigator NavigationMode="Extended" ItemsSource="{Binding Nodes}" ScrollViewer.VerticalScrollBarVisibility="Hidden">
            <navigation:SfTreeNavigator.ItemTemplate>
                <primitives:HierarchicalDataTemplate ItemsSource="{Binding Children}">
                    <DataTemplate>
                        <TextBlock Text="{Binding Name}" />
                    </DataTemplate>
                </primitives:HierarchicalDataTemplate>
            </navigation:SfTreeNavigator.ItemTemplate>
        </navigation:SfTreeNavigator>
    </StackPanel>
</UserControl>

Also, as another question, how can I avoid the scrollbars hiding the small arrows on the right side? (They do that in your sample.)

Many thanks,
Max Hajek


MH Markus Hajek December 13, 2016 04:33 PM UTC

(I should add that I'm using Caliburn.Micro with its binding conventions which is why you don't see no datacontext in the XAML)


MH Markus Hajek December 13, 2016 09:26 PM UTC

I've found the solution - the problem was that the SfTreeNavigator was nested inside a StackPanel. Once I replaced StackPanel with Grid, the scrollbars appear just fine.

Which leaves me now only with my second question, how to prevent the scrollbar from hiding the little arrows on the right?

Many thanks,
Max Hajek


MS Marimuthu Sivalingam Syncfusion Team December 14, 2016 06:49 AM UTC

Hi Max,

Thanks for your Patience

We have analyzed your "How to prevent the scrollbar hiding a little arrows on the right?" and have prepared a sample which is tries meet your requirement. In this sample we have edited the template of SfTreeNavigatorItem. Please download the sample from below link.

Sample: 127823_SfTreeNavigator
 

Could you check with the above solution and let us know whether it is helpful? If not please share some additional details about the reported requirement. It will be help for us to analyze and provide you a prompt solution at the earliest.

Regards,
Marimuthu S. 


Loader.
Live Chat Icon For mobile
Up arrow icon