Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to build a Custom Textbox in Windows Phone

This tutorial will assist in explore on how we can create a custom Textbox with default Text in Windows Mobile devices.

The beginning

Accessing the TextBox will clear out its default text and when there is no value in the TextBox, the default text will be displayed by its default property. It will display the Default text written that is inside the TextBox. We will make use of a Windows Phone class library and we will declare the default text property. We need to inherit a class named TextBox in the Windows Phone library project; hence we will make a custom TextBox. We are aware of the reason why we use custom control. This is for the reason that, we need to make our own control as per the user requirements that will make the task of the user easy. We will look at how it is possible to make such type of functionality to make it a custom control. Let’s follow the below steps to implement it:

Step 1: We will create a Windows Phone library; let’s see the steps to add it.

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

Figure 1: Representing the Visual Studio to create a new project

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;
    }
    }
}

We have declared a property named D_Text that is used to place the default string inside the TextBo. This is the property by which we can set the default text to the TextBox.

Step 3: This step requires the building of the class library for which the project needs to be build and it will be built successfully as well.

Step 4: Let us take another application which is a Windows Phone application.

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

Figure 2: Representing another Window application in Visual Studio

Step 5: Here you need to incorporate the reference of the phone class library that we created previously. We will add the same from the below figure.

Representing the Solutions Explorer to Add Reference

Figure 3: Representing the Solutions Explorer to Add Reference

Browsing the Reference to be added

Figure 4: Browsing the Reference to be added

Step 6: We will see here how to add the complete phone library project to the Windows Phone application project.

  • Go to the Solution Explorer.
  • Right-click and select the existing project.
  • Select the Class Library CS file and add it.
  • The entire library project will be added to the Windows Phone application project.
Adding the complete library project

Figure 5: Adding the complete library project

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

Selecting the existing project

Figure 6: Selecting the existing project

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

Incorporating the Existing Project

Figure 7: Incorporating the Existing Project

Step 7: Here you will find the project been added to your Windows Phone application project that can be seen from the below figure.

Representing the Project added to Windows Phone application project

Figure 8: Representing the Project added to Windows Phone application project

Step 8: Here you will observe that the control named with Validation Control has been added to the toolbox. This can be seen from the below figure; you can drag and drop that control to use it.

Figure representing the Validation control

Figure 9: Figure representing the Validation control

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

Code:

<phone:PhoneApplicationPage
    x:Class="Usedfault_text_box.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/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"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility"
    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: Here you need to drag and drop the Default_Txt_box control. This will be done from the toolbox on the MainPage.xaml file. The design of the page is as follows.

Design of the screen after drag and drop of Default_Txt_box control

Figure 10: Design of the screen after drag and drop of Default_Txt_box control

Step 11: Let’s execute our application for which the output is given below.

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

Representing default text for the textbox

Figure 11: Representing default text for the textbox

Output 2: Post accessing the TextBox, the default text that is displayed inside the TextBox will also be cleared. The same can be seen from the below figure.

Representing the clearance of the default text

Figure 12: Representing the clearance of the default text

Output 3: Here whenever we clear the TextBox, we will again see that default value as can be seen from the below screen.

Representing the default text appearing again

Figure 13: Representing the default text appearing again

Conclusion

The article intended to cover the aspects that could lead to the creation of a custom Textbox with default Text in Windows Mobile devices.



Software Developer from India. I hold Master in Computer Applications Degree and is well versed with programming languages such as Java, .Net, C and C++ and possess good working knowledge on Mobile Platforms as well.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login