FillRate and setting background image via UserControl in Window Phone Mango

Question

I'm developing a Silverlight app for Window Phone 7.5 (Mango). I am a total newbie and this is my first app. When I run it in emulator, I see that the FillRate counter is like 4.5 or 5 and red. So it is an issue. After spending sometime I found that the UserControl I have on my Main.xaml and other pages has or is an issue.

BackgroundUC.xaml: This is done by designer in Blend. It has an image of sky which moves right to left. Apart from that I don't know what the code means. This control is meant to be used on all pages as moving background.

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:eim="clr-namespace:Microsoft.Expression.Interactivity.Media;assembly=Microsoft.Expression.Interactions"
    mc:Ignorable="d"
    x:Class="MyApp.BackgroundUC"
    d:DesignWidth="2872" d:DesignHeight="520">
    <UserControl.Resources>
        <Storyboard x:Name="sbSkyBg">
            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="SkyBg" d:IsOptimized="True"/>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="SkyBg">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:1:0" Value="-930"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Image x:Name="SkyBg" Source="SkyBg.png" Stretch="Fill" d:LayoutOverrides="VerticalAlignment, GridBox" RenderTransformOrigin="0.5,0.5">
            <Image.RenderTransform>
                <CompositeTransform/>
            </Image.RenderTransform>
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Loaded">
                    <eim:ControlStoryboardAction Storyboard="{StaticResource sbSkyBg}"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Image>
    </Grid>
</UserControl>

What I found: If I don't use this UserControl but set the MainPage.xaml's LayOutRoot Grid's Backgrond to my sky image (static) the FillRate drops to 1.5. But with this I will have to set the Grid's Background on each page individually. And I am not sure how to animate that to give a moving sky effect.

Questions: 1: What is wrong in the UC and how can I adjust my UC so as the FillRate is within optimal range i.e. <2.5?

2: If UC itself is a problem, what is the best way in my scenario so I can have a common background with some animaiton?

3: If I have to do at the individual page level like I mentioned above, how can I animate the background set like this:

<Grid.Background>
            <ImageBrush ImageSource="/MyApp;component/SkyBg.png" />
</Grid.Background>

I am still learning and any help is really appreciated.

Answer 1

There are few tips, that came to my mind looking to your problem:

1. Downsize your image from 2872 pixels to < 2048 (max texture buffer size). It will help to use GPU to render your sky.
2. Remove additional Grid in your UserControl, make Image the root of a tree.
3. Enable Image Cache (ImageCache='BitmapCache') on all of your pages to your UserControl

Hope it helps to increase performance