Silverlight Interrupts JQuery Animation

Question

I have a HTML page that contains two main elements. One is a silverlight map (with animated pushpins) and the other is a jQuery animation.

When the silverlight map contains lots of pushpins the jQuery animation is very choppy. Is there any way to get Silverlight to be less of a resource hog and let the jQuery animation have higher priority?

Answer 1

You can throttle the framerate of Silverlight applications by adding the MaxFrameRate parameter to the object tag:-

<object ...>
    ...
    <param name="maxframerate" value="15 />
</object>

That may free up the CPU to handle the JQuery animations.

Answer 2

Hi Andrew,

I've got a custom Map control that is a wrapper around the Silverlight Bing map control. I've retrieving data about vehicle positions from a web service. I'm then adding another custom control to a map layer for each vehicle... like so:

    VehicleMarker vehicleMarker = new VehicleMarker(marker);
    markerLayer.AddChild(vehicleMarker, new Location(vehicleMarker.Location.Latitude, vehicleMarker.Location.Longitude));

The 'VehicleMarker' class has this style:

<Style x:Name="VehicleMarkerStyle" TargetType="Controls:VehicleMarker" >
        <Setter Property="RenderTransformOrigin" Value="0.5,0.5" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Controls:VehicleMarker" >
                    <Grid>
                        <Grid.RenderTransform>
                            <TransformGroup>
                                <ScaleTransform x:Name="ScaleTransform" ScaleX="1" ScaleY="1" />
                                <TranslateTransform x:Name="TranslateTransform" X="0" Y="0"/>
                            </TransformGroup>
                        </Grid.RenderTransform>
                        <Image Source="{TemplateBinding IconUrl}" Width="30" Height="30" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

I've overridden the 'OnApplyTemplate' method on the 'VehicleMarker' so that once the template has been applied, an animation is added to the control where appropriate:

        TranslateTransform translateTransform = new TranslateTransform();
        ScaleTransform scaleTransform = new ScaleTransform();
        TransformGroup transformGroup = new TransformGroup();
        transformGroup.Children.Add(translateTransform);
        transformGroup.Children.Add(scaleTransform);
        this.RenderTransform = transformGroup; 
        this.RenderTransformOrigin = new Point(0.5, 0.5);

        var storyboard = new Storyboard();
        storyboard.AutoReverse = true;
        storyboard.RepeatBehavior = RepeatBehavior.Forever;
        storyboard.Duration = new Duration(new TimeSpan(0,0,0,0,500));

        var animation = new DoubleAnimation();
        animation.From = translateTransform.Y;
        animation.To = translateTransform.Y-5;
        storyboard.Children.Add(animation);
        Storyboard.SetTargetProperty(animation, new PropertyPath("(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.Y)"));
        Storyboard.SetTarget(animation, this);

        if (!Resources.Contains("VehicleBounceAnimation"))
        {
            Resources.Add("VehicleBounceAnimation", storyboard);
        }

        storyboard.Begin();

I suspect that its the animation and the number of icons that are being added to the map that is the problem. If I stop all the animations then performance improves. Its not great, but it is markedly better.

The jQuery to animate another element on the same page as the silverlight map looks like this:

function scrollElement(name, timeInSecs) 
        {
            var elementToScroll = document.getElementById(name);
            if(elementToScroll!=null)
            {
                var jscriptElement = $('#' + name);

                jscriptElement.animate({ scrollTop: elementToScroll.scrollHeight - elementToScroll.clientHeight }, (timeInSecs - 2) * 1000);
            }
            else
            {
                window.alert('Cannot find '+name+' to scroll');
            }
       }