TextBox with cookies using User Control, Windows Phone / Store

Hello, dear habrozhiteli!

Today we will try to create your own TextBox with additional amenities.

I must say that there will be only two of them:
Placeholder, also known as “default text”;
Clear Button is a handy thing in the tablet world that allows you to quickly clear the contents of our text field.
')
For the tutorial, an example of a Windows Phone application is given, but I bet that it will also work with WPF and Silverlight. In Windows Store applications, there is a default purge button, but Placeholder is added the same way.

Just want to thank @Useless_guy for the excellent tip-off in the form of the library of components of The Windows Phone Toolkit .
Also, I advise you to pay attention to the library Coding4Fun .
Indeed, if there is no special need to create your UserControls, you should use ready-made working solutions.

So let's get started!

Introduction

It's no secret that XAML is the most powerful tool for creating user interfaces.

But the only thing that it may not be very good for a novice user is the excessive (as it seems at first) complexity, which naturally results in many hours of googling or stacking .

But in fact, as soon as you begin to understand, collecting information bit by bit, what the leading Microsoft developers are thinking about - everything becomes much clearer, and you can no longer understand how you didn’t think of it before, because it’s obvious ...

But from the lyrics it is time to go to practice.

Chop

So, the first thing we need is a new project and a new User Control in it.

1. Run Visual Studio.

2. Create a new empty project called “AdvancedTextBoxProject”.

3. After creating the project, go to Solution Explorer and right-click on the project name, and select Add-> New Item in the context menu ...

4. In the Add New Item dialog box, select User Control, call it “AdvancedTextBox” and click the “Add” button.

Now we have our new component and we can start creating its design.
Now in the XAML-code of our component there is not a single line except the empty declaration of the Grid element, so we will add (in the Grid) what we need - namely, the TextBox, which will contain the default text and the clear button .

<StackPanel> <Grid> <TextBox x:Name="tbMain"></TextBox> <Button x:Name="bClear" HorizontalAlignment="Right" BorderThickness="0" Content="&#xE10A;" FontFamily="Segoe UI Symbol" Foreground="{StaticResource ApplicationPageBackgroundThemeBrush}" Visibility="Collapsed"></Button> </Grid> </StackPanel> 

Let's start in order - the StackPanel component is needed to align the content inside it line by line, otherwise our Grid would stretch over the entire area of ​​the component. Inside it, we create a Grid already directly related to the presentation of our component.

With the TextBox component, we will not do anything, so we throw it onto the stage and call it with any convenient name in order to be able to access it from the code of our component.

But the Button component must be subjected to plastic surgery. We will also give him a convenient name, but besides this we will tell him:
1. So that it is aligned to the right edge of our component (HorizontalAlignment).
2. So that it does not have the component border (BorderThickness) unnecessary for us.
3. That on the button that same cross was drawn (Content and FontFamily).
4. For the cross to be the color of our main Windows theme (Foreground).
5. And, finally, so that at the very beginning of the button of purification it is not visible (Visibility).

Let me remind you that paragraph 3 came out of a combination of this image and the StandardStyles.xaml file (a style file from a Windows Store application).

Well, with the presentation we figured out, now it's time to code.

To begin with, we will organize the proper processing of the Placeholder, and only then the simplest - the button of purification.

Select our TextBox, in the Properties window, select Events and double-click on the GotFocus event.

Since we have not yet written anything useful, we only have a description of our class in the code, its constructor with a call to the single InitializeComponent () method and the GotFocus () event handler that we just created.

Since we do not yet have a field in the component that will be responsible for the Placeholder, it is first necessary to create it:

 private string placeholder=""; public string Placeholder { get { return this.placeholder; } set { this.placeholder = value; tbMain.Text = this.placeholder; } } 

Well, now you can return to the description of the GotFocus () event handler:

 if (tbMain.Text.Trim() == this.placeholder) { tbMain.Text = ""; } bClear.Visibility = System.Windows.Visibility.Visible; 

Here we check the trimmed (Trim ()) line of our TextBox, - isn’t the text contained by default there? If yes, then clear the field and allow the user to enter whatever he wants. Well, at the same time we show him the button to clear the text field.

Next, we need to handle the event when the user switches from the input field somewhere else, to do this, we open the design of our component again, select TextBox and create a LostFocus () event handler, in which everything is the same, but vice versa:

 if (tbMain.Text.Trim() == "") { tbMain.Text = this.placeholder; } bClear.Visibility = System.Windows.Visibility.Collapsed; 

Now we need to handle the Click event of the purge button and we can already test our new component!

To do this, let's move on to the designer, but since the button is hidden from outsiders (and from ours, too), we need to go to the XAML code, click on the declaration of our button, and the button events will appear in the Properties window. Select Click and write in the handler:

 tbMain.Text = string.Empty; tbMain.Focus(); 

In the event handler for clicking the button, we clear our TextBox and return focus to it. This is necessary because when you click on a button, our TextBox's LostFocus event automatically fires, and therefore we need to return the focus back.

We are testing

Well, now it is possible to test everything that we have written with such incredible difficulty.

Go to the designer of the main page of our application and add another Namespace to the XAML-declaration of Page:

 xmlns:local="using:AdvancedTextBoxProject" 

Once done, we can finally add our component to the form:

 <local:AdvancedTextBox Placeholder="Enter Some Text"></local:AdvancedTextBox> 

Our text will immediately appear on the form in the input field and we can launch our application and see how it works.

By the way, in order to be able to change the fields of nested components through our UserControl, you just need to add a public field with the getter and setter we need, for example:

 public string Text { get { return tbMain.Text; } set { tbMain.Text = value; } } 

I wish good luck to all and see you soon!