The XAML Sprite Control

Many times you have to create an animated sprite or logo or something else that you want to put in XAML without getting into code or timers or xna, because you want it simple, like for a tutorial and else.

 

 

 

 

 

 

 

 

 

I decide to create a Sprite control to make it easier. The capabilities it has are:

  • MappingContainer: It is a container for different mappings for a single sprite control.
  • FrameRate
  • CurrentMap: The current map (animation and image).
  • OverImageSource: If you want to have an image over the sprite.
  • Position: The current frame:
  • SpriteHeight and SpriteWidth: To cut the Image with this rectangle.

Now may be you are asking, what is the mapping container?, here it is an example:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<my:SpriteControl x:Name="Horse" HorizontalAlignment="Left"
 VerticalAlignment="Top" Height="90" Width="150"
 SpriteHeight="90" SpriteWidth="157" CurrentMap="0" Position="0">
<my:SpriteControl.MappingContainer>
<my:Mapping SpriteSheetSource="...animatedhorse.png">
<my:Mapping.Data>
<Point X="0" Y="10"/>
<Point X="267" Y="10"/>
<Point X="533" Y="10"/>
<Point X="796" Y="10"/>
<Point X="0" Y="101"/>
<Point X="267" Y="101"/>
<Point X="533" Y="101"/>
<Point X="796" Y="101"/>
</my:Mapping.Data>
</my:Mapping>
</my:SpriteControl.MappingContainer>
</my:SpriteControl>
</Grid>

Now you see that on the way you can change the animation simply changing the current mapping. That is my small contribution who born Kingston upon Thames.

And in code, the only thing you need is begin the animation, in this case it start again when it finishes.

Action repeat = null;
repeat = () => Horse.BeginAsync(repeat);
repeat.Invoke();

And here you have the AnimatedControlExample code (ren doc to zip).

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s