Introduction
Here we will work with Windows 8 and Visual Studio 2011 and make an application with the help of both. We will use new features of Windows 8 and Visual Studio 2011. Windows 8 is the codename for the next version of the operating system. It has the many new changes. Visual Studio 2011 has full enabling development for windows platform. It provides a better UI, code review, and HTML5 support. With the both of things the Metro Style Applications is one of the best features.
Windows Runtime (WinRT)
The Windows RT describes the Windows 8 and the VS 2011. Windows Runtime (RT) treats with Metro Style Applications and it is uses the language of our choice, be that a managed language (C# or VB.NET), C++ or JavaScript.
- It enables developers to build applications that heavily use functionality exposed by Windows.
- In .Net framework, developers can make an application with the use of the XAML, C#, VB.NET to develop an Metro Style Application.
- VC ++ developers can make use of DirectX and High Level Shader Language (HLSL).
WinRT for Metro Style Applications, access rights to the user data and system resources, is checked by the Windows. WinRT sits right on top of Windows as a thin layer, exposing functions of Windows. These functions can be used in Metro style Applications from all languages.
Metro Style Application
A Metro Style Application is a full screen applications integrated according to user's choice.
There are many features it integrates such as given below.
- Touch Interaction
- Windows Interface
- Windows help for user's
- User Interaction with Applications
- Device Running Information
Note: You have to install VS 2011 and Windows 8 and get access the Metro Style Application template.
Lets create Metro Style Applications using C#
Step 1: First of all open VS2011 and create a new Windows Metro Style App with the following steps as below.
- Select File > New Project. The New Project dialog box opens.
- In the Installed pane, expand Visual C#.
- Select the Windows Metro style template type.
- In the center pane, select Application.
- Enter a name for the project.
After clicking on ok, an application will be created, and we will get the following project structure given below.
After creating my project we have to show there are many project files and display in the Solution Explorer.
| File Name | File Description |
| Images | These files are the default logo and splashscreen images that we can replace with own. |
| AssemblyInfo | This file contains the name and version metadata that is embedded into the generated assembly. |
| Package.appxmanifest | This file contains metadata that describes your app, including display name, description, logos, and capabilities. |
| App.xaml, App.xaml | These files specify app-level logic. The App class is required to display the user interface. |
| MainPage.xaml | This file is the default start page that you use to create the user interface. |
| MainPage.xaml(.cs) | This is the code-behind file that contains the logic for the default start page. |
| MainPage.xaml.h | The header file for MainPage.xaml.cpp. This file is in C++ projects only. |
| pch.h, pch.cpp | Precompiled header files. These files are in C++ projects only. |
Step 2:
First we define the UI using XAML. The XAML UI framework for Metro style Applications in C# is in Windows.UI.Xaml.
Here I will show an example to clearly show XAML defining the UI for a simple text message. In the given example there are many concepts relevant to the XAML-based programming model, including partial classes, layout, controls, properties, and events such as.
Step 3
XAMl Code
Open MainPage.Xaml in this code the XAML-based programming code contains partial classes, layout, controls, properties, and events in gievn code.
<UserControl x:Class="WelcomeMetroApp.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="768" d:DesignWidth="1366">
<Grid x:Name="LayoutRoot" Background="#FFFF4500">
<StackPanel Margin="0,105,0,-105">
<Button Content="Plz Click On Me" Background="Blue" FontSize="24" Width="228" Height="70" Click="HelloButton_Click" ClickMode="Press" Margin="8,0,0,0" />
<TextBlock x:Name="DisplayText" FontSize="48" Foreground="White" />
</StackPanel>
</Grid>
</UserControl>
Step 4
XAML.cs Code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Windows.Foundation;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Data;
namespace WelcomeMetroApp
{
partial class MainPage
{
public MainPage()
{
InitializeComponent();
}
private void HelloButton_Click(object sender, RoutedEventArgs e)
{
DisplayText.Text = "Hello World";
}
}
}
Step 5
Run the application and we will get the following output.
After clicking on the button we get the following message.
Resources
Here are some useful resources: