Getting Started with Grid App in Windows Store App

Introduction

In the preceding example, we saw getting started with windows store app. Today we will Getting started with grid app. Create a new Grid app project under visual studio 2013 and run this application without any changes. First of all, you will see splash screen on your window screen. Like

Above given snap contains multiple group titles, Group titles contains multiple item title and each item titles having three fields, such as Item picture, Item Title, and item Sub title. When we click on group title , appear new splash screen in windows look like this.

 Splash screen contains group detail page, which is contain large image with description text(about group title). In right hand side, you can see all item titles with thumbnail image. When we will click on item title , new splash screen will appear on window look like.

Now, look at in solution explorer, which is contains four .xaml file such as

1. App.xaml
2. GroupDetailPage.xaml
3. GroupedItemsPage.xaml
4. ItemDetailPage.xaml

If you want to change in all three file then we will implement own code for it. If you want to change app name in windows store then should go for App.xaml file

<x:String x:Key="AppName">Type your application name here</x:String>
For example
<x:String x:Key="AppName">Windows Store App</x:String>

Output Screen

How to use Style property in windows store app

Step-1 :  Double-click MainPage.xaml in Solution Explorer to open it.
Step-2 :  In XAML or design view, add a TextBlock with some Text like " Greeting".
Step-3 :  In the Properties Window, Expand the Miscellaneous group and find the Style property.

Step-4 : Click the property marker next to the Style property to open the menu.
Step-5 : In the menu, select System Resource > BodyTextBlockStyle.

when your mouse pointer come to object(TextBlock), a blue outline shows where the TextBlock is so you can select it.

Complete Source code

<Page

    x:Class="App4.MainPage"

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

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

    xmlns:local="using:App4"

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

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

    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <TextBlock HorizontalAlignment="Left" Margin="184,216,0,0" TextWrapping="Wrap" Text="Greeting" FontSize="20" VerticalAlignment="Top" Height="44" Width="349" Style="{StaticResource BodyTextBlockStyle}"/>

    </Grid>

</Page>

How to change style, theme of page in windows store

If you want to change your page theme, use RequestTheme property  in App.Xaml file. Basically theme is designed for better look. Bydefault, our windows store app uses dark theme. The System resource also included a light theme.

In Solution Explorer, double click App.xaml to open it.
In the opening Application tag, add the RequestedTheme property with its value set to Light.

App.xaml file 

<Application
    x:Class="App4.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App4" RequestedTheme="Light">

</Application>

Lets see after set the property

Your background theme will be changed after set property.

How to modify the start page in windows store app

In this tutorial, you learn how to

• Before you start
• Create a new project.

Before you start...

• To complete this tutorial, you need Windows 8.1 and Visual Studio 2013. To download them
• You also need a developer license. For instructions, see Get a developer license.

Create a new project in Visual Studio

Step-1 : Launch Visual Studio 2013.
Step-2 : Select File > New Project.
Step-3 : In the left pane, expand Installed > Templates, then expand Visual Basic or Visual C# and pick the Windows Store template type.
Step-4 : In the center pane, select the Blank App template.
Step-5 : In the Name text box, according name you enter.
Step-6 : Click OK to create the project.
Step-7 : Remove MainPage.xam file from the solution explorer
Step-8 : Add basic page to solution explorer and assign name to Page as "MainPage.xaml" instead of BasicPage1
Step-9 : Click ok

modify the start page

Step-1 : Double-click MainPage.xaml in Solution Explorer to open it

Step-2 : For change the page title, select the "My Application" text near the top of the page in the XAML designer.

Use of CheckBox Control in windows store app

Desing Page

<Page
    x:Class="App1.checkBox"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">



    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <CheckBox x:Name="check1" Content="MVC" HorizontalAlignment="Left" Margin="263,152,0,0" VerticalAlignment="Top" Height="45" Width="256" Checked="check1_Checked" />

        <CheckBox x:Name="check2" Content="ASP.NET" HorizontalAlignment="Left" Margin="263,81,0,0" VerticalAlignment="Top" Height="45" Width="256" Checked="check2_Checked_1" />
        <Button Content="Check " HorizontalAlignment="Left" Margin="242,287,0,0" VerticalAlignment="Top" Width="137" Click="Button_Click"/>

        <TextBlock  FontSize="20" x:Name="Label1" HorizontalAlignment="Left" Margin="387,84,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Height="113" Width="223"/>

    </Grid>
</Page>

// Code behind file

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
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;

// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238

namespace App1
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class checkBox : Page
    {
        public checkBox()
        {
            this.InitializeComponent();
         
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            if (check1.IsChecked == true)
            {
                Label1.Text += check2.Content+"\n";
            }
            if (check2.IsChecked == true)
            {
                Label1.Text += check1.Content;
            }  
        }


        private void check2_Checked_1(object sender, RoutedEventArgs e)
        {

        }

        private void check1_Checked(object sender, RoutedEventArgs e)
        {

        }
    }
}

Code Generate the following output

Bind Image in code file, Windows Store App

Design Page

<Page
    x:Class="App1.ImageCode"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Image x:Name="image1" HorizontalAlignment="Left" Height="246" Margin="113,131,0,0" VerticalAlignment="Top" Width="296"/>

    </Grid>
</Page>

// Code behind file

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
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.Media.Imaging;
using Windows.UI.Xaml.Navigation;

// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238

namespace App1
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class ImageCode : Page
    {
        public ImageCode()
        {
            this.InitializeComponent();
            BitmapImage bi = new BitmapImage();
            bi.UriSource = new Uri(this.BaseUri, "joli.jpg");
            image1.Source = bi;


        }
    }
}

Code Generate the following output