How to Use Own Style in Windows Store App

Introduction

In this article we are going to explain how to use our own style in Metro style application and the style code is separated from the Main XAML page. To implement it we will create a very simple application with the help of some text block and button.

In following we are including the entire code of 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:App17"

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

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

    mc:Ignorable="d">

 

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

        <Grid.ColumnDefinitions>

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

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

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

        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>

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

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

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

        </Grid.RowDefinitions>

        <TextBlock Grid.Column="1" Grid.Row="0" Text="Hello Application" HorizontalAlignment="Center" Style="{StaticResource titleStyle}"></TextBlock>

        <StackPanel Grid.Row="1" Grid.Column="1" >

            <TextBlock Text="Please Enter your Name" FontSize="20" Height="26" Style="{StaticResource BasicTextStyle}"/>

            <StackPanel Orientation="Horizontal" Margin="0,20,0,20">

                <TextBox x:Name="Input" Width="300" HorizontalAlignment="Left"/>

                <Button Content="Say &quot;Hello&quot;" Click="Button_Click_1"/>

            </StackPanel>

            <TextBlock x:Name="Output" Style="{StaticResource Outputstyle}"/>

        </StackPanel>

 

    </Grid>

</Page>

 

Step 4 : Now we will see how to use our own style in Metro style application. The following steps describe how:

• Open the property windows of the control for which we want a style
• Expand the "Miscellaneous" group and find the "Style" property.
• Click the small square next to the "Style" property to open the menu.
• In the menu, select "Convert to New Resource...." the "Create Style Resource" dialog opens.

• In the "Create Style Resource" dialog, enter "titleStyle" as the resource key, and select the option to define the resource in the application.

• Click "OK". The new style is created in App.xaml and the TextBlock is updated to use the new style resource. 

Code

<TextBlock Grid.Column="1" Grid.Row="0" Text="Hello Application" HorizontalAlignment="Center" Style="{StaticResource titleStyle}"></TextBlock>

• Click the small square next to the "Style" property to open the menu again.
• In the menu, select "Edit Resource". App.xaml opens in the editor.
• In the "titleStyle" resource, change the "Foreground" value to "Red" and the "FontSize" value to "30" and the "FontWeight" value to "Extra Bold".

Code

<Style x:Key="titleStyle" TargetType="TextBlock">

 <Setter Property="Foreground" Value="Red"/>

 <Setter Property="FontSize" Value="30"/>

 <Setter Property="FontWeight" Value="ExtraBold"/>

 <Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}"/>

 <Setter Property="TextTrimming" Value="WordEllipsis"/>

 <Setter Property="TextWrapping" Value="Wrap"/>

 <Setter Property="Typography.StylisticSet20" Value="True"/>

 <Setter Property="Typography.DiscretionaryLigatures" Value="True"/>

 <Setter Property="Typography.CaseSensitiveForms" Value="True"/>

</Style>

Step 5 : The code of the MainPage.xaml.cs file is:

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)

        {

            Output.Text = "Welcome  " + Input.Text.ToString();

        }

    }

}

 

Step 6: Now press F5 to run the application.