ScrollViewer 中的 XAML 滑块

Question

对于 Windows 10 UWP 应用，我有这样的 XAML 结构：

<ScrollViewer>
    <StackPanel>
        <Slider />
        <Slider />
        ...
    </StackPanel>
</ScrollViewer>

我想创造这样的用户体验：

1. 当用户开始水平滑动手势时，触摸下的滑块应接收输入并开始更改其值，而垂直滚动完全禁用（即使用户继续画圈动作）

2. 当用户开始垂直滑动手势时，scrollviewer 应接收输入并开始垂直滚动，而触摸下的滑块应保持不变（即使用户继续绘制圆圈动作）。

   李>

是否可以在纯 XAML 中实现此行为？我想我已经尝试了与滚动相关的所有可能的属性组合......没有运气。有人知道吗？

Answer 1

在10586版本的手机模拟器上测试，发现ScrollViewer垂直滚动时，即使画圈也不会影响里面的Slider，而Slider水平滑动时，只有当它的值达到最大值时，如果我画圆圈，ScrollViewer 的垂直滚动才会生效。

是否可以在纯 XAML 中实现此行为？

是的，有可能。

当用户开始水平滑动手势时，触摸下的滑块应接收输入并开始更改其值，而垂直滚动完全禁用（即使用户继续画圈动作）

您可以在您的项目中安装Microsoft.Xaml.Behaviors.Uwp.Managed 包，然后使用它的DataTriggerBehavior，例如：

<ScrollViewer x:Name="scrollViewer" HorizontalScrollMode="Disabled" VerticalScrollMode="Auto">
    <Interactivity:Interaction.Behaviors>
        <Core:DataTriggerBehavior Binding="{Binding ElementName=slider1,Path=FocusState}" ComparisonCondition="NotEqual" Value="Unfocused">
            <Core:ChangePropertyAction PropertyName="VerticalScrollMode" Value="Disabled" />
        </Core:DataTriggerBehavior>
        <Core:DataTriggerBehavior Binding="{Binding ElementName=slider1,Path=FocusState}" ComparisonCondition="Equal"  Value="Unfocused">
            <Core:ChangePropertyAction PropertyName="VerticalScrollMode" Value="Auto" />
        </Core:DataTriggerBehavior>
        <Core:DataTriggerBehavior Binding="{Binding ElementName=slider2,Path=FocusState}" ComparisonCondition="NotEqual" Value="Unfocused">
            <Core:ChangePropertyAction PropertyName="VerticalScrollMode" Value="Disabled" />
        </Core:DataTriggerBehavior>
        <Core:DataTriggerBehavior Binding="{Binding ElementName=slider2,Path=FocusState}" ComparisonCondition="Equal"  Value="Unfocused">
            <Core:ChangePropertyAction PropertyName="VerticalScrollMode" Value="Auto" />
        </Core:DataTriggerBehavior>
    </Interactivity:Interaction.Behaviors>
    <StackPanel Height="1300">
        <Slider Margin="0,200" x:Name="slider1" />
        <Slider x:Name="slider2" />
    </StackPanel>
</ScrollViewer>

在 xaml 中使用此包时，您需要在标头中声明它，例如：

xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"
xmlns:Core="using:Microsoft.Xaml.Interactions.Core"
xmlns:Media="using:Microsoft.Xaml.Interactions.Media"

正如您在我的代码中看到的，我比较了Slider 的FocusState 属性，如果其值为Unfocused，则启用ScrollViewer 的垂直滚动模式。所以当用户与这个布局交互时，在Slider上滑动后，需要先点击空白部分使Slider失去焦点，然后才能启用垂直滚动模式。

当用户开始垂直滑动手势时，scrollviewer 应接收输入并开始垂直滚动，而触摸下的滑块应保持不变（即使用户继续绘制圆圈运动）。

根据我的测试，我认为默认情况下可以确保此手势，因此我没有为此编写代码。如果不在您身边，请发表评论并提供您的设备类型和操作系统版本，以便我进行测试。

Answer 2

我有一个非常相似的问题，并且能够使用以下自定义控件解决它。这是一个 CommandSlider，它还允许您在滑动完成后发送按钮之类的命令（不是您需要的），但 ScrollViewer 操作代码也在那里。看看这是否对您的情况有所帮助。它允许您按照您的要求在完整的 XAML 中完成所有工作。

注意：滑块必须有ManipulationMode="TranslateX" or "TranslateY"，这也取决于方向。

public sealed class CommandSlider : Slider
{
    public CommandSlider()
    {
        IsThumbToolTipEnabled = false;
        PointerCaptureLost += (s, e) => (Command?.CanExecute(CommandParameter)).GetValueOrDefault().Switch(() => Command?.Execute(CommandParameter));
        Loaded += (s, e) => ParentScrollViewer = this.GetParent<ScrollViewer>();
    }

    private ScrollViewer ParentScrollViewer { get; set; }

    protected override void OnManipulationDelta(ManipulationDeltaRoutedEventArgs e)
    {
        base.OnManipulationDelta(e);

        if (ParentScrollViewer != null)
        {                
            var scrollX = Orientation == Orientation.Vertical
                        ? e.Position.X * -1 + ParentScrollViewer.HorizontalOffset
                        : ParentScrollViewer.HorizontalOffset;

            var scrollY = Orientation == Orientation.Horizontal
                        ? e.Position.Y * -1 + ParentScrollViewer.VerticalOffset
                        : ParentScrollViewer.VerticalOffset;

            var zoom = ParentScrollViewer.ZoomFactor;

            ParentScrollViewer.ChangeView(scrollX, scrollY, zoom);
        }
    }

    public object CommandParameter
    {
        get => GetValue(CommandParameterProperty);
        set => SetValue(CommandParameterProperty, value);
    }

    public static readonly DependencyProperty CommandParameterProperty =
        DependencyProperty.Register(nameof(CommandParameter), typeof(object), typeof(CommandSlider), new PropertyMetadata(null));

    public ICommand Command
    {
        get => (ICommand)GetValue(CommandProperty);
        set => SetValue(CommandProperty, value);
    }

    public static readonly DependencyProperty CommandProperty =
        DependencyProperty.Register(nameof(Command), typeof(ICommand), typeof(CommandSlider), new PropertyMetadata(null));

    public double SourceValue
    {
        get => (double)GetValue(SourceValueProperty);
        set => SetValue(SourceValueProperty, value);
    }

    public static readonly DependencyProperty SourceValueProperty =
        DependencyProperty.Register(nameof(SourceValue), typeof(double), typeof(CommandSlider), new PropertyMetadata(0d,
            (s, e) => (s as CommandSlider).Value = (double)e.NewValue));
}

自定义扩展方法

public static class XAMLExtensions
{
    public static T GetParent<T>(this DependencyObject dependencyObject) where T : DependencyObject
    {
        var parentDependencyObject = VisualTreeHelper.GetParent(dependencyObject);

        switch (parentDependencyObject)
        {
            case null:
                return null;
            case T parent:
                return parent;
            default:
                return GetParent<T>(parentDependencyObject);
        }        
    }
}