HeaderedTextBlock Control In UWP

Before reading this article, please go through the following article.

1. Introduction To Universal Windows Platform (UWP) App Development Using Windows 10 And Visual Studio 2015
   
2. How to add UWP ToolKit controls in Universal Application Development With XAML AND C#

Reading this article, you can learn how UWP Tool Kit Control - HeaderedTextBlock is used in Universal Windows Apps development, with XAML and Visual C#.

The following important tools are required for developing UWP.

1. Windows 10 (Recommended)
2. Visual Studio 2015 Community Edition (It is a free software available online).

Now, we can discuss step by step app development.

Step 1 - Open Visual Studio 2015 -> Start -> New Project-> Select Universal (under Visual C#->Windows)-> Blank App -> Give suitable name for your App (UWPToolkitHeaderedTBL)->OK.



Step 2 - Choose the Target and Minimum platform versions for your Windows Universal Application. After this, the project creates App.xaml and MainPage.xaml.



For adding UWPToolKit Control, Please refer,

• How to add UWP ToolKit controls in Universal Application Development With XAML AND C#

Step 3 - Add TextBlock control and change the name and text property for title.



Step 4 - Add UWP Tool Kit namespace in Mainpage.xaml.

xmlns:Controls="using:Microsoft.Toolkit.Uwp.UI.Controls"

Add HeaderTextBlock control from UWP Tool Kit, change the name property, and set the Header and Text Properties.



Note- Automatically, the following code will be generated in XAML code View, while we are done in the design View.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:UWPHeaderedTBL" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:Controls="using:Microsoft.Toolkit.Uwp.UI.Controls" x:Class="UWPHeaderedTBL.MainPage" mc:Ignorable="d">
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock x:Name="tblTitle" HorizontalAlignment="Left" Margin="72,31,0,0" TextWrapping="Wrap" Text="Headered Text Block Test" VerticalAlignment="Top" FontSize="20" FontWeight="Bold" Width="250" Height="29" />
        <Controls:HeaderedTextBlock x:Name="HTBtest" HorizontalAlignment="Left" Margin="97,154,0,0" VerticalAlignment="Top" Width="183" Height="65" Header="C# Corner" Text="Welcomes You All" /> </Grid>
</Page>

Step 5 - Deploy your App in Local Machine. The output of the UWPToolkitHeaderedTBL App is,



Summary - Now, you have successfully tested UWP Tool Kit – HeaderedTextBlock Control in Visual C# - UWP environment.