Articles in this section
Category / Section

How to set the Scroll Indicator Mode for ScrollViewer same as that of SfDataGrid when using touch and mouse interactions?

6 mins read

In WinRT, the Scroll Indicator Mode of ScrollViewer, that is, the size of the ScrollBar, differs while scrolling by touch or by mouse and it is the default behavior of ScrollViewer. You can see the same behavior in SfDataGrid while scrolling. By default, ScrollViewer contains separate VisualStates for touch and mouse to set the ScrollingIndicatorMode.

It is possible to change the scroll indicator the same way, when using touch or mouse, by customizing the default template of ScrollViewer as shown in the following code example.

XAML

<Page.Resources>
    <!--  ScrollViewer ControlTemplate  -->
    <Style TargetType="ScrollViewer">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ScrollViewer">
                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="ScrollingIndicatorStates">
                                <!--  Visual State for Touch Indicator  -->
                                <VisualState x:Name="TouchIndicator">
                                    <Storyboard>
                                        <FadeOutThemeAnimation TargetName="ScrollBarSeparator" />
                                        <ObjectAnimationUsingKeyFrames Duration="0"                                                                       Storyboard.TargetName="VerticalScrollBar"                                                                        Storyboard.TargetProperty="IndicatorMode">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <!--  Customize scroll indication of  Vertical scroll bar in TouchMode  -->                                                    <ScrollingIndicatorMode>TouchIndicator</ScrollingIndicatorMode>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Duration="0"                                                                       Storyboard.TargetName="HorizontalScrollBar"                                                                       Storyboard.TargetProperty="IndicatorMode">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <!--  Customize scroll indication of  horizontal scroll bar in TouchMode  -->                                                    <ScrollingIndicatorMode>TouchIndicator</ScrollingIndicatorMode>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <!--  Visual State for Mouse Indicator  -->
                                <VisualState x:Name="MouseIndicator">
                                    <Storyboard>
                                        <FadeInThemeAnimation TargetName="ScrollBarSeparator" />
                                        <ObjectAnimationUsingKeyFrames Duration="0"                                                                        Storyboard.TargetName="VerticalScrollBar"                                                                        Storyboard.TargetProperty="IndicatorMode">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <!--  Customize scroll indication of  Vertical scroll bar during mouse interactions  -->                                                    <ScrollingIndicatorMode>TouchIndicator</ScrollingIndicatorMode>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Duration="0"                                                                        Storyboard.TargetName="HorizontalScrollBar"                                                                        Storyboard.TargetProperty="IndicatorMode">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <!--  Customize scroll indication of  horizontal scroll bar during mouse interactions  -->                                                    <ScrollingIndicatorMode>TouchIndicator</ScrollingIndicatorMode>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Grid Background="{TemplateBinding Background}">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
                            <ScrollContentPresenter x:Name="ScrollContentPresenter"
                                                    Grid.RowSpan="2"
                                                    Grid.ColumnSpan="2"
                                                    Margin="{TemplateBinding Padding}"
                                                    ContentTemplate="{TemplateBinding ContentTemplate}" />
                            <ScrollBar x:Name="VerticalScrollBar"
                                        Grid.Column="1"
                                        Margin="1,0,0,0"
                                        HorizontalAlignment="Right"
                                        IsTabStop="False"
                                        Maximum="{TemplateBinding ScrollableHeight}"
                                        Orientation="Vertical"
                                        ViewportSize="{TemplateBinding ViewportHeight}"
                                        Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
                                        Value="{TemplateBinding VerticalOffset}" />
                            <ScrollBar x:Name="HorizontalScrollBar"
                                        Grid.Row="1"
                                        Margin="0,1,0,0"
                                        IsTabStop="False"
                                        Maximum="{TemplateBinding ScrollableWidth}"
                                        Orientation="Horizontal"
                                        ViewportSize="{TemplateBinding ViewportWidth}"
                                        Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
                                        Value="{TemplateBinding HorizontalOffset}" />
                            <Rectangle x:Name="ScrollBarSeparator"
                                        Grid.Row="1"
                                        Grid.Column="1"
                                        Margin="1,1,0,0"
                                        Fill="Gray"
                                        Stroke="Gray"
                                        StrokeThickness="1" />
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>

In the above code example, ScrollingIndicatorMode is set as TouchIndicator for mouse interactions.

You can refer to the following sample link for customizing scroll indicator mode of ScrollViewer in SfDataGrid for both touch and mouse interactions.

Sample Link for WinRT: http://www.syncfusion.com/downloads/support/forum/119148/WinRT1866015514.zip

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied