Question

我有使用MVVM模式的WPF解决方案。它包含ViewModel BlockViewModel ：

public class BlockViewModel:ViewModelBase
{
    private double _top;
    public double Top
    {
        get
        {
            return _top;
        }
        set
        {
            if (_top == value)
            {
                return;
            }
            _top = value;
            OnPropertyChanged("Top");
        }
    }

    private bool _isAnimated;
    public bool IsAnimated
    {
        get { return _isAnimated; }
        set
        {
            if (_isAnimated == value)
            {
                return;
            }
            _isAnimated = value;
            OnPropertyChanged("IsAnimated");
        }
    }

}

和UserControl BlockView ：

<UserControl 
             x:Class="BlockGame.Wpf.Views.BlockView"
            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:converters="clr-namespace:BlockGame.Wpf.Converters"
             xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
             xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
             xmlns:blocks="clr-namespace:BlockGame.ViewModels.Blocks;assembly=BlockGame.ViewModels"

             mc:Ignorable="d"
             d:DataContext="{d:DesignInstance Type=blocks:BlockViewModel, IsDesignTimeCreatable=True}"
             >
    <UserControl.Resources>
        <Storyboard x:Key="BlockStoryboard">
            <DoubleAnimation x:Name="StoryboardAnimation" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)" Storyboard.TargetName="Border" From="0" To="100" Duration="0:0:5" />
        </Storyboard>

    </UserControl.Resources>

    <Border Width="100" Height="50" Name="Border" Background="Lavender" BorderThickness="1" BorderBrush="Black">

        <Border.RenderTransform>
            <TranslateTransform X="20" Y="{Binding Top}" />
        </Border.RenderTransform>

        <i:Interaction.Triggers>
            <ei:DataTrigger Binding="{Binding IsAnimated}" Value="True">
                <ei:ControlStoryboardAction Storyboard="{StaticResource BlockStoryboard}" />
            </ei:DataTrigger>
            <ei:DataTrigger Binding="{Binding IsAnimated}" Value="False">
                <ei:ControlStoryboardAction Storyboard="{StaticResource BlockStoryboard}" ControlStoryboardOption="Pause" />
            </ei:DataTrigger>
        </i:Interaction.Triggers>

    </Border>
</UserControl>

有没有办法在动画期间更新Top属性？

更新

我似乎找到了有效的解决方案：

<Border.RenderTransform>
    <TranslateTransform X="{Binding Left}" Y="0" x:Name="TranslateTransform" />
</Border.RenderTransform>
<i:Interaction.Triggers>
         ...
    <ei:PropertyChangedTrigger Binding="{Binding ElementName=TranslateTransform, Path=Y}">
        <ei:ChangePropertyAction Value="{Binding ElementName=TranslateTransform, Path=Y}" PropertyName="Top" TargetObject="{Binding RelativeSource={RelativeSource  FindAncestor, AncestorType={x:Type UserControl}}, Path=DataContext}"></ei:ChangePropertyAction>
    </ei:PropertyChangedTrigger>
</i:Interaction.Triggers>

Answer 1

有趣的问题。 WPF目标依赖项属性中的动画，当您启动它们时，不时有一种很好的干预方式。一种方法可以是为动画使用自定义时间轴。这允许您为动画定义自己的计时机制。再说一遍，我自己没试过。

查看代码，我看到Top属性绑定到边框的Y属性。因此，更改top属性实际上只是更改边框渲染变换的Y属性。

为什么不直接为边框设置动画，而不是动画内容并尝试在此过程中更改Top。如果要将边框动画与另一个动画同步，可以创建两个具有类似“To”，“From”和“Interval”设置的双动画对象。你可以一起开始，以达到你想要的效果。

以下是一个例子：

ScaleTransform st = new ScaleTransform();
this.RenderTransformOrigin = new Point(0.5, 0.5);
this.RenderTransform = st;
st.BeginAnimation(ScaleTransform.ScaleXProperty, scaleUp);
st.BeginAnimation(ScaleTransform.ScaleYProperty, scaleUp);

这里我将相同的动画应用于同一变换的两个不同属性，以按比例缩放。您可以对对象及其边框元素

执行相同的操作

在WPF中的DoubleAnimation期间更新ViewModel中的属性

1 个答案: