WPF Scrollviewer：如何允许通过触摸/鼠标滚动并允许内部子项（按钮）触发样式更新

Question

I have a scrollviewer with an itemscontrol, and inside of the itemscontrol are buttons. Here is the xaml:

`

    <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled">
        <ItemsControl Style="{DynamicResource FileItemsControlStyle}" ItemsSource="{Binding Files.Files}"
                Padding="4" ManipulationBoundaryFeedback="FileListBox_ManipulationBoundaryFeedback">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Button Style="{StaticResource ImportsFileBorder}" Margin="0, 2" Height="75" HorizontalAlignment="Stretch">
                    <b:Interaction.Triggers>
                        <b:EventTrigger EventName="PreviewMouseDown">
                            <b:InvokeCommandAction Command="{Binding Path=DataContext.RenderSelectedFileCommand,
                                        RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" CommandParameter="{Binding}"/>
                        </b:EventTrigger>
                    </b:Interaction.Triggers>
                    <DockPanel LastChildFill="True" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
                        <ToggleButton IsChecked="{Binding IsSelected, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" 
                                      PreviewMouseDown="ToggleSliderButton_PreviewMouseDown" Style="{DynamicResource ToggleSliderStyle}"
                                      DockPanel.Dock="Left" Margin="10,15,10,0" />

                        <TextBlock Text="{Binding DisplayFileName}" Width="Auto" VerticalAlignment="Center" FontWeight="Bold" TextTrimming="CharacterEllipsis"
                                   FontSize="{DynamicResource LargeFontSize}" Foreground="Lime"/>
                    </DockPanel>
                </Button>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
        </ItemsControl>
    </ScrollViewer>

`

My issue is that if I have PanningMode = "Both" for the scrollviewer I can scroll via my mouse and touch device perfectly fine. And if I click a button with my mouse, the style triggers and it highlights. However with touch, the buttons are not highlighting (but the buttons commands do fire). If I turn PanningMode too "None" then the styles trigger on the buttons fine (but I can't scroll obviously). I need to be able to scroll through the list of buttons even if my touch event starts on a button but somehow determine if I'm actually just clicking the button or if I'm scrolling. Ideally if I'm scrolling, the button I started on to begin the scrolling wouldn't highlight.

I found another Stackoverflow article here: WPF, ScrollViewer consuming touch before longpress

and tried implementing the answer from there:

`

public class ScrollViewerWithTouch : ScrollViewer   
{
      /// <summary>
      /// Original panning mode.
      /// </summary>
      private PanningMode panningMode;

  /// <summary>
  /// Set panning mode only once.
  /// </summary>
  private bool panningModeSet;

  /// <summary>
  /// Initializes static members of the <see cref="ScrollViewerWithTouch"/> class.
  /// </summary>
  static ScrollViewerWithTouch()
  {
     DefaultStyleKeyProperty.OverrideMetadata(typeof(ScrollViewerWithTouch), new FrameworkPropertyMetadata(typeof(ScrollViewerWithTouch)));
  }

  protected override void OnManipulationCompleted(ManipulationCompletedEventArgs e)
  {
     base.OnManipulationCompleted(e);

     // set it back
     this.PanningMode = this.panningMode;
  }

  protected override void OnManipulationStarted(ManipulationStartedEventArgs e)
  {
     // figure out what has the user touched
     var result = VisualTreeHelper.HitTest(this, e.ManipulationOrigin);
     if (result != null && result.VisualHit != null)
     {
        var hasButtonParent = this.HasButtonParent(result.VisualHit);

        // if user touched a button then turn off panning mode, let style bubble down, in other case let it scroll
        this.PanningMode = hasButtonParent ? PanningMode.None : this.panningMode;
     }

     base.OnManipulationStarted(e);
  }

  protected override void OnTouchDown(TouchEventArgs e)
  {
     // store panning mode or set it back to it's original state. OnManipulationCompleted does not do it every time, so we need to set it once more.
     if (this.panningModeSet == false)
     {
        this.panningMode = this.PanningMode;
        this.panningModeSet = true;
     }
     else
     {
        this.PanningMode = this.panningMode;
     }

     base.OnTouchDown(e);         
  }

  private bool HasButtonParent(DependencyObject obj)
  {
     var parent = VisualTreeHelper.GetParent(obj);

     if ((parent != null) && (parent is ButtonBase) == false)
     {
        return HasButtonParent(parent);
     }

     return parent != null;
  }
}

`

However, this doesn't allow me to start scrolling if my touch starts on the buttons. Is there some way I could modify this too allow me to scroll when needed but then turn panning mode off if I'm just touching/clicking a button and allow the style too trigger?

Answer 1

I ended up modifying the custom scrollviewer and creating a custom button class that inherits from ButtonBase that exposes a SetIsPressable() function to allow me to set the IsPressable on the button that is readonly since my style triggers off of that property.

Here is how I modified the scrollviewer:

namespace NoNeedForYouToKnow.UI.Module.Control.TouchScrollViewer
{
    /// <summary>
    /// This scroll viewer is meant to be able to handle touch/mouse scrolling as well as notifying child components that implement
    /// IPressable that their IsPressed property has changed. If you aren't wrapping anything implementing IPressable, then you
    /// probably just need to use a regular scrollviewer.
    /// </summary>
    public class PressableScrollViewer : ScrollViewer
    {
        private IPressable _button;

        /// <summary>
        /// Initializes static members of the <see cref="PressableScrollViewer"/> class.
        /// </summary>
        static PressableScrollViewer()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(PressableScrollViewer), new FrameworkPropertyMetadata(typeof(PressableScrollViewer)));
        }

        protected override void OnManipulationCompleted(ManipulationCompletedEventArgs e)
        {
            _button?.SetIsPressed(false);
            base.OnManipulationCompleted(e);
        }

        protected override void OnManipulationDelta(ManipulationDeltaEventArgs e)
        {
            var result = VisualTreeHelper.HitTest(this, e.ManipulationOrigin);
            if (result != null && result.VisualHit != null)
            {
                var isOverButton = this.HasParent(result.VisualHit, _button);
                if(!isOverButton)
                    _button.SetIsPressed(false);
                base.OnManipulationDelta(e);
            }
        }

        protected override void OnScrollChanged(ScrollChangedEventArgs e)
        {
            _button?.SetIsPressed(false);
            base.OnScrollChanged(e);
        }

        protected override void OnManipulationStarted(ManipulationStartedEventArgs e)
        {
            // figure out what has the user touched
            var result = VisualTreeHelper.HitTest(this, e.ManipulationOrigin);
            if (result != null && result.VisualHit != null)
            {
                var button = this.HasButtonParent(result.VisualHit);
                if (button != null)
                {
                    _button = button;
                    button.SetIsPressed(true);
                }
            }

            base.OnManipulationStarted(e);
        }

        private PressableButton HasButtonParent(DependencyObject obj)
        {
            var parent = VisualTreeHelper.GetParent(obj);

            if ((parent != null) && (parent is PressableButton) == false)
            {
                return HasButtonParent(parent);
            }

            return (PressableButton) parent;
        }

        private bool HasParent(DependencyObject obj, IPressable pressableObject)
        {
            if(pressableObject == null) return false;
            var parent = VisualTreeHelper.GetParent(obj);

            if (parent == pressableObject || obj == pressableObject) return true;
            else if (parent == null)
                return false;
            else
                return HasParent(parent, pressableObject);
        }
    }
}

It handles toggling the IsPressable property when you start your touch on the button and handles turning to false at the proper times.