Sunday, June 8, 2014

Display GIF or Animated Images in Windows Phone

GIF in WP

Unfortunately Windows Phone does not support animated images or .Gif Image Files.
Then sometimes in our application we wish to display some animation images so that our application looks good.
Now, if you have some gif or animated images and you wish to display that image in ur windows phone application.
So, first of all you divide your gif images into frames using software like 'GIFFrame' or online. and this gives you a different frames of your gif files in to .png format.
And Now,
in Xaml.cs file, i show you that how can we display that group of images that looks like a animated image.

So, Look, i used DispatcherTimer for executing tasks at some interval of time and with some priority also.
For that you have to add namespace "System.Windows.Threading".

                DispatcherTimer dtimer = new DispatcherTimer();

And Now, you have to add list of all of that image frame files..



List<String> myFiles = new List<string>()
                        {
                        "Monkey_Images/img_tablet1.png",
                        "Monkey_Images/img_tablet2.png",
                        "Monkey_Images/img_tablet3.png",
                        "Monkey_Images/img_tablet4.png",
                        "Monkey_Images/img_tablet5.png",
                        "Monkey_Images/img_tablet6.png",
                        "Monkey_Images/img_tablet7.png"
                        };



And now, you need a temporary list that stores all images that you are having to display. so i used List<BitmapImage>. for that you have to add namespace

"System.Windows.Media.Imaging".






          List bmps = new List() { };



And now, the logic is started..

The Whole Code is:
in your Xaml.cs file..


int flag = 1;
int current = 0;

DispatcherTimer dtimer = new DispatcherTimer();

List myFiles = new List()
                    {
                    "Monkey_Images/img_tablet1.png",
                    "Monkey_Images/img_tablet2.png",
                    "Monkey_Images/img_tablet3.png",
                    "Monkey_Images/img_tablet4.png",
                    "Monkey_Images/img_tablet5.png",
                    "Monkey_Images/img_tablet6.png",
                    "Monkey_Images/img_tablet7.png"
                    };

List bmps = new List() { };
public HomePage()
{
          InitializeComponent();
          MonkeyMovement();
}

public void MonkeyMovement()
{
          foreach (string ff in myFiles)
          {
            BitmapImage bmp = new BitmapImage(new Uri(ff, UriKind.Relative));
            bmps.Add(bmp);   // Temporary assign images into bitmapimage list.
          }
          dtimer.Interval = TimeSpan.FromMilliseconds(20);
          dtimer.Tick += new EventHandler(dtimer_Tick);
          dtimer.Start();
}

void dtimer_Tick(Object sender, EventArgs e)
{

          if (flag == 1)
          {
                    monkeyImage.Source = bmps[current];
                    //where monkey image is your image's Name in Xaml page.
                    current++;
                    if (current == bmps.Count - 1)
                    {
                          flag = 0;
                    }
             }
              if (flag == 0)
              {
                    monkeyImage.Source = bmps[current];
                    current--;
                    if (current == 0)
                    {
                            flag = 1;
                    }
              }

}

1 comments:

Post a Comment