UWP ScrollViewer 滚动使用鼠标滚轮但不使用触摸

Question

我需要为一个 ScrollViewer UWP ScrollBar styles 定义 2 个 ScrollBars。样式有效，但有一个问题，我失去了触摸滚动的能力。触摸拇指后，它不再附在鼠标滚轮上，只能通过单击鼠标来移动。

<Style x:Key="ScrollViewerStyle" TargetType="ScrollViewer">
    <Setter Property="HorizontalContentAlignment" Value="Left" />
    <Setter Property="VerticalContentAlignment" Value="Top" />
    <Setter Property="Padding" Value="0" />
    <Setter Property="BorderBrush" Value="Transparent" />
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ScrollViewer">
                <Border x:Name="Root" 
                        BorderThickness="{TemplateBinding BorderThickness}" 
                        BorderBrush="{TemplateBinding BorderBrush}" 
                        >
                    <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"
                          ContentTemplate="{TemplateBinding ContentTemplate}"
                          Margin="{TemplateBinding Padding}" />

                        <ScrollBar
                                   Grid.Column="1" 
                                   HorizontalAlignment="Right"
                                   IsTabStop="False"
                                   Maximum="{TemplateBinding ScrollableHeight}"
                                   Orientation="Vertical"
                                   ViewportSize="{TemplateBinding ViewportHeight}"
                                   Value="{TemplateBinding VerticalOffset}"
                                   Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
                                   Style="{StaticResource VerticalScrollBar}"
                                   />
                        <ScrollBar 
                                   IsTabStop="False"
                                   Maximum="{TemplateBinding ScrollableWidth}"
                                   Orientation="Horizontal"
                                   Grid.Row="1" 
                                   ViewportSize="{TemplateBinding ViewportWidth}"
                                   Value="{TemplateBinding HorizontalOffset}"
                                   Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
                                   Style="{StaticResource HorizontalScrollBar}"
                                   />
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

谁知道如何解决这个问题？

Answer 1

我稍微改变了样式，滚动效果很好

<Style x:Key="ScrollViewerStyle" TargetType="ScrollViewer">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ScrollViewer">
                <Border x:Name="Root" 
                        BorderThickness="{TemplateBinding BorderThickness}" 
                        BorderBrush="{TemplateBinding BorderBrush}" 
                        >
                    <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"
                          ContentTemplate="{TemplateBinding ContentTemplate}"
                          Margin="{TemplateBinding Padding}" />

                        <ScrollBar x:Name="PART_VerticalScrollBar"
                                   Grid.Column="1"
                                   Orientation="Vertical"
                                   ViewportSize="{TemplateBinding ViewportHeight}"
                                   Value="{TemplateBinding VerticalOffset}"
                                   Maximum="{TemplateBinding ScrollableHeight}"
                                   Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
                                   Style="{StaticResource VerticalScrollBar}"/>

                        <ScrollBar x:Name="PART_HorizontalScrollBar"
                                   Grid.Row="1"
                                   Orientation="Horizontal"
                                   ViewportSize="{TemplateBinding ViewportWidth}"
                                   Value="{TemplateBinding HorizontalOffset}"
                                   Maximum="{TemplateBinding ScrollableWidth}"
                                   Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
                                   Style="{StaticResource HorizontalScrollBar}"/>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

值得注意的是，对于 Track，您需要指定名称 x:Name = "PART_Track"，以便自定义 Thumb 在按下时起作用

<Style x:Key="HorizontalScrollBar" TargetType="{x:Type ScrollBar}">
    ...
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ScrollBar}">
                <Grid x:Name="Bg" SnapsToDevicePixels="False">
                    <Border BorderBrush="{TemplateBinding BorderBrush}" 
                            BorderThickness="{TemplateBinding BorderThickness}" 
                            Background="{TemplateBinding Background}"
                            Grid.Column="1"/>
                    <Track x:Name="PART_Track" 
                           IsDirectionReversed="False" 
                           IsEnabled="{TemplateBinding IsMouseOver}" 
                           Grid.Column="1">
                        <Track.Thumb>
                            <Thumb Style="{StaticResource ScrollBarThumbHorizontal}"
                                   Height="{TemplateBinding Height}"/>
                        </Track.Thumb>
                    </Track>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

我希望这不仅对我有帮助）