A very special thanks to all my readers who make it so special for me and makes it such a great experience to come back with more stuffs every day. On that emotional note, let me just recap what we did last time. We learned how to use the TextBox in to display some output on our emulator. This might be very impressive at this stage, but once you think about it, the way we have to supply for every other input we want into the code itself is really tiring and time-consuming. To top that all up, it will not be even viable for some applications we are going to build.

Suggested Reading :

• Beginner’s Guide to Windows Phone 7 App development
• Create Hello World Application in Windows Phone 7
• Different properties of Windows Phone 7 emulator
• Coding the Hello World Application in Windows  Phone 7
• How files interact in Windows Phone 7 App development
• Declaring Variables in Windows Phone Application Development

So let us consider another development into our app, in which we will get the input from the user and actually get to display it. Let’s get started.
Will be focusing on the use of visuals.

Where the hell is my cupboard?!

1. You must have obviously come across situations when you needed to give or assign a data into a machine when it comes to your mind. Like for example if you have used a calculator, the first step that you do is supply the calculator with some values which it will store in its memory. Then you would specify the operation you want to perform on the number and so on. Well this sounds so easy mainly because we can assign values to the calculator when we want. Try imagining a situation where in order to assign a value you would have to look into the coding of the calculator and decide which line is going to hold your value and blah blah…That is the end of the calculator.

2. To make things simpler, we are going to ask the user to give his/her choice of input and we will store it into a variable. Then we are going to display it as an output for the user to see. Let’s quickly come down to the design part. The first thing I am going to import from the ToolBox by dragging is the ‘TextBox’. Do remember that to get the input from the user, or to make the user to type in an input using the screen, we will use the TextBox. I have already imported my TextBox in my app-

Similar to the other apps we have built before; import the TextBlock and the Button from the toolbox. Now the app design should look something like this-

This will suffice our module for now. Again change the Properties of each of the items we imported like we did earlier. I will just do the change for the TextBox as this is new, the rest I hope you still remember from my previous blogs on how to change their properties.

3. Now let’s get down to our coding part. Double click the button and we are directed to the .xaml.cs page-

Notice that I have used the TextBox to get the input from the user. This is accomplished by the step 1 which will get an input from the user and store it in the variable ‘entername’. Now using the textBlock, we will be displaying this input to the user. This is accomplished by the step 2. In that statement you will have noticed that I have used the ‘plus’ symbol or the ‘+’ symbol in the code. This is called the concatenation operator. So what it will do is actually merge together the quoted text I have typed and the value of the variable I have asked the computer to store.

4. Let us try to run the code-

As you may have noticed, when I give the input as a stream of characters, it gets stored and is displayed on our emulator as output. Mission accomplished!

5. How about we improve on this technique of getting input. How about we improve the code and simultaneously make the input of the user to be displayed on the TextBlock as he/ she types. That would be really cool. Let’s try to do that. Now for the time being I am not going to need the button and hence will just bring it down to the bottom of the work surface.
Click the TextBox that we imported and go to the ‘Properties’ window of it. Click the ‘Events’ tab and scroll down to the ‘TextChanged’ option.

Double click this ‘TextChanged’ option and you will be directed to the .xaml.cs coding page. Write down the code as follows-

You would have noticed that I have compressed the whole two line code into a single line of code. This actually has not used any variable which might save a tiny bit of memory for us! Now again the value of the input we type on the textbox we created is being assigned to the textBlock we created, explicitly. This will work the same way. Also notice that I have commented out the code of the button as we are not going to use it in this process.

6. Let us now try to run the code-

Well, the purpose of using two visuals together is to show you that my app is actually working!

7. Now that we can even dynamically get the input from the user, why not improve on some other things too. Do think of yourself as the user using your app. Now when we first see the screen, as a user, we don’t have any idea what we have to do at the moment. We can deal with this problem by making the ‘on-screen’ keyboard to pop-up whenever the user taps anywhere on the screen.
To ensure that we can deliver that activity, we have to do a couple of new things-
Go to the .xaml design page and scroll down to the bottom of the designing window. You will see a tiny little button which will open up the ‘Document Outline’ window when clicked.

Click it open.

At the top of the new window which opened, click the ‘PhoneApplicationPage’ (highlighted) and go to the ‘Properties’ of that page. Expand the ‘Events’ tab and scroll down to the ‘Loaded’ option. When you find this option, double click it.

This will direct you back to the coding page. Write down the code as follows-

Do take into account that we have to use the textBox as we are going to enter the input into the textBox. This will enable the app to start with an on-screen keyboard whenever the app starts.

8. Now let’s bring back the button we created into the picture again. But only this time, we are going to use it to make the app tidier. Let’s try to wipe out the input given by the user once he/she completes her input keystrokes. Hence we will name the button as ‘Clear’ (we don’t want the button to say add and actually clear the inputs as this would be misleading!) and on double clicking it, we code in the statements as-

Hence in order to clear out the inputs we have used the empty parameters using double quotations. This will clear out any input which has been entered by the user. Again I have used the Focus keyword to make sure that the on-screen keyboard is still displayed after the clear operation.
Before Clear operation-

After we click the Clear button-

Do note that the on-screen keyboard is still there.
So, we have learned an awful lot today, which I hope will have you guys excited. Trust me, this is not even the starting of it! We are going to do even more interesting stuffs in the future modules to come! Keep in touch and do post in any comments or enquiries. Till then, always clear off your mess!!