WindowsPhone ImageTools:Working with Animated Gif Images(C#-Xaml)

Advertisemen

Introduction:

In some times,we may need to working with animated Gif images,which format images are not direclty supported by Silverlight nor Windows Phone: if you try to download and display a GIF image inside an Image control you’ll get an exception.So that in this post i am going to explain how to bind and working with animated GIF images in windows phone

Note:Static GIF images are naively supported by windows phone 8 image control.So that procedure described in this post is only for animated GIF's   

Source File at :WPAnimatedGIFSample

Requirements: 

However to work Gif image ,we need to use third part library is ImageTools that contains many converters and tools to convert one image from a format to another on the fly. One of the supported scenario is GIF images conversion (that can be animated, too) for Windows Phone.

So that we need to add this library dlls by right click on your solution=>Manage NuGet Packages=>Click Online from dialog

Description:

Now we are ready for using GIF image in windows phone.Beacuse above ImageTools having

two controls

• The first is a control called AnimatedImage, which is going to replace the standard SilverlightImagecontrol. It’s the container that will display the image.
• The second is a converter called ImageConverter, which takes care of converting the image from one format to another.

Both objects are part of the ImageTools.Controls namespace, that should be declared in the XAML page where we’re going to use them.

1)How to use ImageTools AnimatedImage in xaml :

XAML

xmlns:imagetools=”clr-namespace:ImageTools.Controls;assembly=ImageTools.Controls”

 Once you have imported the namespace, you can add the converter as a resource for the page or, if you prefer, for the global application. Here is an example on how to do it for a single page:

XAML

<phone:PhoneApplicationPage.Resources> 
    <imagetools:ImageConverter x:Key="ImageConverter" /> 
</phone:PhoneApplicationPage.Resources>

 Now you are ready to insert the AnimatedImage control into your page: you simply have to bind theSource property with a Uri object (which contains the URL of the gif image) and apply the Imageconverter.

XAML

<imagetools:AnimatedImage x:Name="Image" Source="{Binding Path=ImageSource, Converter={StaticResource ImageConverter}}" />

 2)how to bind Gif Image with imageTools c#:

Now we need to bind Gif image like this way

C#

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Net; 
using System.Windows; 
using System.Windows.Controls; 
using System.Windows.Navigation; 
using Microsoft.Phone.Controls; 
using Microsoft.Phone.Shell; 
using ScreenCaptureWP8.Resources; 
using System.Windows.Media.Imaging; 
using System.IO; 
using System.Windows.Media; 
using ImageTools.IO.Gif; 
 
namespace ScreenCaptureWP8 
{ 

  public partial class MainPage : PhoneApplicationPage 
    { 
        // Constructor 
        public MainPage() 
        { 
            InitializeComponent(); 
            Sample smple = new Sample(); 
            smple.ImageSource = new Uri("http://0.tqn.com/d/graphicssoft/1/0/n/p/5/ST_animated_turkey01.gif", UriKind.Absolute); 
            this.DataContext = smple; 
            ImageTools.IO.Decoders.AddDecoder<GifDecoder>(); 
             
        } 
 
        
    } 
    public class Sample 
    { 
         
        private  Uri _imageSource; 
 
        public  Uri ImageSource 
        { 
            get { return _imageSource; } 
            set 
            { 
                if (_imageSource != value) 
                { 
                    _imageSource = value; 
                } 
            } 
        } 
    } 
}

Now animated GIF image will be displayed on your UI

3)How to bind  animated GIF using ImageTools ExtendedImage

For Local Gif image:

C#

ImageToolName.Source = new ExtendedImage() { UriSource = new Uri("wrong.gif", UriKind.Relative) };//Local animated gif image binding with ImageTools

For Online Gif image

C#

Image1.Source = new ExtendedImage() { UriSource = new Uri("http://0.tqn.com/d/graphicssoft/1/0/n/p/5/ST_animated_turkey01.gif" , UriKind.Absolute) };//online gif image binding

   4)How to start/stop  GIF Image animation using ImageTools 

C#

ImageToolName.Start();//to start animation 
ImageToolname.Stop();//to stop animation

Note: Please share your thoughts,what you think about this post,Is this post really helpful for you?otherwise it would be very happy ,if you have any thoughts for to implement this requirement in any another way?I always welcome if you drop comments on this post and it would be impressive.

Have a nice day by Subramanyam Raju :)

Advertisemen