Animation lag when changing Value of gauges

3 posts, 0 answers
  1. Sergio
    Sergio avatar
    18 posts
    Member since:
    May 2014

    Posted 02 Jul 2014 Link to this post

    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. Rosy Topchiyska
    Admin
    Rosy Topchiyska avatar
    551 posts

    Posted 07 Jul 2014 Link to this post

    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.

     
  3. DevCraft banner
  4. Sergio
    Sergio avatar
    18 posts
    Member since:
    May 2014

    Posted 07 Jul 2014 in reply to Rosy Topchiyska Link to this post

    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
Back to Top