ARTICLE

Formatting In Percentages Using Windows Store Apps

Posted by Richa Garg Articles | Windows Store Apps September 27, 2012
In this article I will explain how to perform percent formatting using the PercentFormatter class in Windows Store apps.
Reader Level:

Introduction

Today I am going to explain the PercentFormatter class which resides in the Windows.Globalization.NumberFormatting namespace. This class is used to calculate the result and returns the percentage of that result or number. Or we can say that this class is used to format and parse the percentages. This class is only applicable to the Windows Store apps. Now to work with this class use the following steps.

Step 1

Open Visual Studio 2012 and click on "File" -> "New" -> "Project...", select Windows Store inside Visual C# from the left side pane and BlankPage from the center pane.



Step 2


Add the namespace:

using Windows.Globalization.NumberFormatting;

Step 3

Create the instance of this class as:

PercentFormatter pf = new PercentFormatter();

Step 4

Open the MainPage.xaml file and write the code as:

<Page

    x:Class="App35.MainPage"

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

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

    xmlns:local="using:App35"

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

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

    mc:Ignorable="d">

    <Grid Background="#FFF9CDC3">

        <Grid.RowDefinitions>

            <RowDefinition Height="100"/>

            <RowDefinition Height="50"/>

            <RowDefinition Height="50"/>

            <RowDefinition Height="50"/>

            <RowDefinition Height="50"/>

            <RowDefinition Height="50"/>

            <RowDefinition Height="50"/>

            <RowDefinition Height="50"/>

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="450"/>

            <ColumnDefinition Width="*"/>

        </Grid.ColumnDefinitions>

        <TextBlock Text="Percent Formatting" FontSize="25" Grid.Row="0" Grid.Column="1" Margin="20,10,0,0"/>

        <TextBlock Text="Random Number:" Grid.Row="1" Grid.Column="0" FontSize="20" Margin="10,10,0,0"/>

        <TextBlock Name="Random_Number"  Grid.Row="1" Grid.Column="1" FontSize="20" Margin="34,10,347,10"/>

        <TextBlock Text="Percent Formatter:" Grid.Row="2" Grid.Column="0" FontSize="20" Margin="10,10,0,0"/>

        <TextBlock Name="Percent_Formatter"  Grid.Row="2" Grid.Column="1" FontSize="20" Margin="34,10,347,10"/>

        <TextBlock Text="Fixed Number:" Grid.Row="3" Grid.Column="0" FontSize="20" Margin="10,10,0,0"/>

        <TextBlock Name="Fixed_Number"  Grid.Row="3" Grid.Column="1" FontSize="20" Margin="34,10,347,10"/>

        <TextBlock Text="Percent Formatter (Grouped):" Grid.Row="4" Grid.Column="0" FontSize="20" Margin="10,10,0,0"/>

        <TextBlock Name="Percent_Formatter_Grouped"  Grid.Row="4" Grid.Column="1" FontSize="20" Margin="34,10,347,10"/>

        <TextBlock Text="Percent Formatter (No Fractional Digit):" Grid.Row="5" Grid.Column="0" FontSize="20" Margin="10,10,0,0"/>

        <TextBlock Name="Percent_Formatter_NoFractonal"  Grid.Row="5" Grid.Column="1" FontSize="20" Margin="34,10,347,10"/>

        <TextBlock Text="Percent Formatter (Always with a Decimal Point):" Grid.Row="6" Grid.Column="0" FontSize="20" Margin="10,10,0,0"/>

        <TextBlock Name="Percent_Formatter_alwaysdecimal"  Grid.Row="6" Grid.Column="1" FontSize="20" Margin="34,10,347,10"/>

        <Button Content="Get Data" Grid.Row="7" Grid.Column="1" Height="50" Width="150" Click="Button_Click_1" Margin="20,10,0,-10"/>

    </Grid>

</Page>

Step 5

Write the following code in MainPage.xaml.cs:
 

namespace App35

{

    public sealed partial class MainPage : Page

    {

        public MainPage()

        {

            this.InitializeComponent();

        }

        private void Button_Click_1(object sender, RoutedEventArgs e)

        {

            PercentFormatter pf = new PercentFormatter();

            double randomNumber = new Random().NextDouble();

            ulong fixedNumber = 50;

            Random_Number.Text = " " + randomNumber;

            Percent_Formatter.Text = " " + pf.Format(randomNumber);

            Fixed_Number.Text = "" + fixedNumber;

            pf.IsGrouped = true;

            Percent_Formatter_Grouped.Text = " " + pf.Format(fixedNumber);

            pf.FractionDigits = 0;

            Percent_Formatter_NoFractonal.Text = "" + pf.Format(fixedNumber);

            pf.IsDecimalPointAlwaysDisplayed = true;

            Percent_Formatter_alwaysdecimal.Text = "" + pf.Format(fixedNumber);

        }

    }

}

Step 6

Now Run the application. The output of this application looks like:

Percent-Formatting-In-Windows-Store-Apps.jpg

Summary

In this article I explained how to use the PercentFormatter class.

COMMENT USING