Customized Split Application in Windows Store App

Introduction

To day we will create a customized split application in Metro Style Apps. There are three type of application templates available in Metro Apps, Blank Application, Grid Application and Split Application. Here we are creating a split application with the use of blank application templates. In this application we will use a group of six IT institutes in six split boxes and each split box associated with its detail grid that will show the information about the institute where the user clicks.

In the following we are including the entire code of the XAML file and code behind file to create this mini application. 

Step 1 : First, you will create a new Metro Style Application. Let us see the description with images of how you will create it.

• Open Visual Studio 2012
• File -> New -> Project
• Choose Template -> Visual C# ->Metro Style Application
• Rename the application

Step 2 : In the Solution Explorer there are two files that we will primarily work with; the MainPage.xaml and MainPage.xaml.cs files.

Step 3 : The MainPage.xaml file is as in the following code:

Code :

<Page

    x:Class="App1.MainPage"

    IsTabStop="false"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:App7"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

     <Grid>

    <Grid x:Name="grd1"  Background="SkyBlue">

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width=".333*"></ColumnDefinition>

            <ColumnDefinition Width=".333*"></ColumnDefinition>

            <ColumnDefinition Width=".333*"></ColumnDefinition>

            <ColumnDefinition Width=".333*"></ColumnDefinition>

            <ColumnDefinition Width=".333*"></ColumnDefinition>

        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>

            <RowDefinition Height=".333*"></RowDefinition>

            <RowDefinition Height=".333*"></RowDefinition>

            <RowDefinition Height=".333*"></RowDefinition>

        </Grid.RowDefinitions>

        <TextBlock Grid.Row="0"  Grid.ColumnSpan="5" Grid.Column="1"

                   Text="Information About Some Top IT Institutes"

                   FontSize="40" FontWeight="ExtraBold"  VerticalAlignment="Bottom"

                   Margin="50,200,0,0"></TextBlock>

        <Button x:Name="b1" Grid.Column="1" Grid.Row="1" Width="200" Height="200"

                Click="Button_Click_1" Background="Blue">

            <Image Source="ims.jpg" Width="200" Height="200"></Image>

        </Button>

        <TextBlock Text="IMS Ghaziabad" FontSize="20" Grid.Column="1" Grid.Row="1"

                   VerticalAlignment="Bottom" FontWeight="Bold"></TextBlock>

        <Button x:Name="b2" Grid.Column="2" Grid.Row="1" Width="200" Height="200"

                Click="Button_Click_1" Background="Red">

            <Image Source="jss.jpg" Width="200" Height="200"></Image>

        </Button>

        <TextBlock Text="JSS Noida" FontSize="20" Grid.Column="2" Grid.Row="1"

                   VerticalAlignment="Bottom" FontWeight="Bold"></TextBlock>

        <Button x:Name="b3" Grid.Column="3" Grid.Row="1" Width="200" Height="200"

                Click="Button_Click_1" Background="Green">

            <Image Source="abes.jpg" Width="200" Height="200"></Image>

        </Button>

        <TextBlock Text="ABES Ghaziabad" FontSize="20" Grid.Column="3" Grid.Row="1"

                   VerticalAlignment="Bottom" FontWeight="Bold"></TextBlock>

        <Button x:Name="b4" Grid.Column="1" Grid.Row="2" Width="200" Height="200"

                Click="Button_Click_1" Background="Red">

            <Image Source="dit.jpg" Width="200" Height="200"></Image>

        </Button>

        <TextBlock Text="DIT Dehradun" FontSize="20" Grid.Column="1" Grid.Row="2"

                   VerticalAlignment="Bottom" FontWeight="Bold"></TextBlock>

        <Button x:Name="b5" Grid.Column="2" Grid.Row="2" Width="200" Height="200"

                Click="Button_Click_1" Background="Green">

            <Image Source="kiet.jpg" Width="200" Height="170"></Image>

        </Button>

        <TextBlock Text="KIET Ghaziabad" FontSize="20" Grid.Column="2" Grid.Row="2"

                   VerticalAlignment="Bottom" FontWeight="Bold"></TextBlock>

        <Button  x:Name="b6" Grid.Column="3" Grid.Row="2" Width="200" Height="200"

                 Click="Button_Click_1" Background="Blue">

            <Image Source="its.jpg" Width="200" Height="200"></Image>

        </Button>

        <TextBlock Text="ITS Ghaziabad" FontSize="20" Grid.Column="3" Grid.Row="2"

                   VerticalAlignment="Bottom" FontWeight="Bold"></TextBlock>

     </Grid>

      <Grid x:Name="grd2" Background="Green" Visibility="Collapsed">

             <Grid.ColumnDefinitions>

                <ColumnDefinition Width=".333*"></ColumnDefinition>

                <ColumnDefinition Width=".333*"></ColumnDefinition>

                <ColumnDefinition Width=".333*"></ColumnDefinition>

            </Grid.ColumnDefinitions>

            <Grid.RowDefinitions>

                <RowDefinition Height=".333*"></RowDefinition>

                <RowDefinition Height=".333*"></RowDefinition>

            </Grid.RowDefinitions>

            <Image x:Name="img1"  Source="ims.jpg" Grid.Column="1" Grid.Row="0" Visibility="Collapsed"></Image>

            <Image x:Name="img2" Source="jss.jpg" Grid.Column="1" Grid.Row="0" Visibility="Collapsed"></Image>

            <Image x:Name="img3" Source="abes.jpg" Grid.Column="1" Grid.Row="0" Visibility="Collapsed"></Image>

            <Image x:Name="img4" Source="dit.jpg" Grid.Column="1" Grid.Row="0" Visibility="Collapsed"></Image>

            <Image x:Name="img5"  Source="kiet.jpg" Grid.Column="1" Grid.Row="0" Visibility="Collapsed"></Image>

            <Image x:Name="img6"  Source="its.jpg" Grid.Column="1" Grid.Row="0" Visibility="Collapsed"></Image>

            <TextBlock x:Name="txt1" Text="hi" Grid.Column="1" Grid.Row="1" FontSize="20" Margin="100,50,0,0"

                       TextWrapping="Wrap"   Visibility="Collapsed"></TextBlock>

          <Button Grid.Column="1" Grid.Row="1" VerticalAlignment="Bottom" HorizontalAlignment="Center"

                  Content="Go Back" Background="Red" Click="Button_Click_2"></Button>

      </Grid> 

</Grid>

</Page>

Step 4 : The MainPage.xaml.cs file is as in the following code:

Code :

 

using System;

using System.Collections.Generic;

using System.IO;

using System.Linq;

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;

 

namespace App1

{

    public sealed partial class MainPage : Page

    {

        public MainPage()

        {

            this.InitializeComponent();

        }

 

        protected override void OnNavigatedTo(NavigationEventArgs e)

        {

        }

 

        private void Button_Click_1(object sender, RoutedEventArgs e)

        {

            if (b1.IsPressed)

            {

                grd1.Visibility = Windows.UI.Xaml.Visibility.Collapsed;

                grd2.Visibility = Windows.UI.Xaml.Visibility.Visible;

                img1.Visibility = Windows.UI.Xaml.Visibility.Visible;

                txt1.Visibility = Windows.UI.Xaml.Visibility.Visible;

                txt1.Text = "IMS Ghaziabad, was founded in 1990 by a group of visionaries and intellectuals to impart quality education in a stimulating and innovative environment where students are empowered with knowledge and professional skills while upholding the values of integrity, tolerance and mutual respect. Since its inception the group has promoted education in the areas of Management Sciences, Tourism, Information Technology, Bio-Science, Engineering Sciences and Journalism through its three educational campuses equipped with state of art infrastructure. IMS has attained a unique and a highly respectable place amongst the best professional education institutions in India.";

               

            }

            if (b2.IsPressed)

            {

                grd1.Visibility = Windows.UI.Xaml.Visibility.Collapsed;

                grd2.Visibility = Windows.UI.Xaml.Visibility.Visible;

                img2.Visibility = Windows.UI.Xaml.Visibility.Visible;

                txt1.Visibility = Windows.UI.Xaml.Visibility.Visible;

                txt1.Text = "JSS Academy of Technical Education (JSSATE), NOIDA was established to meet the ever growing demand for trained professional manpower for industries and to serve as training ground for students from this region in the Engineering profession. The Academy is situated on a sprawling campus of 28 acres in the Institutional area of NOIDA and aims to be a value-based Centre of Excellence in Technical Education. Backed by the rich experience of managing Engineering Education, JSSATE, NOIDA ranked as one of the best Technical Institutions in the state of Uttar Pradesh, is approved by the Government of Uttar Pradesh and All India Council for Technical Education and affiliated to the Uttar Pradesh Technical University (UPTU) at Lucknow. Our students have been invariably placed in the Roll of Honour of top ten rankers in UPTU.";

            }

 

            if (b3.IsPressed)

            {

                grd1.Visibility = Windows.UI.Xaml.Visibility.Collapsed;

                grd2.Visibility = Windows.UI.Xaml.Visibility.Visible;

                img3.Visibility = Windows.UI.Xaml.Visibility.Visible;

                txt1.Visibility = Windows.UI.Xaml.Visibility.Visible;

                txt1.Text = "Academy of Business and Engineering Sciences (ABES), with captivating state of art campus having aesthetically lush green, serene and capitulating landscape of eco-friendly environment and situated on Delhi Hapur by- road, NH-24, 11 Kms from Delhi border with proximity to hub of industries, MNCs and business houses was started in 2000 with B.Tech.  ( CS, IT,EC) and MCA, with the approval from AICTE, New Delhi and affiliated to UP Technical University, Lucknow having UPTU code 032. In the following years ME (2003), MBA (2006), EEE (2008), MCA (2008) and M.Tech. were also approved.";

            }

            if (b4.IsPressed)

            {

                grd1.Visibility = Windows.UI.Xaml.Visibility.Collapsed;

                grd2.Visibility = Windows.UI.Xaml.Visibility.Visible;

                img4.Visibility = Windows.UI.Xaml.Visibility.Visible;

                txt1.Visibility = Windows.UI.Xaml.Visibility.Visible;

                txt1.Text = "DIT is a leading technical institute offering Undergraduate and Postgraduate programmes in several streams of Engineering, IT, Management, Architecture and Pharmacy. This is the oldest self financed professional institute of uttarakhand which was established in the year 1998.";

            }

            if (b5.IsPressed)

            {

                grd1.Visibility = Windows.UI.Xaml.Visibility.Collapsed;

                grd2.Visibility = Windows.UI.Xaml.Visibility.Visible;

                img5.Visibility = Windows.UI.Xaml.Visibility.Visible;

                txt1.Visibility = Windows.UI.Xaml.Visibility.Visible;

                txt1.Text = "The mission of KIET will be to provide every opportunity for each student to attain the best of their capabilities and create in them the desire to excel. The seeds for the craving for excellence would be sown in the minds of the students as soon as they enter the portals of the KIET. Thus KIET will act as a catalyst in creating excellence in technical education. The reach for excellence would also ensure fin our mission to serve the society by producing dedicated professionals with appropriate knowledge and skills capable of providing imaginative and technologically informed solutions to industry, academia and other professions.";

            }

            if (b6.IsPressed)

            {

                grd1.Visibility = Windows.UI.Xaml.Visibility.Collapsed;

                grd2.Visibility = Windows.UI.Xaml.Visibility.Visible;

                img6.Visibility = Windows.UI.Xaml.Visibility.Visible;

                txt1.Visibility = Windows.UI.Xaml.Visibility.Visible;

                txt1.Text = "Welcome to I.T.S-The Education Group. The I.T.S Group was founded in the year 1995. Since then the I.T.S has grown impressively and achieved widespread recognition from corporate, academia , and professional circles. At I.T.S we are committed to provide a value driven culture along with creating a professional order. The I.T.S as a group is large and diversified group and imparts knowledge in field of Management, IT, Dentistry, Bio-technology, Physiotherapy, Pharmacy, and Engineering. The I.T.S group has more than 700 highly qualified and experienced faculty members in their respective functional areas. About 8000 students are enrolled in various courses in four campuses. The Group runs two hospitals and is one of two groups in India which have two dental colleges.";

            }

        }

 

        private void Button_Click_2(object sender, RoutedEventArgs e)

        {

          

            grd2.Visibility = Windows.UI.Xaml.Visibility.Collapsed;

            grd1.Visibility = Windows.UI.Xaml.Visibility.Visible;

        }

    }

}

 

Step 5 : After running this code the output looks like this:

Click on the institute that you want information about.

With the help of the Back button you can return to the main screen and select another institute.