Chapter 2. Dive Into C#: Statements, Classes, and Code

You’re not just an IDE user. You’re a developer.

You can get a lot of work done using the IDE, but there’s only so far it can take you. Visual Studio is one of the most advanced software development tools ever made, but a powerful IDE is only the beginning. It’s time to dig in to C# code: how it’s structured, how it works, and how you can take control of it... because there’s no limit to what you can get your apps to do.

(And for the record, you can be a real developer no matter what kind of keyboard you prefer. The only thing need to do is write code!)

Let’s take a closer look at the files for a console app

In the last chapter, you created a new .NET Core Console App and named it MyFirstConsoleApp. When you did that, Visual Studio created a project with two folders and three files.

Let’s take a closer look at the Program.cs file that it created. Open it up in Visual Studio:

• At the top of the file is a using directive. You’ll see using lines like this in all of your C# code files.

• Right after the using directives comes the namespace keyword. Your code is in a namespace called MyFirstConsoleApp. Right after it is an opening curly bracket {, and at the end of the file is the closing bracket }. Everything between those brackets is in the namespace.

• Inside the namespace is a class. Your program has one class called Program. Right after the class declaration is an opening curly bracket, with its pair in the second-to-last line of the file.

• Inside your class is a method called Main—again, followed by a pair of brackets with its contents.

• Your method has one statement: Console.WriteLine("Hello World!");

Anatomy of a C# program

Every C# program’s code is structured in exactly the same way. All programs use namespaces, classes, and methods to make your code easier to manage.

A statement performs one single action

Every method is made up of statements like your Console.WriteLine statement. When your program calls a method, it executes the first statement, then the next, then the next, etc. When the method runs out of statements—or hits a return statement— it ends, and the program execution resumes after the statement that originally called the method.

there are no Dumb Questions

Q: I understand what Program.cs does—that’s where the code for my program lives. But does my program need the other two files and folders?

A: When you created a new project in Visual Studio, it created a solution for you. A solution is just a container for your project. The solution file ends in .sln, and contains a list of the projects that are in the solution, with small amount of additional information (like the version of Visual Studio used to create it). The project lives in a folder inside the solution folder. It gets a separate folder because some solutions can contain multiple projects—but yours only contains one, and it happens to have the same name as the solution (MyFirstConsoleApp). The project folder for your app contains two files: a file called Program.cs that contains the code, and a project file called MyFirstConsoleApp.csproj that has all of the information Visual Studio needs to build the code, or turn it into a something your computer can run. And, by the way, you’ll eventually see two more folders underneath your project folder: the bin/ folder will have the executable files built from your C# code, and the obj folder will have the temporary files used to build it.

Two classes can be in the same namespace (and file!)

Take a look at these two C# code files from a program called PetFiler2. They contain three classes: a Dog class, a Cat class, and a Fish class. Since they’re all in the same PetFiler2 namespace, statements in the Dog.Bark method can call Cat.Meow and Fish.Swim without adding a using directive.

A class can span multiple files too, but you need to use the partial keyword when you declare it. It doesn’t matter how the various namespaces and classes are divided up between files. They still act the same when they’re run.

The IDE helps you build your code right.

A long, long, LONG time ago, programmers had to use simple text editors like Notepad to edit their code. (In fact, they would have been envious of some of the features of Notepad, like search and replace or ^G for “go to line number.”) We had to use a lot of complex command-line applications to build, run, debug, and deploy our code.

Over the years, Microsoft (and, let’s be fair, a lot of other companies, and a lot of individual developers) figured out many helpful things like error highlighting, IntelliSense, WYSIWYG click-and-drag window UI editing, automatic code generation, and many other features.

After years of evolution, Visual Studio is now one of the most advanced code-editing tools ever built. And lucky for you, it’s also a great tool for learning and exploring C# and app development.

there are no Dumb Questions

Q: I’ve seen the phrase “Hello World” before. Does it mean something special?

A: A “Hello World!” program is a program that does one thing: it outputs the phrase “Hello World!” In most programming languages this is simple to do. It shows that you can actually get something working, so it’s often the first program you write in a new language.

Q: That’s a lot of curly brackets—it’s hard to keep track of them all. Do I really need so many of them?

A: C# uses curly brackets (some people say “braces” or “curly braces,” and we may use “braces” instead of “brackets” sometimes, too) to group statements together into blocks. Brackets always come in pairs. You’ll only see a closing curly bracket after you see an opening one. The IDE helps you match up curly brackets—click on one, and you’ll see it and its match change color. You can also use the button on the left of the editor to collapse and expand them.

Q: So what exactly is a namespace, and why do I need it?

A: Namespaces help keep all of the tools that your programs use organized. When your app printed a line of output, it used a class called Console that’s part of .NET Core. That’s an open-source, cross-platform framework that a lot of classes that you can use to build your apps. And we mean a LOT—literally thousands and thousands of classes—so .NET uses namespaces to keep them organized. The Console class is in a namespace called System, so your code needs using System; at the top to use it.

Q: I don’t quite get what the entry point is. Can you explain it one more time?

A: Your program has a whole lot of statements in it, but they can’t all run at the same time. The program starts with the first statement in the program, executes it, and then goes on to the next one, and the next one, etc. Those statements are usually organized into a bunch of classes.

So when you run your program, how does it know which statement to start with? That’s where the entry point comes in. Your code won’t build unless there is exactly one method called Main. It’s called the entry point because the program starts running—can we say that it enters the code—with the first statement in the Main method

Q: So my console app really runs on Linux and MacOS?

A: Yes! .NET Core is the cross-platform implementation of .NET (including classes like List and Random), so you can run your app on your Mac or Linux box.

If you have a computer running Mac or Linux, you can try this out right now. First, you’ll need to install .NET Core on it, which you can download here: https://dotnet.microsoft.com/download

Once it’s installed, find your project folder by clicking on MyFirstConsoleApp in the Solution Explorer. Open the project folder, go to the subdirectory under bin/Debug/, and copy all of the files to your Mac or Linux computer. Then you can run it—and this will work on any Windows, Mac, or Linux box with .NET Core installed:

Q: I can usually run programs in Windows by double-clicking on them, but I can’t double-click on that .dll file. Can I create an executable that I can run in Windows?

A: Yes. You can use dotnet.exe to publish binaries for different platforms. Open a Command Prompt, go to the folder with either your .sln or .csproj file and run this command (this will work on any operating system with dotnet installed, not just Windows):

dotnet publish -c Release -r win10-x64

The last line of the output should be MyFirstConsoleApp -> followed by a folder. That folder will contain MyFirstConsoleApp.exe (and a bunch of DLL files that it needs to run). You can also build executable programs for other platforms. Replace win10-x64 with osx-x64 to publish a MacOS app, or linux-x64 to publish a Linux app. Those are called runtime identifiers (or RIDs), and there’s a list of RIDs here: https://docs.microsoft.com/en-us/dotnet/core/rid-catalog

Statements are the building blocks for your apps

Your app is made up of classes, and those classes contain methods, and those methods contain statements. So if we want to build apps that do a lot of things, we’ll need a few different kinds of statements to make them work. You’ve already seen one kind of statement:

Console.WriteLine("Hello World!");

This is a statement that calls a method—specifically, the Console.WriteLine method, which prints a line of text to the console. We’ll also use a few other kinds of statements. Here are four other kinds of statements that we’ll use many times in this chapter and throughout the book.

We use variables and variable declarations to let our app store and work with data.

Lots of programs use math, so we use mathematical operators to add, subtract, multiply, divide, and more.

Conditionals let our code choose between options, either executing one block of code or another.

Loops let our code run the same block over and over again until a condition is satisfied.

Your programs use variables to work with data

Every program, no matter how big or how small, works with data. Sometimes the data is in the form of a document, or an image in a video game, or a social media update. But it’s all just data. And that’s where variables come in. A variable is what your program uses to store data.

Declare your variables

Whenever you declare a variable, you tell your program its type and its name. Once C# knows your variable’s type, it will generate errors that stop your program from building if you try to do something that doesn’t make sense, like subtract Fido from 48353. Here’s how to declare variables:

Whenever your program needs to work with numbers, text, true/false values, or any other kind of data, you’ll use variables to keep track of them.

Variables vary

A variable is equal to different values at different times while your program runs. In other words, a variable’s value varies. (Which is why “variable” is such a good name.) This is really important, because that idea is at the core of every program you’ll write. Say your program sets the variable myHeight equal to 63:

int myHeight = 63;

any time myHeight appears in the code, C# will replace it with its value, 63. Then, later on, if you change its value to 12:

 myHeight = 12;

C# will replace myHeight with 12 from that point onwards (until it gets set again)—but the variable is still called myHeight.

You need to assign values to variables before you use them

Try typing these statements into just below the “Hello World” statement in your new console app:

string z;
string message = "The answer is " + z;

Go ahead, try it right now. You’ll get an error, and the IDE will refuse to build your code. That’s because it checks each variable to make sure that you’ve assigned it a value before you use it. The easiest way to make sure you don’t forget to assign your variables values is to combine the statement that declares a variable with a statement that assigns its value:

If you write code that uses a variable that hasn’t been assigned a value, your code won’t build. It’s easy to avoid that error by combining your variable declaration and assignment into a single statement.

Note

Once you’ve assigned a value to your variable, that value can change. So there’s no disadvantage to assigning a variable an initial value when you declare it

A few useful types

Every variable has a type that tells C# what kind of data it can hold. We’ll go into a lot of detail about the many different types in C# in Chapter 4. In the meantime, we’ll concentrate on the three most popular types. int holds integers (or whole numbers), string holds text, and bool holds Boolean true/false values.

Generate a new method to work with variables

In the last chapter, you learned that Visual Studio will generate code for you. This is quite useful when you’re writing code, but just it’s also a really valuable learning tool. Let’s build on what you learned and take a closer look at generating methods.

Do this!

1. Add a method to your new MyFirstConstoleApp project.

   Open the Console App project that you created in the last chapter. The IDE created your app with a Main method that has exactly one statement:

   Console.WriteLine("Hello World!");

   Replace this with a statement that calls a method:

   OperatorExamples();

2. Let Visual Studio tell you what’s wrong.

   As soon as you finish replacing the statement, Visual Studio will draw a red squiggly underline beneath your method call. Hover your mouse cursor over it. The IDE will display a pop-up window:

   

   Visual Studio is telling you two things: that there’s a problem—you’re trying to call a method that doesn’t exist (which will prevent your code from building), and that it has a potential fix.

3. Generate the OperatorExamples method.

   The last line of the pop-up window tells you to press Alt+Enter or Ctrl+. to see the potential fixes. So go ahead and press either of those key combinations (or click on the dropdown to the left of the pop-up).

The IDE has a solution: it will generate a method called OperatorExamples in your Program class. Click Preview changes to display a window that has the IDE’s potential fix—adding a new method. Then click Apply to add the method to your code.

Add code that uses operators to your method

Once you’ve got some data stored in a variable, what can you do with it? Well, if it’s a number, you might want to add or multiply it. If it’s a string, you might join it together with other strings. And that’s where operators come in. Here’s the method body for your new OperatorExamples method. Add this code to your program, and read the comments to learn about the operators it uses.

MINI sharpen your pencil

The statements you just added to your code will write three lines to the console: each Console.WriteLine statement prints a separate line. Before you run your code, figure out what they’ll be and write them down. And don’t bother looking for a solution, because we didn’t include one! Just run the code to check your answers.

Here’s a hint: converting a bool to a string results in either False or True.

Line 1: _______________________________________________

Line 2: _______________________________________________

Line 3: _______________________________________________

Use the debugger to watch your variables change

When you ran your program earlier, it was executing in the debugger—and that’s an incredibly useful tool for understanding how your programs work. You can use breakpoints to pause your program when it hits certain statements and add watches to look at the value of your variables. Let’s use the debugger to see your code in action. We’ll use these three features of the debugger, which you’ll find in the toolbar:

If you end up in a state you don’t expect, just use the Restart button to restart the debugger.

Debulg this!

1. Add a breakpoint and run your program.

   Place your mouse cursor on the method call that you added to your program’s Main method and choose Toggle Breakpoint (F9) from the Debug menu. The line should now look like this:

   

   Then press the button to run your program in the debugger, just like you did earlier.

2. Step into the method.

   Your debugger is stopped at the breakpoint on the statement that calls the OperatorExamples method.

   

   PressStep Into (F11) – the debugger will jump into the method, then stop before it runs the first statement.

3. Examine the value of the width variable.

   When you’re stepping through your code, the debugger pauses after each statement that it executes. This gives you the opportunity to examine the values of your variables. Hover over the width variable.

   

   The IDE displays a pop-up that shows the current value of the variable—it’s currently 0. Now press Step Over (F10)—the execution jumps over the comment to the first statement, which is now highlighted. We want to execute it, so press Step Over (F10) again. Hover over width again. It now has a value of 3.

4. The locals window shows values of your variables.

   The variables that you declared are local to your OperatorExamples method—which just means that they exist only inside that method, and can only be used by statements in the method. Visual Studio displays their values in the Locals window at the bottom of the IDE when it’s debugging.

   

5. Add a watch for the height variable.

   A really useful feature of the debugger is the watch window, which is typically in the same panel as the Locals window at the bottom of the IDE. When you hover over a variable, you can add a watch by right-clicking on the variable name in the pop-up window and choosing Add Watch. Hover over the height variable, then right-click and choose Add Watch from the menu.

   

   Now you can see the height variable in the Watch window.

   

   The debugger is one of the most important features in Visual Studio, and it’s a great tool for understanding how your programs work.

6. Step through the rest of the method.

   Step over each statement in OperatorExamples. As you step through the method, keep an eye on the Locals or Watch window and watch the values as they change. Press Alt-Tab before and after the Console.WriteLine statements to switch back and forth to the Debug Console to see the output.

Use operators to work with variables

Once you have data in a variable, what do you do with it? Well, most of the time you’ll want your code to do something based on the value. And that’s where equality operators, relational operators, and logical operators become important.

Equality Operators

The == operator compares two things and is true if they’re equal.

The != operator works a lot like ==, except it’s true if the two things you’re comparing are not equal.

Relational Operators

Use > and < to compare numbers and see if a number in one variable one is bigger or smaller than another.

You can also use >= to check if one value greater than or equal to another, and <= to check if it’s less than or equal.

Logical Operators

You can combine individual conditional tests into one long test using the && operator for and and the || operator for or.

Here’s how you’d check if i equals 3 or j is less than 5: (i == 3) || (j < 5)

Watch it! Don’t confuse the two equals sign operators!

You use one equals sign (=) to set a variable’s value, but two equals signs (==) to compare two variables. You won’t believe how many bugs in programs—even ones made by experienced programmers!—are caused by using = instead of ==. If you see the IDE complain that you “cannot implicitly convert type ‘int’ to ‘bool’, that’s probably what happened.

Use operators to compare two int variables

You can do simple tests by checking the value of a variable using a comparison operator. Here’s how you compare two ints, x and y:

 x < y (less than)
 x > y (greater than)
 x == y (equals - and yes, with two equals signs)

These are the ones you’ll use most often.

if statements make decisions

Use if statements to tell your program to do certain things only when the conditions you set up are (or aren’t) true. The if statement tests the condition and executes code if the test passed. A lot of if statements check if two things are equal. That’s when you use the == operator. That’s different from the single equals sign (=) operator, which you use to set a value.

if/else statements also do something if a condition isn’t true

if/else statements are just what they sound like: if a condition is true it does one thing or else it does the other. An if/else statement is an if statement followed by the else keyword followed by a second set of statements to execute. If the test is true, the program executes the statements between the first set of brackets. Otherwise, it executes the statements between the second set.

Loops perform an action over and over

Here’s a peculiar thing about most programs (especially games!): they almost always involve doing certain things over and over again. And that’s what loops are for—they tell your program to keep executing a certain set of statements as long as some condition is true or false.

while loops keep looping statements while a condition is true

In a while loop, all of the statements inside the curly brackets get executed as long as the condition in the parentheses is true.

while (x > 5)
{
  // Statements between these brackets will
  // only run if x is greater than 5, then
  // will keep looping as long as x > 5
}

do/while loops run the statements then check the condition

A do/while loop is just like a while loop, with one difference. The while loop does its test first, then runs its statements only if that test is true. The do/while loop runs the statements first, then runs the test. So if you need to make sure your loop always runs at least once, a do/while loop is a good choice.

do
{
  // Statements between these brackets will run
  // once, then keep looping as long as x > 5
} while (x > 5);

for loops run a statement after each loop

A for loop runs a statement after each time it executes a loop.

Note

The parts of the for statement are called the initializer (int i = 0), the conditional test (i < 8), and the iterator (i = i + 2). Each time through a for loop (or any loop) is called an iteration. The conditional test always runs at the beginning of each iteration, and the iterator always runs at the end of the iteration.

For Loops Up Close

A for loop is a little more complex—and more versatile—than a simple while loop or do loop. The most common type of for loop just counts up to a length. The for code snippet causes the IDE to create an example of that kind of for loop:

A for loop has three sections: an initializer, a condition, an iterator, and a body:

for (initializer; condition; iterator)
    body

Most of the time you’ll use the initializer to declare a new variable—for example, the initializer int i = 0 in the for code snippet declares a variable called i that can only be used inside the for loop. The loop will then execute the body—which can either be one statement or a block of statements inside curly braces—as long as the condition is true. At the end of each iteration the for loop executes the iterator. So this loop:

for (int i = 0; i < 10; i++)
    Console.WriteLine("Iteration #" + i);

will iterate ten times, printing Iteration #0, Iteration #1, ..., Iteration #9 to the console.

Sharpen your pencil

Here are a few loops. Write down if each loop will repeat forever or eventually end. If it’s going to end, how many times will it loop? Also, answer the questions in the comments in loops #2 and #3.

Sharpen your pencil Solution

Note

When we give you pencil-and-paper exercises, we’ll usually give you the solution on the next page.

Here are a few loops. Write down if each loop will repeat forever or eventually end. If it’s going to end, how many times will it loop? Also, answer the questions in the comments in loops #2 and #3.

Note

Take the time to really figure out how loop #3 works. Here’s a perfect opportunity to try out the debugger on your own! Set a breakpoint on q = p - q; and use the Locals window to watch how the values of p and q change as you step through the loop.

Use code snippets help to write loops

Do this!

You’ll be writing a lot of loops throughout this book, and Visual Studio can help speed things up for you with snippets, or simple templates that you can use to add code. Let’s use snippets to add a few loops to your OperatorExamples method.

If your code is still running, choose Stop Debugging (Shift+F5) from the Debug menu (or press the square stop button in the toolbar). Then find this line in your OperatorExamples method: Console.WriteLine(area); – click at the end of that line so your cursor is after the semicolon, then press enter a few times to add some extra space. Now start your snippet. Type while and press the Tab key twice. The IDE will add a template for a while loop to your code, with the conditional test highlighted:

while (true)
{

}

IDE Tip: Brackets

If your brackets (or braces—either name will do) don’t match up, your program won’t build, which leads to frustrating bugs. Luckily, the IDE can help with this! Put your cursor on a bracket, and the IDE highlights its match.

Type area < 50 – the IDE will replace true with the text. Press Enter to finish the snippet. Then add three statements between the brackets:

while (area < 50)
{
    height++;
    area = width * height;
}

Next, use the do/while loop snippet to add another loop immediately after the while loop you just added. Type do and press Tab twice. The IDE will add this snippet:

do
{

} while (true);

Type area > 25 and press Enter to finish the snipped. Then add two statements between the brackets:

do
{
    width--;
    area = width * height;
} while (area > 25);

Now use the debugger to really get a good sense of how these loops work.

1. Click on the line just above the first loop and choose Toggle Breakpoint (F9) from the Debug menu to add a breakpoint. Then run your code and press F5 to skip to the new breakpoint.

2. Use Step Over (F10) to step through the two loops. Watch the Locals window as the values for height, width, and area change.

3. Stop the program, then change the while loop test to area < 20 so both loops have conditions that are false. Debug the program again. The while checks the condition and skips the loop, but the do/while executes it once and then checks the condition.

Sharpen your pencil

Let’s get some practice working with conditionals and loops. Update the Main method in your console app so it matches the new Man method below, then add the TryAnIf, TryAnIfElse, and TrySomeLoops methods. Before you run your code, try to answer the questions. Then run your code and see if you got them right.

Some useful things to keep in mind about C# code

• Don’t forget that all your statements need to end in a semicolon.

  name = "Joe";

• Add comments to your code by starting a line with two slashes.

  // this text is ignored

• Use /* and */ to start and end comments that can include line breaks.

  /* this comment
   * spans multiple lines */

• Variables are always declared with a name and a type.

  int weight;
  // the name is weight and the type is int

• Most of the time, extra whitespace is fine.

  So this:          int          j =             1234        ;
  Is exactly the same as this: int j = 1234;

• If/else, while, do, and for are all about testing conditions.

  Every loop we’ve seen so far keeps running as long as a condition is true.

Then your loop runs forever.

Every time your program runs a conditional test, the result is either true or false. If it’s true, then your program goes through the loop one more time. Every loop should have code that, if it’s run enough times, should cause the conditional test to eventually return false. But if it doesn’t, then the loop will keep running until you kill the program or turn the computer off!

Note

This is sometimes called an infinite loop, and there are definitely times when you’ll want to use one in your code.

BRAIN POWER

Can you think of a reason that you’d want to write a loop that never stops running?

Game design... and beyond Mechanics

The mechanics of a game are the components of the game that make up the actual gameplay: its rules, the actions that the player can take, and the way the game behaves in response to them.

• Let’s start with a classic video game. The mechanics of Pac Man include how the joystick controls the player on the screen, the number of points for dots and power pellets, how ghosts move, how long they turn blue and how their behavior changes after the player eats a power pellet, when the player gets extra lives, the ghosts slowing down they go through the tunnel—all of the rules that drive the game.

• When game designers talk about a mechanic (in the singular), they’re often referring to a single mode of interaction or control, like a double jump in a platformer or shields that can only take a certain number of hits in a shooter. It’s often useful to isolate a single mechanic for testing and improvement.

• Tabletop games give us a really good way to understand the concept of mechanics. Random number generators like dice, spinners, and cards are great examples of specific mechanics.

• You’ve already seen a great example of a mechanic: the timer that you added to your animal match changed the entire experience. Timers, obstacles, enemies, maps, races, points... these are all mechanics.

• Different mechanics combine in different ways, and that can have a big impact on how the players experience the game. Monopoly is a great example of a game that combines two different random number generators—dice and cards—to make a more interesting and subtle game.

• Game mechanics also include the way the data is structured and the design of the code that handles that data—even if the mechanic is unintentional! Pac Man’s legendary level 256 glitch, where a bug in the code fills half of the screen with garbage makes the game unplayable, is part of the mechanics of the game.

• So when we talk about mechanics of a C# game, that includes the classes and the code, because they drive the way that the game works.

Definitely! Every program has its own kind of mechanics.

There are mechanics on every level of software design. They’re easier to talk about and understand in the context of video games. We’ll take advantage of that to help give you a deeper understanding of mechanics, which is valuable for designing and building any kind of project.

Here’s an example. The mechanics of a game determine how hard or easy it is to play. Make Pac Man faster or the ghosts slower and the game gets easier. That doesn’t necessarily make it better or worse—just different. And guess what? The same exact idea applies to how you design your classes! You can think of how you design your methods and fields as the mechanics of the class. The choices you make about how to break up your code into methods or when to use fields make them easier or more difficult to use.

Controls drive the mechanics of your user interfaces

In the last chapter, you built a game using TextBlock and Grid controls. But there are a lot of different ways that you can use controls, and the choices you make about what controls to use can really change your app. Does that sound weird? It’s actually really similar to the way we make choices in game design. If you’re designing a tabletop game that needs a random number generator, you can choose to use dice, a spinner, or cards. If you’re designing a platformer, you can choose to have your player jump, double jump, wall jump, or fly (or do different things at different times). And the same goes for apps: if you’re designing an app where the user needs to enter a number, you have choices, and you can choose from different controls—and that choice how your user experiences the app.

Create a WPF app to experiment with controls

If you’ve filled out a form on a web page, you’ve seen the controls we just showed you (even if you didn’t know all of their official names). Now let’s create a WPF app to some practice using those controls. The app will be really simple—the only thing it will do is let the user pick a number, and display the number that was picked.

Relax

Don’t worry about committing the XAML for controls to memory.

This Do this! and these exercises are all about getting some practice using XAML to build a UI with controls. You can always refer back to it when we use these controls in projects later in the book.

Exercise

In Chapter 1 you added row and column definitions to the Grid in your WPF app—specifically, you created a grid with five equal-sized rows and four equal-sized columns. You’ll do the same for this app. In this exercise, you’ll use what you learned about XAML in Chapter 1 to start your WPF app.

Create a new WPF project

Start up Visual Studio 2019 and create a new WPF project, just like you did in with your animal matching game in Chapter 1. Choose Create a new project and select WPF App (.NET Core).

Name your project ExperimentWithControls.

Set the window title

Modify the Title property of the <Window> tag to set the title of the window to Experiment With Controls.

Add the rows and columns

Add three rows of equal height, and three columns of equal width. You can use the XAML designer to do it just like you did in Chapter 1, or you can type in the XAML by hand.

This is what your window should look like in the designer:

Exercise Solution

Here’s the XAML for your main window. We used a lighter color for the XAML code that Visual Studio created for you and you didn’t have to change. You had to change the Title property in the <Window> tag, then add the <Grid.RowDefinitions> and <Grid.ColumnsDefinitions> sections.

“Save early, save often.”

That’s an old saying from a time before video games had an autosave feature, and when you had to stick one of these in your computer to back up your projects... but it’s still great advice! Visual Studio makes it easy to add your project to source control and keep it up to date—so you’ll always be able to go back and see all the progress you’ve made.

Add a TextBox control to your app

A TextBox control gives your user a box to type text into, so let’s add one to your app. But we don’t just want a TextBox sitting there without a label, so we’ll use a Label control (which is a lot like a TextBlock, except it’s specifically used to add labels to other controls).

1. Drag a Label out of the Toolbox into the top left cell of the grid

   This is exactly how you added TextBlock controls onto your animal match game in Chapter 1, except this time you’re doing it with a Label control. It doesn’t matter where in the cell you drag it, as long as it’s in the upper left cell.

2. Set the text size and content of the Label.

   While the Label control is selected, go to the Properties, expand the Text section, and set the font size to 18px. Then expand the Common section and set the Content to the text Enter a number.

   

3. Drag the Label to the upper left corner of the cell.

   Click on the Label in the designer and drag it to the upper left corner. When it’s 10 pixels away from the left or top cell wall, you’ll see gray bars appear and it will snap to a 10px margin.

   The XAML for your window should now contain Label control:

   <Label Content="Enter a number" FontSize="18"
          Margin="10,10,0,0" HorizontalAlignment="Left"
          VerticalAlignment="Top"/>

   

   Mini Exercise

   In Chapter 1 you added TextBlock controls to many cells in your grid and put a ? inside each of them. You also gave a name to the Grid control and one of the TextBlock controls. For this project, add one TextBlock control, give it the name number, set the text to # and font size to 24px, make centered in the upper right cell of the grid.

   

   Mini Exercise Solution

   Here’s the XAML for the TextBlock that goes in the upper right cell of the grid. You can use the visual designer or type in the XAML by hand. Just make sure your TextBlock has exactly the same properties as this solution—but like earlier, it’s okay if your properties are in a different order.

   <TextBlock x:Name="number" Grid.Column="1" Text="#" FontSize="24"
            HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap"/>

4. Drag a TextBox into the top left cell of the grid.

   Your app will have a TextBox positioned just underneath the Label so the user can type in numbers. Drag it so it’s on the left side and just under the TextBox—the same gray bars will appear to position it just under the Label with a 10px left margin. Then set its name to numberTextBox, font size to 18px, and text to 0.

   

   

Add C# code to update the TextBlock

In Chapter 1 you added event handlers—methods that are called when a certain event is raised (sometimes we say the event is triggered or fired)—to handle mouse clicks in your animal match game. Now we’ll add an event handler to the code-behind that’s called any time the user enters text into the TextBox and copies that text to the TextBlock from the mini-exercise that you added to the upper right cell.

Note

When you double-click on a TextBox control, the IDE adds an event handler for the TextChanged event that’s called any time the user changes its text. Double-clicking on other types of controls add other event handlers—and some (like TextBlock) don’t add any event handlers at all.

5. Double-click on the TextBox control to add the method.

   As soon as you double-click on the TextBox, the IDE will automatically add a C# event handler method hooked up to its TextChanged event. It generates an empty method and gives it a name that consists of the name of the control (numberTextBox) followed by an underscore and the name of the event being handled: numberTextBox_TextChanged.

   private void numberTextBox_TextChanged(object sender, TextChangedEventArgs e)
   {
   
   }

6. Add code to the new TextChanged event handler.

   Any time the user enters text into the TextBox, we want the app to copy it into the TextBlock that you added to the upper right cell of the grid. Since you gave the TextBlock a name (number) and you also gave the TextBox a name (numberTextBox), you just need one line of code to copy its contents:

   

7. Run your app and try out the TextBox.

   Use the Start Debugging button (or choose Start Debugging (F5) from the Debug menu) to start your app, just like you did with the animal match game in Chapter 1. (If the runtime tools appear, you can disable them just like you did in Chapter 1.) Type any number into the TextBox and it will get copied.

   

   But something’s wrong—you can enter any text into the TextBox, not just numbers!

   

Add an event handler that only allows number input

When you added the MouseDown event to your TextBlock in Chapter 1, you used the buttons in the upper right corner of the Properties window to switch between properties and events. Now you’ll do the same thing, except this time you’ll use the PreviewTextInput event to only accept input that’s made up of numbers, and reject any input that isn’t a number.

If your app is currently running, stop it. Then go to the designer, click on the TextBox to select it, and switch the Properties window to show you its events. Then scroll down and double-click inside the box next to PreviewTextInput to make the IDE generate an event handler method.

Do this!

Your new event handler method will have one statement in it:

Here’s how this event handler works:

1. The event handler is called when the user enters text into the TextBox, but before the TextBox is updated.

2. It uses a special method called int.TryParse to check if the text that the user entered is a number.

3. If the user entered a number, it sets e.Handled to true, which tells WPF to ignore the input.

Before you run your code, go back and look at the XAML tag for the TextBox:

 <TextBox x:Name="numberTextBox" FontSize="18" Margin="10,49,0,0" Text="0" Width="120"
          HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top"
          TextChanged="numberTextBox_TextChanged"
          PreviewTextInput="numberTextBox_PreviewTextInput"/>

Now it’s hooked up to two event handlers: the TextChange event is hooked up to an event handler method called numberTextBox_TextChanged, and right below it the PreviewTextInput event is hooked up to a method called numberTextBox_PreviewTextInput.

Now run your app again. Oops! Something went wrong—it threw an exception.

Now take a look at the bottom of the IDE. It has an Autos window that shows you any defined variables.

So what’s going on—and, more importantly, how do we fix it?

Sleuth it out

The Autos window is showing you the variables used by the statement that threw the exception: number and numberTextBox. The value of numberTextBox is {System.Windows.Controls.TextBox: 0}, and that’s what a healthy TextBox looks like in the debugger. But the value of number—the TextBlock that you’re trying to copy the text to—is null. You’ll learn more about what null means later in the book.

But here’s the all-important clue: the IDE is telling you is that the number TextBlock is not initialized.

The problem is that the XAML for the TextBox includes Text="0", so when the app starts running it initializes the TextBox and tries to set the text. That fires the TextChanged event handler, which tries to copy the text to the TextBlock. But the TextBlock is still null, so the app throws an exception.

So all we need to do to fix the bug is to make sure the TextBlock is initialized before the TextBox. When a WPF app starts up, the controls are initialized in the order they appear in the XAML. So you can fix the bug by changing the order of the controls in the XAML.

Swap the order of the TextBlock and TextBox controls so the TextBlock appears above the TextBox:

Note

Moving the TextBlock tag in the XAML so it’s above the TextBox, causes the TextBlock to get initialized first

The app should still look exactly the same in the designer—which makes sense, because it still has the same controls. Now run your app again. This time it starts up, and the TextBox now only accepts numeric input.

Exercise

Add the rest of the XAML controls for the ExperimentWithControls app: radio buttons, a list box, two different kinds of combo boxes, and two sliders. Each of the controls will update the TextBlock in the upper right cell of the grid.

Add radio buttons to the upper left cell next to the TextBox

Drag a RadioButton out of the Toolbox and into the top left cell of the grid. Then drag it until its left side is aligned with the center of the cell and the top is aligned with the top of the TextBox. As you drag controls around the designer, guidelines appear to help you line everything up neatly, and the control will snap to those guidelines.

Expand the Common section of the Properties window and set the Content of the RadioButton control to 1.

Next, add five more RadioButton controls out of the Toolbox, align them, and set their Content properties. But this time, don’t drag them out of the Toolbox. Instead, click on RadioButton in the Toolbox, then click inside the cell. (The reason you’re doing that is if you have a RadioButton selected and then drag another control out of the Toolbox, the IDE will newt the new control inside of the RadioButton. We’ll learn about nesting controls later in the book.)

Note

Still seeing event handlers and not properties in the Properties window? Use the wrench button to display properties again—and if you used the search box, make sure you clear it.

Add a list box to the middle left cell of the grid

Click on ListBox in the Toolbox, then click inside the middle left cell to add the control. Use the Layout section set all of its margins to 10.

Name your ListBox myListBox and add ListBoxItems to it

The purpose of the ListBox is to let the user choose a number. We’ll do that by adding items to the list. Select the ListBox, expand Common in the properties window, and click the Edit Items button next to Items . Add five ListBoxItem items and set their Content values to numbers 1 to 5.

Your ListBox should now look like this:

Add two different ComboBoxes to the middle right cell in the grid

Click on ComboBox in the Toolbox, then click inside the middle right cell to add a ComboBox and name it readOnlyComboBox. Drag it to the upper right corner and use the gray bars to give it left and top margins of 10. Then add another ComboBox named editableComboBox to the same cell and align it with the upper right corner.

Use the Collection Editor window to add the same ListBoxItems with numbers 1, 2, 3, 4, and 5 to both ComboBoxes—so you’ll need to do it for the first ComboBox, then the second ComboBox.

Finally, make the ComboBox on the right editable by expanding the Common section in the Properties window and checking IsEditable. Now the user can type in their own number into that ComboBox.

Exercise Solution

Here’s the XAML for the RadioButton, ListBox, and two ComboBox controls that you added in the exercise. This XAML should be at the very bottom of the grid contents—you should find them just above the closing </Grid> tag. And just like with any other XAML you’ve seen so far, it’s okay if the properties for a tag are in a different order in your code, or if you have different line breaks.

Add sliders to the bottom row of the grid

Let’s add two sliders to the bottom row and then hook up their event handlers so they update the TextBlock in the upper right.

1. Add a slider to your app.

   Drag a Slider out of the Toolbox and into the lower right cell. Drag it to the upper right corner of the cell and use the gray bars to give it left and top margins of 10.

   

   

   Use the Common section of the Properties window to set AutoToolTipPlacement to TopLeft, Maximum to 5, Minimum to 1, and give it the name smallSlider. Then double-click on the slider to add this event handler:

   

2. Add a ridiculous slider to choose phone numbers.

   There’s an old saying: “Just because an idea is terrible and also maybe stupid, that doesn’t mean you shouldn’t do it.” So let’s do something that’s just a bit stupid: add a slider to select phone numbers.

   Drag another slider into the bottom row. Use the Layout section of the Properties window to reset its width, set its ColumnSpan to 2, set all of its margins to 10, and set its vertical alignment to Center and horizontal alignment to Stretch. Then use the Common section to set AutoToolTipPlacement to TopLeft, Minimum 1111111111, Maximum 9999999999, and value 7183876962. Give it the name bigSlider. Then double-click on it and add this ValueChanged event handler:

   

   

   

Add C# code to make the rest of the controls work

We want each of the controls in your app to do the same thing: update the TextBlock in the upper right cell with a number, so when you check one of the radio buttons or pick an item from a ListBox or ComboBox, the TextBlock is updated with whatever value you chose.

1. Add a Checked event handler to the first RadioButton control.

   Double-click on the first RadioButton. The IDE will add a new event handler method called RadioButton_Checked (since you never gave the control a name, it just uses the type of control to generate the method). Add this line of code:

   private void RadioButton_Checked(object sender, RoutedEventArgs e)
   {
       if (sender is RadioButton radioButton)
          number.Text = radioButton.Content.ToString();
   }

   Ready Bake Code

   This statement uses the is keyword, which you’ll learn about in Chapter 7. For now, just carefully enter it exactly like it appears on the page (and do the same for the other event handler method, too).

2. Make the other RadioButtons use the same event handler.

   Look closely at the XAML for the RadioButton that you just modified. The IDE added this property: Checked="RadioButton_Checked" – this is exactly like how the other event handlers were hooked up. Copy this property to the other RadioButton tags so they all have identical Checked properties—and now they’re all connected to the same Checked event handler. You can use the Events view in the Properties window to check that each RadioButton is hooked up correctly.

   

3. Make the ListBox update the TextBlock in the upper right cell.

   When you did the exercise, you named your ListBox myListBox. Now you’ll add an event handler that fires any time the user selects an item and uses the name to get the number that the user selected.

   Double-click inside the empty space in the ListBox below the items to make the IDE will add an event handler method for the SelectionChanged event. Add this statement to it:

   Note

   Make sure you click on the empty space below the list items. If you click on an item, it will add an event handler for that item and not for the entire ListBox. You can also use the Properties window to add a SelectionChanged event

   private void myListBox_SelectionChanged(
          object sender, SelectionChangedEventArgs e)
   {
       if (myListBox.SelectedItem is ListBoxItem listBoxItem)
           number.Text = listBoxItem.Content.ToString();
   }

4. Make the read-only combo box update the TextBlock.

   Double-click on the read-only ComboBox to make Visual Studio add an event handler for the SelectionChanged event, which is raised any time a new item is selected in the ComboBox. Here’s the code—it’s really similar to the code for the ListBox:

   private void readOnlyComboBox_SelectionChanged(
                      object sender, SelectionChangedEventArgs e)
   {
       if (readOnlyComboBox.SelectedItem is ListBoxItem listBoxItem)
           number.Text = listBoxItem.Content.ToString();
   }

5. Make the editable combo box update the TextBlock.

   An editable combo box is like a cross between a ComboBox and a TextBox. You can choose items from a list, but you can also type in your own text. And since it works like a TextBox, we can add a PreviewTextInput event handler to make sure the user can only type numbers, just like we did with the TextBox. In fact, you even reuse the same event handler that you already added for the TextBox.

   Go to the XAML for the editable ComboBox, put your cursor just before the closing caret > and start typing PreviewTextInput. An IntelliSense window will pop up to help you complete the event name. Then add an = equals sign—as soon as you do, the IDE will prompt you to either choose a new event handler or select the one you already added. Choose the existing event handler.

   

   The previous event handlers used the list items to update the TextBlock. But users can enter any text they want into an editable ComboBox, so this time you’ll add a different kind of event handler.

   Edit the XAML again. This time, type TextBoxBase.—as soon as you type the period, the autocomplete will give suggestions. Choose TextBoxBase.TextChanged and type an equals sign. Now choose <New Event Handler> from the dropdown.

   

   The IDE will add a new event handler to the code-behind. Here’s the code for it:

   private void editableComboBox_TextChanged(object sender, TextChangedEventArgs e)
   {
       if (sender is ComboBox comboBox)
           number.Text = comboBox.Text;
   }

   Now run your program. All of the controls should work. Great job!

Controls give you the flexibility to make things easy for your users.

When you’re building the UI for an app, there are so many choices that you make: what controls to use, where to put each one, what to do with their input. Picking one control instead of another gives your users an implicit message about how to use your app. For example, when you see a set of radio buttons, you know that you need to pick from a small set of choices, while an editable combo box tells you that there your choices are nearly unlimited. So don’t think of UI design as a matter of making “right” or “wrong” choices. Instead, think of it as your way to make things as easy as possible for your users.

Bullet Points

• C# programs are organized into classes, classes contain methods, and methods contain statements.

• Each class belongs to a namespace. Some namespaces (like System.Collections.Generic) contain .NET classes.

• Classes can contain fields, which live outside of methods. Different methods can access the same field.

• When a method is marked public that means it can be called from other classes.

• .NET Core console apps are cross-platform programs that don’t have a graphical user interface.

• The IDE builds your code to turn it into a binary, which is a file that can be executed.

• If you have a cross-platform .NET Core console app, you can use the dotnet command line program to build binaries for different operating systems.

• The Console.WriteLine method writes a string to the console output.

• Variables need to be declared before they can be used. You can set a variable’s value at the same.

• The Visual Studio debugger lets you pause your app and inspect the value of variables.

• Controls raise events for lots of different things that change: mouse clicks, selection changes, text entry. Sometimes people say events are triggered or fired, which is the same as saying that they’re raised.

• Event handlers are methods that are called when an event is raised to respond to—or handle—the event.

• TextBox controls can use the PreviewTextInput event to accept or reject text input.

• A slider is a great way to get number input, but a terrible way to choose a phone number.