如何使用 MVVM 为社区工具包 RadialGauge 制作动画？答案

【问题标题】：How to animate Community Toolkits RadialGauge with MVVM?如何使用 MVVM 为社区工具包 RadialGauge 制作动画？
【发布时间】：2019-07-21 16:38:03
【问题描述】：

我想为 Windows 社区工具包的径向量表设置动画，但不幸的是，在 RaisePropertyChanged 之后 UI 不会自行刷新。

这是我的代码：

查看

<TextBlock Grid.Row="0" Text="{Binding RadialGaugeValue}" />
<controls:RadialGauge 
    x:Name="MyRadialGauge"
    Grid.Row="01"
    Value="{Binding RadialGaugeValue}"
    Minimum="0"
    Maximum="100"
    StepSize="1"
    IsInteractive="False"
    TickSpacing="10"
    TickWidth="0"
    ScaleWidth="4"
    ScalePadding="29"
    ScaleTickWidth="1" 
    MinAngle="245"
    MaxAngle="115"
    Unit="Sparquote"
    NeedleWidth="2"
    NeedleLength="100" 
    MaxHeight="250" 
    Margin="0,20,0,0" 
    NeedleBrush="{ThemeResource SystemColorHighlightBrush}" 
    FocusVisualPrimaryBrush="{x:Null}"
    FocusVisualSecondaryBrush="Green"
    TrailBrush="{ThemeResource SystemColorHotlightBrush}" 
    ValueStringFormat=".&quot;%&quot;">

视图模型

private async Task DoSavingRateAnimation(double myValue)
{
    var progress = new Progress<int>(value =>
    {
        RadialGaugeValue = value;
        RaisePropertyChanged("RadialGaugeValue");
    });
    await SavingRateAnimation(progress, myValue);

}

private Task SavingRateAnimation(IProgress<int> progress, double value)
{
    return Task.Run(() =>
    {
        int i = 0;
        while (RadialGaugeValue < value)
        {
            Task.Delay(100).Wait();
            i += 1;
            progress.Report(i);
        }
    });
}

如您所见，radialGauge 不会自行更新。

您知道如何为控件设置动画吗？

【问题讨论】：

你试过使用两种方式绑定Value="{Binding RadialGaugeValue, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
谢谢你！而已。但是不明白为什么，我还以为TwoWay Binding就是把UI中的值改了写回源。顺便说一句，我不明白为什么这个问题被否决了。
是的，我知道，否决票是在问题创建后不久。是的，我测试了Mode="OneWay"，但它不起作用。所以你的回答是对的，我需要Value="{Binding RadialGaugeValue, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"

标签： mvvm uwp windows-community-toolkit

【解决方案1】：

请将RadialGauge值绑定设置为双向模型，如下所示。

Value="{Binding RadialGaugeValue, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"

【讨论】：