故事板不起作用

Question

我正在尝试根据由随机数确定的角度旋转箭头。 箭头角度确实会改变，但动画不起作用。

<Grid>
        <ed:BlockArrow x:Name="blockArrow" Fill="Black" HorizontalAlignment="Left" Height="13.299" Orientation="Left" Stroke="Black" VerticalAlignment="Top" Width="100" Margin="84.571,165.951,0,0" RenderTransformOrigin="1,0.5">

            <ed:BlockArrow.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform x:Name="ArrowTransform" Angle="{Binding ElementName=MeterValueTextBox, Path=Text}" />
                        <TranslateTransform/>
                </TransformGroup>
            </ed:BlockArrow.RenderTransform>
        </ed:BlockArrow>
        <Ellipse Fill="Black" HorizontalAlignment="Left" Height="25" Stroke="Black" VerticalAlignment="Top" Width="25" Margin="172.865,159.568,0,0"/>
        <TextBlock 
            Text="Type value:" 
            FontSize="16" 
            HorizontalAlignment="Left" 
            VerticalAlignment="Top" 
            Margin="57.976,245.873,0,0" 
            />
        <TextBox 
            x:Name="MeterValueTextBox"
            HorizontalAlignment="Left"  
            VerticalAlignment="Top" 
            Width="100" 
            Margin="140,245.873,0,0"
            Text="{Binding Meter, UpdateSourceTrigger=PropertyChanged}"
            >
            <TextBox.Triggers>
                <EventTrigger RoutedEvent="TextBox.TextChanged">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                                Storyboard.TargetName="ArrowTransform" 
                                Storyboard.TargetProperty="(RotateTransform.Angle)"
                                From="{Binding OldMeterValue}" To="{Binding Meter}" Duration="0:0:0:1" 
                                />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </TextBox.Triggers>
        </TextBox>
    </Grid>

并且视图模型是：

public class MainViewModel : ViewModelBase
{
    private float _meter;

    public float Meter
    {
        get { return _meter; }
        set
        {
            if (!Equals(_meter, value))
            {
                OldMeterValue = _meter;
                _meter = value;
                OnPropertyChanged();
            }
        }
    }

    private float _oldMeterValue;

    public float OldMeterValue
    {
        get { return _oldMeterValue; }
        set
        {
            if (_oldMeterValue != value)
            {
                _oldMeterValue = value;
                OnPropertyChanged();
            }
        }
    }
    public MainViewModel()
    {
        DisplayName = "Benchmark Application";

        OldMeterValue = 0;
        Meter = 0;

        var meterTimer = new Timer
            {
                Interval = 1000
            };
        meterTimer.Elapsed += MeterTimerOnElapsed;
        meterTimer.Start();
    }

    private void MeterTimerOnElapsed(object sender, ElapsedEventArgs elapsedEventArgs)
    {
        var randomNumber = new Random();
        var meterValue = randomNumber.Next(0, 180);

        Meter = meterValue;

    }
}

现在，箭头从旧值反弹到新值但没有动画。 请协助......

Answer 1

动画的

Duration属性看起来太快（一毫秒??）。尝试将其设置为更大的值以使其显而易见，例如，5秒：

<DoubleAnimation
    Storyboard.TargetName="ArrowTransform" 
    Storyboard.TargetProperty="(RotateTransform.Angle)"
    From="{Binding OldMeterValue}" To="{Binding Meter}" Duration="0:0:5" 
    />

[Reference]