Thursday, March 21, 2013

Silly but useful stuff - Part 3 (UI)

Importance of UI in performance
Simple UI tricks, such as progress bars, redirecting user's attention using animation, or placing slower loading sections at the bottom of a page or off-screen, can often ‘fix’ a performance problem without the need to tune the underlying code.
These UI tricks are an important tool to have in your performance tuning toolbox and can be much quicker and easier than addressing the underlying issue. They can act as a holdover until you have the time to devote to the core problem. So, one should never underestimate the UI while tackling performance issues.

Isn't it interesting :)

Saturday, March 2, 2013

StringBuilder is NOT the answer for all string concatenation scenarios; String.Join could be

Yes, if you are in a loop and adding to a string, then a StringBuilder *could* be most appropriate. However, the overhead of spinning up a StringBuilder instance makes the following pretty dumb:     


var sb = new StringBuilder(); 
sb.Append("This is ");
sb.Append("not more efficient");
sb.Append(" solution.");
var str= sb.ToString();
 Instead, use String.Join, which is typically more performant than spinning up a StringBuilder instance for a limited number of strings. It’s my go-to concat option:  

        string myString = String.Join(" ", new String[] { "This", "is", "a", "much", "better", solution, "."}); 


The first variable of " " can just be set to "" when you don’t want a delimiter.
For loops that do a lot of looping, sure, use a StringBuilder. But just don’t assume it’s the de facto solution in all, or even the majority of cases. My rule of thumb is to add strings together when I’ve got one to five of them (likewise with String.Format if it helps with legibility). For most other cases, I tend towards String.Join. Only when dealing with a loop that isn’t limited to about 10 iterations, especially one that really lets rip, I do spin up a StringBuilder.

Thursday, February 21, 2013

Starting with Prism - Part 3 of n

Introduction 

Continuing to my Prism 2 of n series, in this article I am going to talk about how a communication happens between various application components, following Prism framework.

Background 

In earlier articles of this series, I already mentioned that Prism is all about loose coupling and modularity. So, in order to achieve both these aspects we divide our application into multiple modules. Now, when we are talking about modularity, first thing which strikes to our mind is communication. How will these module going to talk with each other, how they are going to communicate with each other, etc, etc. So, when we have a need of communication between modules, there are couple of approaches which we can take like Commanding, Event Aggregation, Shared Services, Region Context and probably there are many more. In this article, mainly I'll be taking these four concepts:   
  • Commanding  
  • Event Aggregation  
  • Region Context 
  • Shared Services   
Now let's take one-by-one and see, how they make our application loose coupled 

Commands/Commanding Overview 

This is the most common method of communication in Prism application. Now again, commanding is not specific to Prism library. It is similar to what we have in WPF and Silverlight. Main purpose of commanding is to bind a UI gesture (i.e. a button click) to an action which needs to be performed. Each command has an Execute method and this method is called whenever a command is to be execute. Apart from  Execute method, command also has an CanExecute method, which determines whether or not a command can be execute. An element that is bind to the command can be either enable or disable based on the result of CanExecute method.
Most common ways to create command is either to use the RoutedCommand or Custom Command. RoutedCommand delivers the command messages to UI element. On the other hand, Custom Command can be implemented by creating a custom class, which in turns inherits an ICommand interface. Using custom command needs a lot of extra work and one has to provide command handlers to hook off and then do the routing, when the command is on board.
Please note, in Prism application, command handlers doesn't have any association with any elements in the visual tree. But don't get panic. Fortunately, Prism provides us with two classes that makes commanding more easier and provides more functionality. It provides DelegateCommand and CompositeCommand.  
A DelegateCommand is a command that allows you to call a delegate when the command is executed whereas CompositeCommand allows us to combine multiple commands.  

DelegateCommand   

A DelegateCommand is a command that allows you to supply methods as delegates and will be invoked when the command is invoked. So, this means that event handler is not at all required in the code behind. Another good thing is DelegateCommands are normally stored locally means that are created in ViewModel and the concerns of the delegate methods are within the context of that ViewModel.  Now agian, Prism has something for these DelegateCommands. Prism actually provide you with two DelegateCommand as DelegateCommand andDelegateCommand<T>. The difference is the Execute and CanExecute delegate methods for DelegateCommand will not accept the parameter whereas the DelegateCommand<T> allows you to specify the type of parameter that Execute and CanExecute  parameter can be. Now, let's jump into some code:  

Using the code  

Before getting into much depth, first I want to tell you about what I want to achieve here.

Now what I want is, whenever I click on Calculate button, interest amount should be calculated. So, let's go ahead and implement this. 
We know that calculate command should be executed on button click. So, we have to add below line of code forButton as 
<Button Content="Calculate" Grid.Column="0" Grid.Row="3" HorizontalAlignment="Left" Command="{Binding CalculateInterestCommand}" /> 
As of now this command doesn't exist in our ViewModel. So, let's go ahead and add this in our ViewModel as: 
public ICommand CalculateInterestCommand { get; private set; } 
Now we need to create an instance of this command. So, in the constructor add this line: 
public InterestCalculatorViewModel()
{
            CalculateInterestCommand = new DelegateCommand(Calculate, () => CanCalculate);
 }  
In the above command, first parameter will be the Execute method(in our case, it is Calculate method) which will be called when a command will execute and the next parameter will be  CanExecute(in our case, it is CanCalculate), which will tell whether a command can execute. 
Now go ahead and create your Execute and CanExecute parts as:  
private void Calculate()
{
     InterestAmount = PrincipalAmount * InterestRate / 100;
}
 
private bool CanCalculate 
{
       get
       {
           // you can add your condition to enable or disable the button
           return true;
       }
} 
Run the application and you are all done. Isn't it very easy ??? Well, now quickly move on to the CompositeCommand.   

CompositeCommand  

These are the commands which are globally scoped and exists in the common portion(in our case it will be in Infrastructure project) of our app and contains multiple child commands. These commands can be used where we have a requirement to perform same logic on multiple views with single command (in our case, let's assume we have a tab control and on each tab I am calculating interest amount). In that case, each view will have the local command bind in the ViewModel registered with a CompositeCommand. So, whenever CalculateAll command is invoked, all the child commands will also be invoked. Similarly even if single child's CanExecute returns false, CalculateAll will not be invoked.
For the demonstration of CompositeCommand, first let's open Shell.xaml. In Shell, I have added a another region, which contains CalculateAll button. We also added a TabControl, in order to inject the multiple instances of a view. Your Shell.xaml will look like this:
Then I've modified InterestCalculatorModule.cs to create multiple instances of view as:
At this point of time, if you will launch your application and click on CalculateAll button, you need to click the button three times, as one more each view. So, to make CalculateAll work in proper manner, let's add a new class named CompositeCommands as:
public class CompositeCommands
    {
        public static readonly CompositeCommand CalculateAllCommand = new CompositeCommand();
    } 
Now go to CalculateAllModule and open CalculateAllView.xaml and add the reference of Infrastructure project as:
<UserControl x:Class="CalculateAllModule.Views.CalculateAllView"
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
           xmlns:cc="clr-namespace:PrismDemo.Infrastructure;assembly=PrismDemo.Infrastructure"
           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
           xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
           mc:Ignorable="d" 
           d:DesignHeight="300" d:DesignWidth="300">
    <Button Command="{x:Static cc:CompositeCommands.CalculateAllCommand}" Content="Calculate All"/> 
</UserControl> 
Now next step is to register our ViewModel for this CompositeCommand. Open the constructor of our ViewModel and add below line:

CompositeCommands.CalculateAllCommand.RegisterCommand(CalculateInterestCommand); 
Now launch the application and it will work as expected. Just clicking the button CalculateAll button, all the view will get their calculation done.  
EventAggregation Overview 
This is the one of the common pattern, which is specific to Prism. EventAggregation provides event based communication in a very loosely coupled manner. It is made up of Publishers and Subscribers. Here a publisher will execute an event and a subscriber will listen to the event. Please note, subscribers do not need have any strong references to publishers. 
Prism has built-in support for EventAggregation as it provides a core service by IEventAggregator interface. EventAggregator is responsible for locating and loading the events. It is also responsible for keeping the collection of events in the system. Please remember, publisher and subscribers will need an instance of an EventAggregator and to get that event and for performing this, they need help of container. EventAggregator also provides multicast Pub/Sub functionality means there can be multiple publishers which raise the same event  and multiple  subscribers listening to that event.
Events created using Prism library are typed events, which means compile time checking is possible, before we launch an application. Prism provides a class named CompositePresentationEvent<T> to  create such events. This class maintains the list of all the subscribers and handles everything related to dispatching events. Please note, this is a generic class, so we need to mention the payload type T. Here T is what we want to send to subsciber, when a event is published. EventAggregator provides us with few services as:
  • Publication of events - by using Publish method
  • Subscribing events - by using Subscribe method
  • Subscribe using a strong reference - by using keepSubscriberReferenceAlive parameter on subscribe method. Please be cautious while using this because while using this you manually have to unsubscribe from the event, when closing the subscriber 
  •  Filtering events - by using filter delegate while subscribing 
  •  Unsubscribing events - by using UnSubscribe method 
Now, let's jump back to code once again. Here our requirement is, whenever a calculation is completed, user should get a message on statusbar indicating completetion of a calculation. Now to accomplish this, let's add a new class named UpdateCalculationStatusEvent as:

public class UpdateCalculationStatusEvent:CompositePresentationEvent<String>
{   } 
Now we need to write a publisher event in our ViewModel. So, add an instance of IEventAggregator and pass it to the constructor of our ViewModel as:
IEventAggregator mEventAggregator;
public InterestCalculatorViewModel(IInterestCalculatorView view,IEventAggregator eventAggregator)
   {
        this.mEventAggregator=eventAggregator;
    }
Now when a Calculate button is clicked, we want to send a message to the statusbar. So, in order to achieve that, we need to modify our Calculate method as: 
private void Calculate()  { 
    InterestAmount = PrincipalAmount * InterestRate / 100;
    mEventAggregator.GetEvent<UpdateCalculationStatusEvent>().Publish(String.Format("Interest amount is {0}", InterestAmount));        
 } 
As per the above line of code, whenever the Calculate method is executed, result will be published as 'Interest amount is so and so'. 
Now, next we need to create a subscriber for this event and here subscriber is going to be a StatusBar. So, let's open up our StatusBar ViewModel as follows:   
   public class StatusBarViewModel : ViewModelBase,IStatusBarViewModel
    {
        IEventAggregator mEventAggregator;
        public StatusBarViewModel(IStatusBarViewModel view, IEventAggregator eventAggregator)
            :base(view)
        {
            mEventAggregator = eventAggregator;
            mEventAggregator.GetEvent<UpdateCalculationStatusEvent>().Subscribe(CalculationCompleted);
        }
 
        private string message;
        public string Message
        {
            get { return message; }
            set
            {
                message = value;
                OnPropertyChanged("Message");
            }
        }
 
        private void CalculationCompleted(Object obj)
        {
            Message = "Updated";
        }
    } 
Now let's go ahead and run our application and you are done Smile | <img src= " />  

Shared Servcies  

Shared services is the another way of communication in Prism application. It is a custom class that provides functionality to other modules in a very loosely coupled way. This service is generally placed in a separate module and can be registered using a Service Locator. When we register our service, it is registered as a common interface. This allows other modules to use our service with acquiring a static reference to the module.But there is a side effect of using this common interface is that the concrete implementation don't have to be shared. Registering your service as a shared service is very easy and can be done by ContainerControlledLifetimeManager.  

Region Context  

Sometimes there are scenarios where we have to share contextual information between a view that is hosting a region  and a view that is inside the region. For example, you may have a master detail type scenario where you have an orders view, which exposes a region to show the order detail information. To support this scenario, Prism provides  Region Context. By using Region Context one can  share an object between the parent view and the child view that are hosted in the region. 
Please note, Prism only supports consuming the Region Context from a view inside a region only if the view is a dependency object. So, if your view is not a dependency object, then you need to create a custom region behavior. One important thing to note here is do not use datacontext here, because datacontext is mainly use to bind viewmodel to a view. So, this means, that datacontext is storing view's entire viewmodel. So, until and unless, we have very simple view, it is not recommended to use datacontext for cummunicating loosely coupled views. 

Thursday, January 31, 2013

Const and Readonly keyword

Both these words play a very important role in defining constants in an application (C#). At one sight, it seems like, both are same but exactly it is not he case. Let's understand one by one to get the clear picture.


The word const itself means, it will never change. If you are specifying any variable as a const that means the value of the variable is never going to change inside the application.

How we declare a constant is, by using a const keyword. Basically, one can define const only on the primitive types, like int, double, etc. One should make sure that the value should be assigned at the time of declaration itself and another important thing is whatever value is set for const variable, that value will be set at the compile time itself and this value will get stored inside a .dll or an .exe. In later part, I'll show u on how we can see this value inside a dll or an exe using an Ildasm. Sample code to define const variable is as:


Another keyword is the readonly. The readonly word also sounds like a const but for the readonly variable you cannot change the value, once it is assigned. Means it is restricting us to a value assignment. Sample code to define readonly is as follows:











Please note, readonly  variables can be assigned either at the time of declaration or can be assigned value inside a constructor. These two are the only places, where one can assign the value of a readonly ariable. For readonly alue assignment is done at run-time and there is no difference between a regular variable and a readonly variable in terms of memory allocation.

Combined sample code with bit more depth:











In above code, let’s change value PI and age variable inside the Main function as:


Here one can notice that, reassigning both the variables named age and PI is giving an error and on mouse hover, we can get the complete description of error as:

Now question is, if both are having the same qualities then what’s the point in creating two different things. Well, this is not the case because const is a compile time constant and readonly is a run-time constant. Most of us might be aware that the value of compile-time constants are set at the time of declaration itself and this can be seen in ildasm also. Coming to the run-time constants, these are set at run-time and that’s the reason that it is not mandatory to assign readonly variables at the time of declaration itself as one can assign them in a constructor also as:

Now question is when to use what:
If the value is going to fix throughout the program and is never going to change in any circumstances, then one should choose const.
But on the other hand, if assignment of initial value depends on some parameter/conditions and value needs to be decide at run-time, then one can opt for readonly and based on that initial value of a readonly variable can be set. But please note, once the value is assigned, further modification is not at all possible till the lifetime of the application.

ILDASM and constants:
Now, let's jump quickly on ildasm to prove the value assignment for both of these.










As I told earlier, that const are compile time constants and are assigned at the time of declaration itself. So, same can be proved via ildasm using IL code. In ildasm, one can see the value of const variable in hexa but for readonly variable, there is no such value assigned in PI variable in ildasm.

Hope above article was useful :) 

Wednesday, January 23, 2013

Silly but useful stuff - Part 2 (ASP.Net)

Using StartMode Attribute
Every time we update our site, IIS must recompile it during the first request, so the initial request takes significantly longer than subsequent ones. An easy solution for this is to tell IIS to automatically recompile our site as part of the update process. And this can be achieved using the startMode attribute in the ApplicationHost.config file.

In essence, we can say, by using startMode attribe, one can reduce the initial load time of an ASP.Net site. Hope it helps :)

Sunday, December 23, 2012

Silly but useful stuff - Part 1 (.Net)


Collection and List
Let's have a look at this snippet:























In first sight, most of you might feel that both List and Collection will contain print numbers from 1 to 6. Am I right?

But Alas! There is a hidden gotcha in it ;)
Because the actual output is:







What happen surprised???

If you have ever tried to get in depth of Collection and List, then you might know the answer. Well, the answer is pretty simple. MSDNdocumentation clearly states that "Initializes a new instance of the Collection class as a wrapper for the specified list".

And on the other hand, MSDN documentation states that "Initializes a new instance of the List<T> class that contains elements copied from the specified collection and has sufficient capacity to accommodate the number of elements copied."

Hope now it is clear to you.

So, the moral of the story is, one should be very cautious while using List and Collection else it can bite you really very-very hard.

Saturday, November 3, 2012

Converting a given string to Title Case

To convert string in title case is bit tedious and may require lot of code as there is no direct method available in C#.Net  in String class. So, here I am sharing a method, which will be the extension method for String class and can be used to convert given string to title case.
Here I am using CultureInfo from Globalization and ToTitleCase method of TextInfo class.


public static class StringExtensions
{
    public static string ConvertToTitleCase(this string input)
    {
        System.Globalization.CultureInfo cultureInfo =
        System.Threading.Thread.CurrentThread.CurrentCulture;
        System.Globalization.TextInfo textInfo = cultureInfo.TextInfo;
        return textInfo.ToTitleCase(input.ToLower());
    }
}

Hope reusing this will save lot of your time :)

Wednesday, October 24, 2012

Changes in Visual Studio 2012

Introduction

Nowadays, we see that software development process is shifting from enterprise-driven process to consumer-focused approach, in which applications are fully based on the taste of consumer market and the devices they want to use. And the speed at which these devices and platform are emerging, it is becoming more and more challenging for developers. Earlier applications were used to run on a server or a desktop but today many more devices like smartphones, tablets are becoming ubiquitous. So, in this case developer must either create applications that work on multiple platforms or make applications tailored to each platform with similar logic and the most important thing is, there should be a connected experience that allow user to seamlessly move among all these devices and platforms.
But as long as Microsoft is with developers, developers need not worry. Agree ??? 

Visual Studio 2012 

Launch of Visual Studio 2012 solved a lot of problems. Now instead of the developer worrying about platform and devices, Visual Studio will take care of it. Isn't it good? Visual Studio 2012 makes it easy to develop apps for multiple platforms including Windows Smartphones, slates, Xbox and of course traditional desktops. With the birth of Portable Libraries, developer can write and compile the code once and then deploy the assembly anywhere. Enhanced version of Team Foundation Server is another major addition. Continuing to all these, one major change are App Store which help consumer to quickly search and acquire the required application software. In App Store, Applications can be monetized also either by charging or including advertisements in the application. Visual Studio 2012 provides integrated tools to publish our applications in this app store.

Major changes done in Visual Studio 2012
  • Interface of Visual Studio is redesigned in order to remove significant clutter from the screen, while still providing a fast access to major features.
  • Visual Studio 2012 is not only for developers, but many other people like stakeholders, architects, project managers, designers, testers etc.
  • Visual Studio 2012 helps developer create applications that span device boundaries. Project templates, debugging tools and portable class libraries all help to make this process easier 
  • Visual Studio 2012 supports developers by enabling them to create solutions that are highly scalable, supporting a range of models from durable full duplex synchronous services to high-throughput asynchronous services.
  • Developing a scalable solution is only half the challenge: You must also provide a suitable environment to act as a host. With Visual Studio you can develop for a range of infrastructure choices. Whether you choose to target a physical server, a virtual server, or a private or public cloud, Visual Studio 2012 is your solution. If you decide to use the Windows Azure™ public cloud offering, you can deploy directly from Visual Studio to the cloud. Visual Studio also includes IIS Express (lightweight IIS), which is suitable for testing the apps.

Visual Studio Team Foundation Server 2012

  • It enables stakeholders to participate as equally as developers throughout the application life cycle and help developers in faster delivery with more business value.
  • As earlier version, Visual Studio TFS can be installed on local server but in Visual Studio 2012, Team Foundation Server is available as an online SaaS version.
  • Sometimes, some teams may be using a different development environment, such as Eclipse™. Visual Studio Team Foundation Server 2012 provides adapters to connect to supported IDEs so that developers can work in their preferred development environment. 

Blend

  • It enables developer to create more stunning applications using XAML.
  • Portability between Visual Studio 2012 and Blend has been improved, and the design surface in Visual Studio has been upgraded to more closely match the experience in Blend.

Visual Studio Test Professional 2012

  • This helps testing process to fully integrate into Software Development Life Cycle (SDLC).
  • Using this test cases and testing can be performed more quicker using the same tools as developers.
  • It allows Exploratory Testing, which enables testing without creating any formal test plans. It allows Test Manager to record, attach screenshots, and create a test case
  • Testing on remote devices without installing Visual Studio 2012 or Test Manager on the device itself (only a small test agent need to be installed on the device). 
There are lots of interesting facts, which are associated with Visual Studio 2012, which I'll be posting as and when I'll get time.  

Monday, October 22, 2012

Windows App Splash Screen - Beginners Tutorial

Introduction
Continuing to my previous article title, here we will see about splash screens, how to set the splash screen image and how to change the background color. 

Splash Screen
Every Windows Store app must have splash screen. Splash screen consists of image and a background color. Whenever the user will launch application, splash screen will be the first to come up. Now you might be thinking, what is the purpose of splash screen???
We all know that, whenever any application is launched, lot many things happened at backend before our application is fully launched. So, splash screen provides a way to hide all those background details from the user. This splash screen is launched, when application is initialized and as soon as our application is ready for interaction, this splash screen goes off. Isn't it a nice thing ?
Now question is can we customize this splash screen ? Then my answer will be Yes. You can customize image as well as background color. Enough of theory, let's try it out ...

Demo and sample code
Open the project in Visual Studio. Open the package.appxmanifest file from the solution explorer. Opening the manifest file by double clicking will automatically open the file in Visual Studio Manifest Designer as
















Open the ApplicationUI tab and scroll till the end, until you find Splash Screen section. If you have not modified anything in Splash Screen section, you will be able to see "images\splashscreen.png" path in the Splash Screen field and if you want to see the markup code for it then open your manifest file in the notepad or any text editor as:  
<applications>
    <application id="App" entrypoint="HelloWorldSample.App" executable="$targetnametoken$.exe">
      <visualelements description="HelloWorldSample" backgroundcolor="#464646" foregroundtext="light" smalllogo="Assets\SmallLogo.png" logo="Assets\Logo.png" displayname="HelloWorldSample">
        <defaulttile showname="allLogos">
        <splashscreen image="images\splashscreen.png">
      </splashscreen>
    </defaulttile>
  </visualelements></application></applications>


If you want to change this default image, then click on browse the browse button to select the image of your choice. Note: Please make sure that the image you are selecting must be of 620 x 300 pixels. 
Now coming to Background Color, it is also pretty simple. In the Splash Screen sectioour n, you will find the field with title Background Color. You can enter the color of your choice in this field. Setting of background color is optional for splash screen.

Things to remember while customizing splash screen:
BE careful while customizing the splash screen: As it is the first screen or let's say welcome screen of our app, it should have a good combination of image and background color. It should be very appealing. Here one thing to keep in mind is, when your application is launched, only the background color is adjusted as per the screen size, not the image size. Image size will always be intact.

USE extended splash screen
If you feel that your application needs to perform lots of background tasks before the user interation can happen or before the landing page appears, then extend your splash screen in a way, that it gives user a pleasing experience, instead of annoying.  Alternatively, you can provide additional information on the splash screen, in order to keep user busy by showing more interesting information about your application.

NEVER display advertisements
The purpose of splash screen is to let user know that app is loading, using the same for advertising and other useless stuff can confuse user also.

NEVER display about page
The main purpose of splash screen is to give user a smooth loading experience. So, your splash screen should never show information about version, date , etc.

USE proper image
It is always recommended to use the image, which gives idea about your application

USE progressbar
If you feel that your application is going to take more than a few seconds, then it is always good to show user a progress bar about application loading process.

Saturday, October 20, 2012

Creating Windows Store app - Beginners tutorial

Introduction
In this tutorial we will be creating a very basic Windows Store App using XAML and C#. As this is the very first tutorial of this series, I'll be focusing mainly on project setup and basic workflows and later on, in other upcoming series, I'll be picking up more advance concepts. So, before moving forward, let's talk about the environment setup to execute our app.

Pre-requisite
In order to complete Windows 8 metro style app, our machine need following things:
  • You need Windows 8 with Microsoft Visual Studio Express 2012
  • You need developer license 

Creating a project

  • Launch Visual Studio 2012. Select File >> New Project. The New Project dialog window appears and from the left pane you can select template of your choice
















In the left panel, you can select 'Windows Store' template. Once selected, center pane will show you the list of available items for the selected template. Here we are using Blank App, which will not contain any user controls by default. If require, we can add the controls at later point of time.
Give the name and location of the project and press OK button. After clicking on OK, you will see the structure similar to as shown below:























Here you will see that, your solution contains lots of file. I'll try to brief about each of these items.
  1. Logo.png and SmallLogo.png images - to display in the start screen
  2. StoreLogo.png - to represent your app in Windows store
  3. SplashScreen.png - to show at startup of your application
  4. MainPage.xaml - to run our app
  5. Package.appxmanifest - to describe your app and lists all the files that your app contains
These above files are required for all Windows Store apps, which are built using XAML and C#. While using Blank App template, we can replace our blank page with any other page templates, in order to take advantage of layout and other helper classes. 

Replacing the MainPage

  • Delete the MainPage.xaml from Solution Explorer by rightclick nad select Delete
  • Select Project >> Add New Item
  • SelectWindows Store from left pane and pick any page template from center pane. Here I am selecting Basic Page
  • Enter the name of the page. Here I am giving MainPage.xaml. First time when you add a new page to the Blank Template, Visual Studio will show you a message as











Click Yes, to add these files. You will see, all the newly added files under the Common folder.
Build your app and now you will be able to see your page in design view. Press F5 and you will be able to see your app running as:














At this point of time, there is no button to close the app. So, you can use Alt+F4 to close it, typically we don't close Windows App (what is the reason behind this, we will see in our next article of this series). Now press the Windows key, you will be able to see a new tile added for your new app. Now to run the app, you can click or tap on that directly. Isn't it a good feature ???
Congratulations on building your first Windows store app.

Working with App.xaml

App.xaml is one of the most important files as this file is store the things, which you can access across the application. Double click and open the file. You will notice that, it contains a ResourceDictionary, which in turn has a reference of StandardStyles.xaml ResourceDictionary. This StandardStyles.xaml contain lots of style, which give look and feel to our app:

<application.resources>
        <resourcedictionary>
            <resourcedictionary.mergeddictionaries>                
                <resourcedictionary source="Common/StandardStyles.xaml">
                  </resourcedictionary>
        </resourcedictionary.mergeddictionaries>
 </resourcedictionary></application.resources>


Now go to code behind file of App.xaml. It contains a constructor, which calls InitializeComponent() method. This is the auto generated method, whose main purpose is to iniyialize all the elements, which are declared in xaml file. It also contains the suspension and activation methods as:

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Windows.ApplicationModel;
using Windows.ApplicationModel.Activation;
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;
 
// The Blank Application template is documented at http://go.microsoft.com/fwlink/?LinkId=234227

namespace HelloWorldSample
{
    /// <summary>
    /// Provides application-specific behavior to supplement the default Application class.
    /// </summary>
    sealed partial class App : Application
    {
        /// <summary>
        /// Initializes the singleton application object.  This is the first line of authored code
        /// executed, and as such is the logical equivalent of main() or WinMain().
        /// </summary>
        public App()
        {
            this.InitializeComponent();
            this.Suspending += OnSuspending;
        }
 
        /// <summary>
        /// Invoked when the application is launched normally by the end user.  Other entry points
        /// will be used when the application is launched to open a specific file, to display
        /// search results, and so forth.
        /// </summary>
        /// <param name="args" />Details about the launch request and process.
        protected override void OnLaunched(LaunchActivatedEventArgs args)
        {
            Frame rootFrame = Window.Current.Content as Frame;
 
            // Do not repeat app initialization when the Window already has content,
            // just ensure that the window is active
            if (rootFrame == null)
            {
                // Create a Frame to act as the navigation context and navigate to the first page
                rootFrame = new Frame();
 
                if (args.PreviousExecutionState == ApplicationExecutionState.Terminated)
                {
                    //TODO: Load state from previously suspended application
                }
 
                // Place the frame in the current Window
                Window.Current.Content = rootFrame;
            }
 
            if (rootFrame.Content == null)
            {
                // When the navigation stack isn't restored navigate to the first page,
                // configuring the new page by passing required information as a navigation
                // parameter
                if (!rootFrame.Navigate(typeof(MainPage), args.Arguments))
                {
                    throw new Exception("Failed to create initial page");
                }
            }
            // Ensure the current window is active
            Window.Current.Activate();
        }
 
        /// <summary>
        /// Invoked when application execution is being suspended.  Application state is saved
        /// without knowing whether the application will be terminated or resumed with the contents
        /// of memory still intact.
        /// </summary>
        /// <param name="sender" />The source of the suspend request.
        /// <param name="e" />Details about the suspend request.
        private void OnSuspending(object sender, SuspendingEventArgs e)
        {
            var deferral = e.SuspendingOperation.GetDeferral();
            //TODO: Save application state and stop any background activity
            deferral.Complete();
        }
    }
}

Now moving to MainPage.xaml. This file defines the UI for your app. In code behind of this file, you will notice that, it uses LayoutAwarePage, which extends Page class and provides various mathods for navigation, view management and page management. In MainPage.xaml.cs file, you can add logic and event handlers for your application. The Basic Page template has two mathods, which you can use to save and load the page state.
protected override void LoadState(Object navigationParameter, Dictionary<string,string> pageState)
  {  }
 
 protected override void SaveState(Dictionary<string,string> pageState)
 {  }

Adding content to MainPage.xaml
Open MainPage.xaml from solution explorer. Now if you want to add more content, just open the xaml and start adding it as:

<stackpanel margin="120,80,0,0" grid.row="1">
                <textblock width="Auto" height="29" text="Welcome to my first windows store app">

Run your application by pressing F5 and you will see below changes:




Hope this material will be a very good start for beginners.