Flicker Image Search in Windows Store Apps

Introduction

Today we will create a Flicker photo search application in Windows Store apps using C# and XAML. Using this app we can search Flicker images easily. To create Flicker based apps you need a Flicker API key. You can get a Flicker API key from the following link by applying the Flicker API key. After obtaining the key you can use this key in your application.

Click here for apply flicker API key

Step 1

After obtaining the Flicker API key, open Visual Studio 2012 and start a new Windows Store apps project.

Step 2

In this step add a class and write following code.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

 

namespace FlikarPhotoSearch

{

    class FlikarSearch

    {

        public string PhotosId { get; set; }

        public string ImgTitle { get; set; }

        public string Scrt { get; set; }

        public string FarmeId { get; set; }

        public string ServerId { get; set; }

 

        public Uri ImgUrl

        {

            get

            {

                return new Uri(string.Format("http://farm{0}.static.flickr.com/{1}/{2}_{3}.jpg", FarmeId, ServerId, PhotosId, Scrt));

            }

        }

    }

}

Step 3

Now go to "MainPage.xaml" and add the following code.

<Page

    x:Class="FlikarPhotoSearch.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:FlikarPhotoSearch"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

 

    <Grid Background="SteelBlue">

        <Grid.RowDefinitions>

            <RowDefinition Height="100" />

            <RowDefinition Height="100" />

            <RowDefinition Height="700" />

        </Grid.RowDefinitions>

 

        <TextBlock Text="Flickr Photo Search" Margin="30" FontSize="30" />

        <StackPanel Grid.Row="1" Orientation="Horizontal">

            <TextBox x:Name="ImgText" Width="200" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="30"/>

            <Button x:Name="SearchBtn" Content="Search Photos" Height="40" Click="SearchBtn_Click" />

        </StackPanel>

 

        <GridView x:Name="GridImg" Grid.Row="2" Margin="30,0,0,0" >

            <GridView.ItemTemplate>

                <DataTemplate>

                    <Image Width="300" Height="300" Source="{Binding ImageUrl}"></Image>

                </DataTemplate>

            </GridView.ItemTemplate>

        </GridView>

    </Grid>

</Page>

Step 4

Your complete "MainPage.xaml.cs" page is as in the following code. Here we are using the namespace "System.Net.Http". Replace here "FlickerKey" with your Flicker API key

using System;

using System.Collections.Generic;

using System.IO;

using System.Linq;

using System.Net.Http;

using System.Xml.Linq;

using Windows.Foundation;

using Windows.Foundation.Collections;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Controls.Primitives;

using Windows.UI.Xaml.Data;

using Windows.UI.Xaml.Input;

using Windows.UI.Xaml.Media;

using Windows.UI.Xaml.Navigation;

 

namespace FlikarPhotoSearch

{

    public sealed partial class MainPage : Page

    {

 

        private HttpClient HtpClnt;

        private string Flickerkey = "8beb702d6b2fbf292f43cf801b610674";

        private string SearchUrl = "http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key={0}&text={1}";

 

        public MainPage()

        {

            this.InitializeComponent();

        }

        protected override void OnNavigatedTo(NavigationEventArgs e)

        {

        }

        private async void SearchBtn_Click(object sender, RoutedEventArgs e)

        {

            HtpClnt = new HttpClient();

            HttpResponseMessage GetResponce = await HtpClnt.GetAsync(String.Format(SearchUrl, Flickerkey, ImgText.Text));

            ImagePas(GetResponce);

        }

        private async void ImagePas(HttpResponseMessage Htpmsg)

        {

            XDocument Doc = XDocument.Parse(await Htpmsg.Content.ReadAsStringAsync());

            var myphoto = from results in Doc.Descendants("photo")

                          select new FlikarSearch

                          {

 

                              PhotosId = results.Attribute("id").Value.ToString(),

                              ImgTitle = results.Attribute("title").Value.ToString(),

                              Scrt = results.Attribute("secret").Value.ToString(),

                              FarmeId = results.Attribute("farm").Value.ToString(),

                              ServerId = results.Attribute("server").Value.ToString()

                          };

            GridImg.ItemsSource = myphoto;

        }

    }

}

 

Step 5

Now run the application and type in the search keyword in the TextBox and click on "Search Image" to search the image.