WaterMarkTextbox Control in Windows Store Application Using XAML

This article will introduce you to the WinRT XAML Toolkit and how to use this Toolkit to develop a Windows Store Application using XAML.

This Toolkit includes a couple of controls and extensions that enable the developer to make the app more responsive for the user.

You can download this Toolkit for Windows Store Apps from here.

In this article I will use one of the controls (extensions) of this Toolkit known as WaterMarkTextbox.

Introduction.

As you all know that WaterMarkTextbox is a kind of textbox control that is inherited from the Textbox control. It does not, however, use validation; it just provides guidance for the user of the input value. It is just used for providing an idea of what type of value they need to input for this control.

So, let's try this Control in a Windows Store Application with the help of screenshots.

Here I create a Blank Application template of Windows Store.



Have a look at the .dll that I downloaded and added to my project:



Now, here I use the WaterMarkTextbox control in my application. To do this I have to added the namespace in my XAML file; see:



Let's add the WaterMarkTextbox control that was already inherited from TextBox. I added 3 WaterMarkTextboxes in the following code:

<Page x:Class="U2UConsult.Win8.TextBoxSample.MainPage"

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

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

      xmlns:local="using:U2UConsult.Win8.TextBoxSample"

      xmlns:ctl="using:WinRTXamlToolkit.Controls"

      xmlns:Extensions="using:WinRTXamlToolkit.Controls.Extensions"

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

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

      mc:Ignorable="d">

 

    <Grid  Background="#FF0E0E0E">

        <Grid Margin="0,100">

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="250" />

                <ColumnDefinition Width="250" />

                <ColumnDefinition Width="250" />

            </Grid.ColumnDefinitions>

            <Grid.RowDefinitions>

                <RowDefinition Height="auto" />

                <RowDefinition Height="auto" />

                <RowDefinition Height="auto" />

            </Grid.RowDefinitions>

            <TextBlock Text="First Name"

                           FontSize="18"

                           Grid.Row="0"

                           Grid.Column="0"

                           HorizontalAlignment="Right"

                           VerticalAlignment="Center" />

            <ctl:WatermarkTextBox x:Name="Name"

                                      WatermarkText="Enter first name here."

                                      Grid.Row="0"

                                      Grid.Column="1"

                                      Margin="4 4 0 4"                                                                      

                                      />

            <TextBlock Text="Last Name"

                           FontSize="18"

                           Grid.Row="1"

                           Grid.Column="0"

                           HorizontalAlignment="Right"

                           VerticalAlignment="Center" />

            <ctl:WatermarkTextBox  x:Name="LastName"

                   WatermarkText="Enter last name here."

                                       Grid.Row="1"

                                       Grid.Column="1"

                                       Margin="4 4 0 4"                                                                          

                                    

                    />

            <TextBlock Text="Age"

                           FontSize="18"

                           Grid.Row="2"

                           Grid.Column="0"

                           HorizontalAlignment="Right"

                           VerticalAlignment="Center" />

            <ctl:WatermarkTextBox x:Name="Age"

                                      WatermarkText="Enter age here."

                                      Grid.Row="2"

                                      Grid.Column="1"

                                      Margin="4 4 0 4"></ctl:WatermarkTextBox>

        </Grid>

    </Grid>

</Page>

Now, run the app and you will see the following screenshots.

The output will look as in the following:



As you enter into the following textboxes, the displayed text will becomne hidden.