Использование windows presentation foundation wpf для создания интерактивных настольных приложений

Всем привет!

По разным причинам большинство из нас использует десктопные приложения, как минимум, браузер А у некоторых из нас возникает необходимость в написании своих. В этой статье я хочу пробежаться по процессу разработки несложного десктопного приложения с использованием технологии Windows Presentation Foundation (WPF) и применением паттерна MVVM. Желающих продолжить чтение прошу под кат.

Думаю, необязательно говорить, что WPF — это разработка Microsoft Технология эта предназначена для разработки десктопных приложений под Windows, начиная с Windows XP. Почему именно так? Это связано с тем, что WPF работает поверх платформы .NET, минимальные требования которой — Windows XP и новее. К сожалению, WPF не работает на других платформах, хотя есть шансы, что в ближайшее время это изменится: в стадии разработки находится WPF-based фреймворк Avalonia.

В чём особенность WPF?

Два основных отличия WPF от других средств построения десктопных приложений:

• Язык разметки XAML, предназначенный для разметки самого интерфейса окна.
• Рендеринг посредством DirectX, аппаратное ускорение графики.

Я не буду углубляться в подробности, т.к. это не совсем тема статьи. Если интересно, то гуглить XAML, WPF rendering, milcore.dll и DirectX

О чём эта статья?

Эта статья содержит пример приложения, построенного на технологии WPF:

• MVVM и интерфейс INotifyPropertyChanged. Копия текста.

Я постараюсь ориентировать материал статьи в практическую сторону в стиле «повторяй за мной» с пояснениями.

Что нам понадобится для повторения статьи?

Небольшой опыт разработки на C# Как минимум, нужно хорошо понимать синтаксис языка. Также понадобится Windows-машина (в примерах будет Win 10) с установленной на ней Visual Studio (в примерах будет 2017, есть бесплатная Community версия). При установке VS необходимо будет включить поддержку десктопной разработки под платформу .NET

Так же в этом разделе я опишу создание проекта.

Запускаем VS, создаём новый проект, тип приложения выбираем WPF App (.NET Framework) (можно ввести в строке поиска справа вверху), называем как угодно.

После создания нового проекта откроется окно редактора интерфейса, у меня оно выглядит так

Внизу находится редактор разметки, вверху — предпросмотр интерфейса окна, но можно поменять относительное расположение редактора кода и предпросмотра интерфейса так, что они будут располагаться в горизонтальном порядке, с помощью вот этих кнопок (справа на границе двух областей):

Перед тем, как начать

Элементы окна (их ещё называют контрОлами от слова Control) должны размещаться внутри контейнера или внутри другого элемента типа ContentControl. Контейнер — это специальный контрол, позволяющий разместить внутри себя несколько дочерних контролов и организовать их взаимное расположение. Примеры контейнеров:

• Grid — позволяет организовать элементы по столбцам и строкам, ширина каждого столбца или строки настраивается индивидуально.
• StackPanel — позволяет расположить дочерние элементы в одну строку или столбец.

Есть и другие контейнеры. Поскольку контейнер тоже является контролом, то внутри контейнера могут быть вложенные контейнеры, содержащие вложенные контейнеры и так далее. Это позволяет гибко располагать контролы относительно друг друга. Так же с помощью контейнеров мы можем не менее гибко управлять поведением вложенных контролов при изменении размеров окна.

MVVM и интерфейс INotifyPropertyChanged. Копия текста.

Итогом этого примера станет приложение с двумя контролами, в одном из которых можно редактировать текст, а в другом только просматривать. Изменения из одного в другой будут переходить синхронно без явного копирования текста с помощью привязки (binding).

Итак, у нас есть свежесозданный проект (я назвал его Ex1), перейдём в редактор разметки и первым делом заменим контейнер, указанный по умолчанию (<Grid></Grid>) на <StackPanel></StackPanel>. Этого контейнера будет достаточно, т.к. нам понадобится расположить всего лишь два контрола один над другим. Укажем явно, каким образом будут располагаться компоненты, добавив свойство Orientation=»Vertical». Добавим внутрь стек панели парочку элементов: поле для ввода текста и поле для отображения текста. Поскольку эти контролы не будут содержать вложенного кода, можно описать их самозакрывающимся тегом (см. код ниже). После всех вышеописанных процедур код описания контейнера и вложенных контролов должен принять такой вид:

<StackPanel Orientation="Vertical">
    <TextBox />
    <TextBlock />
</StackPanel>

Теперь сосредоточимся на цели этого примера. Мы хотим, чтобы при наборе текста в текстбоксе этот же текст синхронно отображался в текстблоке, избежав при этом явной операции копирования текста. Нам понадобится некая связующая сущность, и вот тут-то мы и подошли к такой штуке, как привязка (binding), о которой было сказано выше. Привязка в терминологии WPF — это механизм, позволяющий связывать некоторые свойства контролов с некоторыми свойствами объекта C#-класса и выполнять взаимное обновление этих свойств при изменении одной из частей связки (это может работать в одну, в другую или в обе стороны сразу). Для тех, кто знаком с Qt, можно провести аналогию слотов и сигналов. Чтобы не растягивать время, перейдём к коду.

Итак, для организации привязки нужны свойства контролов и некое свойство некоего C#-класса. Для начала разберёмся с XAML-кодом. Текст обоих контролов хранится в свойстве Text, поэтому добавим привязку для этих свойств. Делается это так:

<TextBox Text="{Binding}"/>
<TextBlock Text="{Binding}"/>

Мы сделали привязку, но пока непонятно к чему Нам нужен объект какого-то класса и какое-то свойство в этом объекте, к которому будет выполнена привязка (как ещё говорят, на которое нужно забиндиться).

Так что это за класс? Этот класс называется вьюмоделью (view model) и служит как раз связующим звеном между view (интерфейсом или его частями) и model (моделью, т.е. теми частями кода, которые отвечают за логику приложения. Это позволяет отделить (в какой-то степени) логику приложения от интерфейса (представления, view) и называется паттерном Model-View-ViewModel (MVVM). В рамках WPF этот класс также называется DataContext.

Однако, просто написать класс вьюмодели недостаточно. Нужно ещё как-то оповещать механизм привязки о том, что свойство вьюмодели или свойство вью изменилось. Для этого существует специальный интерфейс INotifyPropertyChanged, который содержит событие PropertyChanged. Реализуем этот интерфейс в рамках базового класса BaseViewModel. В дальнейшем все наши вьюмодели мы будем наследовать от этого базового класса, чтобы не дублировать реализацию интерфейса. Итак, добавим в проект каталог ViewModels, а в этот каталог добавим файл BaseViewModel.cs. Получим такую структуру проекта:

Код реализации базовой вьюмодели:

using System.ComponentModel;

namespace Ex1.ViewModels
{
    public class BaseViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        protected virtual void OnPropertyChanged(string propertyName = "")
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

Создадим для нашего класса MainWindow свою вьюмодель, унаследовавшись от базовой. Для этого в том же каталоге ViewModels создадим файл MainWindowViewModel.cs, внутри которого будет такой код:

namespace Ex1.ViewModels
{
    public class MainWindowViewModel : BaseViewModel
    {

    }
}

Шикарно! Теперь нужно добавить в эту вьюмодель свойство, на которое будем биндить текст наших контролов. Поскольку это текст, тип этого свойства должен быть string:

public string SynchronizedText { get; set; }

В итоге получим такой код

namespace Ex1.ViewModels
{
    public class MainWindowViewModel : BaseViewModel
    {
        public string SynchronizedText { get; set; }
    }
}

Так, кажется, справились. Осталось забиндиться на это свойство из вьюхи и готово. Давайте сделаем это прямо сейчас:

<TextBox Text="{Binding Path=SynchronizedText}"/>
<TextBlock Text="{Binding Path=SynchronizedText}"/>

Ништяк, запускаем проект, набираем текст в текстбокс иииии… ничего не происходит))) Ну, ничего страшного, на самом деле мы идём правильной дорогой, просто пока ещё не дошли до нужной точки.

Предлагаю на минутку остановиться и подумать, чего же нам не хватает. Вьюха у нас есть. Вьюмодель тоже. Свойства вроде забиндили. Нужный интерфейс реализовали. Проделали кучу работы ради копирования жалкой строчки текста, за что нам это???!?!111

Ладно, шутки в сторону. Мы забыли создать объект вьюмодели и кое-что ещё (об этом позже). Сам класс мы описали, но это ничего не значит, ведь у нас нет объектов этого класса. Ок, где нужно хранить ссылку на этот объект? Ближе к началу примера я упомянул некий DataContext, используемый в WPF. Так вот, у любой вью есть свойство DataContext, которому мы можем присвоить ссылку на нашу вьюмодель. Сделаем это. Для этого откроем файл MainWindow.xaml и нажмём F7, чтобы открыть код этой вьюхи. Он практически пустой, в нём есть только конструктор класса окна. Добавим в него создание нашей вьюмодели и поместим её в DataContext окна (не забываем добавить using с нужным неймспейсом):

public MainWindow()
{
    InitializeComponent();
    this.DataContext = new MainWindowViewModel();
}

Это было просто, но этого всё равно не хватает. По-прежнему при запуске приложения никакой синхронизации текста не происходит. Что ещё нужно сделать?

Нужно вызвать событие PropertyChanged при изменении свойства SynchronizedText и сообщить вьюхе о том, что она должна следить за этим событием. Итак, чтобы вызвать событие, модифицируем код вьюмодели:

public class MainWindowViewModel : BaseViewModel
{
    private string _synchronizedText;
    public string SynchronizedText
    {
        get => _synchronizedText;
        set
        {
            _synchronizedText = value;
            OnPropertyChanged(nameof(SynchronizedText));
        }
    }
}

Что мы тут сделали? Добавили скрытое поле для хранения текста, обернули его в уже существующее свойство, а при изменении этого свойства не только меняем скрытое поле, но и вызываем метод OnPropertyChanged, определённый в базовой вьюмодели и вызывающий событие PropertyChanged, объявленное в интерфейсе INotifyPropertyChanged, так же реализованное в базовой вьюмодели. Получается, что при каждом изменении текста возникает событие PropertyChanged, которому передаётся имя свойства вьюмодели, которое было изменено.

Ну, почти всё, финишная прямая! Осталось указать вьюхе, что оно должно слушать событие PropertyChanged:

<TextBox Text="{Binding Path=SynchronizedText, UpdateSourceTrigger=PropertyChanged, Mode=OneWayToSource}"/>
<TextBlock Text="{Binding Path=SynchronizedText, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}"/>

Помимо того, что мы указали, по какому триггеру должно происходить обновление, мы так же указали, в какую сторону это обновление отслеживается: от вью к вьюмодели или наоборот. Поскольку в текстбоксе мы вводим текст, то нам интересны изменения только во вью, поэтому выбираем режим OneWayToSource. В случае с текстблоком всё ровно наоборот: нам интересны изменения во вьюмодели, чтобы отобразить их во вью, поэтому выбираем режим OneWay. Если бы нам нужно было, чтобы изменения отслеживались в обе стороны, можно было не указывать Mode вообще, либо указать TwoWay явно.

Итак, запускаем программу, набираем текст и voi-la! Текст синхронно меняется, и мы нигде ничего не копировали!

Спасибо за внимание, продолжение следует. Будем разбираться с DataTemplate и паттерном Command.

Совершенно новой технологией программирования, которая стала
поддерживаться Microsoft, начиная с библиотеки .NET Framework 3.0, является WPF —
Windows Presentation Fondation (ранее носившая кодовое
название Avalon). Эта библиотека еще не так
развита в плане разнообразия библиотечных компонентов, как Windows Forms, но
открывает для будущего широкие перспективы и является одной из частей нового
API будущих версий Windows.

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

Не смотря на то, что .NET создавалась независимой от платформы
и должна бы работать на любой системе, WPF скорей всего, не сможет жить в любой
среде — уж слишком сильно прослеживается связь с Windows
и DirectX. Уже сейчас есть ограничения на используемую версию ОС Windows:
минимальным требованием является Windows XP SP2.
В Windows XP и Windows 2003 требуется отдельная установка, в то время как в
Windows Vista данная подсистема уже предоставлена.

Новая графическая система Windows Presentation Foundation предназначена
для создания пользовательских интерфейсов, 2D и 3D графики и т. д. Мощь WPF
заключается в том, что 2D графика строится в векторном виде, а это значит,
что интерфейсы будут максимально независимы от разрешения экрана и размера
окна. Они будут легко масштабироваться без потери качества и быстро работать
благодаря максимальному использованию возможностей современных графических
ускорителей.

WPF включает в себя язык разметки XAML —
Extensible Application Markup Language (произносится «заммль» — расширяемый
язык разметки приложений )
как подмножество (диалект) языка XML и используется для создания и инициализации
объектов. Использование языка XAML позволяет участвовать в разработке приложений
людям с различными знаниями и опытом программирования. XAML — это мост между
программистами и дизайнерами.

XAML использует основные четыре категории элементов:

• панели размещения
• элементы
  управления
• элементы, связанные с документом
• графические фигуры

WPF объединяет
документы, формы и мультимедийное содержание в пакет, состоящий из языка
разметки и процедурного языка программирования. Такой подход все больше стирает
грань между Windows— и Web-программированием, сохраняя их лучшие достижения
и традиции. Модель программирования WPF включает в себя одновременно декларативную (разметка)
и императивную (кодовую, процедурную, бизнес-логику) части.

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

Для дизайнеров Microsoft предлагает продукт под названием Microsoft Expression
Blend (http://www.microsoft.com/expression). Это программа специально написана
для специалистов интерфейса, а не программистов и не требует знания языков
программирования.

WPF построен поверх DirectX, что позволяет
использовать всю мощь современного «железа». Так, например, когда WPF определяет
наличие видеокарты, поддерживающей аппаратное ускорение, он автоматически
использует эти возможности карты. Использование WPF требует серьезной
аппаратной поддержки — наличия графического процессора, поддерживающего DirectX 9.

Рендеринг в WPF – векторный, это дает возможность использовать
преимущества мониторов с высоким разрешением, без каких либо дополнительных
усилий программиста или пользователя. Интерфейс пользователя больше не зависит
от конкретных разрешений, введено понятие «виртуального пиксела».
WPF Framework позволяет программистам создавать продвинутые приложения с
богатым пользовательским интерфейсом, работающие с мультимедиа, изощренно работать
с документами: все это объединено в единой программной модели. WPF предлагает
множество различных элементов управления для:

• стандартных форм (такие как кнопки и элементы ввода)
• документов
• изображений и видео
• графических примитивов
• 3D
• различных контейнеров и панелей для размещения элементов управления

XAML содержит ровно одну корневую вершину и является деревом отображения.
На вершине иерархии находится один из контейнерных объектов. Внутри этих объектов
располагаются элементы управления и другие контейнеры. В XAML названия
элементов всегда чувствительны к регистру и точно совпадают с именами классов,
доступных в кодовой части WPF.

Упражнение 1. Пример создания простой кнопки с элементом анимации

В этом упражнении мы просто продемонстрируем на простом примере
некоторые мультимедийные возможности WPF.

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

• Создайте проект WpfApp1 в решении WpfApp как показано на рисунке. Обратите внимание на необходимость
  выбора библиотеки .NET Framework 3.0.

Оболочка создаст заготовку с рабочей областью, представленной
на рисунке

Оболочка предоставляет возможность графического и дескрипторного
способов разработки пользовательского интерфейса, которые являются равнозначными.
Она сама подключила необходимые сборки и сгенерировала код поддержки WPF. На
данном этапе нас интересуют файлы: дескрипторный Window1.xaml и кодовый Window1.xaml.cs,
которые дополняют друг друга при описании одного и того же содержимого — класса Window1
(по умолчанию) в пространстве имен WpfApp1, совпадающем с названием проекта.

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

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

В заготовки дескрипторного XAML-кода видно, что корнем приложения
будет контейнер <Window>, в который при развитии проекта будут включены дочерние
элементы. Все элементы WPF существуют в двух вариантах: дескрипторном
и объектном. Объектное описание размещается в пространствах имен, подключаемых
в кодовую часть проекта с помощью инструкции using для видимости компилятором.
Дескрипторное описание находится в двух пространствах имен: обычном и расширенном.
Эти пространства имен подключаются как значения атрибутов xmlns и xmlns:x в
корневом дескрипторе проекта

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Это не ссылки на какие-то страницы Интернета, таких страниц не
существует, это разработчики платформы просто выбрали такие пространства
имен. Если убрать эти атрибуты из корневого элемента дескрипторной части XAML
проекта, то ни один дескриптор
не будет виден оболочкой.

1.

WINDOWS PRESENTATION
FOUNDATION 4

2. Базовые сведения

Windows Presentation Foundation (WPF) —
система
для
построения
клиентских
приложений Windows с визуально привлекательными
возможностями взаимодействия с пользователем,
графическая (презентационная)
подсистема
в
составе .NET Framework (начиная с версии 3.0),
использующая язык XAML.

3. Преимущества WPF

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

4. Особенности WPF

WPF предустановлена в Windows Vista, Windows 7,
Windows 8.
WPF предоставляет средства для создания
визуального
интерфейса,
включая
язык XAML (Extensible Application Markup
Language),
элементы
управления,
привязку
данных, макеты, двухмерную и трёхмерную
графику, анимацию, стили, шаблоны, документы,
текст, мультимедиа и оформление.

5. Особенности WPF

В основе WPF лежит векторная система
визуализации, не зависящая от разрешения
устройства вывода и созданная с учётом
возможностей
современного
графического
оборудования.
Графической технологией, лежащей в основе WPF,
является DirectX, в отличие от Windows Forms, где
используется GDI/GDI+.
производительность WPF выше, чем у GDI+ за
счёт использования аппаратного ускорения
графики через DirectX

6. Технология Silverlight и WPF

Технологию Silverlight является подмножеством WPF
и
дополнительно
включает
несколько
фундаментальных
классов
из
каркаса
.NET
Framework (встроенные типы данных, классы
коллекций и т. д.).
Если требуется функциональность, которая существует
только в полной версии .NET, то рекомендуется
использовать WPF. Если необходима возможность
выполнять приложение на компьютерах Мас или
устройствах, отличных от стандартного ПК, то
используется Silverlight.
На любой платформе Silverlight обеспечивает единую
технологию построения интерфейса.

7. Создание WPF-приложения

Создание WPF приложения начинается с
процедуры задания размеров и положений
элементов управления (и других элементов) –
компоновки или верстки макета.
В WPF имеется богатая инфраструктура
компоновки. В ее основе лежит механизм
взаимодействия между элементами-родителями
и их потомками.

8. Панели WPF

Родительские
элементы,
поддерживающие
компоновку нескольких детей, называются
панелями.
WPF пять основных встроенных панелей (все в
пространстве имен System.Windows.Controls) в
порядке возрастания сложности (и полезности):
Canvas;
StackPanel;
WrapPanel;
DockPanel;
Grid.

9.

Виды панелей
1)Canvas (холст) — самая простая панель. Использовать для
организации пользовательского интерфейса не рекомендуется.
2)StackPanel последовательно размещает своих потомков в виде
стопки.
3)Панель WrapPanel похожа на StackPanel, но при нехватке
места для одной стопки создает новые строки или столбцы.
4)Панель DockPanel дает простой способ пристыковки элемента
к одной из сторон, растягивая его на всю имеющуюся ширину
или высоту.
5)Grid(сетка) — самая гибкая из всех панелей и, пожалуй,
наиболее употребительная. В проектах VisualStudio и
ExpressionBlend панель Grid используется по умолчанию. Она
позволяет расположить дочерние элементы в несколько строк и
несколько столбцов, не полагаясь на режим автоматического
переноса.

10.

Свойства панелей

11. Свойства Height и Width

Во всех классах, производных от FrameworkElement,
есть свойства Height (высота) и Width (ширина) (типа
double), а также MinHeight, MaxHeight, MinWidth и
MaxWidth, которыми можно пользоваться для
задания допустимых диапазонов значений. Все эти
свойства можно задавать в любой комбинации как в
процедурном коде, так и в XAML.

12. Свойства Margin и Padding

Свойства Margin и Padding тоже связаны с размером
элемента.
Margin задает внешнее поле вокруг элемента, a
Padding — внутренний отступ между содержимым
элемента и его границами.
Результат установки разных свойств Margin и
Padding

13. Выравнивание

С
помощью
свойств
HorizontalAlignment
и
VerticalAlignment
элемент
может
управлять
распределением
избыточного
пространства,
выделенного ему родителем. Значениями свойств
являются
одноименные
перечисления,
которые
определены в пространстве имен System.Windows:
— HorizontalAlignment — Left, Center, Right, Stretch
— VerticalAlignment — Top, Center, Bottom, Stretch
Пример:

14. Применение преобразований

• В WPF имеется ряд встроенных классов
двумерных геометрических преобразований
(производных от
System.Windows.Media.Transform), которые
позволяют изменять размер и положение
элементов независимо от ранее
рассмотренных свойств.
• Встроенные двумерные преобразования, определенные в
пространстве имен System.Windows.Media:
• RotateTransform;
• ScaleTransform;
• SkewTransform;

15.

Примеры преобразований
RotateTransform
SkewTransform
ScaleTransform

16. Маршрутизируемые события и команды

Рассмотрим две важных составных части
инфраструктуры
WPF
маршрутизируемые
события и команды.

17.

Маршрутизируемые события
Сгенерированное
маршрутизируемое
событие
может
распространяться вверх или вниз по визуальному и
логическому дереву, достигая каждого элемента простым и
естественным образом без написания дополнительного кода.
Маршрутизация
событий
позволяет
большинству
приложений вообще не задумываться о наличии визуального
дерева и является основой механизма композиции элементов
в WPF.
События жестко связаны с деталями конкретных действий
пользователя (например, нажатие кнопки или выбор
элемента ListBoxItem из списка). Для различных устройств
ввода определены свои события. Существуют события:
клавиатуры;
мыши;
стилуса.

18.

Команды
В WPF существуют команды – это более абстрактная и слабо
связанная версия событий. Команды представляют действия
независимо от того, как они выглядят в пользовательском
интерфейсе. Каноническими примерами служат команды
Cut (Вырезать), Сору (Копировать) и Paste (Вставить). Мощь
механизма команд основывается на трех основных
особенностях:
в WPF определено много встроенных команд;
в команды встроена автоматическая поддержка жестов
ввода (например, сочетаний клавиш);
встроенное поведение некоторых элементов управления
WPF уже ориентировано на те или иные команды.

19. Элементы управления

Есть три основных разновидности однодетных
элементов управления:
— Кнопки
— Простые контейнеры
— Контейнеры с заголовками

20.

Примеры элементов управления

21. Двумерная графика

Основное отличие WPF от GDI — это то, что в WPF
работающая
применяется
графическая
система,
запоминания,
а
не
полностью
в
режиме
непосредственной визуализации.
В системе, работающей в режиме запоминания,
можно формулировать высокоуровневые указания,
например: «Помести синий квадрат размером 10×10
точку (0,0), — и система сама запомнит и будет
поддерживать это состояние. На самом деле это
означает: «Помести синий квадрат размером 10×10 в
точку (0,0) и следи за тем, чтобы он там оставался».
В дальнейшем нет необходимости возиться с
недействительными областями и перерисовкой, а это
экономит немало времени.

22. Двумерная графика

Существует три типа данных: Drawing, Visual и
Shape.
Drawing — это просто описания путей и фигур с
ассоциированными кистями Brush для заливки и
контура.
Визуальное представление Visual — это один из
способов нарисовать объект Drawing на экране, но класс
Visual открывает также возможность низкоуровневого и
менее
ресурсоемкого
подхода
к
рисованию,
позволяющего обходиться вообще без объектов Drawing.
Фигуры Shape — это готовые объекты Visual,
предлагающие
самый
простой
(но
и
самый
ресурсоемкий) подход к рисованию на экране.

23. Трёхмерная графика

Трехмерная графика (или ЗD-графика) полностью
интегрирована
в
платформу
WPF,
многие
встречающиеся в ней концепции пересекаются с
двумерной графикой и другими компонентами. Как
и в случае двумерной графики, возможности 3D
доступны как из процедурного кода, так и из XAMLразметки. Чтобы отобразить в WPF трехмерную
сцену, необходимо построить граф объектов. После
того как сцена описана, система берет на себя
ответственность за ее визуализацию и перерисовку в
нужные моменты времени.

24. Трёхмерная графика

Задача трехмерной графики — создание по
трехмерным моделям двумерных изображений,
которые можно было бы отобразить на некоем
устройстве вывода, например на экране монитора.
Хотя большинство ЗD-классов — прямые
обобщения двумерного API, есть два понятия, не
имеющих аналогов в двумерном мире:
Материалы Material и источники света Light
Камеры Camera

25.

Камера
В WPF для управления тем, что появится в объекте
Viewport3D, необходимо поместить на 3D-сцену
виртуальную камеру (объект Camera). Для этого
следует позиционировать и ориентировать камеру в
мировой системе координат (иногда для краткости ее
называют мировым пространством). На рисунке
показаны
двумерная
и
трехмерная
системы
координат, применяемые в WPF.

26.

Освещение
трех
основных
Освещение
складывается
из
компонентов:
объекты Light, являющиеся источниками света;
объекты Material, то есть материалы, по-разному
отражающие свет в камеру;
геометрия (Geometry) модели, определяющая углы
падения и отражения света.
Рассмотрим
различные
источники
освещения,
поддерживаемые WPF.

27.

Виды источников света
DirectionalLight (направленный источник
света) — расположен в бесконечности,
освещает сцену параллельными лучами
света.
Этот
класс аппроксимирует
удаленный источник света, например
Солнце.
PointLight
(точечный
источник)
—
излучает свет равномерно во всех
направлениях. Яркость света убывает с
увеличением расстояния от источника.
Класс
PointLight
аппроксимирует
нефокусированные
источники
света,
например электрические лампочки.

28.

Виды источников света
SpotLight (прожектор) — испускает конус
света. Яркость убывает с увеличением
расстояния от источника. Класс SpotLight
аппроксимирует фокусированные
источники света, например луч фонаря.
AmbientLight (рассеянный свет) —
освещает все поверхности равномерно.
Яркий источник рассеянного света создает
плоские изображения из-за отсутствия
теней. Однако не слишком яркий источник
аппроксимирует эффект рассеянного
освещения, созданного диффузно
отражающими поверхностями на сцене.

29.

Анимация, аудио и видео
Анимация
В WPF у анимации есть следующее определение: изменение
значения свойства во времени (цвета, размера, положения и т.п.).
Аудио
Средства работы с аудио представлены следующими классами:
SoundPlayer
SoundPlayerAction
MediaPlayer
MediaElement и MediaTimeline
Видео
Поддержка видео в WPF основана на классе MediaPlayer, а
также на сопутствующих ему классах MediaElement и
MediaTimeline.
Таким
образом,
все
форматы
файлов,
поддерживаемые Windows Media Player (WMV, AVI, MPG и
прочие), поддерживаются и WPF-приложениями.

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

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

Как видно из фрагмента кода, подобно структуре веб-страницы на 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).

Windows Presentation Foundation (WPF) — аналог WinForms, система для построения клиентских приложений Windows с визуально привлекательными возможностями взаимодействия с пользователем, графическая (презентационная) подсистема в составе .NET Framework (начиная с версии 3.0), использующая язык XAML^[1].

WPF предустановлена в Windows Vista (.NET Framework 3.0), Windows 7 (.NET Framework 3.5 SP1), Windows 8 (.NET Framework 4.0 и 4.5), Windows 8.1 (.NET Framework 4.5.1) и Windows 10 (.NET Framework 4.7). С помощью WPF можно создавать широкий спектр как автономных, так и запускаемых в браузере приложений^[2].

Особенности технологии

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

Графической технологией, лежащей в основе WPF, является DirectX, в отличие от Windows Forms, где используется GDI/GDI+^[3]. Производительность WPF выше, чем у GDI+ за счёт использования аппаратного ускорения графики через DirectX.

Также существует урезанная версия CLR, называющаяся WPF/E, она же известна как Silverlight.

Использование разметки XAML

XAML представляет собой язык декларативного описания интерфейса, основанный на XML. Также реализована модель разделения кода и дизайна, позволяющая кооперироваться программисту и дизайнеру. Кроме того, есть встроенная поддержка стилей элементов, а сами элементы легко разделить на элементы управления второго уровня, которые, в свою очередь, разделяются до уровня векторных фигур и свойств/действий. Это позволяет легко задать стиль для любого элемента, например, Button (кнопка).

Средства разработки

Для работы с WPF требуется любой .NET-совместимый язык. В этот список входит множество языков: C#, F#, VB.NET, C++, Ruby, Python, Delphi (Prism), Lua и многие другие.
Для полноценной работы может быть использована как Visual Studio, так и Expression Blend. Первая ориентирована на программирование, а вторая — на дизайн и позволяет делать многие вещи, не прибегая к ручному редактированию XAML. Примеры этому — анимация, стилизация, состояния, создание элементов управления и так далее.

Возможности

WPF предоставляет широкий спектр возможностей по созданию интерактивных настольных приложений:

Привязка данных

Это гибкий механизм, который позволяет через расширения разметки XAML связывать различные данные (от значений свойств элементов управления до общедоступных свойств, реализующих поля базы данных через Entity Framework). Привязка данных представлена классом Binding, который в свою очередь унаследован от MarkupExtension, что позволяет использовать привязки не только в коде, но и в разметке:

<StackPanel Orientation="Horizontal">
   <Slider x:Name="slider" Width="200" Minimum="1" Maximum="100" Value="60"/>        
   <TextBox Text="{Binding ElementName=slider, Path=Value, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
</StackPanel>

Помимо основного класса Binding в WPF реализовано еще несколько механизмов привязок:

• MultiBinding — позволяет создавать множественные привязки, указывая несколько элементов
• TemplateBinding — используется в шаблонах для связывания свойства элемента внутри шаблона со свойством элемента, к которому применен шаблон
• PriorityBinding — ранжирует список привязок и выбирает из них свойство (согласно приоритету) к которому будет применена привязка. Если привязка, имеющая наивысший приоритет успешно возвращает значение, то нет необходимости обрабатывать другие привязки в списке.

Стили

Позволяют создавать стилевое оформление элементов и, как правило, используются только в разметке:

<Button>       
   <Button.Style>           
      <Style TargetType="Button">
          <Setter Property="FontSize" Value="20"/>                
          <Setter Property="Foreground" Value="LimeGreen"/>           
      </Style>       
   </Button.Style>    
</Button>

Если стиль задается в ресурсах (например в словаре ресурсов), то можно использовать атрибут x:Key для указания уникального ключа. Затем в элементе управления, к которому необходимо применить стиль, нужно использовать расширение разметки StaticResource для связывания с этим стилем. Если использовать этот прием, то стили не будут нагромождать разметку.

Шаблоны элементов управления

Позволяют менять графическое оформление элементов и представлены классом ControlTemplate. В отличие от стилей, можно менять не только графическое представление элемента, но и его структуру. При этом шаблон элемента управления задается через свойство Template.

Простой пример круглой кнопки:

   <Button Content="Hey!" Background="LimeGreen" Foreground="White">        
      <Button.Template>            
         <ControlTemplate TargetType="Button">                
            <Grid>                    
               <Ellipse Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" Stretch="Fill"/>                   
               <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>                
            </Grid>            
         </ControlTemplate>        
      </Button.Template>   
   </Button>

Шаблоны данных

В отличие от шаблонов элементов управления, задаются для определенного контекста данных (который в блочных элементах управления задается через свойство DataContext, а в списковых через ItemsSource). Сам шаблон данных представлен классом DataTemplate. Для обозначения типа данных, к которому необходимо применить шаблон, используется свойство DataType.

Ресурсы

Система ресурсов позволяет объединять шаблоны, стили, кисти, анимацию и многие другие интерактивные элементы, что существенно упрощает работу с ними. Ресурсы задаются в свойстве Resources класса FrameworkElement, от которого унаследованы все элементы управления, панели компоновки и даже класс Application. Это позволяет создавать многоуровневую систему ресурсов:

• ресурсы внутри объекта — действительны только для этого объекта
• ресурсы внутри панели компоновки (например Grid) — позволяет задать границу контекста ресурсов на уровне этой панели
• ресурсы внутри окна Window — если в приложении используется несколько окон, то ресурсы одного окна не будут доступны ресурсам другого окна

   <Window.Resources>
        <SolidColorBrush x:Key="SampleBrush" Color="LimeGreen"/>
    </Window.Resources>

    ...

    <Button Content="Hey!" Background="{StaticResource SampleBrush}" />

• ресурсы приложения — доступны повсеместно (как правило задаются в отдельном словаре ресурсов)

Графика

WPF представляет обширный, масштабируемый и гибкий набор графических возможностей:

• Графика, не зависящая от разрешения и устройства. Основной единицей измерения в графической системе WPF является аппаратно-независимый пиксель, который составляет 1/96 часть дюйма независимо от фактического разрешения экрана.
• Дополнительная поддержка графики и анимации. WPF упрощает программирование графики за счет автоматического управления анимацией. Разработчик не должен заниматься обработкой сцен анимации, циклами отрисовки и билинейной интерполяцией
• Аппаратное ускорение. Графическая система WPF использует преимущества графического оборудования, чтобы уменьшить использование ЦП.

Двухмерная графика

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

Двухмерная графика в WPF включает визуальные эффекты, такие как градиенты, точечные рисунки, чертежи, рисунки с видео, поворот, масштабирование и наклон.

Трехмерная графика

WPF также включает возможности трехмерной отрисовки, интегрированные с двухмерной графикой, что позволяет создавать более яркий и интересный пользовательский интерфейс.

Версии

• WPF 3.0 (Ноябрь 2006)
• WPF 3.5 (Ноябрь 2007)
• WPF 3.5 SP1 (Август 2008)
• WPF 4 (Апрель 2010)
• WPF 4.5 (Август 2012)
• WPF 4.5.1 (Октябрь 2013)
• WPF 4.5.2 (Май 2014)
• WPF 4.6 (Июль 2015)

См. также

• Silverlight
• Windows Forms
• QML

Литература

• Мэтью Мак-Дональд. WPF: Windows Presentation Foundation в .NET 4.5 с примерами на C# 5.0 для профессионалов, 4-е издание = Pro WPF 4.5 in C# 2012: Windows Presentation Foundation in .NET 4.5, 4th edition. — М.: «Вильямс», 2013. — 1024 с. — ISBN 978-5-8459-1854-3.
• Мэтью Мак-Дональд. WPF: Windows Presentation Foundation в .NET 4.0 с примерами на C# 2010 для профессионалов = Pro WPF in C# 2010: Windows Presentation Foundation with .NET 4.0. — М.: «Вильямс», 2011. — С. 1024. — ISBN 978-5-8459-1657-0.
• Андерсон, Крис. Основы Windows Presentation Foundation. — СПб.: БХВ-Петербург, 2008. — 432 с. — ISBN 978-5-9775-0265-8.
• Daniel M. Solis. Illustrated WPF. — United States of America: Apress, 2009. — 508 с. — ISBN 978-1-4302-1910-1.

Ссылки

• MSDN Library — Windows Presentation Foundation
• Общие сведения о графике, анимации и мультимедиа WPF

Примечания

Аннотация

Рассматриваются вопросы разработки приложения на основе
технологии WPF. Начальными фазами разработки является проектирование главной
страницы приложения, формирование градиентной заливки фона страницы,
организация навигации по страницам, формирование меню, панели команд,
формирование сетки для данных DataGrid,
создание команд страницы для работы с сотрудниками предприятия и управление
доступностью команд.

Цель

Освоить основные приемы разработки WPF-приложений на основе страничной организации приложения, создания меню,
панели команд, табличных элементов управления и системы команд для выполнения
задач приложения.

1.      
Создание приложения

Как правило, корпоративное приложение представляет собой программу, реализующую
определенную бизнес-задачу (бизнес-функцию). Приложение должно
взаимодействовать с данными, которые располагаются в базе данных информационной
системы. Архитектура приложения обычно включает слой
представления, бизнес-логики и данных. Функциональность каждого слоя приложения
во многом определяется предметной областью информационной системы, но имеются и
общие, основополагающие функции, которые присущи практически любому
корпоративному приложению. Так в приложении необходимо разработать слой
представления, который обеспечит интерфейс пользователя с
системой. Интерфейс может
быть создан с использованием Windows окон и страниц WPF,
которые наполняются различными визуальными элементами контроля. Элементы
контроля должны поддерживать визуальное представление функциональности
системы для пользователя, проводить верификацию вводимых данных и
взаимодействовать с бизнес-классами. Слой
бизнес-логики приложения должен обеспечивать основную функциональность
приложения: формировать бизнес-классы, реализовывать алгоритмы обработки
данных, обеспечивать соединение с данными и их кэширование.
Реализация данного слоя приложения может быть построена на базе классов,
реализующих бизнес-логику, методами классов интерфейсных элементов или методами
классов модели данных. Слой данных должен
обеспечить взаимодействие приложения с данными системы
управления базами данных. В корпоративных приложениях для этого наиболее
целесообразно использовать платформу ADO.NET Entity Framework и модель EDM (Entity
Data Model). Модель EDM описывает структуру данных независимо от формы
хранения.

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

Функции приложения:

1.    
просмотр данных по сотрудникам;

2.    
ввод данных по новому сотруднику;

3.    
редактирование данных по сотруднику;

4.    
удаление данных по сотруднику;

5.    
поиск данных по сотруднику.

Для разработки приложения необходимо создать WPF-проект
(Рисунок
1).
В окне «Создать проект» необходимо проверить установку библиотеки .NET
Framework 4 (1 – на Рисунок 1),
выбрать шаблоны Windows (2 –
на Рисунок 1),
а среди имеющихся шаблонов задать Приложение WPF
и в поле «Имя» ввести имя проекта WPF_FIO
(где FIO — ваша фамилия).

Рисунок 1. Окно создания проекта

После нажатия кнопки «ОК» будет сформирован шаблон проекта. При этом инструментальная система
сгенерирует следующий XAML-документ:

<Window x:Class=»Wpf_Erina.MainWindow»
        xmlns=»http://schemas.microsoft.com/winfx/2006/xaml/presentation»
        xmlns:x=»http://schemas.microsoft.com/winfx/2006/xaml»
        Title=»MainWindow»
Height=»350″ Width=»525″>
    <Grid>
      
    </Grid>
</Window>

Дизайнер
проекта приведен на Рисунок 2.

Рисунок 2. Окно дизайнера проекта

В приведенном XAML-документе имеется
один элемент верхнего уровня <Window>.
Дескриптор </Window> завершает весь документ. В XAML-документе
приведено имя класса MainWindow

x:Class=»Wpf_Erina.MainWindow»

два пространства имен

        xmlns=»http://schemas.microsoft.com/winfx/2006/xaml/presentation«

        xmlns:x=»http://schemas.microsoft.com/winfx/2006/xaml«

и три свойства:

        Title=»MainWindow»
Height=»350″ Width=»525″

Каждый атрибут
соответствует определенному свойству класса Window. Приведенные атрибуты предписывают
WPF создать окно с надписью MainWindow и размером 350х525 единиц. При компиляции и запуске проекта
приложения на дисплей выводится окно, приведенное на Рисунок 3.

Рисунок 3. Окно MainWindow проекта

Когда выполняется компиляция приложения,
XAML-файл, который определяет пользовательский интерфейс (MainWindow.xaml), транслируется в
объявление типа CLR , которое объединяется с логикой
приложения из файла класса отдельного кода (MainWindow.xaml.cs).

Метод InitializeComponent() генерируется во время компиляции приложения
и в исходном коде не присутствует.

Для программного управления элементами управления,
описанными в XAML-документе, необходимо задать XAML атрибут Name. Так для задания имени элементу Grid необходимо
записать следующую разметку:

    <Grid Name=»grid»>

    </Grid>

2.      
Формирование начальной страницы приложения

В последнее время разработчики корпоративных приложений
начали осознавать преимущества технологий веб-дизайна, которые базируются на качественном
дизайне, четком и понятном интерфейсе. Технология WPF позволяет создавать страничную модель (приложения),
с готовыми средствами навигации. Как правило, для
каждой страницы приложения создается файл XAML и файл отдельного кода, например
на языке C#. При компиляции такого приложения компилятор создает производный класс страницы,
который объединяет написанный код с генерируемыми автоматически связующими
элементами.

Страницы можно размещать внутри окон и внутри других
страниц. В WPF при создании страничных приложений контейнером наивысшего уровня
могут быть следующие объекты:

1.    
NavigationWindow,
который представляет собой несколько видоизмененную версию класса Window;

2.    
Frame,
находящийся внутри другого окна или другой страницы;

3.    
Frame,
обслуживаемый непосредственно в Internet Explorer.

Для вставки страницы внутрь окна будем использовать класс Frame (Рисунок
4).
Автоматически будет сгенерирован экземпляр класса Frame с
фиксированными границами (Рисунок
5).

Рисунок 4. Выбор класса Frame в панели инструментов

Рисунок 5. Фрейм с фиксированными границами

В XAML-документ проекта будет
добавлена следующая строка:

<Frame Content=»Frame» HorizontalAlignment=»Left» Height=»100″
Margin=»144,95,0,0″
VerticalAlignment=»Top» Width=»100″/>

С учетом того, что создается
страничное приложение размеры фрейма не нужно
фиксировать, поэтому изменим описание свойств фрейма:

<Frame Name =»frame1″ Margin=»3″ />

В результате фрейм
заполнит всё окно (Рисунок
6):

Рисунок 6. Фрейм, заполняющий всё окно

Созданный фрейм необходим для
размещения в нем страницы WPF-приложения. Класс Page допускает
наличие только одного вложенного элемента. Он не является элементом управления
содержимым и наследуется от класса FrameworkElement.
Класс Page имеет небольшой набор дополнительных свойств, которые
позволяют настраивать его внешний вид, взаимодействовать с контейнером и
использовать навигацию. Для перехода на другую страницу необходимо использовать
навигацию.

Класс Page имеет
следующие свойства:

Background – принимает кисть, которая устанавливает заливку для фона;

Content – принимает один элемент, который отображается на странице.
Обычно в роли такого элемента выступает контейнер макета (элемент Grid или
StackPanel);

Foreground,
FontFamile, FontSize –
определяет используемый по умолчанию внешний вид для текста внутри страницы.
Значение этих свойств наследуется элементами внутри страницы.

WindowWidth,
WindowHeight – определяет внешний вид окна, в которое упаковывается
страница (не действуют, если страница обслуживается во фрейме);

NavigationService – возвращает ссылку на объект NavigationService, которую можно
использовать для отправки пользователя на другую страницу программным путем;

KeepAlive – определяет, должен ли объект страницы оставаться
действующим после перехода пользователя на другую страницу;

ShowsNavigationUI – определяет, должны ли в обслуживающем данную страницу
хосте отображаться навигационные элементы управления;

Title – устанавливает имя, которое должно применяться для страницы
в хронологии навигации;

Window Title – устанавливает заголовок окна, который отображается в строке
заголовка.

Добавим в проект начальную страницу. Для этого в Обозревателе
решений щелкнем правой кнопкой мыши на проекте Wpf_FIO. В контекстном меню
выберем пункт Добавить (1 –
на Рисунок 8),
а в раскрывающемся меню пункт Страница
(2 на Рисунок 7).

Рисунок 7. Меню создания страницы

В окне Добавления нового элемента необходимо
выбрать шаблон «Страница (WPF)»
(1) и задать имя страницы PageMain (2 на Рисунок 8).

Рисунок 8. Окно Добавления нового элемента

В дизайнере проекта сгенерируется страница PageMain.xaml (Рисунок 9).

Рисунок 9. Дизайнер страницы PageMain.xaml

В сгенерированной странице в качестве контейнера верхнего
уровня используется Grid.
Заменим Grid на контейнер StackPanel.

Объект StackPanel имеет
свойство Background,
которое предоставляет кисть для рисования фоновой области элемента. Данное
свойство является сложным, т.е. должно задаваться в следующем виде:

        <StackPanel.Background>

            …

        </StackPanel.Background>

Классы кистей наследуются от
класса System.Windows.Media.Brush и обеспечивают различные эффекты при заполнении фона,
переднего плана или границ элементов. Некоторые классы кистей приведены ниже:

LineaGradientBrush – рисует область, используя линейное градиентное заполнение,
представляющее собой плавный переход от одного цвета к другому;

RadialGradientBrush – рисует область, используя радиальное градиентное
заполнение, представляющее собой плавный переход от одного цвета к другому в
радиальном направлении от центральной точки;

ImageBrush – рисует область, используя графическое изображение, которое
может растягиваться, масштабироваться или многократно повторяться;

DrawingBrush – рисует область, используя объекты Drawing, которые могут быть
пользовательскими фигурами или битовыми картами;

VisualBrush – рисует область, используя объекты Visual.

Создадим градиентную заливку созданной страницы. Для
определения градиентной заливки необходимо создать объект
LinearGradientBrush.
Далее необходимо заполнить свойство LinearGradientBrush.GradientStops коллекцией объектов GradientStop. Каждый объект GradientStop имеет
свойства Offset и Color,
значение которых задаются в соответствии с синтаксисом
» свойство — атрибут «. Свойство Offset может
принимать значение от 0 до 1, определяя области
заполнения градиентом от одного цвета к другому.

Далее приведен фрагмент XAML-документа
для определения градиентной заливки страницы.

Добавим в страницу текстовую строку
«Система внутреннего учета инвестиционной компании».

Подключим созданную страницу к
фрейму. Для этого в разметке фрейма необходимо указать источник его заполнения Source, а также определим
свойства Foreground, BorderBrush и
Background.

Главная
страница приложения в дизайнере представлена на Рисунок 10.

Рисунок 10. Главная страница WPF-приложения в
дизайнере

Изменим свойство Title окна класса Window,
присвоив ему значение «Информационная система
ВУ«. Результат компиляции и выполнения WPF-приложения приведен на Рисунок 11.

Рисунок 11. Главная страница WPF-приложения

Контейнером верхнего уровня главной страницы приложения
является StackPanel.
Для данной панели свойству Background,
которое определяет кисть для рисования фоновой области, установлено сложное значение, определяющее градиентную заливку. С учетом того,
что в приложении предполагается использовать аналогичную градиентную кисть и
для других страниц, то целесообразным является сформировать значение
для данной кисти в виде ресурса, разместив его на уровне приложения. Для этого
найдите в Обозревателе решения файл приложения App.xaml и добавьте в него ресурс:

Сформированный ресурс
для градиентной кисти имеет ключ BackgroundWindowResource. Введение в XAML описание приложения ресурса требует провести изменение
свойства Background панели StackPanel,
использую расширения разметки и ссылку на статический ресурс
BackgroundWindowResource.

На странице WPF-приложения можно
размещать элементы пользовательского интерфейса (элементы
управления) для обеспечения взаимодействия пользователя с бизнес-логикой
системы.

3.      
Навигация страничного приложения

Основная страница должна обеспечивать переход на другие
страницы, обеспечивающие интерфейс для отдельных функций и выход
из системы. Для перехода на другие страницы будем использовать гиперссылки.
Гиперссылки позволяют пользователю перемещаться с одной страницы на другую.
Элемент гиперссылки, соответствующий объекту класса Hyperlink, определяется следующей строкой:

<Hyperlink NavigateUri=»PageName.xaml»>Текст Гиперссылки</Hyperlink>

Класс Hyperlink имеет
свойство NavigateUri.
Данное свойство определяет на какую страницу будет переходить приложение при щелчке на соответствующей гиперссылке.
Например, NavigateUri=»Page2.xaml».

В WPF гиперссылки являются не отдельными, а внутристроковыми
потоковыми элементами, которые должны размещаться внутри другого поддерживающего
их элемента. Это можно сделать, например в элементе TextBlock, который для гиперссылки
является контейнером.

На первой странице создадим следующие гиперссылки: Сотрудники, Клиенты,
Договора, Ценные
бумаги, Сделки и Справка. XAML-описание гиперссылки
для страницы Сотрудники приведено ниже.

Остальные гиперссылки
добавьте самостоятельно.

Для реализации функциональности первого окна WPF-приложения
осталось добавить кнопку выхода.

Результат компиляции и выполнения
WPF-приложения приведен на Рисунок 12.

Рисунок 12. Начальная страница WPF-приложения с
гиперссылками

По условию учебного примера будем
постепенно добавлять функциональность приложения в части обработки данных по сотрудникам компании.

Создадим страницу с именем PageEmployee. В качестве основного контейнера будем использовать панель StackPanel. Определим для неё
градиентную заливку, аналогичную начальной странице приложения.

Страница PageEmployee должна
обеспечивать пользователю просмотр данных по сотрудникам, ввод
данных по новому сотруднику, редактирование, поиск и удаление данных. Доступ
пользователя к функциональности системы будем предоставлять через различные меню.

4.      
Проектирование
интерфейса

В WPF можно создать основное
и контекстное меню.
Кроме того, можно создать панель
инструментов с кнопками, которые будут реализовывать функциональность,
аналогичную пунктам меню.

Основное меню создается с помощью класса
Menu, который
представляет Windows элементы управления меню, позволяющие иерархически организовать элементы,
связанные с командами и обработчиками событий. Меню формируют
из объектов MenuItem (имя пункта меню) и Separator (разделитель).
Класс MenuItem имеет свойство Header,
которое определяет текст элемента меню. Данный класс может хранить коллекцию объектов MenuItem, которая соответствует подпунктам
меню. Класс Separator отображает
горизонтальную линию, разделяющую пункты меню.

Добавим в StackPanel страницы PageEmployee XAML- описание меню,
которое на верхнем уровне будет содержать два пункта Действие и Отчет.
Пункт Действие включает
подпункты Отменить, Создать, Редактировать,
Сохранить, Найти и Удалить.
Между пунктами Отменить, Создать и пунктами Найти, Удалить
добавлены разделительные линии.

Запустим приложение
и выберем ссылку Сотрудники на странице PageEmployee. При выборе пункта
меню Действие появляется
выпадающий список и пунктами подменю (Рисунок 13).

Рисунок 13. Главное меню страницы PageEmployee

Панель инструментов представляет
специализированный контейнер для хранения коллекции
элементов, обычно кнопок. Расположим в панели инструментов кнопки,
функциональное назначение которых будет соответствовать подпунктам меню Действие, то
есть Отменить, Создать, Редактировать,
Сохранить, Найти и Удалить.

На лицевой стороне кнопок поместим графическое изображение соответствующего
действия. Для этого добавим в файл проекта папку Images и
в неё включим графические объекты, которые можно найти в стандартной библиотеке
графических объектов Visual Studio (в
файле VS2013 Image Library.zip,
его всегда можно бесплатно скачать с официального сайта Microsoft, для вас архив можно скачать по ссылке: VS2013 Image Library).

После добавления графических файлов в проект они будут
отображены в обозревателе решений (Рисунок 14).

Рисунок 14. Включение в проект папки Images с файлами рисунков

Теперь можно разработать XAML-описание
панели инструментов для страницы PageEmployee.

Для каждой кнопки зададим свойство Name – имя объекта в программе и свойство ToolTip с текстом
всплывающей подсказки при наведении указателя мыши на кнопку.

Свойство Margin определяет внешние отступы для
кнопки. Задание графического объекта для кнопки осуществляется определением для
объекта Image источника Source,
который должен соответствовать полному пути к графическому файлу.

В дизайнере Visual Studio страница
PageEmployee примет вид, приведенный на Рисунок 15. 

Добавьте все необходимые кнопки на панель инструментов приложения.

Рисунок 15. Страниц PageEmployee с панелью инструментов в
дизайнере