Question

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

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

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

当用户开始水平滑动手势时，触摸下的滑块应接收输入并开始更改其值，而垂直滚动则完全禁用（即使用户继续绘制圆圈动作）
< / LI>
当用户开始垂直滑动手势时，滚动查看器应接收输入并开始垂直滚动，而触摸下的滑块应保持不变（即使用户继续绘制圆圈运动）。

是否可以在纯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"

正如您在我的代码中看到的，我比较了FocusState的{{1}}属性，如果其值为Slider，那么Unfocused的垂直滚动模式是启用。因此，当用户与此布局进行交互时，在ScrollViewer上滑动后，他需要先单击空白部分以使Slider失去焦点，然后才能启用垂直滚动模式。

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

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

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);
        }        
    }
}

ScrollViewer中的XAML Slider

2 个答案: