Пример создания нового приложения, поддерживающего платформу 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.

Visual Studio Команда File-New-Project...

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

В результате откроется окно New Project, изображенное на рисунке 2. В окне нужно выбрать следующие элементы:

  • во вкладке Installed Templates выбрать Visual C#;
  • в основной вкладке выбрать WPF Application;
  • в поле Name задать имя проекта. Оставим имя по умолчанию WPF Application1, которое предлагает система;
  • в поле Location выбирается папка, в которой будет создан проект. В нашем случае название папки (каталога) «C:\Programs\C_Sharp\WPF»;
  • в поле Solution Name задается имя решения. Оставим имя по умолчанию WpfApplication1.

Visual Studio C# создание проект шаблон WPF Application

Рис. 2. Окно создания проекта по шаблону WPF Application

 

3. Окно Microsoft Visual Studio после создания проекта по шаблону WPF Application

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

C# WPF Applicaion Visual Studio окно

Рис. 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, который инкапсулирует в себе члены данных, методы, обработчики событий и другие элементы, которые будут использоваться в программе.

C# WPF Application Окно Solution Explorer

Рис. 4. Окно утилиты Solution Explorer

 

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

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

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

C# WPF Application элементы управления Button Label

Рис. 5. Окно основной формы приложения после размещения элементов управления Button, Label

 

6. Настройка элементов управления Button, Label

Свойства элементов управления настраиваются с помощью окна Properties (см. рис. 3).

Для правильного отображения формы, нужно настроить соответствующие свойства следующих элементов управления:

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

C# WPF Application Элемент управления типа Label

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

C# WPF Application Элемент управления Button

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

 

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

Заголовок программы можно задать после активизации области «Main Window». В окне Properties свойство Title = «Hello world!» (рис. 8).

C# WPF Application заголовок программы

Рис. 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!";

C# WPF Application Программирование события Click элемента управление button1

Рис. 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.

 


Связанные темы