Windows Store App Development Tutorial - Part 9 : Handling Files And Folders

Many time we need to access files and folders from our applications. The Windows Store apps SDK provides us Asynchronous APIs to use for this service to query files and folders. You have to be familiar with async await calls in order to get started with this.

Understand the API : 

“StorageFolder” is a class of Windows Store SDK present in the Windows.Store namespace and provides us easy access APIs to handle all file and folder operations. The class implements few interfaces named IStorageFolder, IStorageItem, IStorageFolderQueryOperations, IStorageItemProperties to manipulate folders and their contents to provides information about them.

To get the installed location of the current application package, you need to call the Package.Current.InstalledLocation property get the folder handle and store it as StorageFolder reference. This is how you can call it:

StorageFolder installedStorageFolder = Package.Current.InstalledLocation;

Let’s quickly see the API methods present in the Windows.Store.StorageFolder class. Read out the method comments to understand the API calls:

// Creates a new file in the folder or file group.

// When this method completes, it returns the new file as a StorageFile.

public IAsyncOperation<StorageFile> CreateFileAsync(string desiredName);

// Creates a new file in the current folder, and specifies what to do if a file

// with the same name already exists in the current folder.

// When this method completes, it returns the new file as a StorageFile.

public IAsyncOperation<StorageFile> CreateFileAsync(string desiredName,

CreationCollisionOption options);

// Creates a new subfolder inside the current folder.

// When this method completes, it returns the new subfolder as a StorageFolder.

public IAsyncOperation<StorageFolder> CreateFolderAsync(string desiredName);

// Creates a new sub-folder inside the current folder, and specifies what to do

// if a folder with the same name already exists in the current folder.

// When this method completes, it returns the new subfolder as a StorageFolder.

public IAsyncOperation<StorageFolder> CreateFolderAsync(string desiredName,

CreationCollisionOption options);

// Gets a single file from the current folder using the specified file name.

// When this method completes successfully, it returns a StorageFile that

// represents the file.

public IAsyncOperation<StorageFile> GetFileAsync(string name);

// Gets a single sub-folder from the current folder using the specified folder name.

// When this method completes successfully, it returns a StorageFolder that

// represents the sub-folder.

public IAsyncOperation<StorageFolder> GetFolderAsync(string name);

// Gets a single file or sub-folder from the current folder using the name

// of the item. When this method completes successfully, it returns the file or folder.

public IAsyncOperation<IStorageItem> GetItemAsync(string name);

// Gets the top-level files in the current folder.

// When this method completes successfully, it returns a list of the files

// in the folder. Each file in the list is represented by a StorageFile object.

public IAsyncOperation<IReadOnlyList<StorageFile>> GetFilesAsync();

// Gets a list of the top-level sub-folders of the current folder.

// When this method completes successfully, it returns a list of the files.

// Each folder in the list is represented by a StorageFolder.

public IAsyncOperation<IReadOnlyList<StorageFolder>> GetFoldersAsync();

// Gets a list of top-level files and sub-folders inside the current folder.

// When this method completes successfully, it returns a list of the files

// and folders inside the current folder. The items in the

// list are represented by objects of type IStorageItem.

public IAsyncOperation<IReadOnlyList<IStorageItem>> GetItemsAsync();

// Renames the current folder.

// No object or value is returned by this method when it completes.

public IAsyncAction RenameAsync(string desiredName);

// Renames the current folder and specifies what to do if a folder with the

// same name already exists. No object or value is returned by this method

// when it completes.

public IAsyncAction RenameAsync(string desiredName, NameCollisionOption option);

// Deletes the current folder or file group.

// No object or value is returned by this method when it completes.

public IAsyncAction DeleteAsync();

// Deletes the current folder or file group, optionally deleting it permanently.

// No object or value is returned by this method when it completes.

public IAsyncAction DeleteAsync(StorageDeleteOption option);

// When this method completes successfully, it returns a list of the files

// in the folder. Each file in the list is represented by a StorageFile object.

public IAsyncOperation<IReadOnlyList<StorageFile>> GetFilesAsync(CommonFileQuery query,

uint startIndex,

uint maxItemsToRetrieve);

// Gets a list of all files in the current folder and its sub-folders.

// Files are filtered and sorted based on the specified CommonFileQuery.

// When this method completes successfully, it returns a list of the files

// in the folder. Each file in the list is represented by a StorageFile object.

public IAsyncOperation<IReadOnlyList<StorageFile>> GetFilesAsync(CommonFileQuery query);

// Gets an index-based range of StorageFolder objects that represent groups of files

// in the current folder. Files are filtered and grouped based on the specified

// CommonFolderQuery and are included in the range based on the resulting indexes.

// When this method completes successfully, it returns a list of the files.

// Each folder in the list is represented by a StorageFolder.

public IAsyncOperation<IReadOnlyList<StorageFolder>> GetFoldersAsync(CommonFolderQuery query,

uint startIndex,

uint maxItemsToRetrieve);

// Gets a list of StorageFolder objects that represent groups of files in the

// current folder. Files are filtered and grouped based on the specified CommonFolderQuery.

// When this method completes successfully, it returns a list of the files (type IVectorView).

// Each folder in the list is represented by a StorageFolder.

public IAsyncOperation<IReadOnlyList<StorageFolder>> GetFoldersAsync(CommonFolderQuery query);

// Gets a StorageFolder that represents the folder at the specified file-system path.

// When this method completes successfully, it returns a StorageFolder that represents the
// folder.

public static IAsyncOperation<StorageFolder> GetFolderFromPathAsync(string path);

The above API methods will provide you instance towards the StorageFolder asynchronously. When you are calling it from a method, you must have to mark the method as async and the call must be marked as await.

The StorageFolder instance also provides you few information about the file and folder by exposing few properties. You can directly call those properties to grab the information.

Here are the properties that the StorageFolder exposes to the developers:

// Gets the attributes of the current folder.

public FileAttributes Attributes { [MethodImpl] get; }

// Gets the date and time that the current folder was created.

public DateTimeOffset DateCreated { [MethodImpl] get; }

// Gets the name of the current folder.

public string Name { [MethodImpl] get; }

// Gets the full file-system path of the current folder, if the folder has a path.

public string Path { [MethodImpl] get; }

// Gets the user-friendly name of the current folder.

public string DisplayName { [MethodImpl] get; }

// Gets the user-friendly type of the folder or file group.

public string DisplayType { [MethodImpl] get; }

// Gets an identifier for the current folder. This ID is unique for the query result

// or StorageFolder that contains the current folder or file group, and can be used

// to distinguish between items that have the same name.

public string FolderRelativeId { [MethodImpl] get; }

// Gets an object that provides access to the content-related properties

// of the current folder.

public StorageItemContentProperties Properties { [MethodImpl] get; }

You can easily understand the need of each property from the above property level comments mentioned above.

How to Use The API's :

In case you need to create or get an instance of file or folder inside your application’s root folder, you first need an instance of the installed directory which you can grab by calling Package.Current.InstalledLocation as mentioned above. Once you have the instance of the same, you can easily call the above APIs and pass required parameters to do so.

Let me show you how to create and get folders and files easily with the APIs present in Windows.Store.StorageFolder class:

// ways to create new folder

folder.CreateFolderAsync("Demo Folder", CreationCollisionOption.FailIfExists);

folder.CreateFolderAsync("Demo Folder", CreationCollisionOption.GenerateUniqueName);

folder.CreateFolderAsync("Demo Folder", CreationCollisionOption.OpenIfExists);

folder.CreateFolderAsync("Demo Folder", CreationCollisionOption.ReplaceExisting);

// ways to get folder

folder.GetFolderAsync("Demo Folder");

// ways to create new file

folder.CreateFileAsync("Demo File.txt", CreationCollisionOption.OpenIfExists);

folder.CreateFileAsync("Demo File.txt", CreationCollisionOption.GenerateUniqueName);

folder.CreateFileAsync("Demo File.txt", CreationCollisionOption.OpenIfExists);

folder.CreateFileAsync("Demo File.txt", CreationCollisionOption.ReplaceExisting);

// ways to get file

folder.GetFileAsync("Demo File.txt");

// ways to get all files by search queries

folder.GetFilesAsync(CommonFileQuery.DefaultQuery);

folder.GetFilesAsync(CommonFileQuery.OrderByDate);

folder.GetFilesAsync(CommonFileQuery.OrderByMusicProperties);

folder.GetFilesAsync(CommonFileQuery.OrderByName);

folder.GetFilesAsync(CommonFileQuery.OrderBySearchRank);

folder.GetFilesAsync(CommonFileQuery.OrderByTitle);

In case you want to rename current folder handle, just call the API folder.RenameAsync(desiredName) with proper desired name and this will fire the rename operation on it.

The delete operation is also easy on a storage folder instance. You can do so by calling the DeleteAsync() method by passing proper parameters to it. There is an option to chose whether you want to use the default system delete operation or a permanent delete. In case of permanent delete operation, your folder will be deleted permanently without sending it to the recycle bin.

Here is how you can achieve this:

// ways to delete a folder instance

folder.DeleteAsync(StorageDeleteOption.Default);

folder.DeleteAsync(StorageDeleteOption.PermanentDelete);

I hope this is useful. Thank You.

 

Windows Store App Development Tutorial - Part 8 : Integrating Setting Panel In Charm Bar

Many of us need to integrate settings page in our applications. All we generally do is by creating a separate page in our project. But Windows 8 provide us a separate settings panel in Charm bar which you can use for your settings page.

Charm bar is the floated vertical bar attached at the right side of the screen, consists of Search, Share, Start, Devices and Settings button to invoke appropriate commands. You can bring the charm bar by moving your mouse pointer at the top right corner of the screen. Here’s the screenshot of the charm bar (rotated 90 degree in left direction to accumulate in this post):

Clicking the settings button there in the charm bar, brings the settings panel in the screen where you can show application specific settings/configurations.

To integrate your settings panel in your application, you need to add application specific commands in the settings panel. To do this, you need to register the “CommandsRequested” event in your page. You can chose between application level or page level settings panel.

Write the following code to register the event first:

SettingsPane.GetForCurrentView().CommandsRequested += OnSettingsPaneCommandRequested;

Then you need to add the specific commands one by one in the settings panel from the commands requested event implementation. Add settings command to the pane by following the below code snippet:

private void OnSettingsPaneCommandRequested(SettingsPane sender,
                                                             SettingsPaneCommandsRequestedEventArgs args)

{

// Add the commands one by one to the settings panel

args.Request.ApplicationCommands.Add(new SettingsCommand("commandID",
                                                            "Command Name", DoOperation));

}

private void DoOperation(IUICommand command)

{

// Write the logic here that you want to do, when the user clicks it

}

 
Once you integrate this in your page, you will see something similar to this in your settings pane as shown in the below screenshot:

In case you want to invoke the settings pane to show by a button click, you can write the below code in the button click implementation:

SettingsPane.Show();

That’s all to integrate the settings pane in your Windows Store application. I hope, this will now help you to understand the settings pane integration. 

Windows Store App Development Tutorial - Part 7 : Know About LayoutAwarePage

Today in this chapter we will discuss more advanced page navigation using the LayoutAwarePage which comes with the Grid and Split application template by default.

Continuing the last chapter on Learning Windows Store application, today we will explore more about the standard navigation. If you create a Grid app or a Split app, you will find some common files created inside the project under the “Common” folder. Among them “LayoutAwarePage” implements many navigational APIs to do the standard navigational operations.

“LayoutAwarePage” inherits from “Page” and hence you will be able to use all the basic operations that Page class offers you. In addition to those, you will find more new APIs in that. If you are using a blank XAML page, you just have to use “LayoutAwarePage” insists of “Page” as shown below in order to use the advanced layout and navigation features,

It is always better to use this class as the root of the page if you are using navigations from one page to another. The important methods that you will be able to use from this page are: “GoHome()”, “GoBack()” and “GoForward()” which implicitly calls the Frame methods to complete these operations. The implementation of those methods are shared here for clear visibility:

// Invoked as an event handler to navigate backward in the page's associated

// Frame until it reaches the top of the navigation stack.

protected virtual void GoHome(object sender, RoutedEventArgs e)

{

// Use the navigation frame to return to the topmost page

if (this.Frame != null)

{

while (this.Frame.CanGoBack) this.Frame.GoBack();

}

}

// Invoked as an event handler to navigate backward in the navigation stack

// associated with this page's Frame.

protected virtual void GoBack(object sender, RoutedEventArgs e)

{

// Use the navigation frame to return to the previous page

if (this.Frame != null && this.Frame.CanGoBack) this.Frame.GoBack();

}

// Invoked as an event handler to navigate forward in the navigation stack

// associated with this page's Frame

protected virtual void GoForward(object sender, RoutedEventArgs e)

{

// Use the navigation frame to move to the next page

if (this.Frame != null && this.Frame.CanGoForward) this.Frame.GoForward();

}

To see how these methods work, you can chose any one of the Grid and Split applications from the Windows Store project template. Let’s take Grid app for an example here. The main screen of the Grid app uses a GridView to show thumbnails of the groups as below:

 

Clicking the group header will navigate you to the group details page. 

Similarly clicking the items from the group page or group details page will navigate you to the group item details page. You can easily navigate to the next or previous item by just sliding the screen or navigational keys of the keyboard.

This navigational operations are handle by the two events named AcceleratorKeyActivated and PointerPressed of the core window. The first invokes when a user uses keystrokes to navigate and the second one invokes when a user uses mouse clicks, touch screen taps or other similar interactions to navigate between pages. Here comes the declaration of the said events:

// Invoked on every keystroke, including system keys such as Alt key combinations,

// when this page is active and occupies the entire window. Used to detect keyboard

// navigation between pages even when the page itself doesn't have focus.

private void CoreDispatcher_AcceleratorKeyActivated(CoreDispatcher sender,

AcceleratorKeyEventArgs args);

// Invoked on every mouse click, touch screen tap, or equivalent interaction when

// this page is active and occupies the entire window. Used to detect browser-style

// next and previous mouse button clicks to navigate between pages.

private void CoreWindow_PointerPressed(CoreWindow sender, PointerEventArgs args);

In the below screenshot you can see the navigational arrows that pops up when you move your mouse inside the screen. An user can easily navigate between the pages by tapping those buttons or pressing the navigational keys in the keyboard. 

Not only this, the LayoutAwarePage also automatically handles the screen orientation changes properly. You can use visual states of each pages to visualize the screen orientation and view.

Hope this is useful. Thank You. 

Windows Store App Development Tutorial - Part 6 : Navigate Between Page

Page Navigation :

It’s not at all difficult to implement the navigation in Windows Store applications but if you are a Silverlight and/or Windows Phone application developer and just moved to this field, you might find difficulty developing a navigation application. In Windows Phone, we use NavigationService.Navigate() to navigate to a different page from a page. Also, we pass a relative or absolute URL to the Navigate() method. Here it’s bit different. Let’s discuss on it more.

In Windows 8 Store applications, every page has a “Frame” object, which implements the following properties and methods to support easy navigations:

GoBack() : Navigates to the most recent item in back navigation history, if a Frame manages its own   navigation history.

GoForward() : Navigates to the most recent item in forward navigation history, if a Frame manages its own   navigation history.

Navigate(type,args) : Navigates to the page specified

BackStackDepth : The number of entries in the navigation back stack

CanGoBack :Gets a value that indicates whether there is at least one entry in back navigation history

CanGoForward : Gets a value that indicates whether there is at least one entry in forward navigation history.


Check out the parameters of Navigate(type, args) method. You can see that, you can’t pass navigation Uri like we did in Silverlight and Windows Phone. Instead of passing the relative/absolute Uri path here, we have to pass the type of the page.

Let’s suppose we want to navigate from MainPage.xaml to SecondaryPage.xaml. You have to call navigate method by passing the type of second page. For example:

// simple navigation

Frame.Navigate(typeof(SecondaryPage)); 

// navigation with query parameter

Frame.Navigate(typeof(SecondaryPage), obj);

Sample :

Once you created the project, you will find a page called “MainPage.xaml”. Open it and modify the XAML code with a Button and a TextBlock as shown below :

<Page
    x:Class="SimpleNavigation.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SimpleNavigation"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock Text="Main Page" Style="{StaticResource HeaderTextStyle}"
                   Margin="100,50"/>
        <Button Style="{StaticResource BackButtonStyle}" Margin="403,0,0,668"
                RenderTransformOrigin="0.5, 0.5" Tapped="OnNextButtonTapped">
            <Button.RenderTransform>
                <RotateTransform Angle="180"/>
            </Button.RenderTransform>
        </Button>
    </Grid>
</Page>
  
This will change the MainPage UI as shown below. We will implement the next button tap event to handle the navigation to a different page later.

Now create another page named as “SecondaryPage.xaml” in the root folder and modify this page with the following code. This will have a back button and a TextBlock.

<Page
    x:Class="SimpleNavigation.SecondaryPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SimpleNavigation"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock Text="Secondary Page" Style="{StaticResource HeaderTextStyle}"
                   Margin="100,50"/>
        <Button Style="{StaticResource BackButtonStyle}" Margin="29,0,0,674"
               Tapped="OnBackButtonTapped"/>
    </Grid>
</Page>

The new page will look as below. Here the back button implementation will have logic to navigate to the previous page in the navigation stack.

This ends the basic design of our sample application.

Implementing Navigation Between Pages : 

To implement the navigation between those pages, you need to modify the code behind of both the pages. In both the cs file, you will find the Tap event. In the MainPage.xaml.cs implementation, call the Navigate() method and pass the other page type as shown below, which when called will navigate you to the secondary page:

// Next button tap implementation (in MainPage.xaml.cs)

private void OnNextButtonTapped(object sender, TappedRoutedEventArgs e)

{

Frame.Navigate(typeof (SecondaryPage));

}

// Back button tap implementation (in SecondaryPage.xaml.cs)

private void OnBackButtonTapped(object sender, TappedRoutedEventArgs e)

{

this.Frame.Navigate(typeof(MainPage));

}

As mentioned above, if you want to pass a query string parameter to the second page where you are navigating to, you can do so by passing the value or object as second parameter to the Navigate() method.

Hope this is useful. Thank You.

Windows Store App Development Tutorial - Part 5 : Using Application Bar in Windows Store application

In this tutorial we are going to see a very interesting topic of a feature that is available with Windows Store which is called Application Bar. In Windows Store app, Application Bars are hidden by default and is transient by nature, which means it shows up and disappears on request. We have option to put the Application bar at the top of the page or at the bottom of the page or even in both the places. We can get the application bar on right click of the user input, pressing Control+Z or swiping at the top or bottom respectively. 

Application Bar is used to provide users with quick access to an applications most commonly used tasks and to provide a short cut to navigate to pages which are accessed regularly. We can simply say Application Bar is a row of buttons in a ellipsis style that can be places in Top or bottom of the page in a transient way to slide and disappear when the user request for the same. Let us start the steps on using this Application Bar in our project.

How to use the Application Bar?

Open Visual Studio 2012 IDE and provide a valid project name for the Windows Store Blank Template and provide a location to save the project as shown in the screen below. 

To start adding the Application Bar capability to the application MainPage.XAML page, navigate to the XAML code of the page.

We have option to add the Application Bar in two places as we have already mentioned at the beginning. We can add the Application Bar to the top of the page or at the bottom of the page using TopAppBar or BottomAppBar property of the page. First lets add the bottom App Bar to the page as shown in the below code which basically uses the BottomAppBar property.

<Page.BottomAppBar>
        <AppBar x:Name="bottomAppBar" Padding="10,0,10,0">
            <Grid>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                    <Button Style="{StaticResource AddAppBarButtonStyle}" Click="AddButton_Click"/>
                    <Button Style="{StaticResource EditAppBarButtonStyle}" Click="EditButton_Click"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                   <Button Style="{StaticResource HelpAppBarButtonStyle}" Click="HelpButton_Click"/>
                </StackPanel>
            </Grid>
        </AppBar>
    </Page.BottomAppBar>

Now build and execute the application and we can see the application bar shows on right clicking the application page or by pressing Control + Z buttons as shown in the screen below.

We can see the highlighted (Red box) Application bar that is popped out on the button clicks in the above screen. Now lets us play further to programmatically tell the application that it should pop out once the application is loaded. We have a property called IsOpen in the AppBar class which makes it easy to tell the application to pop out the Application Bar as soon as the application is loaded. So make the code changes as highlighted in the screen below.

Now run the application and we can see the application once loaded will have the Application Bar opened and visible to the end users which makes it easier for the users to analyze the shortcuts and the most used items in place. But we need to nice on clicking the application page or the Application bar will slide in the to the bottom.

Our immediate next task is to handle the events that are available with the buttons that are listed on the Application Bar and also we have few more events that can be handled for specifically on Application Opening and Application Closing to track on some user activities. We can handle that using Opened and Closed event props that are available with the AppBar class using the code as shown in the screen below.

So we handle these events in the code behind by simply right clicking on the event name and select the option Navigate to Event Handler and write the logic on how to handle the event as shown in the screen below.

Now let us run the application and see how exactly the events the triggered on each of the click event as shows below : 

While designing the application Microsoft have suggested some of the Dos and Don’t specific to Application Bar are as follows.  

• Do place commands consistently, and organize them into command sets.
• Do set the app bar's dismissal mode to sticky when displaying contextual commands.
• Do use menus when you have too many commands.
• Do design your app bar for snap and portrait view.
• Do design for horizontal scrolling.
• Do use the default styles for commands, menus, and flyouts.
• Do use the bottom app bar for commands and the top app bar for navigation.
• 
  
• Don't put critical commands on the app bar.
• Don't put clipboard commands for text on the app bar.
• Don’t put login, logout, or other account management commands in the app bar.

Hope this tutorial will be useful . Thank You.

Windows Store App Development Tutorial - Part 4 : Planning and Prototyping your First Windows Store App

In this tutorial we are going to see how to start planning for your Windows Store application with some of the basic design principles and prototyping the app before we start developing the application. 

Planning Your Windows Store Application:

While planning the application first we need to think about the base requirements and the features that makes the end user more attractive to navigate and get the flow of the application. Also as a quick start list all the things that are should be part of the application that the users will be looking for. Let us take an example of an application which is of managing the expenses of the monthly spending's. 

Step 1 – Target your Audience 

Windows Store Application should be selected based on the end users real need on using this application which provides a greater support to the developer. Not all the applications in the Windows Store reach the larger audience rather the real need of solving a end users requirement will always going to be a big hit for the app developer. So lets take the above example of Managing the expenses of the spending’s that are done on a monthly basis. Lets take a simple note pad and figure out the list of things that are required to develop this application.

• Get user information on the amount entered is a Income or Expense
• Get User information on the amount entered is debit or credit
• Find out the nearest Bank Branches and let the user select the appropriate bank and branch or provide the user to enter the details manually
• Get description and comments on the purchase made if its expense or the source of income if it’s a Income
• Categorize the purchases made based on the month
• Report the details using a nice chart or graphical view
• List out options to export the data and send as a mail or store to local environment
• Provide options to list the category of Expenses
•  Provide options to list the amount available in bank as balances.

Once we have listed out the requirement I would recommend to select a few of the points that really suits the end users needs and focus on that initially for the first version of the app development instead of all the requirements which makes things complicated. In the above scenario lets narrow down and get a scenario which best suits the application as

• Gather user information of Income or Expenses
• List down the month expenses
• Export the expenses to Excel or other medium for Emailing 

Listing these requirements and explaining to one end user who is not aware of the requirement can understand things clearly then we are half way through the process of developing our application.

Step 2 – List out all User Activities to Support

This step is one of the critical step where we are going to decide which user activity to be supported in the application which we are going to develop. Basically make a flow which provides the developers around to get a clear idea on the flow, which is that a good designed application will have the flow that will easy to learn and have fewer interactions. To start with first 

• Create a flow like which comes first, what comes next?
• How should users navigate and move through the screens – basically use a storyboard to make the flow
• Create a quick prototype for your application.

Let us take our example and list out the user interaction flow as pointed below.

• Create a list of interactions with Income or Expense
• Create a flow by providing user to navigate to the detail listing view of the transactions
• List out the transaction based on the month as a report
• Provide options to share the transactions

Step 3 – Target Windows Store features

In this step we will target some of the Windows Store features that best suits the application or also target using some of the third party tools that can be used with the application. Get a complete idea on each of the feature controls that are available with the Windows Store SDK to get clear idea on how to use the control and feature which makes it easier to select the best of the features in your application.

• Using Application Bar in your application
• Using Notifications in your application
• Using Tiles in your application
• Using App Tiles and Secondary Tiles in your application
• Using Camera and Extra Storage Devices in your application
• Using Geolocation in your application
• Using Accelerometers in your application.

So let us take our example and see how we can use the features that best suits the application which we are going to develop for the Windows Store as below.

• Use Application Bar for navigation and list out option to Expenses Listing and Budgeting
• Use Tiles and Notification to show the end user a summary of Expenses made and Balance available
• Use Notification to show the end user, if its time to add expenses and budgeting

  Step 4 – Designing a good UI experience

User Experience is the one which gives the application a good feedback from the end users, UI should be taken into priority by first Prototyping the application and have a few look around with the team or with the mentors to get some inputs from the end user perspective. Mostly we create application which can be organized into a Hierarchical or grouping format, so basically choosing the grouping will help us to decide which page to create and which view to use to showcase our data. We have multiple templates that are available with Visual Studio 2012 IDE.

Step 5 – Creating a good Impression

“First Impression is always a Best Impression” this is how in real time each of the application gets succeeded in the market, So to create a best Impression for the applications consider using the below features to make a better application  

• Splash Screen
• Tiles and Notification
• Background Image
• Sample data for First Launch
• About Screen with Support

  Step 6 – Monetizing the Application

If in our application we have plans to Monetize and do some advertising, plan it according while designing the user interface with the respective pages. Windows Store supports free apps and free-in apps where Trial Period is used to even though the price is made free. We need to take care on providing the Trail version duration, and also with a upgrade option from moving the user from Trial Mode to Full Purchase model based on the purchase from with in the application or through the Windows Store. 

Considering all the above design principles and following the same will end result with a good product to the end users and also completes the Windows Store Certification without any failures.

Hope this tutorial will be useful. Thank You.

Windows Phone SDK 8.0 Available to download

The Windows Phone Software Development Kit (SDK) 8.0 provides you with the tools that you need to develop apps and games for Windows Phone 8 and Windows Phone 7.5.

The Windows Phone SDK 8.0 is a full-featured development environment to use for building apps and games for Windows Phone 8.0 and Windows Phone 7.5. The Windows Phone SDK provides a stand-alone Visual Studio Express 2012 edition for Windows Phone or works as an add-in to Visual Studio 2012 Professional, Premium or Ultimate editions. With the SDK, you can use your existing programming skills and code to build managed or native code apps. In addition, the SDK includes multiple emulators and additional tools for profiling and testing your Windows Phone app under real-world conditions.

Download the Windows Phone 8 SDK

System requirements :

Supported operating systems: Windows 8, Windows 8 Pro

• Windows 8 64-bit (x64) client versions

Hardware : 

• 4 GB of free hard disk space
• 4 GB RAM
• 64-bit (x64) CPU

Windows Phone 8 Emulator:  

• Windows 8 Pro edition or greater 
• Requires a processor that supports Second Level Address Translation (SLAT) 

If your computer meets the hardware and operating system requirements, but does meet the requirements for the Windows Phone 8 Emulator, the Windows Phone SDK 8.0 will install and run. However, the Windows Phone 8 Emulator will not function and you will not be able to deploy or test apps on the Windows Phone 8 Emulator. 

Instructions : 

• Choose the language version you want to install and click the Download button for the WPexpress_full.exe file. Follow the instructions to install the SDK. Note that each localized version of Windows Phone SDK 8.0 is designed to function with the corresponding localized operating system and localized version of Visual Studio 2012. 

• Download the release notes which are in a separate file. For Windows Phone SDK 8.0 documentation and samples, see the Windows Phone Dev Center.

• To start VS Express for Windows Phone, click the application in the Apps list. If you have Visual Studio Professional, Premium or Ultimate installed on the computer, the VS Express for Windows Phone shortcut won't appear. Instead, start your Visual Studio instance as usual and then create Windows Phone SDK 8.0 projects using the installed Windows Phone templates.

• If you try to run a project in Windows Phone Emulator and Hyper-V is not enabled, you will be prompted to turn on Hyper-V. Turning on Hyper-V requires you to restart your computer.

 

Windows Phone 8 Launched

SAN FRANCISCO — Oct. 29, 2012 — Microsoft Corp. debuted Windows Phone 8, the latest version of the company’s smartphone operating system on Oct 29, 2012. Windows Phone 8 offers a truly personal phone experience, connecting you to the people and things that matter most. 

As part of the announcement, Microsoft revealed new features, including Kid’s Corner and Rooms, along with details and pricing for a range of beautiful new smartphones from Nokia, Samsung and HTC, each with their own differentiated designs, colors and features. Windows Phone 8 devices will go on sale in November at AT&T, T-Mobile and Verizon in the U.S., as well as at carriers and retailers around the world.  

“We can’t wait for the world to meet Windows Phone 8, the most personal smartphone there is,” said Terry Myerson, corporate vice president of the Windows Phone Division at Microsoft. “Windows Phone 8 comes on a range of phones that are stunning, colorful and unique.”

Most Personal Smartphone  : 

Live Tiles are the heart and soul of Windows Phone, and no other phone has them. People can arrange the iconic Start screen however they want by pinning their favorite people, apps, music, games, photos and more. Three sizes of Live Tiles and 20 bright color choices including cobalt, crimson and lime mean you can personalize your Start screen to be unmistakably yours.  

In addition to Live Tiles, Windows Phone 8 offers a range of new features to make your smartphone experience even more personal, including these:

• The only phone with Live Apps. Live Apps bring information right to the Start screen, such as the Groupon deal of the day, flight information and news headlines. With Windows Phone 8, Live Apps such as Facebook can even deliver real-time information right to your lock screen with updated wallpaper.  

• Top apps. The Windows Phone Store has 120,000 apps to choose from, with hundreds added every day and hits coming this holiday, such as “Angry Birds Star Wars,” “Cut the Rope Experiments,” “Disney’s Where’s My Water,” “LivingSocial,” “Temple Run,” “Urbanspoon” and many more. Today Microsoft announced that Pandora, the leading Internet radio service, is coming to Windows Phone in early 2013 with one year of ad-free music.

• Kid’s Corner. Exclusive to Windows Phone 8, Kid’s Corner is a worry-free way to share your phone with your kids, so they can play “Angry Birds” without texting your angry boss. Parents can now hand over their phones to the kids without worrying about deleted photos, misdirected emails, unapproved purchases or accidental phone calls. After a simple setup, parents can activate a specialized place on the phone for kids to play — complete with their own customizable Start screens — where they can access only the apps, games, music and videos picked by parents.

• Rooms. Sometimes you want to share and chat with one group, not your entire social network. Rooms allow you to create private groups of people who have Windows Phone 8 — like your family members best friends or fantasy football league — and easily connect with just them. Chat, share calendars, shopping lists or photos in an ongoing conversation where only those invited can join in. You can share some aspects of Rooms with friends and family on other smartphones as well.

• Data Sense. This new feature helps you surf more and do more — without worrying about going over your data limit. Data sense helps conserve your data allowance by compressing Web images, deferring data tasks to free Wi-Fi and automatically adjusting your usage as you get closer to your plan limits. Data Sense also shows how much data is used per app. As you approach your limit, Data Sense notifies you so you can get the most out of your plan. Data Sense will roll out to select mobile operators this holiday and additional partners next year. Verizon will be the first to offer Data Sense in the U.S.  

• Wallet and near-field communications. Windows Phone 8 brings together the best of new wallet technologies, including payments via near-field communications (NFC).(1) The Wallet can also store your debit, credit, loyalty and membership card information on your phone. 

• Always-on, premium Skype experience. With the new Skype app, coming soon to Windows Phone 8, you can make and receive Skype calls just like a regular phone call. Simply tap a friend or family member’s contact card in the People Hub, or just pick up when the phone rings. Skype is always on and available so you can choose how to connect with people.

Stunning Phones :

Leading up to today’s launch, Nokia, Samsung and HTC have announced an array of phones for Windows Phone 8, featuring large, vivid screens, new camera innovations, NFC capabilities, and bold colors such as red, yellow, blue, black and white.(2) Each phone offers unique features and comes in a variety of price points.  

• Nokia. The Nokia Lumia 920 offers state-of-the-art photography that fits in your pocket, and it is the world’s only smartphone to include Optical Image Stabilization. The Nokia Lumia 822, 820 and 810 offer a ClearBlack display and removable back exchangeable shells in a range of vibrant colors.(3) Both the Nokia Lumia 920 and 820 offer wireless charging.

• HTC. The Windows Phone 8X by HTC was designed with sleek lines and radiant colors to match Windows Phone’s new Live Tiles. This phone also breaks new ground in optics with 1080p video recording, f2.0 aperture and a dedicated HTC ImageChip on the main 8-megapixel camera and an ultrawide-angle lens on the front camera that lets you fit up to four people in the frame for a premium Skype experience. The 8X and its smaller sibling, the 8S, both boast a killer music experience with Beats Audio and exclusive built-in amps that pair perfectly with Xbox Music.

• Samsung. The Samsung ATIV S brings the biggest screen to Windows Phone, with a bright 4.8-inch touch screen and large battery for extended battery life. Wrapped in brushed aluminum, the ATIV S balances high-end materials and technology with a hairline design and light weight. The ATIV Odyssey was announced today as the latest Windows Phone from Samsung with more details to come. 

Learn More : 

The Windows Phone blog has even more features details on Windows Phone 8 at www.windowsteamblog.com/windowsphone.