XIV Международная студенческая научная конференция Студенческий научный форум - 2022

В настоящее время актуальна проблема визуализации информации, разработки графических интерфейсов. В статье описаны основы использования технологии Windows Presentation Foundation (WPF) для создания графического интерфейса десктопного приложения. Выделены понятие и особенности WPF, рассмотрены возможности данной технологии на примере разработки простого приложения «Список дел». Приведено краткое описание и структура разрабатываемого приложения, подробно разобрано представление его визуальной части на языке разметки XAML (файл MainWindow.xaml). На основе полученных практических результатов работы сделан вывод о значимом преимуществе использования технологии WPF в разработке, которое заключается в возможности разделения графического интерфейса приложения и его поведения от внутренней логики программы. Реализация данной возможности ведет к повышению эффективности архитектуры и быстродействия разрабатываемого приложения.

Ключевые слова: изучение сред программирования, визуальный интерфейс, десктопное приложение, WindowsPresentationFoundation, язык разметки XAML, преимущества WindowsPresentationFoundation.

Grebneva Daria Mikhailovna, Pakharukov Vitaly Alekseevich

Nizhny Tagil

Exploring Windows Presentation Foundation by Creating a To-Do List Application

At present, the problem of information visualization and the development of graphical interfaces is topical. This article describes the basics of using Windows Presentation Foundation (WPF) technology to create a graphical interface for a desktop application. The concept and features of WPF are highlighted, the possibilities of this technology are considered on the example of developing a simple application "To-Do list". A brief description and structure of the application being developed is given, the presentation of its visual part in the XAML markup language (MainWindow.xaml file) is analyzed in detail. Based on the obtained practical results of the work, it was concluded that there is a significant advantage of using WPF technology in development, which consists in the ability to separate the graphical interface of the application and its behavior from the internal logic of the program. The implementation of this feature leads to an increase in the efficiency of the architecture and performance of the developed application.

Keywords: learning programming environments, visual interface, desktop application, Windows Presentation Foundation, XAML markup language, Windows Presentation Foundation benefits.

В основе Windows Presentation Foundation (WPF) лежит векторная система визуализации, не зависящая от разрешения устройства вывода и созданная с учётом возможностей современного графического оборудования. Основной единицей измерения в графической системе WPF является аппаратно-независимый пиксель, который составляет 1/96 часть дюйма независимо от фактического разрешения экрана. WPF предоставляет средства для создания визуального интерфейса, включая язык XAML (eXtensible Application Markup Language), элементы управления, привязку данных, макеты, двухмерную и трёхмерную графику, анимацию, стили, шаблоны, документы, текст, мультимедиа и оформление [1].

Рассмотрим основные возможности WPF на примере создания однооконного приложения «Список дел» [2]. Суть работы приложения очень проста: пользователь записывает задачи, которые сохраняются в текстовом файле формата JSON. Также доступен просмотр актуальных и выполненных задач. Возможна пометка тегами и приоритетами для большей информативности.

Рис. 1. Диаграмма вариантов использования

Структура приложения в среде Visual Studio будет состоять из следующих элементов.

MainWindow.xaml – главное окно приложения.

TodoModel.cs – класс, в котором представлены поля для будущего отображения в объекте DataGrid

FileIOSevice.cs– класс, хранящий методы чтения и записи данных с JSON формата

App.xaml – файл с главными системными файлами, запускающие приложение.

Style TargetType – файл, который отвечает за установку стилей. Возвращает или задает тип, для которого предназначен данный стиль.

Setter - механизм установки, задающий значение свойства.

Style.Triggers - триггеры, которые следят за значением свойств объектов и в случае их изменения меняют эти свойства обращаясь к механизму Setter.

DataTrigger – триггеры, которые отслеживают изменение необязательных свойств объектов.

Подробнее разберем представление визуальной части приложения в файле MainWindow.xaml, фрагмент кода которого представлен в таблице 1.

Таблица 1

Создание формы главного окна приложения

Фрагмент кода	Описание
<Window x:Class="TodoApp.MainWindow" Title="Заметка" ResizeMode="NoResize" Height="450" Width="800" WindowStartupLocation="CenterScreen" Loaded="Window_Loaded" Icon="icon.png" <Window.Background> <ImageBrush ImageSource="Grey.jpg"/> </Window.Background>	Задание свойств окна приложения: - с фиксированным размером без возможности изменения размера по центру экрана; - иконка приложения, - загрузка фонового изображения она.
<DataGrid.Columns> <DataGridTextColumn Binding="{Binding Path = CreationDate}" IsReadOnly="True" Header="Дата" MinWidth="90" MaxWidth="90"/> <DataGridCheckBoxColumn Binding="{Binding Path = IsDone, UpdateSourceTrigger=PropertyChanged}" IsReadOnly="False" Header="ОК" MinWidth="40" MaxWidth="40"/> <DataGridTextColumn Binding= "{Binding Path = Text}" IsReadOnly="False" Header="Список" Width="*"/> </DataGrid.Columns>	Задание свойств таблицы: - прозрачный фон; - поле «Дата», только для чтения (формируется автомаически); - чекбокс «ОК» для отметки задачи как выполненной; - поле таблицы для записи задач «Список»
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right"> <Image Name="MinButton" Margin="2,2,2,9" Height="33" Width="33" MouseDown="MinButton_MouseDown"> <Image.Style> <Style TargetType="{x:Type Image}"> <Setter Property="Source" Value="Sourse/Minimize_Deactivate.png"/> <Style.Triggers> <DataTrigger Binding="{Binding IsMouseOver, ElementName=MinButton}" Value="True"> <Setter Property="Source" Value="Sourse/Minimize_Activated.png"/> </DataTrigger> </Style.Triggers> <Image Name="CloseButton" Margin="2,2,2,9" Height="33" Width="33" MouseDown="CloseButton_MouseDown">	Компоновка кнопок «Свернуть»/ «Развернуть/ «Закрыть» горизонтально в верхнем правом углу

Как видно из фрагмента кода, подобно структуре веб-страницы на html в XAML есть некоторая иерархия элементов. Элементов верхнего уровня является объект Window, который представляет собой окно приложения. При создании других окон в приложении необходимо всегда начинать объявление интерфейса с элемента Window, поскольку это элемент самого верхнего уровня. Синтаксис любого объектного элемента начинается с левой угловой скобки ( < ), за которым следует сразу же имя типа класса или структуры, для которой создается экземпляр. В элементе Object могут быть объявлены ноль или более атрибутов с одним или несколькими пробелами, разделяющими каждую пару "имя атрибута =" значение ". Элемент и тег должны быть закрыты косой чертой (/), за которой следует правая угловая скобка (>).

Результат отображения главного окна приложения «Список дел», основанного на приведенной в таблице разметке приведен на рисунке 2.

Рис. 2. Главное окно приложения «Список дел»

Главное окно приложения запускает при старте входной точки приложения Main(), которая запускает инициализацию основных компонентов/методов приложения, а также инициализирует и создает графический интерфейс для приложения.

Преимущество использование WPF для создания графического интерфейса приложения заключается в большой гибкости: весь функционал графического интерфейса можно не писать в коде, а только в специальном коде XAML. Триггеры и привязка данных настраиваются без участия кода. Таким образом, можно полностью отделить графический интерфейс и его поведение от внутренней логики программы, что эффективно как для проектирования, так и для архитектуры приложения в целом.

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

1. Мак-Дональд, М. WPF. Windows Presentation Foundation в .NET 4.5 с примерами на C# 5.0 для профессионалов / М. Мак-Дональд. – М.: Вильямс, 2013. – 1024 с. – Текст : непосредственный.

2. Создание простого приложения на C#. – Пошаговое руководство : электронное // https://docs.microsoft.com/ru-ru : [сайт]. – URL: https://docs.microsoft.com/ru-ru/visualstudio/get-started/csharp/tutorial-wpf?view=vs-2022 (дата обращения: 28.07.2021).

Код для цитирования: Скопировать