In this post, we are going to create a very simple program. The program will ask you for your name, and then it will introduce you with the phrase: Hi, my name is _____. Through doing this we will be exposed to some of the basic concepts that we will want to use in any project that we might do in the future. We'll see how to take input from the user. How to respond to various user actions like when they click on a button. Finally, we'll see how to write out information to the screen to let the user know what is going on. These fundamental building blocks will be key elements of any project that we try to do in the future.
Starting With a Button
Let's start off with just a single button and see how that works. To do this, create a page that looks like this:
Now this snippet of code assumes that you called your project MyNameIs when you created it. If you called your project something else, then you'll need to change that part to whatever you called your project. If you don't, you'll get a compiler error like this:
'MainPage' does not contain a definition for 'InitializeComponent' and no extension method 'InitializeComponent' accepting a first argument of type 'MainPage' could be found (are you missing a using directive or an assembly reference?)
These compile errors are really trying to tell you that your MainPage.xaml and MainPage.xaml.cs files don't align. In the .xaml file, the first line:
Specifies the full path to the class. By full path, I mean the namespace that the class is in and the name of the class. You can think of it as the namespace is the folder and the class name is the file name. Same kind of idea. So, that's how it is specified in the MainPage.xaml file, and then if we look in the MainPage.xaml.cs file, we see something like this:
Here you can see the namespace is more clearly called out (MyNameIs). Then, within the namespace's curly braces, you can see the name of the class called out (MainPage). So, to get rid of the error, you need to make those two match.
Going back to the XAML, we can see that we have set two attributes on the button. The first is the content. This is going to be the text that is displayed within the button. Now, the content doesn't have to be text. You can set it to a picture or many other things, but for now, text is all that we need. The second is the click attribute. This is the name of the method that is going to be called when the user clicks the button.
So, let's go ahead and add that method into the MainPage.xaml.cs file:
After you add the method, click on the location where the red dot is in the image below:
When you click there, it should add a red dot on the screen. This is a breakpoint. This means that when the program hits this location, it will stop and give you a chance to debug and see what is going on. This is an extremely handy debugging tool that will save you lots of time in the future. So, go ahead and run the program and click the button. When you do this, Visual Studio should come to the foreground and you will see a small yellow arrow within the red circle. This tells you that when you clicked the button, the Submit method was called and that the program is now stopped there waiting for you to debug:
At this point, we really don't have anything to debug. All we were interested in knowing was that when we clicked the button, the Submit method was called. Since we hit our breakpoint, we know that happened. Now, we can either hit the green triangle that looks like a play button to continue execution of the program, or hit the red square that looks like a stop button to kill the program.
One of the most beneficial skills that you can learn is how to effectively debug programs. Fortunately, Visual Studio has a lot of powerful tools to help you debug programs better. Breakpoints are one of the key techniques for figuring out what is really going on.
User Input
Now that we know, the button is working properly, let's add some more stuff around the button:
Now, if we look in the middle of the code, we can still see the same button that we had as before. If we go one level up in the XAML, we see a StackPanel with an orientation of Horizontal. A StackPanel is a way to layout information in the UI. You can think of a StackPanel as a stack of magazines sitting on the floor. However, if the orientation is set to Horizontal, then the stack of magazines in on their side, like they are sitting on a bookshelf. Since this StackPanel is Horizontal, that means that we will have a TextBlock on the left, followed by a TextBox in the center, and a Button on the right.
TextBlocks are a way to display text to the user. You can think of them as a way to output text to the user. So, in this TextBlock, we display the phrase “Name:” to the user. Then next to this TextBlock, we have a TextBox. TextBoxes are used to get input from the user. So, TextBlock = output, TextBox = input. This will look like your standard text entry field. Then on the right of that we have a Submit button.
That Horizontal StackPanel is embedded within another StackPanel. This is a standard StackPanel where things are stacked on top of one another. So this means that the “Name:” TextBlock, the entry TextBox, and the Submit Button will all be on top of the TextBox that has a Name of OutputText. Don't worry if the description sounds a little complicated at first. Once you see the UI in action it might click better. If not, there are many posts dedicated to explaining the StackPanel, like this one:
http://www.wpf-tutorial.com/panels/stackpanel/
The last TextBlock was different than the first one. In the first one, we set the text to a given value “Name:”, however in the second one, we gave the TextBlock a name of OutputText. This is because the first TextBlock will always display the text “Name:”. That's all we ever want it to do. It will never change. It's goal is just to describe what the user should be typing into the text field. However, we want to programmatically update the second TextBlock to introduce the person whose name was typed in.
Finally, let's add some logic to the Submit method:
Here we simply set the Text property on the OutputText TextBlock to be a phrase that we create. The phrase that we create is “Hi, my name is _____” where we fill in the blank with the Text that they user typed into the MyName TextBox.
You can also remove the breakpoint by clicking on the red circle. We no longer need it, since we know that the Submit method is being called when we click the button.
Now when you run the program and type in a name and hit submit, you should see something like this:
Conclusion
It might not be the prettiest program in the world, but it sure was effective. We were able to get input from the user and then display it back. We were able to place a button in the UI that kicked off this process, and got a feel for how to react to user interactions. Additionally, we learned a little bit about setting a breakpoint and doing some debugging.
GitHub
The full source code for this tutorial is also on GitHub: