Windows Store Apps Using C#/VB and XAML

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.

The project includes the following:

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">
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;
18. // The Blank Application template is documented at http://go.microsoft.com/fwlink/?LinkId=234227
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. }
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. {
45. #if DEBUG
46. if (System.Diagnostics.Debugger.IsAttached)
47. {
48. this.DebugSettings.EnableFrameRateCounter = true;
49. }
50. #endif
52. Frame rootFrame = Window.Current.Content as Frame;
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];
63. rootFrame.NavigationFailed += OnNavigationFailed;
65. if (e.PreviousExecutionState == ApplicationExecutionState.Terminated)
66. {
67. //TODO: Load state from previously suspended application
68. }
70. // Place the frame in the current Window
71. Window.Current.Content = rootFrame;
72. }
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. }
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. }
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. 
   
10. <Grid Background="Black">
11. 
    
12. <Grid.RowDefinitions>
13. <RowDefinition Height="100" />
14. <RowDefinition Height="100" />
15. <RowDefinition Height="100"/>
16. <RowDefinition Height="100"/>
17. </Grid.RowDefinitions>
18. 
    
19. <Grid.ColumnDefinitions>
20. <ColumnDefinition Width="100" />
21. <ColumnDefinition Width="Auto" />
22. <ColumnDefinition Width="50"/>
23. <ColumnDefinition Width="Auto"/>
24. </Grid.ColumnDefinitions>
25. 
    
26. <TextBlock x:Name="tbxFirst" Text="Hello windows app" FontSize="50" Grid.Column="1" Grid.Row="1"/>
27. </Grid>
29. </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.