[Solved] Animation lag when changing Value of gauges

[Sergio]

Hello, I'm having an issue with the Gauge controls.
I have a simple page where I created a Gauge and a button that randomizes the values of the different parts of the Gauge.
The
app works fine, it's just that when I run it on the VS2013 WP8 emulator
it looks perfectly smooth, and instead it lags a lot on my Lumia 920.

I was wondering: is there something wrong with my code, or is it normal?

This is the file .xaml

    <Grid x:Name="LayoutRoot" Background="{StaticResource imgKey}">

        <!--TitlePanel contiene il nome dell'applicazione e il titolo della pagina-->
        <StackPanel Grid.Row="0" Margin="12,17,0,28">
            <TextBlock Text="Funzioni varie" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock Text="Contatore" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--Controlli ed elementi della pagina tranne il grafico e il totale-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Button x:Name="Randomizza_" Content="Randomizza!" HorizontalAlignment="Left"
                    Margin="130,500,0,0" VerticalAlignment="Top" Click="Randomizza__Click"/>

        </Grid>

    <gauges:RadialGaugeRange TickStep="10"
                         LabelStep="20"
                         LabelRadiusScale="0.92"
                         TickRadiusScale="0.8" MinAngle="0.8" MaxAngle="179.4">
            <gauges:RadialGaugeRange.TickTemplate>
                <DataTemplate>
                    <Rectangle Width="20"
                       Height="5"
                       Fill="Gray" />
                </DataTemplate>
            </gauges:RadialGaugeRange.TickTemplate>
        </gauges:RadialGaugeRange>
        <gauges:RadialGaugeRange TickStep="0" LabelStep="0">
            <gauges:RadialBarGaugeIndicator
                                    gauges:RadialGaugeRange.IndicatorRadiusScale="0.75"
                BorderThickness="10" IsAnimated="False" BarThickness="8" Value="100" Background="White" BarBrush="Gray" />
        </gauges:RadialGaugeRange>
        <gauges:RadialGaugeRange TickRadiusScale="0.5"
                         LabelStep="0"
                         TickStep="0">
            <!--Freccia-->
            <gauges:ArrowGaugeIndicator x:Name="Freccia" ArrowBrush="Crimson"
                                ArrowThickness="5"
                                ArrowTailRadius="2"
                                gauges:RadialGaugeRange.IndicatorRadiusScale="0.85" Value="0" IsAnimated="True" AnimationDuration="0:0:0.7" />
        </gauges:RadialGaugeRange>
        <gauges:RadialGaugeRange TickStep="0" LabelStep="0">
            <gauges:RadialBarGaugeIndicator x:Name="Barra_bianca"
                                    gauges:RadialGaugeRange.IndicatorRadiusScale="0.6"
                BorderThickness="10" IsAnimated="True" BarThickness="50" Value="0" Background="White" BarBrush="White" />
        </gauges:RadialGaugeRange>
        <gauges:RadialGaugeRange TickStep="0" LabelStep="0">
            <gauges:RadialBarGaugeIndicator x:Name="Barra_verde"
                                    gauges:RadialGaugeRange.IndicatorRadiusScale="0.168"
                BorderThickness="10" IsAnimated="True" BarThickness="55" Value="0" Background="White" BarBrush="#FF0A7C29" />
        </gauges:RadialGaugeRange>
        <gauges:RadialGaugeRange TickStep="0" LabelStep="0">
            <gauges:RadialBarGaugeIndicator x:Name="Barra_blu"
                                    gauges:RadialGaugeRange.IndicatorRadiusScale="0.38"
                BorderThickness="10" IsAnimated="True" BarThickness="30" Value="0" Background="White" BarBrush="#FF2C4CA0" />
        </gauges:RadialGaugeRange>
        <TextBlock x:Name="Percentuale" HorizontalAlignment="Left" Margin="115,405,0,0" TextWrapping="Wrap"
                   Text="Totale >>> 0 %"
                   VerticalAlignment="Top" Width="345" FontSize="30" FontWeight="Bold"/>
    </Grid>
</phone:PhoneApplicationPage>

And this is the .cs

namespace App_panorama_esercitazione
{
    public partial class TelerikGauge : PhoneApplicationPage
    {
        public TelerikGauge()
        {
            InitializeComponent();
            ValoriCasuali();
        }

        private void Randomizza__Click(object sender, RoutedEventArgs e)
        {
            ValoriCasuali();
        }

        private async void ValoriCasuali()
        {
            Random generaSequenza = new Random();
            int bianco, verde, blu;
            bianco = generaSequenza.Next(0, 100);
            verde = generaSequenza.Next(0, 100);
            blu = generaSequenza.Next(0, 100);
            Freccia.Value = (float)((bianco + verde + blu) * 100) / 300;
            Barra_bianca.Value = bianco;
            await System.Threading.Tasks.Task.Delay(200);
            Barra_blu.Value = blu;
            await System.Threading.Tasks.Task.Delay(200);
            Barra_verde.Value = verde;
            await System.Threading.Tasks.Task.Delay(200);
            Percentuale.Text = "Totale >>> " + Freccia.Value.ToString("####0.00") + " %";
        }
    }
}

I also attached a screen of the WP8 emulator.

Thank you :)
Sergio

[Rosy Topchiyska]

Hi Sergio,

Thank you for contacting us.

I have tested your scenario in a sample project and it performs equally well on device (Lumia 920) and emulator. Could you please see if you have the same performance issues with the attached project and if so, please provide some more information about the version of the controls that you use. If the issues are not present in the attached project, could you send us a sample app that reproduces them.

I look forward to your reply. 

Regards,
Rosy Topchiyska
Telerik

 

 

[Sergio]

Hello, thank for your answer! I tried your code and it doesn't lag, so I messed around with my project and I discovered that the problem was caused by a couple of RadNumerikUpDown controls I had in that page. After calling the above methode, I updated the values in those controls, and it looks like that triggered another method I'd created that updated the arrow indicator, so the animations overlapped and they semmed to be laggy.

I didn't know the ValueChanged even triggered if you manually change the UpDown value via the code itself, other than manually tapping on the controls in the app.
Thank you for your time :)

Have a nice day!
Sergio