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.