Google WindowsPhone ImageTools:Working with Animated Gif Images(C#-Xaml) | SubramanyamRaju Xamarin & Windows App Dev Tutorials

Thursday 20 March 2014

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

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  :)

13 comments:

  1. Whoa this weblog is excellent i really like studying your posts. Keep up the great work! You recognize, a lot of individuals are searching round for this information, you could aid them greatly.

    ReplyDelete
  2. Thank you so much for your valuable feedback :)

    ReplyDelete
  3. Hi and thank you, this really help me. But i think that: xmlns:imagetools=”clr-namespace:ImageTools.Controls;assembly=ImageTools.Control” should be : xmlns:imagetools=”clr-namespace:ImageTools.Controls;assembly=ImageTools.Controls”
    You miss "s" in last world Controls...

    ReplyDelete
    Replies
    1. Hi Břetislav Hájek,

      Thanks you so much for superb identification,i updated that mistake on this post.

      Delete
  4. Its a great post bro, but when im about to run the porgram ,i get this exception
    "An exception of type 'System.UriFormatException' occurred in System.ni.dll but was not handled in user code

    If there is a handler for this exception, the program may be safely continued."

    Its for this line
    smple.ImageSource = new Uri("wrong.gif", UriKind.Absolute);

    Please help me out :(

    ReplyDelete
    Replies
    1. Sample.Source = new Uri("wrong.gif", UriKing.Absolute)

      There is no "ImageSource" property for Image type control, just "Source".

      Delete
  5. Also if i cancel out the Sample function it works,but the Gif animation is rather slow!! How do i speed up the animation??

    ReplyDelete
    Replies
    1. It probably depends on the emulator you're using or the converter.

      Delete
  6. How to set gif image by default stop ?

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
    2. Add an on "Loaded" event to the AnimatedImage either by code or by xaml that does only one line of code:

      in c#:
      private void DoNotAnimateIntially(object sender, RoutedEventArgs e)
      {
      this.Stop();
      }

      and in xaml:
      Loaded="DoNotAnimateIntially" to the xaml declaration of AnimatedImage

      Delete
  7. Hello, i'm a bit lost as to here to place this line:
    ImageToolName.Source = new ExtendedImage() { UriSource = new Uri("wrong.gif", UriKind.Relative) };//Local animated gif image binding with ImageTools

    ReplyDelete
  8. Hi , loading gif locally not working with me
    ImageToolName.Source = new ExtendedImage() { UriSource = new Uri("wrong.gif", UriKind.Relative) };//Local animated gif image binding with ImageTools

    ReplyDelete

Search Engine Submission - AddMe