This is a migrated thread and some comments may be shown as answers.

Animation lag when changing Value of gauges

2 Answers 67 Views
Gauge
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Sergio
Top achievements
Rank 1
Sergio asked on 02 Jul 2014, 07:54 PM
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

2 Answers, 1 is accepted

Sort by
0
Rosy Topchiyska
Telerik team
answered on 07 Jul 2014, 02:26 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Sergio
Top achievements
Rank 1
answered on 07 Jul 2014, 09:31 PM
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
Tags
Gauge
Asked by
Sergio
Top achievements
Rank 1
Answers by
Rosy Topchiyska
Telerik team
Sergio
Top achievements
Rank 1
Share this question
or