Geekly Articles each Day
📜 ⬆️ ⬇️

Silverlight & pseudo-animated images.

From the floor to the pit.


Began to deal with technology Silverlight 2.0 and faced with the trouble that there is no built-in support for animated images * .gif.

But there is an opportunity to play video :). And in general, Silverlight at first glance looks rather "inconspicuous", against the background of the elder brother of WPF. But I am of the opinion that if something cannot be done with the use of “this one”, then either we don’t know “this is the thing”, or the problem is something else and only the last thing is to “roll the barrels” on “ this is the thing. ”
Let us dwell on the fact that Silverlight is able to display images and is able to display part of the image, well, this is not bad enough and the light is visible at the end of the tunnel. It remains only to recall how before the era of 3D games were made and in these games sprites were displayed.
Take any game (which is at hand), and "tear out" from there sprites. In my case, this turned out to be Ultima 8. Then we will use a graphical editor and prepare our image, it is clear that you need to have a transparent background, but Silverlilght only supports transparency in png (32bits) images, it is not known what this is about, but it does not agree with less. It turned out about the following.

image

In total, we have “frame animation” on our hands. Now create an empty Silverlight project and make changes to the “display” of Page.xaml.
')
< Canvas x:Name ="LayoutRoot" Background ="Yellow" > < Image Source ="Images/ultima.png" Name ="testImage" Height ="50" Width ="405" Canvas . Left ="0" Canvas . Top ="30" > < Image.Clip > < RectangleGeometry Rect ="0,0,45,50" x:Name ="tempRectangle" > </ RectangleGeometry > </ Image.Clip > </ Image > </ Canvas > * This source code was highlighted with Source Code Highlighter .
  1. < Canvas x:Name ="LayoutRoot" Background ="Yellow" > < Image Source ="Images/ultima.png" Name ="testImage" Height ="50" Width ="405" Canvas . Left ="0" Canvas . Top ="30" > < Image.Clip > < RectangleGeometry Rect ="0,0,45,50" x:Name ="tempRectangle" > </ RectangleGeometry > </ Image.Clip > </ Image > </ Canvas > * This source code was highlighted with Source Code Highlighter .
  2. < Canvas x:Name ="LayoutRoot" Background ="Yellow" > < Image Source ="Images/ultima.png" Name ="testImage" Height ="50" Width ="405" Canvas . Left ="0" Canvas . Top ="30" > < Image.Clip > < RectangleGeometry Rect ="0,0,45,50" x:Name ="tempRectangle" > </ RectangleGeometry > </ Image.Clip > </ Image > </ Canvas > * This source code was highlighted with Source Code Highlighter .
  3. < Canvas x:Name ="LayoutRoot" Background ="Yellow" > < Image Source ="Images/ultima.png" Name ="testImage" Height ="50" Width ="405" Canvas . Left ="0" Canvas . Top ="30" > < Image.Clip > < RectangleGeometry Rect ="0,0,45,50" x:Name ="tempRectangle" > </ RectangleGeometry > </ Image.Clip > </ Image > </ Canvas > * This source code was highlighted with Source Code Highlighter .
  4. < Canvas x:Name ="LayoutRoot" Background ="Yellow" > < Image Source ="Images/ultima.png" Name ="testImage" Height ="50" Width ="405" Canvas . Left ="0" Canvas . Top ="30" > < Image.Clip > < RectangleGeometry Rect ="0,0,45,50" x:Name ="tempRectangle" > </ RectangleGeometry > </ Image.Clip > </ Image > </ Canvas > * This source code was highlighted with Source Code Highlighter .
  5. < Canvas x:Name ="LayoutRoot" Background ="Yellow" > < Image Source ="Images/ultima.png" Name ="testImage" Height ="50" Width ="405" Canvas . Left ="0" Canvas . Top ="30" > < Image.Clip > < RectangleGeometry Rect ="0,0,45,50" x:Name ="tempRectangle" > </ RectangleGeometry > </ Image.Clip > </ Image > </ Canvas > * This source code was highlighted with Source Code Highlighter .
  6. < Canvas x:Name ="LayoutRoot" Background ="Yellow" > < Image Source ="Images/ultima.png" Name ="testImage" Height ="50" Width ="405" Canvas . Left ="0" Canvas . Top ="30" > < Image.Clip > < RectangleGeometry Rect ="0,0,45,50" x:Name ="tempRectangle" > </ RectangleGeometry > </ Image.Clip > </ Image > </ Canvas > * This source code was highlighted with Source Code Highlighter .
  7. < Canvas x:Name ="LayoutRoot" Background ="Yellow" > < Image Source ="Images/ultima.png" Name ="testImage" Height ="50" Width ="405" Canvas . Left ="0" Canvas . Top ="30" > < Image.Clip > < RectangleGeometry Rect ="0,0,45,50" x:Name ="tempRectangle" > </ RectangleGeometry > </ Image.Clip > </ Image > </ Canvas > * This source code was highlighted with Source Code Highlighter .
  8. < Canvas x:Name ="LayoutRoot" Background ="Yellow" > < Image Source ="Images/ultima.png" Name ="testImage" Height ="50" Width ="405" Canvas . Left ="0" Canvas . Top ="30" > < Image.Clip > < RectangleGeometry Rect ="0,0,45,50" x:Name ="tempRectangle" > </ RectangleGeometry > </ Image.Clip > </ Image > </ Canvas > * This source code was highlighted with Source Code Highlighter .
  9. < Canvas x:Name ="LayoutRoot" Background ="Yellow" > < Image Source ="Images/ultima.png" Name ="testImage" Height ="50" Width ="405" Canvas . Left ="0" Canvas . Top ="30" > < Image.Clip > < RectangleGeometry Rect ="0,0,45,50" x:Name ="tempRectangle" > </ RectangleGeometry > </ Image.Clip > </ Image > </ Canvas > * This source code was highlighted with Source Code Highlighter .
< Canvas x:Name ="LayoutRoot" Background ="Yellow" > < Image Source ="Images/ultima.png" Name ="testImage" Height ="50" Width ="405" Canvas . Left ="0" Canvas . Top ="30" > < Image.Clip > < RectangleGeometry Rect ="0,0,45,50" x:Name ="tempRectangle" > </ RectangleGeometry > </ Image.Clip > </ Image > </ Canvas > * This source code was highlighted with Source Code Highlighter .


And of course we will add the resulting image to the project.
And so what have we done?
1. Added the image, naming testImage, and set its sizes.
2. Made a "cut" of the part of this image by attaching to a rectangle (tempRectangle), having dimensions of 45x50.
What is left?
It remains to "activate" the animation. To do this, go to the page with the code and make some simple manipulations:
1. Add a timer and index.

  1. private Timer t;
  2. private Int32 i = 0;
* This source code was highlighted with Source Code Highlighter .


2. Initialize the timer, it is needed to update the animation.
3. Make an event handler for the timer.

Total we get something like this:

  1. namespace SilverLightDrawing
  2. {
  3. public partial class Page : UserControl
  4. {
  5. private Timer t;
  6. private Int32 i = 0;
  8. public page ()
  9. {
  10. Initializecomponent ();
  12. t = new Timer (ShowAnimation, null , 3000, 100);
  13. }
  15. private void ShowAnimation ( object state)
  16. {
  17. i + = 45;
  19. if (i> 400)
  20. {
  21. i = 0;
  22. }
  24. LayoutRoot.Dispatcher.BeginInvoke ( delegate ()
  25. {
  26. Canvas.SetLeft (testImage, -i);
  27. tempRectangle.Rect = new Rect (i, 0, 45, 50);
  28. });
  29. }
  30. }
  31. }
* This source code was highlighted with Source Code Highlighter .


As you can see from the code, we “move” the rectangle and move the image itself, thereby creating an animation.

In the next part of the article, a full-fledged class will be designed for animation output and its expansion is possible.

Source: https://habr.com/ru/post/46197/

More articles:


All Articles