C#. WPF. Приклад створення нового додатку, що підтримує платформу WPF (Windows Presentation Foundation). Створення додатку-вітання “Hello world!” Огляд основних файлів проекту

Приклад створення нового додатку, що підтримує платформу WPF (Windows Presentation Foundation). Створення додатку-вітання “Hello world!” Огляд основних файлів проекту

Зміст

Пошук на інших ресурсах:

Умова задачі

Використовуючи графічну систему відображення Windows Presentation Foundation (WPF), розробити додаток, що за натиском кнопки виводить вітання “Hello world!”. Додаток розробити в середовищі Microsoft Visual Studio.

Виконання

1. Завантажити Microsoft Visual Studio

У результаті відобразиться вікно в якому немає жодного рішення (solution).

2. Створення нового проекту за шаблоном WPF (Windows Presentation Foundation)

Щоб викликати вікно створення нового проекту потрібно викликати команду

File -> New -> Project...

як відображено на рисунку 1.

Рис. 1. Команда створення нового проекту

У результаті відкриється вікно New Project, зображене на рисунку 2. У вікні потрібно вибрати такі елементи:

у вкладці Installed Templates вибрати Visual C#;
в основній вкладці вибрати WPF Application;
у полі Name задати ім’я проекту. Залишимо ім’я за замовчуванням WPF Application1, яке пропонує система;
у полі Location вибирається папка, в якій буде створено проект. У нашому випадку назва папки (каталогу) “C:\Programs\C_Sharp\WPF”;
у полі Solution Name задається ім’я рішення. Залишимо ім’я за замовчуванням WpfApplication1.

Рис. 2. Вікно створення проекту за шаблоном WPF Application

3. Вікно Microsoft Visual Studio після створення проекту за шаблоном WPF Application

Після створення проекту, система Microsoft Visual Studio прийме приблизний вигляд, як показано на рисунку 3.

Рис. 3. Вікно Microsoft Visual Studio після створення проекту

На рисунку схематично показано основні області, що використовуються для створення додатків за шаблоном WPF Application:

1 – Панель інструментів Toolbox. Тут відображаються елементи управління, що призначені для організації взаємодії користувача з додатком. Наприклад, кнопки, текстові рядки, поля вводу тощо.
2 – Вікно Solution Explorer, в якому відображаються файли проекту (проектів). З допомогою вибору потрібного файлу (мишкою або клавіатурою) в Solution Explorer можна перейти до його редагування в основному вікні.
3 – Основне вікно, що відображає форму додатку. Цьому вікну відповідає файл (модуль) MainWindow.xaml. Цей файл описує характеристики форми на мові XAML (Extensive Application Markup Language).
4 – Текст характеристик основної форми на мові XAML, що відповідає файлу MainWindow.xaml.
5 – Файл MainWindow.xaml.cs, який відповідає тексту на мові C#. В тексті цього файлу формується програмний код управління додатком, створеним за шаблоном WPF Application.
6 – Вікно Properties, в якому відображаються властивості (Properties) та події (Events) основної форми додатку.

4. Файли проекту, що створює Microsoft Visual Studio

Після створення додатку за шаблоном WPF Application, системою створюються ряд файлів. Ці файли можна переглянути у вікні утиліти Solution Explorer (рис. 4). Нижче розглянуто основні файли проекту:

Файл AssemblyInfo.cs – містить загальну інформацію про збірку у вигляді атрибутів. Можна змінювати ці атрибути, щоб коригувати інформацію, що асоціюється зі збіркою.
Розділ References – відображає інформацію про збірки та .dll файли цих збірок, яка використовується для створення даного проекту. Детальну інформацію про файли збірок можна переглянути в Object Browser (команда View->Object Browser).
Файл App.xaml.cs – представляє собою даний додаток на мові C#. У файлі представлено клас App, що є успадкований з класу Application. Клас Application інкапсулює в собі WPF-додаток.
Файл App.xaml – представляє даний додаток, що описаний мовою XAML.
Файл MainWindow.xaml. У цьому файлі представляється код на мові XAML (Extensive Application Markup Language). Мова XAML дозволяє представити вікно програми набором дескрипторів, які після запуску програми використовуються для генерування об’єктів.
Файл MainWindow.xaml.cs – у цьому файлі міститься програмний код на мові C#. Тут є можливість додавати власні класи, методи, обробники подій, інтерфейси, делегати та інше. Цей файл відповідає головній формі додатку. У цьому файлі представлено клас MainWindow, що інкапсулює в собі члени даних, методи, обробники подій та інше, які будуть використовуватись у програмі.

Рис. 4. Вікно утиліти Solution Explorer

5. Розміщення елементів управління на формі (проектування форми)

Основній формі додатку відповідає файл MainWindow.xaml.
З допомогою панелі інструментів Toolbox розміщуються на формі такі елементи управління (компоненти) (рис. 5):

елемент управління типу Label. Буде створено об’єкт (змінну) з іменем label1. Цей елемент управління представляє собою текстове повідомлення, що відображається на формі;
елемент управління типу Button. Створюється об’єкт (змінна) з іменем butotn1. Цей елемент управління представляє собою звичайну кнопку. Після кліку на цій кнопці має відобразитись текст “Hello world!”.

Рис. 5. Вікно основної форми додатку після розміщення елементів управління Button, Label

6. Налаштування елементів управління Button, Label

Властивості елементів управління налаштовуються з допомогою вікна Properties (див. рис. 3).
Для правильного відображення форми, потрібно налаштувати відповідні властивості таких елементів управління:

в елементі управління label1 властивість Content = “” (пустий рядок);
в елементі управління button1 властивість Content = “Відобразити”.

Рис. 6. Елемент управління label1 типу Label

Рис. 7. Елемент управління button1 типу Button

7. Задавання заголовку програми

Заголовок програми можна задати після активізації області “Main Window”. У вікні Properties властивість Title = “Hello world!”.

Рис. 8. Задавання заголовку програми

8. Програмування події кліку на кнопці “Відобразити”

Згідно з умовою задачі, програма повинна відображати текст “Hello world!” після натиску на кнопці “Відобразити”. Цій кнопці відповідає елемент управління button1. Для відображення повідомлення “Hello world!” потрібно запрограмувати подію Click елемента управління button1. Система Microsoft Visual Studio сформує відповідний програмний код, в якому потрібно запрограмувати власні дії. Метод, що відповідає цьому програмному коду, називається обробник події. Обробник події – це звичайний метод (функція).

Програмування події виконується з допомогою вікна Properties. Послідовність кроків наступна.

З допомогою мишки активувати (виділити) елемент управління button1.
З допомогою мишки активувати (виділити) вкладку Event у вікні Properties. У результаті відобразиться перелік подій, які підтримуються елементом управління button1 (рисунок 9).
Зробити подвійний клік в області тексту події Click. У результаті активізується вікно модуля (файлу) MainWindow.xaml.cs, в якому відобразиться обробник події button1_Click(). Цей обробник буде викликатись при натиску на кнопці “Відобразити”. Поки що текст обробника наступний:

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

4. У тілі обробника події мовою C# потрібно набрати текст

label1.Content = "Hello world!";

Рис. 9. Програмування події Click елементу управління button1

9. Текст файлу MainWindow.xaml.cs

Файл MainWindow.xaml.cs відображає текст програми на мові C#. У нашому випадку для додатку, створеного за шаблоном WPF Application, текст файлу наступний:

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. Текст файлу MainWindow.xaml

Файл MainWindow.xaml відображає розміщення елементів управління (кнопки, текстові поля, повідомлення, графічні об’єкти тощо), які представлені у вікнах в додатку WPF. Таким чином, представлення графічної частини відділене від програмного коду. Графічна частина представлена цим файлом, а програмна частина представлена файлом MainWindow.xaml.cs.
Лістинг файлу для нашої задачі приблизно такий:

<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="Відобразити" 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. Запуск програми на виконання

Тепер можна запускати програму на виконання з допомогою команди Run з меню Run.

Зв’язані теми

Приклад створення додатку типу Windows Forms Application

BestProg