Question

请考虑以下简化示例来说明我的问题：

MainWindow.xaml

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Width="500" Height="500"
        Title="Click anywhere to animate the movement of the blue thingy...">
    <Canvas 
        x:Name="canvas" 
        HorizontalAlignment="Stretch" 
        VerticalAlignment="Stretch" 
        Background="AntiqueWhite"  
        MouseDown="canvas_MouseDown" />
</Window>

MainWindow.xaml.cs

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

namespace WpfApplication1
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            this.canvas.Children.Add(new Thingy());
        }

        private void canvas_MouseDown(object sender, MouseButtonEventArgs e)
        {
            var thingy = (Thingy)this.canvas.Children[0];

            var from = new Point(0.0, 0.0);

            var to = new Point(
                canvas.ActualWidth  - thingy.ActualWidth, 
                canvas.ActualHeight - thingy.ActualHeight
            );

            var locAnim = new PointAnimation(
                from, 
                to, 
                new Duration(TimeSpan.FromSeconds(5))
            );

            locAnim.Completed += (s, a) =>
            {
                // Only at this line does the thingy move to the 
                // correct position...
                thingy.Location = to;
            };

            thingy.Location = from;
            thingy.BeginAnimation(Thingy.LocationProperty, locAnim);
        }
    }
}

Thingy.xaml

<UserControl x:Class="WpfApplication1.Thingy"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             Width="50" Height="50" Background="Blue" />

Thingy.xaml.cs

using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;

namespace WpfApplication1
{
    public partial class Thingy : UserControl
    {
        public static DependencyProperty LocationProperty = 
            DependencyProperty.Register(
                "Location", 
                typeof(Point), 
                typeof(Thingy)
            );

        public Thingy()
        {
            InitializeComponent();

            Canvas.SetLeft(this, 0.0);
            Canvas.SetTop(this, 0.0);

            var xBind = new Binding();
            xBind.Source = this;
            xBind.Path = new PropertyPath(Canvas.LeftProperty);
            xBind.Mode = BindingMode.TwoWay;

            var yBind = new Binding();
            yBind.Source = this;
            yBind.Path = new PropertyPath(Canvas.TopProperty);
            yBind.Mode = BindingMode.TwoWay;

            var locBind = new MultiBinding();
            locBind.Converter = new PointConverter();
            locBind.Mode = BindingMode.TwoWay;
            locBind.Bindings.Add(xBind);
            locBind.Bindings.Add(yBind);
            BindingOperations.SetBinding(
                this, 
                Thingy.LocationProperty, 
                locBind
            );
        }

        public Point Location
        {
            get
            {
                return (Point)this.GetValue(LocationProperty);
            }

            set
            {
                this.SetValue(LocationProperty, value);
            }
        }
    }
}

PointConverter.cs

using System;
using System.Globalization;
using System.Windows;
using System.Windows.Data;

namespace WpfApplication1
{
    public class PointConverter : IMultiValueConverter
    {
        public object Convert(object[] v, Type t, object p, CultureInfo c)
        {
            return new Point((double)v[0], (double)v[1]);
        }

        public object[] ConvertBack(object v, Type[] t, object p, CultureInfo c)
        {
            return new object[] { ((Point)v).X, ((Point)v).Y };
        }
    }
}

这里的目标是：

使用LocationProperty来操纵和访问Canvas.LeftProperty和Canvas.TopProperty值。
Animate用LocationProperty类说PointAnimation。

目标＃1似乎工作正常，只有在尝试设置LocationProperty动画时它才会按预期运行。

“预期”是指Thingy的实例应随着动画的进展而移动。

我可以使用DoubleAnimation类的两个实例来完成此任务。

如果问题是Point是值类型，那么我怀疑我可以定义自己的Point类型和我自己的AnimationTimeline。这不是我想做的。这是一个更大的项目的一部分，LocationProperty将用于其他事情。

说实话，最重要的是，在我看来这应该只是工作，你能告诉我：

为什么不呢？
如果定义了问题的解决方案？

我还要提到我的目标是针对这个项目的.Net Framework 4.5。

谢谢。

Answer 1

这是动画内容的最简单代码。

它利用依赖属性回调
不使用绑定
不使用转换器
不使用故事板

主窗口：

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

namespace WpfApplication1
{
    public partial class MainWindow
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void MainWindow_OnMouseDown(object sender, MouseButtonEventArgs e)
        {
            var x = Canvas.GetLeft(Control1);
            var y = Canvas.GetTop(Control1);
            x = double.IsNaN(x) ? 0 : x;
            y = double.IsNaN(y) ? 0 : y;
            var point1 = new Point(x, y);
            var point2 = e.GetPosition(this);
            var animation = new PointAnimation(point1, point2, new Duration(TimeSpan.FromSeconds(1)));
            animation.EasingFunction = new CubicEase();
            Control1.BeginAnimation(UserControl1.LocationProperty, animation);
        }
    }
}

主窗口：

<Window x:Class="WpfApplication1.MainWindow"
        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:WpfApplication1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525" MouseDown="MainWindow_OnMouseDown">
    <Canvas>
        <local:UserControl1 Background="Red" Height="100" Width="100" x:Name="Control1" />
    </Canvas>
</Window>

控制：

using System.Windows;
using System.Windows.Controls;

namespace WpfApplication1
{
    public partial class UserControl1
    {
        public static readonly DependencyProperty LocationProperty = DependencyProperty.Register(
            "Location", typeof(Point), typeof(UserControl1), new UIPropertyMetadata(default(Point), OnLocationChanged));

        public UserControl1()
        {
            InitializeComponent();
        }

        public Point Location
        {
            get { return (Point) GetValue(LocationProperty); }
            set { SetValue(LocationProperty, value); }
        }

        private static void OnLocationChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            var control1 = (UserControl1) d;
            var value = (Point) e.NewValue;
            Canvas.SetLeft(control1, value.X);
            Canvas.SetTop(control1, value.Y);
        }
    }
}

控制：

<UserControl x:Class="WpfApplication1.UserControl1"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:WpfApplication1"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">

</UserControl>

TODO：根据您的需要调整代码：）

编辑：一个听取Canvas.[Left|Top]Property的简单双向绑定：

（待加强）

using System;
using System.ComponentModel;
using System.Windows;
using System.Windows.Controls;

namespace WpfApplication1
{
    public partial class UserControl1
    {
        public static readonly DependencyProperty LocationProperty = DependencyProperty.Register(
            "Location", typeof(Point), typeof(UserControl1), new PropertyMetadata(default(Point), OnLocationChanged));

        public UserControl1()
        {
            InitializeComponent();

            DependencyPropertyDescriptor.FromProperty(Canvas.LeftProperty, typeof(Canvas))
                .AddValueChanged(this, OnLeftChanged);
            DependencyPropertyDescriptor.FromProperty(Canvas.TopProperty, typeof(Canvas))
                .AddValueChanged(this, OnTopChanged);
        }

        public Point Location
        {
            get { return (Point) GetValue(LocationProperty); }
            set { SetValue(LocationProperty, value); }
        }

        private void OnLeftChanged(object sender, EventArgs eventArgs)
        {
            var left = Canvas.GetLeft(this);
            Location = new Point(left, Location.Y);
        }

        private void OnTopChanged(object sender, EventArgs e)
        {
            var top = Canvas.GetTop(this);
            Location = new Point(Location.X, top);
        }

        private static void OnLocationChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            var control1 = (UserControl1) d;
            var value = (Point) e.NewValue;
            Canvas.SetLeft(control1, value.X);
            Canvas.SetTop(control1, value.Y);
        }
    }
}

Answer 2

我喜欢Aybe的答案，但它没有说明为什么原始代码不起作用。我运行你的代码并尝试了一些替代方案，看起来正在发生的是在动画期间忽略绑定转换器。如果在转换器方法中设置断点，或者执行Debug.WriteLine，无论哪种方式，您都可以看到在整个动画过程中没有调用转换器，而只是在代码中显式设置属性时。

深入挖掘，问题在于您设置Thingy绑定的方式。绑定来源属性应为Thingy.Location，而目标属性应为Canvas.Left和Canvas.Top。但是你已经倒退了 - 你正在制作Canvas.Left和Canvas.Top源属性以及Thingy.Location目标属性。你会认为使它成为一个双向绑定会使它工作（当你明确设置Thingy.Location属性时它会这样做），但似乎动画会忽略双向绑定方面。

一种解决方案是不要在这里使用多重绑定。当一个属性由多个属性或条件提供时，多绑定实际上就是这样。在这里，您有多个属性（Canvas.Left和Canvas.Top），您希望使用单个属性Thingy.Location来源。所以，在Thingy构造函数中：

    var xBind = new Binding();
    xBind.Source = this;
    xBind.Path = new PropertyPath(Thingy.LocationProperty);
    xBind.Mode = BindingMode.OneWay;
    xBind.Converter = new PointToDoubleConverter();
    xBind.ConverterParameter = false;
    BindingOperations.SetBinding(this, Canvas.LeftProperty, xBind);                

    var yBind = new Binding();
    yBind.Source = this;
    yBind.Path = new PropertyPath(Thingy.LocationProperty);
    yBind.Mode = BindingMode.OneWay;
    yBind.Converter = new PointToDoubleConverter();
    yBind.ConverterParameter = true;
    BindingOperations.SetBinding(this, Canvas.TopProperty, yBind);

另一个区别是绑定转换器。我们需要一个转换器，它需要doubles并提取用于Point和{{}的Point，而不是取两个double并为您提供Canvas.Left。 1}}属性（我使用Canvas.Top来指定所需的属性）。所以：

ConverterParameter

这使得动画在仍然使用绑定和转换器的同时工作。这里唯一的缺点是public class PointToDoubleConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { var pt = (Point)value; bool isY = (bool)parameter; return isY ? pt.Y : pt.X; } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { return value; } }属性和Canvas之间的绑定必然是单向的，因为没有办法将Thingy.Location或Canvas.Left单独转换回完整Canvas.Top {1}}。换句话说，如果您随后更改Point或Canvas.Left，则Canvas.Top将不会更新。（当然，任何无约束的解决方案都是如此）。

但是，如果您确实返回原始的多重绑定版本，只需将代码添加到Thingy.Location属性更改处理程序以更新Location和Canvas.Left，您就可以拥有你的蛋糕也吃了。那时他们不需要Canvas.Top绑定，因为您负责更新TwoWay的属性更改处理程序中的Canvas.Left和Canvas.Top。基本上所有实际绑定都是确保在Location和Location时更新Canvas.Left。

无论如何，这个谜团已经解决了为什么你原来的方法不起作用。在设置复杂绑定时，正确识别源和目标至关重要; Canvas.Top绑定并不适用于所有情况，特别是动画。

WPF绑定Canvas.Left / Canvas.Top到Point DependencyProperty，使用PointAnimation

2 个答案: