In our earlier tutorial we have seen what are the basic requirements that are required to setup the development environment for developing a Windows 8 Metro Application using the latest Visual Studio 2012 IDE. Once the required software’s are installed and the development environment is ready let us start with developing our first Windows 8 Metro styled application. Metro styled applications are developed using XAML (Extensible Application Mark Up Language) with visual C#. Let us see the step by step process on how to create our first app now. [more]
Steps:
Open Visual Studio 2012 RC and create a New Windows Metro Styled XAML project with a valid project name and location as shown in the screen below.
If this is the first project we are creating in Visual Studio 2012 IDE, then we will be popped up with a Registration for getting a developer license, just click on OK and it will proceed creating the License automatically as shown in the screen below.
Once the registration is done and the IDE gets the developer license after successful login we can see the message as shown in the screen below.
We can see the project is created now with the default files in the project solution as shown in the screen below. The default file and usage of the files are
- A manifest file (package.appxmanifest) that describes your app (its name, description, tile, start page, and so on) and lists the files that your app contains.
- A set of large and small logo images (logo.png and smalllogo.png)to display in the start screen.
- An image (storelogo.png) to represent your app in the Windows Store.
- A splash screen (splashscreen.png) to show when your app starts.
- XAML and code files for the app (App.xaml and App.xaml.cs/.vb) .
- A start page (MainPage.xaml) and an accompanying code file (MainPage.xaml.cs/.vb) that run when your app starts.
Now delete the MainPage.XAML file from the solution explorer and add a new Page by clicking on the project and selecting Add New Item and select the Basic Page as shown in the screen below.
We can see a few default files will be added which are the supportive files to build and execute the application. We can see the Main Page added (basically a baisc page template) and we can see the page review as shown in the screen below.
Let us modify the XAML code by changing the Title, some textbox and labels which are used to get the input and display some user result to the end user who are going to use this application as shown in the screen below. After changes the XAML code looks like below.
XAML:
<common:LayoutAwarePage
x:Name="pageRoot"
x:Class="Win8SeriesPart2.MainPage"
DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
IsTabStop="false"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Win8SeriesPart2"
xmlns:common="using:Win8SeriesPart2.Common"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<!– TODO: Delete this line if the key AppName is declared in App.xaml –>
<x:String x:Key="AppName">F5debug Win 8 App</x:String>
</Page.Resources>
<!–
This grid acts as a root panel for the page that defines two rows:
* Row 0 contains the back button and page title
* Row 1 contains the rest of the page layout
–>
<Grid Style="{StaticResource LayoutRootStyle}">
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!– Back button and page title –>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
<TextBlock x:Name="pageTitle" Grid.Column="1" Text="{StaticResource AppName}" Style="{StaticResource PageHeaderTextStyle}"/>
</Grid>
<VisualStateManager.VisualStateGroups>
<!– Visual states reflect the application’s view state –>
<VisualStateGroup x:Name="ApplicationViewStates">
<VisualState x:Name="FullScreenLandscape"/>
<VisualState x:Name="Filled"/>
<!– The entire page respects the narrower 100-pixel margin convention for portrait –>
<VisualState x:Name="FullScreenPortrait">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<!– The back button and title have different styles when snapped –>
<VisualState x:Name="Snapped">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<StackPanel Grid.Row="1" Margin="120,49,0,-19">
<TextBlock Text="Enter Your Email to Register"/>
<StackPanel Orientation="Horizontal" Margin="0,20,0,20">
<TextBox x:Name="nameInput" Width="300" HorizontalAlignment="Left"/>
<Button Content="Register"/>
</StackPanel>
<TextBlock x:Name="txtresult"/>
</StackPanel>
</Grid>
</common:LayoutAwarePage>
Let us proceed to the next step to add the event handler that should be triggered on the Register button click event, to do so just double click on the button or go to the properties windows and select the event handler (Button Click Event). We can see the event assigned as shown in the screen below.
Write our output code to the button event, which basically gets the user entered mail address and gives the success result as shown in the screen below.
Code:
private void Button_Click_1(object sender, RoutedEventArgs e)
{
txtOutput.Text = nameInput.Text + " Successfully Registered!!!";
}
Let us run the application now by pressing the Run button at the top ribbon menu, where we need to select where we want to run the application. Run it on Local machine or remote machine or to the emulator. Let us run it locally and test it as shown in the screen below.
We can see the application loaded to the Metro Screen and the application will be opened as shown in the screen below.
So we are done with our first Metro Application and got the expected output as well. Now let us check how it appears in the Metro list by going to the Metro UI of the Windows 8 platform and we can see the application is listed as metro block as shown in the screen below.
Since it’s a demo app build right click on the Metro Application and we can see the option to uninstall as shown in the screen below.
That’s it from this tutorial, hope to see you all in the next article until then Happy Programming!!!
No Comments
There's certainly a great deal to find out about this issue. I really like all the points you made.|