locked
enable scrollbar dragging for touch input RRS feed

  • Question

  • In any listview or gridview, the scrollbar changes visibility when touch input is used, and shows a classic scrollbar for mouse input. 

    For my project, I want to enable the classic scrollbar for touch input, so the user can pan for small increments and use tap&drag the scrollbar's thumb just like the classic scrollbar. The problem is that the scrollbar does not handle events from touch input.

    To sample this behavior, use this as your scrollbar template. It sets the visibility of the classic scrollbar to visible and removes the fade out animation from 'touchindicator' or 'noindicator' states. 

            <Style x:Key="ScrollBarStyle1" TargetType="ScrollBar">
                <Setter Property="MinWidth" Value="17"/>
                <Setter Property="MinHeight" Value="17"/>
                <Setter Property="Background" Value="Transparent"/>
                <Setter Property="Foreground" Value="Transparent"/>
                <Setter Property="BorderBrush" Value="Transparent"/>
                <Setter Property="IsTabStop" Value="False"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ScrollBar">
                            <Grid x:Name="Root">
                                <Grid.Resources>
                                    <ControlTemplate x:Key="RepeatButtonTemplate" TargetType="RepeatButton">
                                        <Grid x:Name="Root" Background="Transparent">
                                            <VisualStateManager.VisualStateGroups>
                                                <VisualStateGroup x:Name="CommonStates">
                                                    <VisualState x:Name="Normal"/>
                                                </VisualStateGroup>
                                            </VisualStateManager.VisualStateGroups>
                                        </Grid>
                                    </ControlTemplate>
                                    <ControlTemplate x:Key="HorizontalIncrementTemplate" TargetType="RepeatButton">
                                        <Grid x:Name="Root">
                                            <VisualStateManager.VisualStateGroups>
                                                <VisualStateGroup x:Name="CommonStates">
                                                    <VisualState x:Name="Normal"/>
                                                    <VisualState x:Name="PointerOver">
                                                        <Storyboard>
                                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundPointerOver"/>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="ArrowPointerOver">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ScrollBarButtonPointerOverForegroundThemeBrush}"/>
                                                            </ObjectAnimationUsingKeyFrames>
                                                        </Storyboard>
                                                    </VisualState>
                                                    <VisualState x:Name="Pressed">
                                                        <Storyboard>
                                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundPressed"/>
                                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ArrowPressed"/>
                                                        </Storyboard>
                                                    </VisualState>
                                                    <VisualState x:Name="Disabled"/>
                                                </VisualStateGroup>
                                            </VisualStateManager.VisualStateGroups>
                                            <Rectangle x:Name="BackgroundPointerOver" Fill="{StaticResource ScrollBarButtonPointerOverBackgroundThemeBrush}" Opacity="0" Stroke="{StaticResource ScrollBarButtonPointerOverBorderThemeBrush}" StrokeThickness="1"/>
                                            <Path x:Name="ArrowPointerOver" Data="M4.1183305,0 L9.6730003,5.4663525 L4.1183305,10.944 L0,10.881266 L5.5553346,5.4719901 L0,0.062734604 z" Fill="{StaticResource ScrollBarButtonForegroundThemeBrush}" HorizontalAlignment="Left" Height="10.944" Margin="7,0,0,0" Stretch="Fill" StrokeThickness="0" UseLayoutRounding="False" VerticalAlignment="Center" Width="9.673"/>
                                            <Rectangle x:Name="BackgroundPressed" Fill="{StaticResource ScrollBarButtonPressedBackgroundThemeBrush}" Opacity="0" Stroke="{StaticResource ScrollBarButtonPressedBorderThemeBrush}" StrokeThickness="1"/>
                                            <Path x:Name="ArrowPressed" Data="M4.1183305,0 L9.6730003,5.4663525 L4.1183305,10.944 L0,10.881266 L5.5553346,5.4719901 L0,0.062734604 z" Fill="{StaticResource ScrollBarButtonPressedForegroundThemeBrush}" HorizontalAlignment="Left" Height="10.944" Margin="7,0,0,0" Opacity="0" Stretch="Fill" StrokeThickness="0" UseLayoutRounding="False" VerticalAlignment="Center" Width="9.673"/>
                                        </Grid>
                                    </ControlTemplate>
                                    <ControlTemplate x:Key="HorizontalDecrementTemplate" TargetType="RepeatButton">
                                        <Grid x:Name="Root">
                                            <VisualStateManager.VisualStateGroups>
                                                <VisualStateGroup x:Name="CommonStates">
                                                    <VisualState x:Name="Normal"/>
                                                    <VisualState x:Name="PointerOver">
                                                        <Storyboard>
                                                            <DoubleAnimation Duration="0:0:0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundPointerOver"/>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="ArrowPointerOver">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ScrollBarButtonPointerOverForegroundThemeBrush}"/>
                                                            </ObjectAnimationUsingKeyFrames>
                                                        </Storyboard>
                                                    </VisualState>
                                                    <VisualState x:Name="Pressed">
                                                        <Storyboard>
                                                            <DoubleAnimation Duration="0:0:0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundPressed"/>
                                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ArrowPressed"/>
                                                        </Storyboard>
                                                    </VisualState>
                                                    <VisualState x:Name="Disabled"/>
                                                </VisualStateGroup>
                                            </VisualStateManager.VisualStateGroups>
                                            <Rectangle x:Name="BackgroundPointerOver" Fill="{StaticResource ScrollBarButtonPointerOverBackgroundThemeBrush}" Opacity="0" Stroke="{StaticResource ScrollBarButtonPointerOverBorderThemeBrush}" StrokeThickness="1"/>
                                            <Path x:Name="ArrowPointerOver" Data="M5.5546699,0 L9.6730003,0.062734604 L4.1176658,5.4720101 L9.6730003,10.881266 L5.5546699,10.944 L0,5.4776478 z" Fill="{StaticResource ScrollBarButtonForegroundThemeBrush}" HorizontalAlignment="Right" Height="10.944" Margin="0,0,7,0" Stretch="Fill" StrokeThickness="0" UseLayoutRounding="False" VerticalAlignment="Center" Width="9.673"/>
                                            <Rectangle x:Name="BackgroundPressed" Fill="{StaticResource ScrollBarButtonPressedBackgroundThemeBrush}" Opacity="0" Stroke="{StaticResource ScrollBarButtonPressedBorderThemeBrush}" StrokeThickness="1"/>
                                            <Path x:Name="ArrowPressed" Data="M5.5546699,0 L9.6730003,0.062734604 L4.1176658,5.4720101 L9.6730003,10.881266 L5.5546699,10.944 L0,5.4776478 z" Fill="{StaticResource ScrollBarButtonPressedForegroundThemeBrush}" HorizontalAlignment="Right" Height="10.944" Margin="0,0,7,0" Opacity="0" Stretch="Fill" StrokeThickness="0" UseLayoutRounding="False" VerticalAlignment="Center" Width="9.673"/>
                                        </Grid>
                                    </ControlTemplate>
                                    <ControlTemplate x:Key="VerticalIncrementTemplate" TargetType="RepeatButton">
                                        <Grid x:Name="Root">
                                            <VisualStateManager.VisualStateGroups>
                                                <VisualStateGroup x:Name="CommonStates">
                                                    <VisualState x:Name="Normal"/>
                                                    <VisualState x:Name="PointerOver">
                                                        <Storyboard>
                                                            <DoubleAnimation Duration="0:0:0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundPointerOver"/>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="ArrowPointerOver">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ScrollBarButtonPointerOverForegroundThemeBrush}"/>
                                                            </ObjectAnimationUsingKeyFrames>
                                                        </Storyboard>
                                                    </VisualState>
                                                    <VisualState x:Name="Pressed">
                                                        <Storyboard>
                                                            <DoubleAnimation Duration="0:0:0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundPressed"/>
                                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ArrowPressed"/>
                                                        </Storyboard>
                                                    </VisualState>
                                                    <VisualState x:Name="Disabled"/>
                                                </VisualStateGroup>
                                            </VisualStateManager.VisualStateGroups>
                                            <Rectangle x:Name="BackgroundPointerOver" Fill="{StaticResource ScrollBarButtonPointerOverBackgroundThemeBrush}" Opacity="0" Stroke="{StaticResource ScrollBarButtonPointerOverBorderThemeBrush}" StrokeThickness="1"/>
                                            <Path x:Name="ArrowPointerOver" Data="M0.062734604,0 L5.4720101,5.5553346 L10.881266,0 L10.944,4.1183305 L5.4776478,9.6730003 L0,4.1183305 z" Fill="{StaticResource ScrollBarButtonForegroundThemeBrush}" HorizontalAlignment="Center" Height="9.673" Margin="0,7,0,0" Stretch="Fill" StrokeThickness="0" UseLayoutRounding="False" VerticalAlignment="Top" Width="10.944"/>
                                            <Rectangle x:Name="BackgroundPressed" Fill="{StaticResource ScrollBarButtonPressedBackgroundThemeBrush}" Opacity="0" Stroke="{StaticResource ScrollBarButtonPressedBorderThemeBrush}" StrokeThickness="1"/>
                                            <Path x:Name="ArrowPressed" Data="M0.062734604,0 L5.4720101,5.5553346 L10.881266,0 L10.944,4.1183305 L5.4776478,9.6730003 L0,4.1183305 z" Fill="{StaticResource ScrollBarButtonPressedForegroundThemeBrush}" HorizontalAlignment="Center" Height="9.673" Margin="0,7,0,0" Opacity="0" Stretch="Fill" StrokeThickness="0" UseLayoutRounding="False" VerticalAlignment="Top" Width="10.944"/>
                                        </Grid>
                                    </ControlTemplate>
                                    <ControlTemplate x:Key="VerticalDecrementTemplate" TargetType="RepeatButton">
                                        <Grid x:Name="Root">
                                            <VisualStateManager.VisualStateGroups>
                                                <VisualStateGroup x:Name="CommonStates">
                                                    <VisualState x:Name="Normal"/>
                                                    <VisualState x:Name="PointerOver">
                                                        <Storyboard>
                                                            <DoubleAnimation Duration="0:0:0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundPointerOver"/>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="ArrowPointerOver">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ScrollBarButtonPointerOverForegroundThemeBrush}"/>
                                                            </ObjectAnimationUsingKeyFrames>
                                                        </Storyboard>
                                                    </VisualState>
                                                    <VisualState x:Name="Pressed">
                                                        <Storyboard>
                                                            <DoubleAnimation Duration="0:0:0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundPressed"/>
                                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ArrowPressed"/>
                                                        </Storyboard>
                                                    </VisualState>
                                                    <VisualState x:Name="Disabled"/>
                                                </VisualStateGroup>
                                            </VisualStateManager.VisualStateGroups>
                                            <Rectangle x:Name="BackgroundPointerOver" Fill="{StaticResource ScrollBarButtonPointerOverBackgroundThemeBrush}" Opacity="0" Stroke="{StaticResource ScrollBarButtonPointerOverBorderThemeBrush}" StrokeThickness="1"/>
                                            <Path x:Name="ArrowPointerOver" Data="M5.6343679,0 L11.113339,5.5538998 L11.05059,9.6716595 L5.640007,4.117095 L0.22944409,9.6716595 L0.1666943,5.5538998 z" Fill="{StaticResource ScrollBarButtonForegroundThemeBrush}" HorizontalAlignment="Center" Height="9.673" Margin="0,0,0,7" Stretch="Fill" StrokeThickness="0" UseLayoutRounding="False" VerticalAlignment="Bottom" Width="10.944"/>
                                            <Rectangle x:Name="BackgroundPressed" Fill="{StaticResource ScrollBarButtonPressedBackgroundThemeBrush}" Opacity="0" Stroke="{StaticResource ScrollBarButtonPressedBorderThemeBrush}" StrokeThickness="1"/>
                                            <Path x:Name="ArrowPressed" Data="M5.6343679,0 L11.113339,5.5538998 L11.05059,9.6716595 L5.640007,4.117095 L0.22944409,9.6716595 L0.1666943,5.5538998 z" Fill="{StaticResource ScrollBarButtonPressedForegroundThemeBrush}" HorizontalAlignment="Center" Height="9.673" Margin="0,0,0,7" Opacity="0" Stretch="Fill" StrokeThickness="0" UseLayoutRounding="False" VerticalAlignment="Bottom" Width="10.944"/>
                                        </Grid>
                                    </ControlTemplate>
                                    <ControlTemplate x:Key="VerticalThumbTemplate" TargetType="Thumb">
                                        <Grid>
                                            <VisualStateManager.VisualStateGroups>
                                                <VisualStateGroup x:Name="CommonStates">
                                                    <VisualState x:Name="Normal"/>
                                                    <VisualState x:Name="PointerOver">
                                                        <Storyboard>
                                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundPointerOver"/>
                                                            <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Background"/>
                                                        </Storyboard>
                                                    </VisualState>
                                                    <VisualState x:Name="Pressed">
                                                        <Storyboard>
                                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundPressed"/>
                                                            <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Background"/>
                                                        </Storyboard>
                                                    </VisualState>
                                                    <VisualState x:Name="Disabled">
                                                        <Storyboard>
                                                            <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ThumbVisual"/>
                                                        </Storyboard>
                                                    </VisualState>
                                                </VisualStateGroup>
                                                <VisualStateGroup x:Name="FocusStates">
                                                    <VisualState x:Name="Unfocused"/>
                                                    <VisualState x:Name="Focused"/>
                                                </VisualStateGroup>
                                            </VisualStateManager.VisualStateGroups>
                                            <Grid x:Name="ThumbVisual" Margin="0">
                                                <Border x:Name="Background" BorderBrush="{StaticResource ScrollBarThumbBorderThemeBrush}" BorderThickness="1" Background="{StaticResource ScrollBarThumbBackgroundThemeBrush}"/>
                                                <Border x:Name="BackgroundPointerOver" BorderBrush="{StaticResource ScrollBarThumbPointerOverBorderThemeBrush}" BorderThickness="1" Background="{StaticResource ScrollBarThumbPointerOverBackgroundThemeBrush}" Opacity="0"/>
                                                <Border x:Name="BackgroundPressed" BorderBrush="{StaticResource ScrollBarThumbPressedBorderThemeBrush}" BorderThickness="1" Background="{StaticResource ScrollBarThumbPressedBackgroundThemeBrush}" Opacity="0"/>
                                            </Grid>
                                        </Grid>
                                    </ControlTemplate>
                                    <ControlTemplate x:Key="HorizontalThumbTemplate" TargetType="Thumb">
                                        <Grid>
                                            <VisualStateManager.VisualStateGroups>
                                                <VisualStateGroup x:Name="CommonStates">
                                                    <VisualState x:Name="Normal"/>
                                                    <VisualState x:Name="PointerOver">
                                                        <Storyboard>
                                                            <DoubleAnimation Duration="0:0:0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundPointerOver"/>
                                                            <DoubleAnimation Duration="0:0:0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Background"/>
                                                        </Storyboard>
                                                    </VisualState>
                                                    <VisualState x:Name="Pressed">
                                                        <Storyboard>
                                                            <DoubleAnimation Duration="0:0:0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundPressed"/>
                                                            <DoubleAnimation Duration="0:0:0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Background"/>
                                                        </Storyboard>
                                                    </VisualState>
                                                    <VisualState x:Name="Disabled">
                                                        <Storyboard>
                                                            <DoubleAnimation Duration="0:0:0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ThumbVisual"/>
                                                        </Storyboard>
                                                    </VisualState>
                                                </VisualStateGroup>
                                            </VisualStateManager.VisualStateGroups>
                                            <Grid x:Name="ThumbVisual" Margin="0">
                                                <Border x:Name="Background" BorderBrush="{StaticResource ScrollBarThumbBorderThemeBrush}" BorderThickness="1" Background="{StaticResource ScrollBarThumbBackgroundThemeBrush}"/>
                                                <Border x:Name="BackgroundPointerOver" BorderBrush="{StaticResource ScrollBarThumbPointerOverBorderThemeBrush}" BorderThickness="1" Background="{StaticResource ScrollBarThumbPointerOverBackgroundThemeBrush}" Opacity="0"/>
                                                <Border x:Name="BackgroundPressed" BorderBrush="{StaticResource ScrollBarThumbPressedBorderThemeBrush}" BorderThickness="1" Background="{StaticResource ScrollBarThumbPressedBackgroundThemeBrush}" Opacity="0"/>
                                            </Grid>
                                        </Grid>
                                    </ControlTemplate>
                                </Grid.Resources>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal"/>
                                        <VisualState x:Name="PointerOver"/>
                                        <VisualState x:Name="Disabled">
                                            <Storyboard>
                                                <DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Root"/>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="ScrollingIndicatorStates">
                                        <VisualState x:Name="TouchIndicator">
                                        </VisualState>
                                        <VisualState x:Name="MouseIndicator">
                                        </VisualState>
                                        <VisualState x:Name="NoIndicator">
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Grid x:Name="HorizontalRoot" IsHitTestVisible="True">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="Auto"/>
                                    </Grid.ColumnDefinitions>
                                    <Rectangle Grid.ColumnSpan="5" Fill="{StaticResource ScrollBarTrackBackgroundThemeBrush}" Margin="0" Stroke="{StaticResource ScrollBarTrackBorderThemeBrush}" StrokeThickness="{StaticResource ScrollBarTrackBorderThemeThickness}"/>
                                    <RepeatButton x:Name="HorizontalSmallDecrease" Grid.Column="0" IsTabStop="False" Interval="50" Margin="0" MinHeight="17" Template="{StaticResource HorizontalDecrementTemplate}" VerticalAlignment="Center" Width="33"/>
                                    <RepeatButton x:Name="HorizontalLargeDecrease" Grid.Column="1" HorizontalAlignment="Stretch" IsTabStop="False" Interval="50" Template="{StaticResource RepeatButtonTemplate}" VerticalAlignment="Stretch" Width="0"/>
                                    <Thumb x:Name="HorizontalThumb" Background="{TemplateBinding Background}" Grid.Column="2" Height="17" MinWidth="48" Template="{StaticResource HorizontalThumbTemplate}"/>
                                    <RepeatButton x:Name="HorizontalLargeIncrease" Grid.Column="3" HorizontalAlignment="Stretch" IsTabStop="False" Interval="50" Template="{StaticResource RepeatButtonTemplate}" VerticalAlignment="Stretch"/>
                                    <RepeatButton x:Name="HorizontalSmallIncrease" Grid.Column="4" IsTabStop="False" Interval="50" Margin="0" MinHeight="17" Template="{StaticResource HorizontalIncrementTemplate}" VerticalAlignment="Center" Width="33"/>
                                </Grid>
                                <Grid x:Name="HorizontalPanningRoot" HorizontalAlignment="Left" MinWidth="66">
                                </Grid>
                                <Grid x:Name="VerticalRoot" IsHitTestVisible="True">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="*"/>
                                        <RowDefinition Height="Auto"/>
                                    </Grid.RowDefinitions>
                                    <Rectangle Fill="{StaticResource ScrollBarTrackBackgroundThemeBrush}" Margin="0" Grid.RowSpan="5" Stroke="{StaticResource ScrollBarTrackBorderThemeBrush}" StrokeThickness="{StaticResource ScrollBarTrackBorderThemeThickness}"/>
                                    <RepeatButton x:Name="VerticalSmallDecrease" HorizontalAlignment="Center" Height="33" IsTabStop="False" Interval="50" Margin="0" MinWidth="17" Grid.Row="0" Template="{StaticResource VerticalDecrementTemplate}"/>
                                    <RepeatButton x:Name="VerticalLargeDecrease" HorizontalAlignment="Stretch" Height="0" IsTabStop="False" Interval="50" Grid.Row="1" Template="{StaticResource RepeatButtonTemplate}" VerticalAlignment="Stretch"/>
                                    <Thumb x:Name="VerticalThumb" Background="{TemplateBinding Background}" MinHeight="48" Grid.Row="2" Template="{StaticResource VerticalThumbTemplate}" Width="17"/>
                                    <RepeatButton x:Name="VerticalLargeIncrease" HorizontalAlignment="Stretch" IsTabStop="False" Interval="50" Grid.Row="3" Template="{StaticResource RepeatButtonTemplate}" VerticalAlignment="Stretch"/>
                                    <RepeatButton x:Name="VerticalSmallIncrease" HorizontalAlignment="Center" Height="33" IsTabStop="False" Interval="50" Margin="0" MinWidth="17" Grid.Row="4" Template="{StaticResource VerticalIncrementTemplate}"/>
                                </Grid>
                                <Grid x:Name="VerticalPanningRoot" MinHeight="66" VerticalAlignment="Top">
                                </Grid>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

    If you click and drag the scrollbar thumb, it should work as expected, but the touch input just pans slowly.

    Here is a xaml gridview for an example solution.

    <GridView   Grid.Row="1"
                        VerticalAlignment="Stretch"
                        VerticalContentAlignment="Stretch"
                        x:Name="recipeGridView"
                        Margin="0,-3,0,0"
                        Padding="116,0,40,46"
                        SelectionMode="None"
                        ScrollViewer.VerticalScrollBarVisibility="Visible"
                        ScrollViewer.VerticalScrollMode="Enabled"
                        ScrollViewer.HorizontalScrollMode="Disabled"
                        IsItemClickEnabled="True" Style="{StaticResource GridViewStyle1}">
                <GridView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapGrid Orientation="Horizontal"/>
                    </ItemsPanelTemplate>
                </GridView.ItemsPanel>
                <Rectangle Width="400" Height="400" Fill="BlueViolet"/>
                <Rectangle Width="400" Height="400" Fill="BlueViolet"/>
                <Rectangle Width="400" Height="400" Fill="BlueViolet"/>
                <Rectangle Width="400" Height="400" Fill="BlueViolet"/>
                <Rectangle Width="400" Height="400" Fill="BlueViolet"/>
                <Rectangle Width="400" Height="400" Fill="BlueViolet"/>
                <Rectangle Width="400" Height="400" Fill="BlueViolet"/>
                <Rectangle Width="400" Height="400" Fill="BlueViolet"/>
                <Rectangle Width="400" Height="400" Fill="BlueViolet"/>
                <Rectangle Width="400" Height="400" Fill="BlueViolet"/>
                <Rectangle Width="400" Height="400" Fill="BlueViolet"/>
                <Rectangle Width="400" Height="400" Fill="BlueViolet"/>
                <Rectangle Width="400" Height="400" Fill="BlueViolet"/>
                <Rectangle Width="400" Height="400" Fill="BlueViolet"/>
                <Rectangle Width="400" Height="400" Fill="BlueViolet"/>
                <Rectangle Width="400" Height="400" Fill="BlueViolet"/>
                <Rectangle Width="400" Height="400" Fill="BlueViolet"/>
                <Rectangle Width="400" Height="400" Fill="BlueViolet"/>
                <Rectangle Width="400" Height="400" Fill="BlueViolet"/>
            </GridView>

    So, what's the best way to add touch input to the scrollbar? I'd prefer to use the scrollbar because the performance is much better than binding a slider and calling ChangeView()...Will this require extending the scrollbar class?

    Wednesday, January 22, 2014 1:35 AM

Answers

  • I have been working at this for a couple hours and have tried using manipulation events, which can be effective. I just wonder if this is the best way to do this. I tried a few other ways too, but is there a way to pass a tap as a pointer and invoke the thumb's drag_started? Or just add a tap handler to the thumb that treats touch input as if it were click input? 
    • Marked as answer by Bryan Stump Monday, February 10, 2014 3:29 AM
    Wednesday, January 22, 2014 3:09 AM

All replies

  • I have been working at this for a couple hours and have tried using manipulation events, which can be effective. I just wonder if this is the best way to do this. I tried a few other ways too, but is there a way to pass a tap as a pointer and invoke the thumb's drag_started? Or just add a tap handler to the thumb that treats touch input as if it were click input? 
    • Marked as answer by Bryan Stump Monday, February 10, 2014 3:29 AM
    Wednesday, January 22, 2014 3:09 AM
  • Hi,

    Do you try pointer input:

    http://msdn.microsoft.com/en-us/library/windows/apps/jj150606.aspx

    Best Wishes!


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey. Thanks<br/> MSDN Community Support<br/> <br/> Please remember to &quot;Mark as Answer&quot; the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    • Marked as answer by Anne Jing Monday, February 10, 2014 1:50 AM
    • Unmarked as answer by Bryan Stump Monday, February 10, 2014 3:29 AM
    Friday, January 24, 2014 3:43 AM