If you are new to Windows Forms, it can be useful to create a simple app to understand more about events and how to generate graphics on the form.
One of the simple apps you can create is a dice roller. In this app, clicking on a “roll” button will randomly pick and display one of the faces of a die.
How to Add a Roll Button for the Dice Roller Application
To add the UI, create a new Visual Studio Application and use the toolbox to add a roll button and a die.
Open Visual Studio on your computer, and create a new Windows Forms project. Click and drag a button from the toolbox and place it onto the canvas. Use the properties window to change the properties of the button to the following new values:Property New Value Name rollButton Text Roll Location 130, 110 Double-click the Roll button. This will generate a function for the click event. The function will execute when you click on the button at runtime. private void rollButton_Click(object sender, EventArgs e){} Inside the rollButton_Click() function, use the Random class to generate a random number between one and six. Random random = new Random();int randomNumber = random. Next(1, 7);
How to Create the Six Faces for the Die
To create the faces for the die, create six panel objects. Use the Graphics class to create circle graphics to represent each of the numbers on the face of the die.
If you are unfamiliar with adding shapes and graphics to a Windows Forms app, you can learn more about adding graphics to a Winforms application.
Create six global panel objects to represent the six faces of the die. Panel face1 = new Panel();Panel face2 = new Panel();Panel face3 = new Panel();Panel face4 = new Panel();Panel face5 = new Panel();Panel face6 = new Panel(); Create a new function called InitializeFace(). Inside the function, add some properties to the faces. These include the border, size, location, or visibility of the face. It also includes the paint event handler which will draw the circles of the die when the panel is being created at runtime. private void InitializeFace(Panel face, string name){ face. Name = name; face. Visible = false; face. Size = new Size(500, 500); face. BorderStyle = BorderStyle. FixedSingle; face. Location = new Point(250, 250); face. Paint += new PaintEventHandler(this. Panel_Paint);} At the end of the InitializeFace() function, after adding values to the face properties, add the panel control to the form. this. Controls. Add(face); Inside the form’s constructor, call the InitializeFace() function for each of the six faces of the die. public Form1(){ InitializeComponent(); InitializeFace(face1, “1”); InitializeFace(face2, “2”); InitializeFace(face3, “3”); InitializeFace(face4, “4”); InitializeFace(face5, “5”); InitializeFace(face6, “6”);} Create the Panel_Paint() function for the Paint event handler. This will draw the circles onto each of the faces. The program will generate the circles at different locations, depending on the number of the face that you rolled. private void Panel_Paint(object sender, PaintEventArgs e){ // Create the pen that you will use to draw the circles Color red = Color. Red; SolidBrush solidBrush = new SolidBrush(red); Panel panel = sender as Panel; // Draw a different number of circles, depending on what face you roll. switch (panel. Name) { case “1”: e. Graphics. FillEllipse(solidBrush, 200, 200, 100, 100); break; case “2”: e. Graphics. FillEllipse(solidBrush, 100, 200, 100, 100); e. Graphics. FillEllipse(solidBrush, 300, 200, 100, 100); break; case “3”: e. Graphics. FillEllipse(solidBrush, 100, 100, 100, 100); e. Graphics. FillEllipse(solidBrush, 200, 200, 100, 100); e. Graphics. FillEllipse(solidBrush, 300, 300, 100, 100); break; case “4”: e. Graphics. FillEllipse(solidBrush, 100, 100, 100, 100); e. Graphics. FillEllipse(solidBrush, 100, 300, 100, 100); e. Graphics. FillEllipse(solidBrush, 300, 100, 100, 100); e. Graphics. FillEllipse(solidBrush, 300, 300, 100, 100); break; case “5”: e. Graphics. FillEllipse(solidBrush, 100, 100, 100, 100); e. Graphics. FillEllipse(solidBrush, 100, 300, 100, 100); e. Graphics. FillEllipse(solidBrush, 300, 100, 100, 100); e. Graphics. FillEllipse(solidBrush, 300, 300, 100, 100); e. Graphics. FillEllipse(solidBrush, 200, 200, 100, 100); break; default: e. Graphics. FillEllipse(solidBrush, 100, 200, 100, 100); e. Graphics. FillEllipse(solidBrush, 300, 200, 100, 100); e. Graphics. FillEllipse(solidBrush, 100, 80, 100, 100); e. Graphics. FillEllipse(solidBrush, 300, 80, 100, 100); e. Graphics. FillEllipse(solidBrush, 100, 320, 100, 100); e. Graphics. FillEllipse(solidBrush, 300, 320, 100, 100); break; }}
How to Roll the Die
To roll the die onto a random face, modify the rollButton_Click() function to display the face of the die when it lands on a certain number.
Create a function called ResetDie(). Inside the function, set the visibility of all the faces to false. This ensures that every time you roll the die, the previous faces displayed are no longer visible. private void ResetDie(){ face1. Visible = false; face2. Visible = false; face3. Visible = false; face4. Visible = false; face5. Visible = false; face6. Visible = false;} Modify the rollButton_Click() function. Set the visibility of the face to true if you have rolled that particular number. private void rollButton_Click(object sender, EventArgs e){ // Generate a random number between one and six Random random = new Random(); int randomNumber = random. Next(1, 7); // Hide previously displayed sides ResetDie(); // Set the side that was rolled to be visible if (randomNumber == 1) face1. Visible = true; if (randomNumber == 2) face2. Visible = true; if (randomNumber == 3) face3. Visible = true; if (randomNumber == 4) face4. Visible = true; if (randomNumber == 5) face5. Visible = true; if (randomNumber == 6) face6. Visible = true;}
How to Run the Application
Run the application using the run button, and press the Roll button to roll the die and display a random side.
At the top of the Visual Studio Application, click on the green play button. Click on the Roll button to roll the die. The die faces will change as you continue to press the Roll button.
Creating Simple Applications Using Windows Forms
You can use Windows Forms to create desktop applications using a GUI. You can do this by dragging UI elements onto the canvas and adding functional logic in the code-behind files.
To enhance your learning, it’s a good idea to re-create clones of apps that already exist. You can explore some of the other clone apps you can create while learning about Windows Forms Applications. This includes converters, calculators, file managers, and more.
