Basic UWP: Virtual Pet Setup • Programming is Fun

Learn basic UWP skills.

This walk through shows how to start a simple UWP project, and covers some of the fundamental elements you might need in an application. We'll use a 'Virtual Pet' setup as our example topic.

TextBlock and TextBox
Buttons and event handlers
Change an element's color

New Project

Launch Visual Studio and create a new project. Choose Visual C# > Windows Universal > Blank App.

Click okay on the target dialog (Windows 10 is fine).

Designer

In the Solution Explorer right-click on MainPage.xaml and choose 'View Designer' (or use Shift + F7).

Select 5" Phone from the drop down menu (or something similar with a vertical layout).

Heading Text

In the Toolbox select TextBlock. A TextBlock allows you to display text on the screen. Nearby you will probably also see a TextBox. The TextBox allows your application to get input from the player/user.

With the TextBlock selected, click and drag a rectangle at the top of your canvas screen. This is where the heading text for our application will be displayed.

You can change the zoom level by using the Zoom drop down menu.

In the Properties panel change the name of the element to Heading.

Then change the value of the Text property to 'Virtual Pet Setup' (or the heading of your choice). Change the FontSize property to make the heading text a bit larger, and center the text.

Type of Pet

We'll use three buttons to offer the pet options. Decide which three pets you want to use for this example (mine are Fish, Bird, and Tribble). Select Button in the Toolbox and draw a button under the heading. Give your button a name, and change the text displayed to one of the pet options you've decided to use.

Code View

In the Solution Explorer right-click on MainPage.xaml and choose View Code (F7). Above the MainPage method, add a line of code:

string PetType = "Fish";

We will add click events to our buttons to change the value of the variable. We'll also change the heading when one of the buttons is selected.

Button Event Handlers

In the design view select the first button. In the properties panel switch to the Event Handler view (the lightning bolt icon).

Double-click on the empty field next to 'Click'. Visual Studio will create an event handler for you.

Inside the curly braces add two lines of code:

private void FishChoice_Click(object sender, RoutedEventArgs e)
        {
            PetType = "Fish";
            Heading.Text = "Virtual " + PetType + " Setup";
        }

We are changing the Text property of the Heading element. If you try to just use Heading="" you will get an error because Heading is the name of a TextBlock instance and you can't set the value of that equal to a string (however you can set the Text property of the instance to a string). Using dot notation we access the Text property of an element by:

In this case:

Heading.Text

Create click events for the other two buttons and add the same lines of code, except change the value of PetType to match what each button is.

      private void FishChoice_Click(object sender, RoutedEventArgs e)
        {
            PetType = "Fish";
            Heading.Text = "Virtual " + PetType + " Setup";
        }

        private void BirdChoice_Click(object sender, RoutedEventArgs e)
        {
            PetType = "Bird";
            Heading.Text = "Virtual " + PetType + " Setup";
        }

        private void TribbleChoice_Click(object sender, RoutedEventArgs e)
        {
            PetType = "Tribble";
            Heading.Text = "Virtual " + PetType + " Setup";
        }

Test your project and click each button. You should see the heading text change.

Pet Name

Add another TextBlock and TextBox to your project. The TextBlock will ask for the player/user to enter a name for their pet, and the TextBox will allow user input. You can have a default name suggestion by entering something in the Text property of your TextBox.

Name your TextBox. I've named mine 'EnteredName'.

Add another variable to store the pet name in your code (under pet type at the top of your class definition).

In the properties panel for the TextBox, double-click on the field next to 'LostFocus'. In the curly braces add a line of code to change the value of PetName to be what was typed by the player/user.

private void EnteredName_LostFocus(object sender, RoutedEventArgs e)
        {
            PetName = EnteredName.Text;
        }

Again we are using the name of the instance (in this case the TextBox named 'EnteredName') and accessing the Text property value (EnteredName.Text).

Element Color

For this example we'll use a simple circle to represent the pet. We'll allow the player/user to change the color of the pet by using three buttons (like we did for the pet type).

Switch to your code and at the top of your class definition (where you have declared PetType and PetName), add:

SolidColorBrush solidColorBrush = new SolidColorBrush();

Switch back to the Designer view.

Add a TextBlock requesting the player/user choose a color for the pet, and three color buttons.

Add click event handlers to the new buttons (just like with the pet type buttons). Inside each, add a line of code to change the value of solidColorBrush depending on which color was chosen.

Blue:

solidColorBrush.Color = Color.FromArgb(255, 80, 112, 209);

Green:

solidColorBrush.Color = Color.FromArgb(255, 80, 209, 118);

Purple:

solidColorBrush.Color = Color.FromArgb(255, 130, 80, 209);

At the top of your code file add another using directive:

using Windows.UI;

Pet Preview

Our last steps are to create a preview of the pet, and an 'Adopt' button.

Use the ellipse tool in the Toolbox to draw a circle (you may need to scroll down past the common tools to find it). Name the circle 'Pet'.

Below the circle, add a TextBlock that will display the pet's name and type. Make sure to name the TextBlock. I've named mine 'Preview'.

Finally, add two more lines of code to each of your color button event handlers.

Pet.Fill = solidColorBrush;
Preview.Text = PetName + " the " + PetType;

Test your project!

Suggestions for expanding on this example:

The preview only updates the name if one of the color buttons is chosen. Can you think of another way to update the preview so that if pet type or the name is changed, the preview will reflect the changes?
Put all the elements inside of a panel (name it Setup). Add a finish setup button and when that is clicked have the panel named Setup disappear (Setup.Visibility = Visibility.Collapsed;), and a panel named Game appear (Game.Visibility = Visibility.Visible;). Inside the Game panel you could add elements for a pet simulation or game.