WPF中如何将后台动态值绑定到XAML动画？

问题根源 #

1. 动画未以Border的实时Actual尺寸/位置作为起始值，每次都用初始默认值运行，导致后续点击重复首次动画效果
2. 后台动态目标值未与XAML动画正确绑定，状态切换时没有实时更新动画目标参数

解决思路 #

1. 为每个Border创建独立的状态模型，维护默认状态、选中状态的目标尺寸/位置，通过INotifyPropertyChanged实现数据更新通知
2. 动画执行时，强制读取Border当前的ActualWidth/ActualHeight和Canvas位置作为动画起始值，绑定后台状态模型的目标值作为动画终点

修改后的代码实现 #

VB后台代码

Imports System.ComponentModel
Imports System.Windows.Media.Animation
Imports System.Collections.ObjectModel

Public Class BorderAnimationViewModel
    Implements INotifyPropertyChanged

    Public Event PropertyChanged As PropertyChangedEventHandler Implements INotifyPropertyChanged.PropertyChanged

    Private Sub NotifyPropertyChanged(propertyName As String)
        RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(propertyName))
    End Sub

    ' 单个Border的状态模型
    Public Class BorderState
        Implements INotifyPropertyChanged

        Public Event PropertyChanged As PropertyChangedEventHandler Implements INotifyPropertyChanged.PropertyChanged

        Private _isSelected As Boolean
        Private _defaultLeft As Double
        Private _defaultTop As Double
        Private _defaultWidth As Double
        Private _defaultHeight As Double

        ' 动态计算目标位置与尺寸
        Public ReadOnly Property TargetLeft As Double
            Get
                Return If(IsSelected, DefaultLeft, DefaultLeft + 50)
            End Get
        End Property

        Public ReadOnly Property TargetTop As Double
            Get
                Return If(IsSelected, DefaultTop, DefaultTop + 50)
            End Get
        End Property

        Public ReadOnly Property TargetWidth As Double
            Get
                Return If(IsSelected, DefaultWidth * 1.5, DefaultWidth * 0.8)
            End Get
        End Property

        Public ReadOnly Property TargetHeight As Double
            Get
                Return If(IsSelected, DefaultHeight * 1.5, DefaultHeight * 0.8)
            End Get
        End Property

        Public Property IsSelected As Boolean
            Get
                Return _isSelected
            End Get
            Set(value As Boolean)
                _isSelected = value
                NotifyPropertyChanged(NameOf(IsSelected))
                NotifyPropertyChanged(NameOf(TargetLeft))
                NotifyPropertyChanged(NameOf(TargetTop))
                NotifyPropertyChanged(NameOf(TargetWidth))
                NotifyPropertyChanged(NameOf(TargetHeight))
            End Set
        End Property

        Public Property DefaultLeft As Double
            Get
                Return _defaultLeft
            End Get
            Set(value As Double)
                _defaultLeft = value
                NotifyPropertyChanged(NameOf(DefaultLeft))
                NotifyPropertyChanged(NameOf(TargetLeft))
            End Set
        End Property

        Public Property DefaultTop As Double
            Get
                Return _defaultTop
            End Get
            Set(value As Double)
                _defaultTop = value
                NotifyPropertyChanged(NameOf(DefaultTop))
                NotifyPropertyChanged(NameOf(TargetTop))
            End Set
        End Property

        Public Property DefaultWidth As Double
            Get
                Return _defaultWidth
            End Get
            Set(value As Double)
                _defaultWidth = value
                NotifyPropertyChanged(NameOf(DefaultWidth))
                NotifyPropertyChanged(NameOf(TargetWidth))
            End Set
        End Property

        Public Property DefaultHeight As Double
            Get
                Return _defaultHeight
            End Get
            Set(value As Double)
                _defaultHeight = value
                NotifyPropertyChanged(NameOf(DefaultHeight))
                NotifyPropertyChanged(NameOf(TargetHeight))
            End Set
        End Property

        Private Sub NotifyPropertyChanged(propertyName As String)
            RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(propertyName))
        End Sub
    End Class

    Public Property BorderStates As ObservableCollection(Of BorderState)

    Public Sub New()
        BorderStates = New ObservableCollection(Of BorderState)()
        ' 初始化示例Border状态
        BorderStates.Add(New BorderState With {.DefaultLeft = 50, .DefaultTop = 50, .DefaultWidth = 100, .DefaultHeight = 100})
        BorderStates.Add(New BorderState With {.DefaultLeft = 200, .DefaultTop = 50, .DefaultWidth = 100, .DefaultHeight = 100})
        BorderStates.Add(New BorderState With {.DefaultLeft = 50, .DefaultTop = 200, .DefaultWidth = 100, .DefaultHeight = 100})
    End Sub

    ' 选中指定Border，取消其他选中状态
    Public Sub SelectBorder(selectedState As BorderState)
        For Each state In BorderStates
            state.IsSelected = state Is selectedState
        Next
    End Sub

    ' 重置所有Border到默认状态
    Public Sub ResetAllBorders()
        For Each state In BorderStates
            state.IsSelected = False
        Next
    End Sub
End Class

' 主窗口代码
Public Class MainWindow
    Private ViewModel As New BorderAnimationViewModel

    Public Sub New()
        InitializeComponent()
        DataContext = ViewModel
    End Sub

    ' Border左键点击事件
    Private Sub Border_MouseLeftButtonDown(sender As Object, e As MouseButtonEventArgs)
        Dim border = CType(sender, Border)
        Dim state = CType(border.DataContext, BorderAnimationViewModel.BorderState)
        ViewModel.SelectBorder(state)
        AnimateBorder(border, state)
    End Sub

    ' Border右键点击事件
    Private Sub Border_MouseRightButtonDown(sender As Object, e As MouseButtonEventArgs)
        ViewModel.ResetAllBorders()
        ' 遍历所有Border执行重置动画
        For Each child In Canvas.Children
            If TypeOf child Is Border Then
                Dim border = CType(child, Border)
                Dim state = CType(border.DataContext, BorderAnimationViewModel.BorderState)
                AnimateBorder(border, state)
            End If
        Next
        e.Handled = True
    End Sub

    ' 通用动画执行方法
    Private Sub AnimateBorder(border As Border, state As BorderAnimationViewModel.BorderState)
        ' 宽度动画：从当前ActualWidth过渡到目标值
        Dim widthAnim As New DoubleAnimation() With {
            .From = border.ActualWidth,
            .To = state.TargetWidth,
            .Duration = TimeSpan.FromSeconds(0.3)
        }
        border.BeginAnimation(Border.WidthProperty, widthAnim)

        ' 高度动画：从当前ActualHeight过渡到目标值
        Dim heightAnim As New DoubleAnimation() With {
            .From = border.ActualHeight,
            .To = state.TargetHeight,
            .Duration = TimeSpan.FromSeconds(0.3)
        }
        border.BeginAnimation(Border.HeightProperty, heightAnim)

        ' X位置动画：从当前Canvas.Left过渡到目标值
        Dim leftAnim As New DoubleAnimation() With {
            .From = Canvas.GetLeft(border),
            .To = state.TargetLeft,
            .Duration = TimeSpan.FromSeconds(0.3)
        }
        border.BeginAnimation(Canvas.LeftProperty, leftAnim)

        ' Y位置动画：从当前Canvas.Top过渡到目标值
        Dim topAnim As New DoubleAnimation() With {
            .From = Canvas.GetTop(border),
            .To = state.TargetTop,
            .Duration = TimeSpan.FromSeconds(0.3)
        }
        border.BeginAnimation(Canvas.TopProperty, topAnim)
    End Sub
End Class

XAML代码

<Window x:Class="MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Border Animation" Height="450" Width="800">
    <Canvas x:Name="Canvas">
        <ItemsControl ItemsSource="{Binding BorderStates}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Border Width="{Binding DefaultWidth}" Height="{Binding DefaultHeight}"
                            Background="LightBlue" BorderBrush="Black" BorderThickness="2"
                            MouseLeftButtonDown="Border_MouseLeftButtonDown"
                            MouseRightButtonDown="Border_MouseRightButtonDown">
                        <TextBlock Text="Click Me" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Border>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Canvas/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemContainerStyle>
                <Style>
                    <Setter Property="Canvas.Left" Value="{Binding DefaultLeft}"/>
                    <Setter Property="Canvas.Top" Value="{Binding DefaultTop}"/>
                </Style>
            </ItemsControl.ItemContainerStyle>
        </ItemsControl>
    </Canvas>
</Window>

关键修改说明 #

1. 状态模型绑定：每个Border对应独立的BorderState实例，通过INotifyPropertyChanged实现目标值变化时自动通知UI
2. 动画起始值：强制读取Border的ActualWidth/ActualHeight和当前Canvas位置作为动画From值，确保从实时状态过渡
3. 动态目标值：选中/重置时更新状态模型的IsSelected属性，自动计算目标尺寸/位置，动画直接绑定这些动态值
4. 全局重置逻辑：右键点击时遍历所有Border执行动画，保证每个元素从当前状态平滑过渡到默认状态

内容的提问来源于stack exchange，提问作者Trobit