Windows Store Apps Using C#/VB and XAML

In this article we will implement a very first simple example of Windows Store App.

In this article we can create a simple "hello windows app" Windows Store app using Microsoft Visual Basic C# with the Extensible Application Markup Language (XAML). 

Note 

This article is basically intended for use with Microsoft Visual Studio 2013 and Windows 8.1. Parts of it will not work with Microsoft Visual Studio 2012 and Windows 8.
Before You Start

To this article we need Windows 8.1 and Visual Studio 2013 and we have a basic knowledge of XAML.

Create a new project in Visual Studio 2013.

Select "File" -> "New" -> "Project...". The New Project dialog appears. Seelct Installed > Templates.

Expand Visual Basic or Visual C# and pick the Store Apps and click Windows Apps Template.

start

In the center pane, select
Blank App (Windows) Template. Enter the name of your project and click the OK button. Visual Studio creates your project and displays it in the Solution Explorer.

solutionexplor

The project includes the following:

  • A Package.Appxmainfest file that describes the app (its name, description tile, start page and so on).

  • XAML and code files for the app (App.xaml.cs (or .vb for VB)).

  • A start page (mainpage.xamal) and an accompanying code file (mainpage.xaml.cs (or .vb for VB)) that runs when your app starts.

  • A set of large and small logo images to display in the Start Screen.

These files are essential to all Windows Store apps using Visual Basic or C#. Any Windows Store app project that you create in Visual Studio contains them. Let us see the home windows of a Blank App (Windows). If you double-click on the Main Page you get the following window.




The preceding figure shows the home window of our app. If you do not get the home window then it is highly recommended that you update your Visual Studio 2013.
In this tutorial, you work with just a few of the files listed previously: App.xaml, App.xaml.cs (or App.xaml.vb), MainPage.xaml and MainPage.xaml.cs (or MainPage.xaml.vb).

App.XAML Default Code
  1. <Application  
  2. x:Class="App1.MyApplication"  
  3. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  4. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  5. xmlns:local="using:HelloWorld">  
  6.   
  7. </Application>  
App.xaml.cs Default Code
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.IO;  
  4. using System.Linq;  
  5. using System.Runtime.InteropServices.WindowsRuntime;  
  6. using Windows.ApplicationModel;  
  7. using Windows.ApplicationModel.Activation;  
  8. using Windows.Foundation;  
  9. using Windows.Foundation.Collections;  
  10. using Windows.UI.Xaml;  
  11. using Windows.UI.Xaml.Controls;  
  12. using Windows.UI.Xaml.Controls.Primitives;  
  13. using Windows.UI.Xaml.Data;  
  14. using Windows.UI.Xaml.Input;  
  15. using Windows.UI.Xaml.Media;  
  16. using Windows.UI.Xaml.Navigation;  
  17.   
  18. // The Blank Application template is documented at http://go.microsoft.com/fwlink/?LinkId=234227  
  19.   
  20. namespace App1  
  21. {  
  22.     /// <summary>  
  23.     /// Provides application-specific behavior to supplement the default Application class.  
  24.     /// </summary>  
  25.     sealed partial class App : Application  
  26.     {  
  27.         /// <summary>  
  28.         /// Initializes the singleton application object.  This is the first line of authored code  
  29.         /// executed and as such is the logical equivalent of main() or WinMain().  
  30.         /// </summary>  
  31.         public App()  
  32.         {  
  33.             this.InitializeComponent();  
  34.             this.Suspending += OnSuspending;  
  35.         }  
  36.   
  37.         /// <summary>  
  38.         /// Invoked when the application is launched normally by the end user.  Other entry points  
  39.         /// will be used such as when the application is launched to open a specific file.  
  40.         /// </summary>  
  41.         /// <param name="e">Details about the launch request and process.</param>  
  42.         protected override void OnLaunched(LaunchActivatedEventArgs e)  
  43.         {  
  44.  
  45. #if DEBUG  
  46.             if (System.Diagnostics.Debugger.IsAttached)  
  47.             {  
  48.                 this.DebugSettings.EnableFrameRateCounter = true;  
  49.             }  
  50. #endif  
  51.   
  52.             Frame rootFrame = Window.Current.Content as Frame;  
  53.   
  54.             // Do not repeat app initialization when the Window already has content,  
  55.             // just ensure that the window is active  
  56.             if (rootFrame == null)  
  57.             {  
  58.                 // Create a Frame to act as the navigation context and navigate to the first page  
  59.                 rootFrame = new Frame();  
  60.                 // Set the default language  
  61.                 rootFrame.Language = Windows.Globalization.ApplicationLanguages.Languages[0];  
  62.   
  63.                 rootFrame.NavigationFailed += OnNavigationFailed;  
  64.   
  65.                 if (e.PreviousExecutionState == ApplicationExecutionState.Terminated)  
  66.                 {  
  67.                     //TODO: Load state from previously suspended application  
  68.                 }  
  69.   
  70.                 // Place the frame in the current Window  
  71.                 Window.Current.Content = rootFrame;  
  72.             }  
  73.   
  74.             if (rootFrame.Content == null)  
  75.             {  
  76.                 // When the navigation stack isn't restored navigate to the first page,  
  77.                 // configuring the new page by passing required information as a navigation  
  78.                 // parameter  
  79.                 rootFrame.Navigate(typeof(MainPage), e.Arguments);  
  80.             }  
  81.             // Ensure the current window is active  
  82.             Window.Current.Activate();  
  83.         }  
  84.   
  85.         /// <summary>  
  86.         /// Invoked when Navigation to a certain page fails  
  87.         /// </summary>  
  88.         /// <param name="sender">The Frame which failed navigation</param>  
  89.         /// <param name="e">Details about the navigation failure</param>  
  90.         void OnNavigationFailed(object sender, NavigationFailedEventArgs e)  
  91.         {  
  92.             throw new Exception("Failed to load Page " + e.SourcePageType.FullName);  
  93.         }  
  94.   
  95.         /// <summary>  
  96.         /// Invoked when application execution is being suspended.  Application state is saved  
  97.         /// without knowing whether the application will be terminated or resumed with the contents  
  98.         /// of memory still intact.  
  99.         /// </summary>  
  100.         /// <param name="sender">The source of the suspend request.</param>  
  101.         /// <param name="e">Details about the suspend request.</param>  
  102.         private void OnSuspending(object sender, SuspendingEventArgs e)  
  103.         {  
  104.             var deferral = e.SuspendingOperation.GetDeferral();  
  105.             //TODO: Save application state and stop any background activity  
  106.             deferral.Complete();  
  107.         }  
  108.     }  
  109. }  
MainPage.XAML:
  1. <Page  
  2. x:Class="App1.MainPage"  
  3. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  4. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  5. xmlns:local="using:App1"  
  6. xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
  7. xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
  8. mc:Ignorable="d">  

  9. <Grid Background="Black">  

  10. <Grid.RowDefinitions>  
  11. <RowDefinition Height="100" />  
  12. <RowDefinition Height="100" />  
  13. <RowDefinition Height="100"/>  
  14. <RowDefinition Height="100"/>  
  15. </Grid.RowDefinitions>  

  16. <Grid.ColumnDefinitions>  
  17. <ColumnDefinition Width="100" />  
  18. <ColumnDefinition Width="Auto" />  
  19. <ColumnDefinition Width="50"/>  
  20. <ColumnDefinition Width="Auto"/>  
  21. </Grid.ColumnDefinitions> 

  22. <TextBlock x:Name="tbxFirst" Text="Hello windows app" FontSize="50" Grid.Column="1" Grid.Row="1"/>  
  23. </Grid>  
  24.   
  25. </Page>  
In the preceding code I use a text block tag. This is just like a Label in a web application and gives various attributes like FontSize, GridColumn, Grid Row and so on.

Press F5. 

 
Summary

In this article we have just gone through a very first simple example of a Windows Store app using a Textblock tag in XAML and C#. We will go deeper into Windows Store Apps with more examples in articles to come.