Language Font in Windows Store App

Introduction

In this article we are going to see how to obtain language-specific font recommendations in a Windows 8 Metro Style Application. Here, we will present an example; in this example we will explain how to obtain language-specific font recommendations using the LanguageFontGroup class in the Windows.Globalization.Fonts namespace.

The LanguageFontGroup APIs (Windows.Globalization.Fonts namespace) can indicate an appropriate font to use for a given language. So, we will use the following steps to make this application as below.

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

• Open Visual Studio 2011
• File -> New -> Project
• Choose Template -> Visual C# -> Windows Metro Style -> Blank Application
• Rename this application:

Step 2 : In the Solution Explorer there are two files that we will primarily work with; MainPage.xaml and MainPage.xaml.cs files. In the images folder add any image to the application but in this application we don't have to add an image.

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

Code : Let us see the code which is given below.

<UserControl x:Class="LanguageFont.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"

xmlns:sys="using:Windows.Foundation"

mc:Ignorable="d"

d:DesignHeight="768" d:DesignWidth="1366">

<Grid x:Name="LayoutRoot" Background="White">

<!--App Orientation States-->

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="OrientationStates">

<VisualState x:Name="FullScreenLandscape"/>

<VisualState x:Name="Filled">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="ContentRoot">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Thickness>40,20,40,20</Thickness>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(StackPanel.Orientation)" Storyboard.TargetName="InputPanel">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Orientation>Horizontal</Orientation>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.MaxWidth)" Storyboard.TargetName="Description">

<DiscreteObjectKeyFrame KeyTime="0" Value="700">
</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="FullScreenPortrait">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="ContentRoot">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Thickness>40,20,40,20</Thickness>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.MaxWidth)" Storyboard.TargetName="Description">

<DiscreteObjectKeyFrame KeyTime="0" Value="700">

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Snapped">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="ContentRoot">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Thickness>20,20,20,20</Thickness>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(StackPanel.Orientation)" Storyboard.TargetName="InputPanel">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Orientation>Vertical</Orientation>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.MaxWidth)" Storyboard.TargetName="Description">

<DiscreteObjectKeyFrame KeyTime="0" Value="250">

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="LegalPanel">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Thickness>0,0,10,0</Thickness>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Grid x:Name="ContentRoot" Background="Pink" Margin="100,20,100,20">

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

<RowDefinition Height="*"/>

<RowDefinition Height="Auto"/>

</Grid.RowDefinitions>

<!-- Content -->

<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" Grid.Row="1" ZoomMode="Disabled">

<StackPanel x:Name="ContentPanel">

<StackPanel x:Name="InputPanel" Orientation="Horizontal" HorizontalAlignment="Left">

<StackPanel>

<TextBlock Text="Input" Style="{StaticResource H2Style}"/>

<TextBlock Text="Select Scenario:" Style="{StaticResource H3Style}"/>

<ListBox x:Name="ScenarioList" Margin="0,0,20,0" HorizontalAlignment="Left">

<ListBox.ItemTemplate>

<DataTemplate>

<TextBlock Text="{Binding Name}"/>

</DataTemplate>

</ListBox.ItemTemplate>

<ListBoxItem x:Name="Scenario2">

<TextBlock Style="{StaticResource ListBoxTextStyle}" Text=" Font For Document" />

</ListBoxItem>

</ListBox>

</StackPanel>

<StackPanel Margin="0,31,0,0" >

<TextBlock Text="Description:" Style="{StaticResource H3Style}"/>

<StackPanel x:Name="Description" MaxWidth="900">

!-- Scenario -->

<StackPanel x:Name="Scenario2Input">

<TextBlock Style="{StaticResource DescriptionTextStyle}" HorizontalAlignment="Left" TextWrapping="Wrap" Text="This shows the use of the LanguageFontGroup API to get fonts for a particular language (Hindi is used here) for document body text and heading elements."/>

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

<Button x:Name="Scenario2InputButton" Content="Apply Recommended Font" Margin="0,0,10,0"/>

</StackPanel>

</StackPanel>

</StackPanel>

</StackPanel>

</StackPanel>

<!-- Output section -->

<TextBlock Text="Output" Margin="0,25,0,20" Style="{StaticResource H2Style}"/>

<StackPanel x:Name="Output" MaxWidth="900" HorizontalAlignment="Left">

<!-- Scenario -->

<StackPanel x:Name="Scenario2Output">

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

<TextBlock Style="{StaticResource H1Style}" x:Name="Scenario2Heading" FontFamily="Trebuchet MS" HorizontalAlignment="Left" TextWrapping="Wrap" />

</StackPanel>

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

<TextBlock Style="{StaticResource DescriptionTextStyle}" x:Name="Scenario2Text" Width="500" FontFamily="Camilar" FontWeight="Light" FontStretch="UltraExpanded" HorizontalAlignment="Left" TextWrapping="Wrap" Margin="0,0,0,-103" Height="135" RenderTransformOrigin="0.501999974250793,0.690999984741211">

</TextBlock>

</StackPanel>

</StackPanel>

</StackPanel>

</StackPanel>

</ScrollViewer>

</StackPanel>

</Grid>

</Grid>

</UserControl>

Step 4 : After running this code we get the following output.