CODEWITHSUNDEEP
c#silverlightimagewindows-phone-7
smohamed
smohamed

Reputation: 3314

Showing animated images on WP7

I want my app to show an animated image of loading when it's loading something, I tried to add an already made animated .gif, but it seems that WP7 doesn't support that...

The image is of loading something like this: enter image description here

I am thinking to make a method to scroll between a sprite sheet like in 2D games, but that would require too much effort to make such a method and i'm not sure it will work in silverlight, any another easy solution to that ?

Upvotes: 1

Views: 4147

Answers (2)

user1228
user1228

Reputation:

I've adapted Dean Chalk's XAML-based loader before; it works pretty good as an overlay. Simply set its Visibility to Hidden when not doing background work, and then switch it to Visible when you wish to block parts of the UI with a loading indicator while doing stuff in the background. The animation is defined in the XAML so it doesn't require any code or trickery to get it spinning.

Here's the relevant bits:

<Canvas RenderTransformOrigin="0.5,0.5" Width="120" Height="120"> 
    <Ellipse Width="21.835" Height="21.862" Canvas.Left="20.1696" Canvas.Top="9.76358" 
        Stretch="Fill" Fill="#E6000000"/> 
    <Ellipse Width="21.835" Height="21.862" Canvas.Left="2.86816" Canvas.Top="29.9581" 
        Stretch="Fill" Fill="#CD000000"/> 
    <Ellipse Width="21.835" Height="21.862" Canvas.Left="5.03758e-006" Canvas.Top="57.9341" 
        Stretch="Fill" Fill="#B3000000"/> 
    <Ellipse Width="21.835" Height="21.862" Canvas.Left="12.1203" Canvas.Top="83.3163" 
        Stretch="Fill" Fill="#9A000000"/> 
    <Ellipse Width="21.835" Height="21.862" Canvas.Left="36.5459" Canvas.Top="98.138" 
        Stretch="Fill" Fill="#80000000"/> 
    <Ellipse Width="21.835" Height="21.862" Canvas.Left="64.6723" Canvas.Top="96.8411" 
        Stretch="Fill" Fill="#67000000"/> 
    <Ellipse Width="21.835" Height="21.862" Canvas.Left="87.6176" Canvas.Top="81.2783" 
        Stretch="Fill" Fill="#4D000000"/> 
    <Ellipse Width="21.835" Height="21.862" Canvas.Left="98.165" Canvas.Top="54.414" 
        Stretch="Fill" Fill="#34000000"/> 
    <Ellipse Width="21.835" Height="21.862" Canvas.Left="92.9838" Canvas.Top="26.9938" 
        Stretch="Fill" Fill="#1A000000"/> 
    <Ellipse Width="21.835" Height="21.862" Canvas.Left="47.2783" Canvas.Top="0.5" 
        Stretch="Fill" Fill="#FF000000"/> 
    <Canvas.RenderTransform> 
        <RotateTransform x:Name="SpinnerRotate" Angle="0" /> 
    </Canvas.RenderTransform> 
    <Canvas.Triggers> 
        <EventTrigger RoutedEvent="ContentControl.Loaded"> 
            <BeginStoryboard> 
                <Storyboard> 
                    <DoubleAnimation Storyboard.TargetName="SpinnerRotate" 
                             Storyboard.TargetProperty="(RotateTransform.Angle)" 
                             From="0" To="360" Duration="0:0:01" 
                             RepeatBehavior="Forever" /> 
                </Storyboard> 
            </BeginStoryboard> 
        </EventTrigger> 
    </Canvas.Triggers> 
</Canvas>

You can click this link for more details. This is WPF, so it may require some work to adapt it for WP7.

BTW, when I say "overlay" I mean placing one element over another. Such as:

<Grid>
  <t:MyUserControl />
  <t:MyOverlayUserControl Visibility="Hidden" />
</Grid>

Upvotes: 4

Rahul Soni
Rahul Soni

Reputation: 4968

Unfortunately, animated GIFs are not supported in Silverlight. For me, using Blend and some vector graphics similar to the ones you have posted above with infinite recursion works well. Try creating a user control if you want to reuse that.

Upvotes: 2

Related Questions