Vfrdtyky

I'm new to animations, and I would like to animante RadialGauge values changes from x to y, in order make the transitions smoother.

For example, if the Value property changes from 0 to 100, I would like theRadialGauge` to go through all the intermediate values in, for example, 250 ms.

How can I achieve this?

NOTICE: I'm using MVVM and I set the Value propery via Binding. I hope there's a way to do it without adding code-behind (XAML only, preferably).

Thanks in advance!

I'm trying with Implicit Animations, but I don't understand how they work to animate changes in a property. The code that I've tried is this:

<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>

For example, if the Value property changes from 0 to 100, I would like theRadialGauge` to go through all the intermediate values in, for example, 250 ms.

You could use a simple DoubleAnimation to achieve your target like the following:

<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();

By this way, You need to call storyboard.Begin(); in code-hebind at least.

I hope there's a way to do it without adding code-behind (XAML only, preferably).

If you check the RadialGauge control's source code, the value is a dependency property, the needle's angle was changed when the Value is changed. What you said 'without adding code-behind', I assumed that you could use some XAML Behaviors to start the animation, but it has not provide any events for you. I did not think it's simpler than calling storyboard.Begin().

You could choose to change the source code and add an animation for it. When the Value is changed, the OnValueChanged method will be fired, you could start the animation in it. Then, you could compile your custom version for 'Microsoft.Toolkit.Uwp.UI.Controls' and use it in your project. But I did not think it's simpler than just writing one line code storyboard.Begin() in code-behind.