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.