Донецкий техникум промышленной автоматики

C #. WPF-додаток. приклад створення

  1. зміст Умова задачі
  2. ⇑
  3. ⇑
  4. ⇑
  5. ⇑
  6. ⇑
  7. ⇑
  8. ⇑
  9. ⇑
  10. ⇑
  11. ⇑
  12. ⇑
  13. ⇑

зміст

Умова задачі

Використовуючи графічну систему відображення 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.

Залишимо ім'я за замовчуванням 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). Нижче розглянуті основні файли проекту:
1. Файл AssemblyInfo.cs - містить загальну інформацію про збірку у вигляді атрибутів. Можна змінювати ці атрибути, з метою коригування інформації, яка асоціюється зі складанням.
2. Розділ References - відображає інформацію про збірки і .dll файлах цих збірок, яка використовується для створення даного проекту. Детальну інформацію про файлах збірок можна переглянути в Object Browser (команда View-> Object Browser).
3. Файл App.xaml.cs - являє собою цей додаток на мові C #. У файлі представлений клас App, який успадкований з класу Application. В даному випадку клас Application инкапсулирует в собі WPF-додаток.
4. Файл App.xaml - представляє програму, яка описано на мові XAML.
5. Файл MainWindow.xaml. У цьому файлі є код на мові XAML (Extensive Application Markup Language). Мова XAML дозволяє уявити вікно програми набором дескрипторів, які після запуску програми використовуються для генерації об'єктів.
6. Файл MainWindow.xaml.cs - в цьому файлі міститься програмний код на мові C #. Тут є можливість додавати власні класи, методи, обробники подій, інтерфейси, делегати та інше. Цей файл відповідає головній формі програми. У цьому файлі представлений клас MainWindow, який інкапсулює в собі члени даних, методи, обробники подій і інші елементи, які будуть використовуватися в програмі.

Мал. 4. Вікно утиліти Solution Explorer

⇑

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

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

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

»

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

⇑

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

Властивості елементів управління настроюються за допомогою вікна Properties (див. Рис. 3).

Для правильного відображення форми, потрібно налаштувати відповідні властивості наступних елементів управління:

  • в елементі управління label1 властивість Content = "" (порожній рядок);
  • в елементі управління button1 властивість Content = "Показати".

в елементі управління label1 властивість Content = (порожній рядок); в елементі управління button1 властивість Content = Показати

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

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

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

⇑

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

Тема програми можна задати після активізації області «Main Window». У вікні Properties властивість Title = "Hello world!» (Рис. 8).

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

⇑

8. Програмування події кліка на кнопці «Показати»

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

  1. За допомогою мишки активувати (виділити) елемент управління button1.
  2. За допомогою мишки активувати (виділити) вкладку Event в вікні Properties. В результаті відобразиться перелік подій, які підтримуються елементом управління button1 (малюнок 9).
  3. Зробити подвійний клік в області тексту події 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.

⇑

пов'язані теми

⇑