Create a Custom TextBox With Default Text in Windows Phone 7


Introduction

In this article we are going to explore how to create a custom TextBox with default Text in Windows Phone 7. Whenever we click on the TextBox it will clear out it's default text and whenever we don't have any value in the TextBox the default text will be shown again by it's default property. It shows the Default text written inside the TextBox. In this we will use a Windows Phone class library in which we will declare the default text property. In the Windows Phone library project we have to inherit a class named TextBox so because of that we will make a custom TextBox. We all know why we used the custom control because, if we want to make our own control according to the user requirement and will do the easy task of the user. Further we will see how it is possible to make such type of functionality to make it a custom control. To implement it you will have to use the steps given below.  

Step 1: In this step we have to create a Windows Phone library so let's see from where you have to add it which is given in the figure.

  • Go to Visual Studio 2010
  • Open New->Project
  • Select the template Silverlight for Windows Phone
  • Select the Windows Phone library and give it a name as you want to give.
  • Click OK.

Step_1_1fig.gif

Step_1_2fig.gif

Step 2: In this step we will see the code for the  DefaultTxt_box.cs file which is given below.

Code:

using System;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Ink;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;
namespace defaulttextbox

{

    public class DefaultTxt_box:TextBox

    {

        private string My_Default_Text = string.Empty;

    public string D_Text

    {

        get

        {

            return My_Default_Text;

        }

        set

        {

            My_Default_Text = value;

            MyDefault_Text();
        }

    }
    public DefaultTxt_box()

    {

        this.GotFocus += (sender, e) =>

            { if (this.Text.Equals(D_Text)) { this.Text = string.Empty; } };

        this.LostFocus += (sender, e) => { MyDefault_Text(); };

    }
    private void MyDefault_Text()

    {

        if (this.Text.Trim().Length == 0)

            this.Text = D_Text;

    }

    }
}

 

In this code given above here we are declaring a property named D_Text which is used to place the default string inside the TextBox; it's the property by which we can set the default text to the TextBox.

Step 3: In this step you have to build the class library for which you have to build the project; it will be built successfully as well.

Step 4: Now you have to take another application which is a Windows Phone application.

  • Start another instance of Visual Studio 2010.
  • Go to Menu->File->New->Project.
  • Select the Silverlight template for Windows Phone.
  • Select the Windows Phone application.
  • Click OK.

Step_4_2fig.gif

Step 5: In this step you will have to add the reference of the phone class library which was previously created; let us see from where you have to add this which is shown in the figure.

Step_5_1fig.gif


Step_5_2fig.gif

Step 6: In this step we have to add the complete phone library project to the Windows Phone application project; let us see how you will add it.

  • Go to the Solution Explorer.
  • Right-click and select the existing project.
  • Select the Class Library cs file and add it.
  • You just see that the entire library project will be added to the Windows Phone application project.

Step_6_1fig.gif

Click on Add and select the Existing Project which is shown in the figure given below.

Step_6_2fig.gif

Add the Existing Project with the Project file which is given below.

Step_6_3fig.gif

Step 7: In this step you will see that the project has been added to your Windows Phone application project which you can see in the figure given below.

Step_7_1fig.gif

Step 8: In this step you just see that the control named with Validation Control has been added to the toolbox which you can see in the figure given below; you can drag and drop that control to use it.

Step_8_1fig.gif

Step 9: In this step you will see the code for the MainPage.xaml file which is given below.

Code:

<phone:PhoneApplicationPage

    x:Class="Usedfault_text_box.MainPage"

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

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

    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

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

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

    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"

    FontFamily="{StaticResource PhoneFontFamilyNormal}"

    FontSize="{StaticResource PhoneFontSizeNormal}"

    Foreground="{StaticResource PhoneForegroundBrush}"

    SupportedOrientations="Portrait" Orientation="Portrait"

    shell:SystemTray.IsVisible="True" xmlns:my="clr-namespace:defaulttextbox;assembly=defaulttextbox">

    <!--LayoutRoot is the root grid where all page content is placed-->

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

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->

        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">

            <TextBlock x:Name="PageTitle" Text="My Default TextBox" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"

                       FontFamily="Comic Sans MS" FontSize="48">

              <TextBlock.Foreground>

                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                 <GradientStop Color="Black" Offset="0" />

                 <GradientStop Color="#FF1FE7E9" Offset="1" />

                </LinearGradientBrush>

              </TextBlock.Foreground>

            </TextBlock>

        </StackPanel>

        <!--ContentPanel - place additional content here-->

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

            <Grid.Background>

                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                    <GradientStop Color="Black" Offset="0" />

                    <GradientStop Color="#E1B4CEC0" Offset="1" />

                </LinearGradientBrush>

            </Grid.Background>

            <my:DefaultTxt_box Height="103" HorizontalAlignment="Left" Margin="-4,49,0,0" Name="defaultTxt_box1"

                               Text="" D_Text="Enter Your Name" VerticalAlignment="Top" Width="460" FontSize="32" FontFamily="Comic Sans MS" Foreground="#FFFFFF4C">

                <my:DefaultTxt_box.Background>

                    <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">

                        <GradientStop Color="Black" Offset="0" />

                        <GradientStop Color="#FF90CFCF" Offset="1" />

                    </LinearGradientBrush>

                </my:DefaultTxt_box.Background>

            </my:DefaultTxt_box>

        </Grid>

    </Grid> 

</phone:PhoneApplicationPage>

 

Step 10: In this step you have to drag and drop the Default_Txt_box control from the toolbox on the MainPage.xaml file and the design of that page is given below.

 

Designimg.gif

 

Step 11: Now further we are going to run the application then the output regarding our application is given below.

 

Output 1: In this output which is the default output we will see that the default text for the textbox is shown inside the TextBox which is "Enter Your Name" which is given below.


Output1.gif

 

Output 2: After clicking on the TextBox the default text shown inside the TextBox will be cleared as well. You can see it via the figure given below.


Out2.gif

 

Output 3: In this output whenever you clear the TextBox then again it will see that default value which is shown in the figure given below.


Output1.gif

 

Here are the other resources which may help you.


Create a Watermark TextBox Effect from Windows Phone 7
Create a Simple NumericTextBox Control in Windows Phone 7
Create a Custom Email Validator Control in Windows Phone 7

Image Based Text Effect in Windows Phone 7

Create a Custom Multi-Column StackPanel Control in Windows Phone 7

Up Next
    Ebook Download
    View all
    Learn
    View all