Windows Store 8.1 Animation in 6 Steps

Open Blend ans start a new blank Windows project.

1) Look for the "rectangle" in control box and drop it in the designer.

2) Click on the plus "+" sign in top right corner of "objects and timeline" window and name it anything for eg. "myStory".

3) Now drag the "objects and timeline" till it highlight the whole bottom of Microsoft Blend, then drop it.

4) Now click the "record key frame" button the one with diamond and plus shape. Make sure  that the rectangle is selected.

5) First move the timeline "yellow bar" at 3 seconds, then move the rectangle from left to right.

6) Play your story by clicking the Play button.

Designing Custom Button in Blend

Today i will show you a very simple way to create a custom button in Microsoft Blend 2013.

1) Open Blend for Visual Studio 2013.

2) File -> New Project -> XAML (Store Apps) -> Blank App (Windows Phone)

3) Select the main Grid and Drag drop the Button from Assets -> Controls

4) In Objects and timeline window, right click on button -> Edit template -> create empty

5) A dialog box will open. Name the button as "myButtonStyle" and define in Application level so that it can be used in our whole application.

6) A blank grid will open and now we are in Button template. In objects and timeline select Grid and set its Width = 200 and Height = 70 from Properties Tab under Layout.

7) From Assets tab, under Controls search for Content Presenter and double click on it so it will become child of parent grid.

8) Do the following from Layout Tab:

Width = Reset

Height = Reset

Horizontal Alignment = Stretch

Vertical Alignment = Stretch

9) Create a simple rectangle in Photoshop of size 200 * 70 and save it as .png

10) In Blend, right on project name -> add -> add existing item. Add the picture we just created in Photoshop.

11) Drag and drop the picture in the content presenter and we are all done.

12) If everything goes right, our page will look like this:

Apply Quick Styles To Your Windows Phone App

Default templates for Windows Phone application comes with few basic set of resource elements that defines the controls color, size, background etc. To examine it more closely you may noticed the MainPage.Xaml created with the default template has three page level styles defined as static resources.

The easiest way to locate and look around the definition of the resources is to select the “Go To Definition (F12)” against each resources.

So for any control, if you need to apply the predefined styles, you have to apply the style by mentioning the resource name. With the help of Visual Studio, you can use this feature very easily  by just apply the styles in the designer .

Step 1. Select the element and right click to display the context menu.

Step 2. Select “Edit Style” -> “Apply Resource” and then select the predefined styles from the list of resources  as shown in the below image.

You will find the style is applied and an element has been added with the control.

Parsing RSS Feeds in Windows Phone 8.1

In this tutorial i will write about how to pass RSS feeds into our Windows Phone 8.1 Application. It is a very simple method and it can be done by writing just few line of codes.

Before going into the implementation, let me first tell you what is RSS. It stands for "Really Simple Syndication". A way to keep update some application or content with latest information. When we subscribe with RSS feeds latest information is downloaded automatically. There is another code XML that is used in this process. Xml data is used to arrange some of the information and put the data in it. That will be discussed below.

Today i will show you how to parse RSS feeds generated from ESPN Cricinfo website from which we can embed live cricket news in our Windows app.

First go to following website: RSS Feeds Cricinfo.

Now when you open the above URL, you will see a page which have some XML markup. Look inside the XML, you will note that it has an <item> element. Inside <item> element it have <title> <description> <link> <pubDate> elements which shows that it will return Publication Date of the news along with its Title and Description.

So lets get started and open your Visual Studio 2013 and make a new blank Windows Phone 8.1 project.

Inside Grid, add a ListBox and set its ItemTemplate according to the following code.

Now open MainPage.Xaml.Cs file and add the following namespaces:

using System.Net;
using System.Net.Http;
using System.Xml.Linq;
using Windows.UI.Popups;

Next step is to add a method to get the latest RSS feed from the URL. To achieve this goal we have to create an instance of the HttpClient method as given below:

Last step is to call the GetRss( ) method in the class' constructor and we are all done. Here is the final output:

F12 Go To Definition in XAML !!

XAML Editor in Visual Studio 2013 supports the feature of "Go To Definition (F12)". Behavior of this feature is similar to C# or other code editors within Visual Studio. Select “Go To Definition” for any of the objects, XAML controls, Control Properties or even custom controls from the XAML Editor. Selecting "Go To Definition" for binding element resulting to take the navigation to the code behind property definition.

Following images below shows that when i right click (or press F12) on the "click event" of the button and select "Go To Definition", it will take us to the definition of the button in the code behind.

This is one of the short, simple and most useful feature of Visual Studio. This feature saves a lot of time during debugging as well as development. Now you can enjoy this feature with XAML Editor as well.

Windows Store 8.1 UI Design using Blend

1) Open Microsoft Expression Blend.

2) In new project window, select:

3) Select the "work space" as Design and make sure that in Window menu these options are selected:

• Assets
• Objects and Timeline
• Project
• Properties
• tools

4) Type "textblock" in the search menu and drop it in the designer.

5) In properties Window and layout tab:

• First change the horizontal alignment into "Stretch" and vertical alignment into "Top".
• Set the margin : '40' from "left" and '20' from "top".
• Change Font Size = 40 pt.
• Font Family = Segoe UI Light.
• Text = My App.

6) Now give a Row Definition to your page just below the title.

7) Drag and Drop a GridView from controls into the designer.

8) Change the layout of "GridVew" as following:

• Vertical alignment="Stretch"
• Horizontal alignment="Stretch"
• Row="1"
• Margin="0"

9) Drag and drop a stack panel into GridView and set its background color and define its:

• Width ="500"
• Height= "280' pixels.

10) First add an Image and then a TextBlock into StackPanel. Give TextBlock some texts, change its FontSize into 25 pts and Margin into 20 px from left.

11) In Project tab right click on assets folder and select add existing item, then add any image into your project from your system.

12) Select the image in your object and time line then give it a source of your recently added image.

13) Change the stretch property into fill.

14) Copy the stack from objects and Timeline and paste it in GridView 6 times.

15) Change the textblock , images and stack panel with different  text, images and background.

16) Save and Run the project.

Sample Data Binding in Windows Store 8.1 App

In this tutorial i will explain how to bind an element at run time. Before going into the development let me explain theoretically what i am going to achieve in this tutorial.

First i will add a TextBox and a TextBlock. I will bind the text property of TextBlock with the TextBox. At the backend code i am implementing an interface IValueConverter which will show the remaining number of characters in the TextBlock.

Following are the steps to implement this:

1) Open Visual Studio 2013 and create a new project of Windows Store Apps.
2) Create a blank app and name it SimpleBinding.
3) Add a StackPanel inside a Grid and add one TextBox and one TextBlock.
4) Name the TextBox as "txtBox".
5) Right Click on the project and add a new class and name it as "RemainingCharacters.cs"
6) Implement the "IValueConverter" interface by resolving it with its namespace "using Windows.UI.Xaml.Data".
7) Implemenet the "Convert" and "ConvertBack" methods of the interface.

RemainingCharacters.cs

8) Open MainPage.Xaml and add the following code before Grid.

9) Finally, we have to bind the TextBloxk's Text property to show the remaining characters. 

MainPage.Xaml

Final Output

Data Binding in XAML

Data Binding is one of the greatest and most powerful features of XAML as compared to other traditional web and Windows app technology in .Net. There was simple data binding for displaying single values, and complex data binding for displaying and formatting a bunch of data. XAML however makes it easy to bind nearly any property to any element or object or data source. You take data from some property or object or dependency property and bind it to another dependency property or object or else directly to an element.

In a single "Data binding is the process of getting information from one object to another and displaying it in one or more elements in the user interface".

Binding is all about connecting a source to a target. Every time you use binding you must supply a source for the data and the target. Generally the target is a dependency property or some framework element of some user interface and the binding source can be any CLR object. Between the source and the target more objects are involved called value converters. This conversion represents an instance of a class that is implemented for doing the binding declaratively. XAML often requires value conversion using the Ivalueconverter interface.

Target Object

This is a complete UI Control or UI element where you can display your data. You cannot directly bind to the target object; it needs a dependency property or object or UI object.

Binding Object

This works between a target and a source object, you can specify data context binding mode converter and so on.

Source Object

Your data that you want to show on the UI is a source object, it can be any type (CLR object or some other object). Generally we use a CLR object or web service XML, LINQ or list<T>.

Binding Modes in XAML

OneWay

Data moves only one direction, the source property automatically updates the target property but the source is not changed.

TwoWay

Data moves both directions, if you change it in the source or target it is automatically updated to the other.

OneWayToSource

Data moves from the target to the source changes to the target property to automatically update the source property but the target is not changed .

OneTime

Data is changed only one time and after that it is never set again, only the first time changes to the source property automatically update the target property but the source is not changed and subsequent changes do not affect the target property

Navigation Between Two Pages in WP 8.1

There are couple of ways of navigating between different pages in a windows phone application. These are:

1) By using NavigationService.Navigate method.

2) By using Frame.Navigate method.

Frame.Navigate Method

This method is very simple and in this tutorial i have done navigation between pages using this method.

Steps:

1) Open Visual Studio 2013 and select WP 8.1 Blank App under C# and name it PageNavigation.

2) In Solution Explorer, right click on the project and Add New Blank Page.

3) Name the new page as Page2.Xaml

4) Double click on MainPage.Xaml

5) Insert the following code:

6) Now MainPage.Xaml should look like this:

7) Now open MainPage.Xaml.Cs file and write the following code under Button definition:

8) Now open Page2.Xaml and add the following code:

9) Open its C# file i.e. Page2.Xaml.CS and add the following code:

10) Navigation between multiple pages is achieved through these simple steps and the following screenshots shows the navigation between pages done in this tutorial:

MainPage.Xaml

Page2.Xaml