Using Flickr Data Source in Windows Phone App Studio

Introduction

About Flickr Data Source

This Data Source is similar to a YouTube Data Source. You need to enter the search keyword or user id. The Data Source will automatically grab the pictures from the Flickr website. If you choose the search option, then the result will be the same as when you get it by searching in the website. If you select the “user” option, then the application will show the images from that Flickr user account.

Finding Flickr User ID

If you want to integrate any user account with this Data Source, then you need to find the user id of that account. The best way to find the user is using this tool.

• User ID

  

• Enter the user profile URL and you will get the User Id associated with that account.

  

Creating Flickr Album Viewer

So now it’s time for action. Let’s start building our app in a step-by-step manner.

1. Open this link to launch Windows Phone App Studio http://apps.windowsstore.com/default.htm
2. Click on “Start Building”
3. Click on “Create an Empty Application”.
4. Set the App logo. It should be good enough to reflect your App motive.
5. Set the App title and Description. The App title is what will be visible on the Phone App list. Now click “Next”.
6. Click on “Add section” and select “Add section” from the pop-up.
7. Enter a section name. This will be visible on the App main screen.
8. Select the Data Source type as “Flickr”.
9. Enter the Data Source name. It should be unique within the application. To save changes, click “Save Changes”.

   

10. To show the details of an image, let’s add one more detail page.
11. To add a detail page, click on the “+ Add Page” icon.
12. Enter the page name and click “Ok”.

    

13. Click on “Save changes” to save the settings.
14. Now click on the Data Source we have added.

    

15. Select “Search” from the drop down list as we will be using a search keyword for this application.

    

16. Enter your search keyword.
17. Click on “Refresh” and you will see the Image list below it if everything is correct so far.

    

18. Click on “Save changes” to save the settings.
19. Click on Section page “Flick” to change the layout. The standard for image viewer layout is to have an Image grid layout. It is also a default layout for the Flickr Data Source.

    

20. Select the suitable layout of your choice.
21. Next is Binding. Bind whatever you want to show in your screen. In this demo, I’m using an Image grid layout so I need to bind only an image with Data.Image.
22. For title, use whatever you want. It will be visible on the main screen.
23. Here DATA represents an Image Object. You can see various Image properties in the binding list.
24. Click “Save changes”.

    

25. Now click on the detail page “Image” just below the Section page.

    

26. Choose the layout and appropriate binding settings.

    

27. To enable the user to pin a specific image to the start, click on “Extras”
28. Disable “Text To Speech” since it is not required on this page.
29. Enable Share Text if you want to allow sharing.
30. Enable PinToStart to allow the user to pin that image in the Start.

    

31. Click on “Save” to save the settings.
32. Click on “Detail” that is next to “Image”.

    

33. Choose the layout for the image detail and bind it with the appropriate Image attributes.
34. This page can be viewed by a user by swiping the screen to the left.
35. Click on “Save changes” to save the settings.

    

36. Click on “Next”. On the next page, you can set the appearance of your app.
37. For setting the appearance, you can check my article “windows-phone-app-studio-part-2”. That article mainly focuses on the Appearance settings of an app.
38. After setting the appearance, you can generate your app.
39. The generated app can be used in a Phone Device or it can be published in the Market Store as well.

Summary

In this article, we learned how to use a Flickr Data Source for creating Flickr photo view applications. You can also use the “User ID” option of this Data Source. Don’t forget to share and comment.

Output

Filed under: CodeProject, Windows Phone