How to show scrollbars automatically

[Markus Hajek]

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

[Senthil Kumaran Rajan]

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. 

 

Sample: http://www.syncfusion.com/downloads/support/forum/127823/ze/SfTreeNavigator-1931799824  

 

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 

[Markus Hajek]

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

[Markus Hajek]

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

[Markus Hajek]

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

[Marimuthu Sivalingam]

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.