C#. WPF. An example of creating a new application that supports the WPF (Windows Presentation Foundation) platform. Creating a hello application “Hello world!”. Overview of the main project files

An example of creating a new application that supports the WPF (Windows Presentation Foundation) platform. Creating a hello application “Hello world!”. Overview of the main project files

Search other websites:

Task

Using the Windows Presentation Foundation (WPF) graphical display system, develop an application that displays a greeting “Hello world!” by the click of a button. The application is developed in Microsoft Visual Studio environment.

⇑

Instructions

1. Run Microsoft Visual Studio

As a result, a window appears in which there are not yet any solutions.

2. Create a new project using the WPF (Windows Presentation Foundation) template

To call the window for creating a new project, you need to call the command

File -> New -> Project...

as shown in Figure 1.

Figure 1. The command to create a new project

As a result, the ‘New Project’ window shown in Figure 2 will be opened. In the window you need to choose the following items:

in the ‘Installed Templates’ tab, select Visual C#;
in the main tab, select ‘WPF Application’;
in the Name field, specify the project name. Leave the default name WPF Application1, which the system offers;
in the Location field the folder is selected in which the project will be created. In our case, the name of the folder (directory) is “C:\Programs\C_Sharp\WPF”;
in the Solution Name field, you specify the name of the solution. Leave the default name WpfApplication1.

Figure 2. The project creation window by the WPF Application template

⇑

3. The Microsoft Visual Studio window after creating a project using the WPF Application template

After creating the project, the Microsoft Visual Studio system will look like as shown in Figure 3.

Figure 3. Microsoft Visual Studio window after creating the project

The figure schematically shows the main areas that are used to create applications using the WPF Application template:

1 – Toolbox panel. Here you can see the controls that are designed to organize the interaction of the user with the application. For example, buttons, text strings, input fields, and so on.
2 – The Solution Explorer window, in which project files are displayed. By selecting the desired file (with a mouse or keyboard) in Solution Explorer, you can go to its editing in the main window.
3 – The main window that displays the form of the application. This window corresponds to the file (module) MainWindow.xaml. This file describes the characteristics of the form in the XAML (Extensive Application Markup Language).
4 – The text of the characteristics of the main form in the XAML language corresponding to the MainWindow.xaml file.
5 – File MainWindow.xaml.cs, which corresponds to the text in C#. In the text of this file, the application management code is generated using the WPF Application template.
6 – The Properties window, which displays Properties and Events in the main application form.

⇑

4. The project files that Microsoft Visual Studio creates

After the application is created using the WPF Application template, the system creates a number of files. These files can be viewed in the Solution Explorer window (Figure 4). Below are the main project files:

The AssemblyInfo.cs file contains general information about the assembly in the form of attributes. You can modify these attributes to correct the information that is associated with the assembly.
The References section displays information about the assemblies and .dll files of these assemblies, which are used to create this project. You can view detailed information about the assembly files in the Object Browser (View-> Object Browser command).
The App.xaml.cs file is a C# application. The file contains the App class, which is inherited from the Application class. In this case, the Application class encapsulates a WPF application.
The App.xaml file represents this application, which is realized in the XAML language.
The MainWindow.xaml file. This file presents the code in the XAML language (Extensive Application Markup Language). The XAML language allows you to present a program window by a set of descriptors that are used to generate objects after the program is run.
File MainWindow.xaml.cs – in this file the program code in language C# is located. Here you can add your own classes, methods, event handlers, interfaces, delegates, and so on. This file corresponds to the main form of the application. This file contains the MainWindow class, which encapsulates data members, methods, event handlers, and other elements that will be used in the program.

Figure 4. Solution Explorer window

⇑

5. Placement of controls on the form (form design)

The MainWindow.xaml file corresponds to the main form of the application.
Using the Toolbox toolbar, the following control elements (components) are placed on the form (Figure 5):

a control of Label type. An object (variable) named label1 will be created. This control is a text message that is displayed on the form;
a control of Button type. An object (variable) is created with the name button1. This control is a normal button. After clicking on this button, the text “Hello world!” will be displayed.

Figure 5. The main application form window after placement controls ‘Button’ and ‘Label’

⇑

6. Setting the controls ‘Button’ and ‘Label’

The properties of the controls are configured using the Properties window (see Figure 3).

To correctly display the form, you need to configure the corresponding properties of the following controls:

in the label1 control, property Content = “” (empty string);
in the button1 control, property Content = “Show”.

Figure 6. The label1 control of Label type

Figure 7. The button1 control of Button type

⇑

7. Setting the program title

Title of the program can be set after activating the field “Main Window”. In the Properties window, the property Title = “Hello world!” (Figure 8).

Figure 8. Setting up the program title

⇑

8. Programming the click event on the “Show” button

In accordance with the condition of the task, the program should display the text “Hello world!” after clicking on the “Show” button. This button corresponds to the control button1. To display the message “Hello world!” you need to program the Click event of the button1 control. The Microsoft Visual Studio system will generate the appropriate program code in which you want to program your own actions. The method corresponding to this program code is called the event handler. The event handler – this is the usual method (function).
The programming of event is realized by using the Properties window.
The sequence of steps is as follows.

Use the mouse to activate (highlight) the button1 control.
Use the mouse to activate (highlight) the Event tab in the Properties window. The result is a list of events that are supported by the button1 control (Figure 9).
Double click in the text area of the Click event. As a result, the module window (file) MainWindow.xaml.cs is activated, in which the event handler button1_Click() is displayed. This handler will be called when the “Show” button will be clicked. At present the text of the handler is the following:

private void button1_Click(object sender, RoutedEventArgs e)
{
    
}

4. In the body of the event handler in C#, you need to type the text

label1.Content = "Hello world!";

Figure 9. Programming the Click event of the button1 control

⇑

9. The text of MainWindow.xaml.cs file

The MainWindow.xaml.cs file displays the text of the program in C#. In our case, for the application created using the WPF Application template, the text of the file is as follows:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApplication1
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            label1.Content = "Hello world!";
        }
    }
}

⇑

10. The text of MainWindow.xaml file

The MainWindow.xaml file displays the placement of the controls (buttons, text boxes, messages, graphics, etc.) that are displayed in the windows in the WPF application. Thus, the representation of the graphic part is separated from the program code. The graphical part is represented by this file, and the program part is represented by the file MainWindow.xaml.cs.

The code of file for our task is approximately the following:

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid Height="282">
        <Button Content="Show" Height="23" HorizontalAlignment="Left" Margin="180,143,0,0" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click" />
        <Label Height="28" HorizontalAlignment="Left" Margin="180,61,0,0" Name="label1" VerticalAlignment="Top" />
    </Grid>
</Window>

⇑

11. Running the program for execution

Now you can start the program with the Run command from the Run menu (F5 key).

BestProg