WPF C＃动画拇指

Question

我需要帮助来纠正我的拇指拖动或拖动后的动画。 我基本上想要的步骤是：

1. 用户在滚动手柄上单击鼠标左键，然后在整个窗口中水平拖动手柄和图像。
2. 手柄+图像将捕捉到左侧窗口边缘，或者手柄将捕捉到右侧窗口边缘，图像隐藏在右侧
3. 如果用户在拖动时释放左键单击，则手柄+图像将沿其向左或右窗口边缘的方向继续并捕捉到该方向，请参阅＃2

现在，在加载时，它可以按我的要求工作，但是对于随后的拖动，拇指拖动的可见性消失了。 它只是跳到我释放鼠标左键的位置，然后从那里继续捕捉动画。

我已尽力尝试了各种变通办法，但似乎没有解决方案。 最少的代码如下。

MainWindow.xaml

<Window x:Class="TouchSample.MainWindow"
        Name="Window_TouchSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:TouchSample"
        mc:Ignorable="d"
        Title="MainWindow" 
    Height="600" Width="600"
    xmlns:custom="clr-namespace:TouchSample">
    <Grid Name="Grid_TouchableThing">
        <custom:TouchableThing />
    </Grid> 
</Window>

TouchableThing.xaml

<UserControl x:Class="TouchSample.TouchableThing"
        Name="Scroll_UserControl"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:TouchSample"
        mc:Ignorable="d"
        d:DesignHeight="600" d:DesignWidth="600">
    <Canvas x:Name="Scroll_Canvas">

        <Thumb Name="Scroll_thumb" 
               Canvas.Left="20" 
               Canvas.Top="120" 
               Canvas.ZIndex="3"  
               DragDelta="Thumb_DragDelta"
               PreviewMouseLeftButtonUp="Scroll_thumb_PreviewMouseLeftButtonUp">
            <Thumb.Template>
                <ControlTemplate>
                    <StackPanel Name="Scroll_thumb_StackPanel" 
                                Orientation="Horizontal">
                        <Border Name="Scroll_thumb_StackPanel_Border" Background="Black" Padding="1">
                            <TextBlock Name="Scroll_thumb_StackPanel_Border_TextBlock" 
                                       Text="Scroll" 
                                       Background="Silver" 
                                       TextAlignment="Center" 
                                       MouseLeftButtonDown="TextBlock_MouseLeftButtonDown"
                                       >
                                <TextBlock.LayoutTransform>
                                    <RotateTransform Angle="90"/>
                                </TextBlock.LayoutTransform>
                            </TextBlock>
                        </Border>
                        <Button Background="Yellow" Padding="1">
                            <Image Name="Scroll_thumb_StackPanel_Button_Image" Source="Assets/long-ancient-scroll-4499037_x4.jpg" />
                        </Button>
                    </StackPanel>
                </ControlTemplate>
            </Thumb.Template>
        </Thumb>

    </Canvas>
</UserControl>

TouchableThing.xaml.cs

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;

namespace TouchSample
{
    /// <summary>
    /// Interaction logic for TouchableThing.xaml
    /// </summary>
    public partial class TouchableThing : UserControl
    {
        private double toLeftValue = 0;
        private double toRightValue = 550; // will get overwritten in OnWindowSizeChanged
        private bool isGoingLeft = false;
        private bool isGoingRight = false;
        private double lastDiffX;

        public TouchableThing()
        {
            InitializeComponent();
            this.SizeChanged += OnWindowSizeChanged;            
        }

        private void OnWindowSizeChanged(object sender, SizeChangedEventArgs e)
        {
            //throw new NotImplementedException();

            //Console.WriteLine("sender: " + sender.ToString());
            //Console.WriteLine("sender.GetType(): " + sender.GetType().ToString());
            //Console.WriteLine("e: " + e.ToString());

            toRightValue = e.NewSize.Width;

            var aBorder = VisualHierarchyHelper.FindChild<Border>(Scroll_thumb, "Scroll_thumb_StackPanel_Border");

            if (aBorder != null)
            {
                Console.WriteLine("aBorder.ActualWidth: " + aBorder.ActualWidth.ToString());
                Console.WriteLine("aBorder.RenderSize.Height: " + aBorder.RenderSize.Height.ToString());
                toRightValue -= aBorder.ActualWidth;
            }

            Console.WriteLine("toRightValue=" + toRightValue.ToString());
        }

        // https://wpf.2000things.com/2012/12/19/715-using-the-thumb-control-to-drag-objects-on-a-canvas/
        private void Thumb_DragDelta(object sender, DragDeltaEventArgs e)
        {
            //UIElement thumb = e.Source as UIElement;
            UIElement thumb = sender as UIElement;

            double xChange = Canvas.GetLeft(thumb) + e.HorizontalChange;

            if(xChange >= toLeftValue && xChange <= toRightValue)
            {
                Canvas.SetLeft(thumb, xChange);
                //Canvas.SetTop(thumb, Canvas.GetTop(thumb) + e.VerticalChange);

                //Console.WriteLine("e.HorizontalChange=" + e.HorizontalChange);
                if (e.HorizontalChange > 0)
                {
                    isGoingLeft = false;
                    isGoingRight = true;
                }
                else if (e.HorizontalChange < 0)
                {
                    isGoingLeft = true;
                    isGoingRight = false;
                }
                else
                {
                    isGoingLeft = false;
                    isGoingRight = false;
                }

                lastDiffX = xChange;
            }
        }

        private void goLeft(UIElement theUIElement, double fromX)
        {
            DoubleAnimation goLeftAnim = new DoubleAnimation();

            goLeftAnim.From = fromX;
            goLeftAnim.To = toLeftValue;
            goLeftAnim.Duration = new Duration(TimeSpan.FromSeconds(2));

            theUIElement.BeginAnimation(Canvas.LeftProperty, goLeftAnim);
        }

        private void goRight(UIElement theUIElement, double fromX)
        {
            DoubleAnimation goRightAnim = new DoubleAnimation();

            goRightAnim.From = fromX;
            goRightAnim.To = toRightValue;
            goRightAnim.Duration = new Duration(TimeSpan.FromSeconds(2));

            theUIElement.BeginAnimation(Canvas.LeftProperty, goRightAnim);
        }

        private void TextBlock_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            TextBlock aTextBlock = sender as TextBlock;

            //Console.WriteLine("TextBlock_MouseLeftButtonDown: Changing TextBlock Background colour to Gray");
            aTextBlock.Background = Brushes.Gray;
        }

        private void Scroll_thumb_PreviewMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            var aTextBlock = VisualHierarchyHelper.FindChild<TextBlock>(Scroll_thumb, "Scroll_thumb_StackPanel_Border_TextBlock");

            if (Mouse.LeftButton == MouseButtonState.Released && aTextBlock != null)
            {
                //Console.WriteLine("Scroll_thumb_PreviewMouseLeftButtonUp: Changing TextBlock Background colour to Silver");
                //Console.WriteLine("  found aTextBlock");
                aTextBlock.Background = Brushes.Silver;
            }

            if (isGoingLeft)
                goLeft(Scroll_thumb, lastDiffX);
            else if (isGoingRight)
                goRight(Scroll_thumb, lastDiffX);

        }

    }
}

我只是从WPF开始，只有一年的C＃和WinForms经验，因此非常感谢您的帮助。

斯瑞恩

Answer 1

我在MSDN上问了同样的问题，那里的主持人Yohann Lu给出了我需要的工作代码。 他说，我需要使用此代码“清除动画”

theUIElement.BeginAnimation(Canvas.LeftProperty, null);

包含完整代码的线程在下面的链接中

https://social.msdn.microsoft.com/Forums/zh-CN/863c85e5-f372-4439-b3dc-f37623665e3a/c-animating-a-thumb?forum=wpf

谢谢Yohann和所有尝试此操作的人。

斯瑞恩