代码之家 › 专栏 › 技术社区 › SuperJMN

设置RadialGauge动画

windows-community-toolkit uwp

1

SuperJMN · 技术社区 · 6 年前

我对动画不熟悉,我想做动画 RadialGauge x y ,以使过渡更平滑。

例如,如果 Value property changes from 0 to 100, I would like the RadialGauge`遍历所有中间值,例如250毫秒。

注意: 我正在使用MVVM,我设置了 Value Property通过 Binding . 我希望有一种方法可以做到这一点,而不需要在后面添加代码(最好只使用XAML)。

我正在尝试使用隐式动画,但我不理解它们如何为属性中的更改设置动画。我试过的代码是:

<controls:RadialGauge Value="{Binding Status.Speed, Converter={StaticResource Speed}}">
    <animations:Implicit.Animations>
        <animations:ScalarAnimation ImplicitTarget="Value" Duration="0:0:0.3" />
    </animations:Implicit.Animations>
</controls:RadialGauge>

1 回复 | 直到 5 年前

1

AVK 6 年前

例如,如果Value属性从0变为100,我希望radialgauge遍历所有中间值,例如250毫秒。

你可以用一个简单的 DoubleAnimation 实现以下目标:

<Page.Resources>
    <Storyboard x:Name="storyboard" >
        <DoubleAnimation Storyboard.TargetName="RadialGaugeControl" Storyboard.TargetProperty="Value" From="0" To="100" Duration="0:0:3" EnableDependentAnimation="True"></DoubleAnimation>
    </Storyboard>
</Page.Resources>
<Grid>
    <controls:RadialGauge x:Name="RadialGaugeControl"  Value="70" Minimum="0" 
Maximum="180" TickSpacing="20" ScaleWidth="26" Unit="Units" TickBrush="Gainsboro"
ScaleTickBrush="{ThemeResource ApplicationPageBackgroundThemeBrush}"
NeedleWidth="5" TickLength="18" IsInteractive="True">
    </controls:RadialGauge>
</Grid>

storyboard.Begin();

storyboard.Begin(); 至少在代码隐藏中。

我希望有一种方法可以做到这一点,而不需要在后面添加代码(最好只使用XAML)。

如果你检查 RadialGauge 控件的 source code ,该值是一个依存属性,当 Value 已更改。你说的“不添加代码”,我认为你可以使用一些 XAML Behaviors 启动动画,但它没有为您提供任何事件。我不认为这比打电话简单 storyboard.Begin()

您可以选择更改源代码并为其添加动画。当 价值 更改后 OnValueChanged 方法将被激发,您可以在其中启动动画。然后,你可以为微软编译你的自定义版本。工具包。Uwp。用户界面。控件,并在项目中使用它。但我不认为这比只写一行代码简单 故事板。开始()