Create the project
When you create an application in Visual Studio, you first create a project and a solution. For this example, you’ll create a Windows Presentation Foundation (WPF) project.
To create the WPF project
- Create a new project. One the menu bar, choose File, New, Project….
- Choose the Visual C# WPF Application template by choosing in the left pane Installed, Templates, Visual C#, Windows, for example, and then choosing WPF application in the middle pane. Name the project HelloWPFApp at the bottom of the New Project dialog.
Visual Studio creates the HelloWPFApp project and solution, and the Solution Explorer shows the various files. The WPF Designer shows a design view and an XAML view of MainWindow.xaml in a split view. You can slide the splitter to show more or less of either view. You can choose to see only the visual view or only the XAML view.
The following items appear in Solution Explorer:
After you create the project, you can customize it. By using the Properties window (found on the View menu), you can display and change options for project items, controls, and other items in an application. By using the project properties and property pages, you can display and change options for projects and solutions.
To change the name of MainWindow.xaml
- In the following procedure, you’ll give MainWindow a more specific name. In Solution Explorer, select MainWindow.xaml. You should see the Properties window, but if you don’t, choose the View menu and the Property Window item. Change the File Name property to Greetings.Xaml
Solution Explorer shows that the name of the file is now Greetings.xaml, and if you expand the MainWindow.xaml node (by putting focus in the node and pressing the rightarrow key), you see the name of MainWidow.xaml.cs is now Greetings.xaml.cs. This code file is nested under the .xaml file node to show they are very closely related to each other.
- In Solution Explorer, open Greetings.xaml in the Designer view (by pressing the Enter key while the node has focus) and select the title bar of the window by using the mouse.
- In the Properties window, change the value of the Title property to Greetings.
The title bar for MainWindow.xaml now reads Greetings.
Design the user interface (UI)
We will add three types of controls to this application: a textBlock control, two RadioButton controls, and a Button control.
To add a TextBlock control
- Open the Toolbox window by choosing the View menu and the Toolbox item.
- In the Toolbox, search for the TextBlock control.
- Add a TextBlock control to the design surface by choosing the TextBlock item and dragging it to the window on the design surface. Center the control near the top of the window.
<TextBlock x:Name=”textBlock” HorizontalAlignment=”Center” Margin=”90,57,90,238″ TextWrapping=”Wrap” Text=”Select a message option and then choose the Display button.” VerticalAlignment=”Center” Width=”327″/>
To add radio buttons
- In the Toolbox, search for the RadioButton control.
- Add two RadioButton controls to the design surface by choosing the RadioButton item and dragging it to the window on the design surface twice, and move the buttons (by selecting them and using the arrow keys) so that the buttons appear side by side under the TextBlock control.
- In the Properties window for the left RadioButton control, change the Name property (the property at the top of the Properties window) to RadioButton1. Make sure you have selected the RadioButton and not the background Grid on the form/ the Type field of the Property Window under the Name field should say RadioButton.
- In the Properties window for the right RadioButton control, change the Name property to RadioButton2, and then save your changes by pressing Ctrl-s or using the File menu item. Make sure you selected the RadioButton before changing and saving.
You can now add display text for each RadioButton control. The following procedure updates the Content property for a RadioButton control.
To add display text for each radio button
- On the design surface, open the shortcut menu for RadioButton1 by pressing the right mouse button while selecting RadioButton1, choose Edit Text, and then enter Hello.
- Open the shortcut menu for RadioButton2 by pressing the right mouse button while selecting RadioButton2, choose Edit Text, and then enter Goodbye.
The final UI element that you’ll add is a Button control.
To add the button control
- In the Toolbox, search for the Button control, and then add it to the design surface under the RadioButton controls by selecting Button and dragging it to the form in the design view.
- In the XAML view, change the value of Content for the Button control from Content=”Button” to Content=”Display”, and then save the changes (Ctrl-s or use the File menu).
The markup should resemble the following example:<Button Content=”Display” HorizontallAligment=”Left” VerticalAligment=”Top” Width=”75″ Margin=”215,204,0,0″/>
Your window should resemble the following illustration.
Add code to the Display Button
When this application runs, a message box appears after a user first chooses a radio button and then chooses the Display button. One message box will appear for Hello, and another will appear for Goodbye. To create this behavior, you’ll add code to the Button_Click event in Greeting.xaml.cs.
Add code to display message boxes
- On the design surface, double-click the Display Button.
Greeting.xaml.cs opens, with the cursor in the Button_Click event. You can also add a click event handler as follows (if the pasted code has a red squiggle under any names, then you probably did not select the RadioButton controls on the design surface and rename them):
For Visual C#, the event handler should look like this:
private void Button_Click_1(object sender, RoutedEventArgs e)
- For Visual C#, enter the following code:
if (RadioButton1.IsChecked == true)
RadioButton2.IsChecked = true;
- Save the application
Debug and test the application