Часть VIII Разработка клиентских приложений для Windows
Глава 24 Введение в Windows Presentation Foundation и XAML
Когда была выпущена версия 1.0 платформы .NET, программисты, нуждающиеся в построении графических настольных приложений, использовали два API-интерфейса под названиями Windows Forms и GDI+, упакованные преимущественно в сборках
System.Windows.Forms.dllSystem.Drawing.dllВ начале этой вводной главы, посвященной WPF, вы ознакомитесь с мотивацией, лежащей в основе новой инфраструктуры для построения графических пользовательских интерфейсов, что поможет увидеть отличия между моделями программирования Windows Forms/GDI+ и WPF. Затем анализируется роль ряда важных классов, включая
ApplicationWindowContentControlControlUIElementFrameworkElementВ настоящей главе будет представлена грамматика на основе XML, которая называется расширяемым языком разметки приложений (Extensible Application Markup Language — XAML). Вы изучите синтаксис и семантику XAML (в том числе синтаксис присоединяемых свойств, роль преобразователей типов и расширений разметки).
Глава завершается исследованием визуальных конструкторов WPF, встроенных в Visual Studio, за счет построения вашего первого приложения WPF. Вы научитесь перехватывать действия клавиатуры и мыши, определять данные уровня приложения и выполнять другие распространенные задачи WPF.
Побудительные причины создания WPF
На протяжении многих лет в Microsoft создавали инструменты для построения графических пользовательских интерфейсов (для низкоуровневой разработки на C/C++/Windows API, VB6, MFC и т.д.) настольных приложений. Каждый инструмент предлагает кодовую базу для представления основных аспектов приложения с графическим пользовательским интерфейсом, включая главные окна, диалоговые окна, элементы управления, системы меню и другие базовые аспекты. После начального выпуска платформы .NET инфраструктура Windows Forms быстро стала предпочтительным подходом к разработке пользовательских интерфейсов благодаря своей простой, но очень мощной объектной модели.
Хотя с помощью Windows Forms было успешно создано множество полноценных настольных приложений, дело в том, что данная программная модель несколько ассиметрична. Попросту говоря, сборки
System.Windows.Forms.dllSystem.Drawing.dll
Как видите, разработчик, использующий Windows Forms, вынужден заимствовать типы из нескольких несвязанных API-интерфейсов и объектных моделей. Несмотря на то что применение всех разрозненных API-интерфейсов синтаксически похоже (в конце концов, это просто код С#), каждая технология требует радикально иного мышления. Например, навыки, необходимые для создания трехмерной анимации с использованием DirectX, совершенно отличаются от тех, что нужны для привязки данных к экранной сетке. Конечно, программисту Windows Forms чрезвычайно трудно в равной степени хорошо овладеть природой каждого API-интерфейса.
Унификация несходных API-интерфейсов
Инфраструктура WPF специально создавалась для объединения ранее несвязанных задач программирования в одну унифицированную объектную модель. Таким образом, при разработке трехмерной анимации больше не возникает необходимости в ручном кодировании с применением API-интерфейса DirectX (хотя это можно делать), поскольку нужная функциональность уже встроена в WPF. Чтобы продемонстрировать, насколько все стало яснее, в табл. 24.2 представлена модель разработки настольных приложений, введенная в .NET 3.0.
Очевидное преимущество здесь в том, что программисты приложений .NET теперь имеют единственный симметричный API-интерфейс для всех распространенных потребностей, появляющихся во время разработки графических пользовательских интерфейсов настольных приложений. Освоившись с функциональностью основных сборок WPF и грамматикой XAML, вы будете приятно удивлены, насколько быстро с их помощью можно создавать сложные пользовательские интерфейсы.
Обеспечение разделения обязанностей через XAML
Возможно, одно из наиболее значительных преимуществ заключается в том, что инфраструктура WPF предлагает способ аккуратного отделения внешнего вида и поведения приложения с графическим пользовательским интерфейсом от программной логики, которая им управляет. Используя язык XAML, пользовательский интерфейс приложения можно определять через разметку XML. Такая разметка (в идеале генерируемая с помощью инструментов вроде Microsoft Visual Studio или Blend для Visual Studio) затем может быть подключена к связанному файлу кода для обеспечения внутренней части функциональности программы.
На заметку! Применение языка XAML не ограничено приложениями WPF. Любое приложение может использовать XAML для описания дерева объектов .NET, даже если они не имеют никакого отношения к видимому пользовательскому интерфейсу.
По мере погружения в WPF вас может удивить, насколько высокую гибкость обеспечивает эта "настольная разметка". Язык XAML позволяет определять в разметке не только простые элементы пользовательского интерфейса (кнопки, таблицы, окна со списками и т.д.), но также интерактивную двумерную и трехмерную графику, анимацию, логику привязки данных и функциональность мультимедиа (наподобие воспроизведения видео).
Кроме того, XAML облегчает настройку визуализации элемента управления. Например, определение круглой кнопки, на которой выполняется анимация логотипа компании, требует всего нескольких строк разметки. Как показано в главе 27, элементы управления WPF могут быть модифицированы посредством стилей и шаблонов, которые позволяют изменять весь внешний вид приложения с минимальными усилиями. В отличие от разработки с помощью Windows Forms единственной веской причиной для построения специального элемента управления WPF с нуля является необходимость в изменении поведения элемента управления (например, добавление специальных методов, свойств или событий либо создание подкласса существующего элемента управления с целью переопределения виртуальных членов). Если нужно просто изменить внешний вид элемента управления (как в случае с круглой анимированной кнопкой), то это можно делать полностью через разметку.
Обеспечение оптимизированной модели визуализации
Наборы инструментов для построения графических пользовательских интерфейсов, такие как Windows Forms, MFC или VB6, выполняют все запросы графической визуализации (включая визуализацию элементов управления вроде кнопок и окон со списком) с применением низкоуровневого API-интерфейса на основе С (GDI), который в течение многих лет был частью Windows. Интерфейс GDI обеспечивает адекватную производительность для типовых бизнес-приложений или простых графических программ; однако если приложению с пользовательским интерфейсом нужна была высокопроизводительная графика, то приходилось обращаться к услугам DirectX.
Программная модель WPF полностью отличается тем, что при визуализации графических данных GDI не используется. Все операции визуализации (двумерная и трехмерная графика, анимация, визуализация элементов управления и т.д.) теперь работают с API-интерфейсом DirectX. Очевидная выгода такого подхода в том, что приложения WPF будут автоматически получать преимущества аппаратной и программной оптимизации. Вдобавок приложения WPF могут задействовать развитые графические службы (эффекты размытия, сглаживания, прозрачности и т.п.) без сложностей, присущих программированию напрямую с применением API-интерфейса DirectX.
На заметку! Хотя WPF переносит все запросы визуализации на уровень DirectX, нельзя утверждать, что приложение WPF будет работать настолько же быстро, как приложение, построенное с использованием неуправляемого языка C++ и DirectX. Несмотря на значительные усовершенствования, вносимые в WPF с каждым новым выпуском, если вы намереваетесь строить настольное приложение, которое требует максимально возможной скорости выполнения (вроде трехмерной игры), то неуправляемый C++ и DirectX по-прежнему будут наилучшим выбором.
Упрощение программирования сложных пользовательских интерфейсов
Чтобы подвести итоги сказанному до сих пор: WPF — это API-интерфейс, предназначенный для построения настольных приложений, который интегрирует разнообразные настольные API-интерфейсы в единую объектную модель и обеспечивает четкое разделение обязанностей через XAML. В дополнение к указанным важнейшим моментам приложения WPF также выигрывают от простого способа интеграции со службами, что исторически было довольно сложным. Ниже кратко перечислены основные функциональные возможности WPF.
• Множество диспетчеров компоновки (гораздо больше, чем в Windows Forms) для обеспечения исключительно гибкого контроля над размещением и изменением позиций содержимого.
• Применение расширенного механизма привязки данных для связывания содержимого с элементами пользовательского интерфейса разнообразными способами.
• Встроенный механизм стилей, который позволяет определять "темы" для приложения WPF.
• Использование векторной графики, поддерживающей автоматическое изменение размеров содержимого с целью соответствия размерам и разрешающей способности экрана, который отображает пользовательский интерфейс приложения.
• Поддержка двумерной и трехмерной графики, анимации, а также воспроизведения видео- и аудио-роликов.
• Развитый типографский API-интерфейс, который поддерживает документы XML Paper Specification (XPS), фиксированные документы (WYSIWYG), документы нефиксированного формата и аннотации в документах (например, API-интерфейс Sticky Notes).
• Поддержка взаимодействия с унаследованными моделями графических пользовательских интерфейсов (такими как Windows Forms, ActiveX и HWND-дескрипторы Win32). Например, в приложение WPF можно встраивать специальные элементы управления Windows Forms и наоборот.
Теперь, получив определенное представление о том, что инфраструктура WPF привносит в платформу, давайте рассмотрим разнообразные типы приложений, которые могут быть созданы с применением данного API-интерфейса. Многие из перечисленных выше возможностей будут подробно исследованы в последующих главах.
Исследование сборок WPF
В конечном итоге инфраструктура WPF — не многим более чем коллекция типов, встроенных в сборки .NET Core. В табл. 24.3 описаны основные сборки, используемые при разработке приложений WPF, на каждую из которых должна быть добавлена ссылка, когда создается новый проект. Как и следовало ожидать, проекты WPF в Visual Studio ссылаются на эти обязательные сборки автоматически.
В этих четырех сборках определены новые пространства имен, а также классы, интерфейсы, структуры, перечисления и делегаты .NET Core. В табл. 24.4 описана роль некоторых (но далеко не всех) важных пространств имен.
В начале путешествия по программной модели WPF вы исследуете два члена пространства имен
System.WindowsApplicationWindowНа заметку! Если вы создавали пользовательские интерфейсы для настольных приложений с использованием API-интерфейса Windows Forms, то имейте в виду, что сборки
System.Windows.Forms.*System.Drawing.*Роль класса Application
Класс
System.Windows.ApplicationRun()StartupExitApplication
Построение класса приложения
В любом приложении WPF нужно будет определить класс, расширяющий
ApplicationMain()StartupExit// Определить глобальный объект приложения для этой программы WPF.class MyApp : Application{ [STAThread] static void Main(string[] args) { // Создать объект приложения. MyApp app = new MyApp(); // Зарегистрировать события Startup/Exit. app.Startup += (s, e) => { /* Запуск приложения */ }; app.Exit += (s, e) => { /* Завершение приложения */ }; }}В обработчике события
StartupExitНа заметку! Метод
Main()[STAThread]Main()Main()Main()Перечисление элементов коллекции Windows
Еще одним интересным свойством класса
ApplicationWindowsWindowApplication.Windowsstatic void MinimizeAllWindows(){ foreach (Window wnd in Application.Current.Windows) { wnd.WindowState = WindowState.Minimized; }}Вскоре будет построено несколько приложений WPF, а пока давайте выясним основную функциональность типа Window и изучим несколько важных базовых классов WPF.
Роль класса Window
Класс
System.Windows.WindowPresentationFramework.dllApplicationWindowНа рис. 24.1 показана цепочка наследования (и реализуемые интерфейсы) для класса
System.Windows.Window
По мере чтения этой и последующих глав вы начнете понимать функциональность, предлагаемую многими базовыми классами WPF. Далее представлен краткий обзор функциональности каждого базового класса (полные сведения ищите в документации по .NET 5).
Роль класса System.Windows.Controls.ContentControl
Непосредственным родительским классом
WindowContentControlContentControlContentContentControlНапример, когда речь идет о типичном "кнопочном" элементе управления, то обычно предполагается, что его содержимым будет простой строковый литерал (ОК, Cancel, Abort и т.д.). Если для описания элемента управления WPF применяется XAML, а значение, которое необходимо присвоить свойству
ContentContentНа заметку! Свойство
ContentОднако содержимое может быть практически любым. Например, пусть нужна "кнопка", которая содержит в себе что-то более интересное, нежели простую строку — возможно специальную графику или текстовый фрагмент. В других инфраструктурах для построения пользовательских интерфейсов, таких как Windows Forms, потребовалось бы создать специальный элемент управления, что могло повлечь за собой написание значительного объема кода и сопровождение полностью нового класса. Благодаря модели содержимого WPF необходимость в этом отпадает.
Когда свойству
Content Для установки сложного содержимого можно также применять синтаксис "свойство-элемент" языка XAML. Взгляните на показанное далее функционально эквивалентное определение
Content Имейте в виду, что не каждый элемент WPF является производным от класса
ConentConrtolРоль класса System.Windows.Controls.Control
В отличие от
ContentControlControlControl<ТаЬ>Control
Роль класса System.Windows.FrameworkElement
Базовый класс
FrameworkElementNameFrameworkElement
Роль класса System.Windows.UIElement
Из всех типов в цепочке наследования класса
WindowUIElementUIElementМодель событий WPF будет подробно описана в главе 25; тем не менее, многие основные события будут выглядеть вполне знакомо (
MouseMoveMouseDownMouseEnterMouseLeaveKeyUpUIElement
Роль класса System.Windows.Media.Visual
Класс
VisualVisualVisualDrawingVisualРоль класса System.Windows.DependencyObject
Инфраструктура WPF поддерживает отдельную разновидность свойств .NET под названием свойства зависимости. Выражаясь упрощенно, данный стиль свойств предоставляет дополнительный код, чтобы позволить свойству реагировать на определенные технологии WPF, такие как стили, привязка данных, анимация и т.д. Чтобы тип поддерживал подобную схему свойств, он должен быть производным от базового класса
DependencyObjectРоль класса System.Windows.Threading.DispatcherObject
Последним базовым классом для типа
WindowSystem.ObjectDispatherObjectDispatcherSystem.Windows.Threading.DispatcherDispatcherDispatcherСинтаксис XAML для WPF
Приложения WPF производственного уровня обычно будут использовать отдельные инструменты для генерации необходимой разметки XAML. Как бы ни были удобны такие инструменты, важно понимать общую структуру языка XAML. Для содействия процессу изучения доступен популярный (и бесплатный) инструмент, который позволяет легко экспериментировать с XAML.
Введение в Kaxaml
Когда вы только приступаете к изучению грамматики XAML, может оказаться удобным в применении бесплатный инструмент под названием Kaxaml. Этот популярный редактор/анализатор XAML доступен по ссылке
https://github.com/punker76/kaxamlНа заметку! Во многих предшествующих изданиях книги мы направляли читателей на веб-сайт
www.kaxaml.comhttps://github.com/punker76https://github.com/punker76/kaxaml/releasesРедактор Kaxaml полезен тем, что не имеет никакого понятия об исходном коде С#, обработчиках ошибок или логике реализации. Он предлагает намного более прямолинейный способ тестирования фрагментов XAML, нежели использование полноценного шаблона проекта WPF в Visual Studio. К тому же Kaxaml обладает набором интегрированных инструментов, в том числе средством выбора цвета, диспетчером фрагментов XAML и даже средством "очистки XAML", которое форматирует разметку XAML на основе заданных настроек. Открыв Kaxaml в первый раз, вы найдете в нем простую разметку для элемента управления
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> Подобно объекту
WindowPageWindowPageNavigationWindowFrameНа заметку! Если в окне разметки Kaxaml заменить элементы
В качестве начального теста введите следующую разметку в панели XAML, находящейся в нижней части окна Kaxaml:
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> В верхней части окна Kaxaml появится визуализированная страница (рис. 24.2).
Во время работы с Kaxaml помните, что данный инструмент не позволяет писать разметку, которая влечет за собой любую компиляцию кода (но разрешено использовать
х:Nameх:ClassFieldModifierClassModifierПространства имен XML и "ключевые слова" XAML
Корневой элемент XAML-документа WPF (такой как
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> Первое пространство имен XML,
http://schemas.microsoft.com/winfx/2006/xaml/presentation*.xamlSystem.WindowsSystem.Windows.ControlsSystem.Windows.DataSystem.Windows.InkSystem.Windows.MediaSystem.Windows.NavigationЭто отображение "один ко многим" в действительности жестко закодировано внутри сборок WPF (
WindowsBase.dllPresentationCore.dllPresentationFramework.dll[XmlnsDefinition]PresentationCore.dllSystem.Windows[assembly: XmlnsDefinition( "http://schemas.microsoft.com/winfx/2006/xaml/presentation", "System.Windows")]Второе пространство имен XML,
http://schemas.microsoft.com/winfx/2006/xamlSystem.Windows.Markup[assembly: XmlnsDefinition( "http://schemas.microsoft.com/winfx/2006/xaml", "System.Windows.Markup")]Одно из правил любого корректно сформированного документа XML (не забывайте, что грамматика XAML основана на XML) состоит в том, что открывающий корневой элемент назначает одно пространство имен XML в качестве первичного пространства имен, которое обычно представляет собой пространство имен, содержащее самые часто применяемые элементы. Если корневой элемент требует включения дополнительных вторичных пространств имен (как видно здесь), то они должны быть определены с использованием уникального префикса (чтобы устранить возможные конфликты имен). По соглашению для префикса применяется просто
хXamlSpecificStuff xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:XamlSpecificStuff="http://schemas.microsoft.com/winfx/2006/xaml"> Очевидный недостаток определения длинных префиксов для пространств имен XML связан с тем, что
XamlSpecificStuffXamlSpecificStuffхПомимо ключевых слов
x:Nameх:Classx:Codehttp://schemas.microsoft.com/winfх/2006/xaml
В дополнение к двум указанным объявлениям пространств имен XML можно (а иногда и нужно) определить дополнительные префиксы дескрипторов в открывающем элементе документа XAML. Обычно так поступают, когда необходимо описать в XAML класс .NET Core, определенный во внешней сборке.
Например, предположим, что было построено несколько специальных элементов управления WPF, которые упакованы в библиотеку по имени
MyControls.dllMyControls.dllclr-namespaceassemblymyCtrls xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:myCtrls="clr-namespace:MyControls;assembly=MyControls" Title="MainWindow" Height="350" Width="525"> Маркеру
clr-namespaceassembly*.dllНа заметку! Если нужно определить в разметке класс, который является частью текущей сборки, но находится в другом пространстве имен .NET Core, то префикс дескриптора
xmlnsassembly=:xmlns:myCtrls="clr-namespace:SomeNamespacelnMyApp"Управление видимостью классов и переменных-членов
Многие ключевые слова вы увидите в действии в последующих главах там, где они потребуются; тем не менее, в качестве простого примера взгляните на следующее XAML-определение
ClassModifierFieldModifierx:Nameх:Classx:Codeх:FieldModifierх:ClassModifier По умолчанию все определения типов C#/XAML являются открытыми (
publicinternalButtoninternal partial class MainWindow : System.Windows.Window, System.Windows.Markup.IComponentConnector{ public System.Windows.Controls.Button myButton; ...}Элементы XAML, атрибуты XAML и преобразователи типов
После установки корневого элемента и необходимых пространств имен XML следующая задача заключается в наполнении корня дочерним элементом. В реальном приложении WPF дочерним элементом будет диспетчер компоновки (такой как
GridStackPanelButtonКак было показано ранее в главе, элементы XAML отображаются на типы классов или структур внутри заданного пространства имен .NET Core, тогда как атрибуты в открывающем дескрипторе элемента отображаются на свойства или события конкретного типа. В целях иллюстрации введите в редакторе Kaxaml следующее определение
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> FontSize="20" Background="Green" Foreground="Yellow"/> Обратите внимание, что присвоенные свойствам значения представлены с помощью простого текста. Это может выглядеть как полное несоответствие типам данных, поскольку после создания такого элемента
Buttonpublic void MakeAButton(){ Button myBtn = new Button(); myBtn.Height = 50; myBtn.Width = 100; myBtn.FontSize = 20; myBtn.Content = "OK!"; myBtn.Background = new SolidColorBrush(Colors.Green); myBtn.Foreground = new SolidColorBrush(Colors.Yellow);}Оказывается, что инфраструктура WPF поставляется с несколькими классами преобразователей типов, которые будут применяться для трансформации простых текстовых значений в корректные типы данных. Такой процесс происходит прозрачно (и автоматически).
Тем не менее, нередко возникает потребность в присваивании атрибуту XAML намного более сложного значения, которое невозможно выразить посредством простой строки. Например, пусть необходимо построить специальную кисть для установки свойства
BackgroundButtonpublic void MakeAButton(){ ... // Необычная кисть для фона. LinearGradientBrush fancyBruch = new LinearGradientBrush(Colors.DarkGreen, Colors.LightGreen, 45); myBtn.Background = fancyBruch; myBtn.Foreground = new SolidColorBrush(Colors.Yellow);}Но можно ли представить эту сложную кисть в виде строки? Нет, нельзя! К счастью, в XAML предусмотрен специальный синтаксис, который можно использовать всякий раз, когда нужно присвоить сложный объект в качестве значения свойства; он называется синтаксисом "свойство-элемент".
Понятие синтаксиса "свойство-элемент" в XAML
Синтаксис "свойство-элемент" позволяет присваивать свойству сложные объекты. Ниже показано описание XAML элемента Button, в котором для установки свойства
BackgroundLinearGradientBrush FontSize="20" Foreground="Yellow"> Обратите внимание, что внутри дескрипторов
Любое свойство может быть установлено с использованием синтаксиса "свойство-элемент", который всегда сводится к следующему шаблону:
<ОпределяющийКласс> <ОпределяющийКласс.СвойствоОпределяющегоКласса> Хотя любое свойство может быть установлено с применением такого синтаксиса, указание значения в виде простой строки, когда подобное возможно, будет экономить время ввода. Например, вот гораздо более многословный способ установки свойства
WidthButtonFontSize="20" Foreground="Yellow"> ... 100 Понятие присоединяемых свойств XAML
В дополнение к синтаксису "свойство-элемент" в XAML поддерживается специальный синтаксис, используемый для установки значения присоединяемого свойства. По существу присоединяемое свойство позволяет дочернему элементу устанавливать значение свойства, которое определено в родительском элементе. Общий шаблон, которому нужно следовать, выглядит так:
<РодительскийЭлемент> <ДочернийЭлемент РодительскийЭлемент.СвойствоРодительскогоЭлемента= "Значение">Самое распространенное применение синтаксиса присоединяемых свойств связано с позиционированием элементов пользовательского интерфейса внутри одного из классов диспетчеров компоновки (
GridDockPanel xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> Width="20" Fill="DarkBlue"/> Здесь определен диспетчер компоновки
CanvasEllipseEllipseCanvasВ отношении присоединяемых свойств следует иметь в виду несколько моментов. Прежде всего, это не универсальный синтаксис, который может применяться к любому свойству любого родительского элемента. Скажем, приведенная далее разметка XAML содержит ошибку:
Canvas.Top="40" Canvas.Left="90" Height="20" Width="20" Fill="DarkBlue"/>Присоединяемые свойства являются специализированной формой специфичной для WPF концепции, которая называется свойством зависимости. Если только свойство не было реализовано в весьма специальной манере, то его значение не может быть установлено с использованием синтаксиса присоединяемых свойств. Свойства зависимости подробно исследуются в главе 25.
На заметку! В Visual Studio имеется средство
IntelliSenseПонятие расширений разметки XAML
Как уже объяснялось, значения свойств чаще всего представляются в виде простой строки или через синтаксис "свойство-элемент". Однако существует еще один способ указать значение атрибута XAML — применение расширений разметки. Расширения разметки позволяют анализатору XAML получать значение для свойства из выделенного внешнего класса. Это может обеспечить большие преимущества, поскольку для получения значений некоторых свойств требуется выполнение множества операторов кода.
Расширения разметки предлагают способ аккуратного расширения грамматики XAML новой функциональностью. Расширение разметки внутренне представлено как класс, производный от
MarkupExtensionх:Arrayx:Nullх:Staticх:ТуреРасширение разметки помещается между фигурными скобками:
<Элемент УстанавливаемоеСвойство = "{ РасширениеРазметки }" />Чтобы увидеть расширение разметки в действии, введите в редакторе Kaxaml следующий код:
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:CorLib="clr-namespace:System;assembly=mscorlib"> xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Fun with Panels!" Height="285" Width="325"> Также вспомните, что попытка помещения внутрь области
WindowContentContentControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Fun with Panels!" Height="285" Width="325"> FontSize="15" Content="Enter Information"/> Понятно, что от окна, допускающего наличие только одного элемента управления, мало толку. Когда окно должно содержать несколько элементов, их потребуется расположить внутри любого числа панелей. В панель будут помещены все элементы пользовательского интерфейса, которые представляют окно, после чего сама панель выступает в качестве единственного объекта, присваиваемого свойству
ContentSystem.Windows.ControlsЭлементы управления типа панелей также разрешено помещать внутрь других панелей (например, элемент управления
DockPanelStackPanel
В последующих нескольких разделах вы узнаете, как применять распространенные типы панелей, копируя заранее определенную разметку XAML в редактор Kaxaml, который был установлен в главе 24. Все необходимые файлы XAML находятся в подкаталоге
PanelMarkupChapter_25PageПозиционирование содержимого внутри панелей Canvas
При наличии опыта работы с Windows Forms панель
CanvasCanvasCanvasЧтобы добавить содержимое к
CanvasCanvasCanvas.ТорCanvas.LeftCanvas.HeightCanvas.WidthCanvas.RightCanvas.BottomДля демонстрации
CanvasSimpleCanvas.xamlCanvasPageWindow xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Fun with Panels!" Height="285" Width="325"> Width="80" Content="OK"/> Width="328" Height="27" FontSize="15" Content="Enter Car Information"/> Width="193" Height="25"/> Width="193" Height="25"/> Content="Pet Name"/> Width="193" Height="25"/> В верхней половине экрана отобразится окно, показанное на рис. 25.1.
Обратите внимание, что порядок объявления элементов содержимого внутри
CanvasCanvas.TopCanvas.BottomCanvas.LeftCanvas.RightНа заметку! Если подэлементы внутри
CanvasCanvas.LeftCanvas.ТорCanvasПрименение типа
CanvasCanvasCanvasПожалуй, наилучшим применением типа
CanvasCanvasПозиционирование содержимого внутри панелей WrapPanel
Панель
WrapPanelWrapPanelCanvasHeightWidthПоскольку содержимое внутри
WrapPanelSimpleWrapPanel.xamlPage FontSize="15" Content="Enter Car Information"/> Когда эта разметка загружена, при изменении ширины окна содержимое выглядит не особо привлекательно, т.к. оно перетекает слева направо внутри окна (рис. 25.2).
По умолчанию содержимое
WrapPanelOrientationVerticalOrientation ="Vertical"> Панель
WrapPanelItemWidthItemHeightHeightWidth xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Fun with Panels!" Height="100" Width="650"> ItemWidth ="200" ItemHeight ="30"> В результате визуализации получается окно, показанное на рис. 25.3 (обратите внимание на размер и позицию элемента управления
ButtonWidth
После просмотра рис. 25.3 вы наверняка согласитесь с тем, что панель
WrapPanelWrapPanelToolBarПозиционирование содержимого внутри панелей StackPanel
Подобно
WrapPanelStackPanelOrientationStackPanelStackPanelStackPanelSimpleStackPanel.xaml xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Fun with Panels!" Height="200" Width="400"> FontSize="15" Content="Enter Car Information"/> 
Если присвоить свойству
OrientationHorizontal
Подобно
WrapPanelStackPanelStackPanelПозиционирование содержимого внутри панелей Grid
Из всех панелей, предоставляемых API-интерфейсами WPF, панель
GridGridGrid1. Определение и конфигурирование каждой колонки.
2. Определение и конфигурирование каждой строки.
3. Назначение содержимого каждой ячейке сетки с применением синтаксиса присоединяемых свойств.
На заметку! Если не определить какие-либо строки и колонки, то по умолчанию элемент
GridGridПервые два шага (определение колонок и строк) выполняются с использованием элементов
Grid.ColumnDefinitionsGrid.RowDefinitionsColumnDefinitionRowDefinitionНиже представлено простое определение
GridSimpleGrid.xaml Grid.Column="0" Content ="Left!"/> Построение системы меню
Системы меню в WPF представлены классом Menu, который поддерживает коллекцию объектов
MenuItemMenuItemClickВ дополнение к обработке события
ClickMouseEnterMouseExitDockPanel MouseLeave ="MouseLeaveArea" Click ="FileExit_Click"/> MouseLeave ="MouseLeaveArea" Click ="ToolsSpellingHints_Click" Cursor="Help" />Ваш элемент управления
ToolBarButtonToolBarContentControlCursorНа заметку! Элемент
ToolbarToolBarTrayToolBarПостроение строки состояния
Элемент управления строкой состояния (
StatusBarDockPanelTextBlockTextBlockToolBar Завершение проектирования пользовательского интерфейса
Финальный аспект проектирования нашего пользовательского интерфейса связан с определением поддерживающего разделители элемента
GridExpanderStackPanelTextBoxGridDockPanelStatusBar Spelling Hints Margin="10,10,10,10"> SpellCheck.IsEnabled ="True" AcceptsReturn ="True" Name ="txtData" FontSize ="14" BorderBrush ="Blue" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto"> Реализация обработчиков событий MouseEnter/MouseLeave
К настоящему моменту пользовательский интерфейс окна готов. Понадобится лишь предоставить реализации оставшихся обработчиков событий. Начните с обновления файла кода C# так, чтобы каждый из обработчиков событий
MouseEnterMouseLeavepublic partial class MainWindow : System.Windows.Window{ ... protected void MouseEnterExitArea(object sender, RoutedEventArgs args) { statBarText.Text = "Exit the Application"; } protected void MouseEnterToolsHintsArea(object sender, RoutedEventArgs args) { statBarText.Text = "Show Spelling Suggestions"; } protected void MouseLeaveArea(object sender, RoutedEventArgs args) { statBarText.Text = "Ready"; }}Теперь приложение можно запустить. Текст в строке состояния должен изменяться в зависимости от того, над каким пунктом меню или кнопкой панели инструментов находится курсор.
Реализация логики проверки правописания
Инфраструктура WPF имеет встроенную поддержку проверки правописания, независимую от продуктов Microsoft Office. Это значит, что использовать уровень взаимодействия с СОМ для обращения к функции проверки правописания Microsoft Word не понадобится: та же самая функциональность добавляется с помощью всего нескольких строк кода.
Вспомните, что при определении элемента управления
TextBoxSpellcheck.IsEnabledtrueДобавьте в метод
ToolsSpellingHints_Click()protected void ToolsSpellingHints_Click(object sender, RoutedEventArgs args){ string spellingHints = string.Empty; // Попробовать получить ошибку правописания // в текущем положении курсора ввода. SpellingError error = txtData.GetSpellingError(txtData.CaretIndex); if (error != null) { // Построить строку с предполагаемыми вариантами правописания. foreach (string s in error.Suggestions) { spellingHints += $"{s}\n"; } // Отобразить предполагаемые варианты и раскрыть элемент Expander. lblSpellingHints.Content = spellingHints; expanderSpelling.IsExpanded = true; }}Приведенный выше код довольно прост. С применением свойства
CaretIndexSpellingErrornullSuggestionsLabelExpanderВот и все! С помощью нескольких строк процедурного кода (и приличной порции разметки XAML) заложены основы для функционирования текстового процессора. После изучения управляющих команд будут добавлены дополнительные возможности.
Понятие команд WPF
Инфраструктура WPF предлагает поддержку того, что может считаться независимыми от элементов управления событиями, через архитектуру команд. Обычное событие .NET Core определяется внутри некоторого базового класса и может использоваться только этим классом или его потомками. Следовательно, нормальные события .NET Core тесно привязаны к классу, в котором они определены.
По контрасту команды WPF представляют собой похожие на события сущности, которые не зависят от специфического элемента управления и во многих случаях могут успешно применяться к многочисленным (и на вид несвязанным) типам элементов управления. Вот лишь несколько примеров: WPF поддерживает команды копирования, вырезания и вставки, которые могут использоваться в разнообразных элементах пользовательского интерфейса (вроде пунктов меню, кнопок панели инструментов и специальных кнопок), а также клавиатурные комбинации (скажем, <Ctrl+C> и <Ctrl+V>).
В то время как другие инструментальные наборы, ориентированные на построение пользовательских интерфейсов (вроде Windows Forms), предлагают для таких целей стандартные события, их применение обычно дает в результате избыточный и трудный в сопровождении код. Внутри модели WPF в качестве альтернативы можно использовать команды. Итогом обычно оказывается более компактная и гибкая кодовая база.
Внутренние объекты команд
Инфраструктура WPF поставляется с множеством встроенных команд, каждую из которых можно ассоциировать с соответствующей клавиатурной комбинацией (или другим входным жестом). С точки зрения программирования команда WPF — это любой объект, поддерживающий свойство (часто называемое
CommandICommandpublic interface ICommand{ // Возникает, когда происходят изменения, влияющие // на то, должна выполняться команда или нет. event EventHandler CanExecuteChanged; // Определяет метод, который выясняет, может ли // команда выполняться в ее текущем состоянии. bool CanExecute(object parameter); // Определяет метод для вызова при обращении к команде. void Execute(object parameter);}В WPF предлагаются разнообразные классы команд, которые открывают доступ к примерно сотне готовых объектов команд. В таких классах определены многочисленные свойства, представляющие специфические объекты команд, каждый из которых реализует интерфейс
ICommand
Подключение команд к свойству Command
Для подключения любого свойства команд WPF к элементу пользовательского интерфейса, который поддерживает свойство
CommandButtonMenuItemBorderBrush ="Black"> MouseLeave ="MouseLeaveArea" Click ="FileExit_Click"/> MouseEnter ="MouseEnterToolsHintsArea" MouseLeave ="MouseLeaveArea" Click ="ToolsSpellingHints_Click"/> Обратите внимание, что свойству
CommandЕсли вы запустите приложение и выделите какую-то часть текста, то сразу же сможете пользоваться новыми пунктами меню. Вдобавок приложение также оснащено возможностью реагирования на стандартную операцию щелчка правой кнопкой мыши, предлагая пользователю те же самые пункты в контекстном меню.
Подключение команд к произвольным действиям
Если объект команды нужно подключить к произвольному событию (специфичному для приложения), то придется прибегнуть к написанию процедурного кода. Задача несложная, но требует чуть больше логики, чем можно видеть в XAML. Например, пусть необходимо, чтобы все окно реагировало на нажатие клавиши <F1>, активизируя ассоциированную с ним справочную систему. Также предположим, что в файле кода для главного окна определен новый метод по имени
SetFICommandBinding()InitializeComponent()public MainWindow(){ InitializeComponent(); SetF1CommandBinding();}Метод
SetFICommandBinding()CommandBindingCommandBindingApplicationCommands.Helpprivate void SetF1CommandBinding(){ CommandBinding helpBinding = new CommandBinding(ApplicationCommands.Help); helpBinding.CanExecute += CanHelpExecute; helpBinding.Executed += HelpExecuted; CommandBindings.Add(helpBinding);}Большинство объектов
CommandBindingCanExecuteExecutedWindowprivate void CanHelpExecute(object sender, CanExecuteRoutedEventArgs e){ // Если нужно предотвратить выполнение команды, // то можно установить CanExecute в false. e.CanExecute = true;}private void HelpExecuted(object sender, ExecutedRoutedEventArgs e){ MessageBox.Show("Look, it is not that difficult. Just type something!", "Help!");}В предыдущем фрагменте кода метод
CanHelpExecute()F1truefalseHelpExecute()Работа с командами Open и Save
Чтобы завершить текущий пример, вы добавите функциональность сохранения текстовых данных во внешнем файле и открытия файлов
*.txtTextBoxНачните с обновления элемента
MenuItemSaveOpenApplicationCommands MouseEnter ="MouseEnterExitArea" MouseLeave ="MouseLeaveArea" Click ="FileExit_Click"/>Вспомните, что все объекты команд реализуют интерфейс
ICommandCanExecuteExecutedПонадобится наполнить коллекцию
CommandBindingsWindow.CommandBindingsCommandBindingWindow xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MySpellChecker" Height="331" Width="508" WindowStartupLocation ="CenterScreen" > Executed="OpenCmdExecuted" CanExecute="OpenCmdCanExecute"/> Executed="SaveCmdExecuted" CanExecute="SaveCmdCanExecute"/> ... Щелкните правой кнопкой мыши на каждом из атрибутов
ExecutedCanExecuteРеализация обработчиков события
CanExecuteExecutedCanExecuteCanExecuteRoutedEventArgstrueprivate void OpenCmdCanExecute(object sender, CanExecuteRoutedEventArgs e){ e.CanExecute = true;}private void SaveCmdCanExecute(object sender, CanExecuteRoutedEventArgs e){ e.CanExecute = true;}Обработчики соответствующего события
ExecutedTextBoxSystem.IOMicrosoft.Win32private void OpenCmdExecuted(object sender, ExecutedRoutedEventArgs e){ // Создать диалоговое окно открытия файла и показать // в нем только текстовые файлы. var openDlg = new OpenFileDialog { Filter = "Text Files |*.txt"}; // Был ли совершен щелчок на кнопке ОК? if (true == openDlg.ShowDialog()) { // Загрузить содержимое выбранного файла. string dataFromFile = File.ReadAllText(openDlg.FileName); // Отобразить строку в TextBox. txtData.Text = dataFromFile; }}private void SaveCmdExecuted(object sender, ExecutedRoutedEventArgs e){ var saveDlg = new SaveFileDialog { Filter = "Text Files |*.txt"}; // Был ли совершен щелчок на кнопке ОК? if (true == saveDlg.ShowDialog()) { // Сохранить данные из TextBox в указанном файле. File.WriteAllText(saveDlg.FileName, txtData.Text); }}На заметку! Система команд WPF более подробно рассматривается в главе 28, где будут создаваться специальные команды на основе
ICommandRelayCommandsИтак, пример и начальное знакомство с элементами управления WPF завершены. Вы узнали, как работать с базовыми командами, системами меню, строками состояния, панелями инструментов, вложенными панелями и несколькими основными элементами пользовательского интерфейса (вроде
TextBoxExpanderПонятие маршрутизируемых событий
Вы могли заметить, что в предыдущем примере кода передавался параметр
RoutedEventArgsEventArgsWpfRoutedEventsButton Click ="btnClickMe_Clicked"> Fancy Button! Height ="25" Width ="50" Cursor="Hand" Canvas.Left="25" Canvas.Top="12"/> Height = "15" Width ="36" Canvas.Top="17" Canvas.Left="32"/> Обратите внимание, что в открывающем определении элемента
ButtonClickClickRoutedEventHandlerobjectSystem.Winodws.RoutedEventArgspublic void btnClickMe_Clicked(object sender, RoutedEventArgs e){ // Делать что-нибудь, когда на кнопке произведен щелчок. MessageBox.Show("Clicked the button");}После запуска приложения окно сообщения будет отображаться независимо от того, на какой части содержимого кнопки был выполнен щелчок (зеленый элемент
EllipseEllipseLabelButtonClickButtonК счастью, маршрутизируемые события WPF позаботятся об автоматическом вызове единственного обработчика события
ClickТочнее говоря, маршрутизируемое событие может использовать три стратегии маршрутизации. Если событие перемещается от точки возникновения вверх к другим областям определений внутри дерева объектов, то его называют пузырьковым событием. И наоборот, если событие перемещается от самого внешнего элемента (например,
WindowРоль пузырьковых маршрутизируемых событий
В текущем примере, когда пользователь щелкает на внутреннем овале желтого цвета, событие
ClickCanvasStackPanelButtonLabelStackPanelButtonБлагодаря такому шаблону пузырьковых маршрутизируемых событий не придется беспокоиться о регистрации специфичных обработчиков события
ClickВ целях иллюстрации предположим, что щелчок на элементе управления
outerEllipseMouseDownEllipseClickMouseDownMouseUp Click ="btnClickMe_Clicked"> Height ="25" MouseDown ="outerEllipse_MouseDown" Width ="50" Cursor="Hand" Canvas.Left="25" Canvas.Top="12"/> Canvas.Top="17" Canvas.Left="32"/> Затем реализуйте подходящий обработчик событий, который в демонстрационных целях будет просто изменять свойство
Titlepublic void outerEllipse_MouseDown(object sender, MouseButtonEventArgs e){ // Изменить заголовок окна. this.Title = "You clicked the outer ellipse!";}Далее можно выполнять разные действия в зависимости от того, на чем конкретно щелкнул конечный пользователь (на внешнем эллипсе или в любом другом месте внутри области кнопки).
На заметку! Пузырьковые маршрутизируемые события всегда перемещаются из точки возникновения до следующей определяющей области. Таким образом, в рассмотренном примере щелчок на элементе
innerEllipseCanvasouterEllipseEllipseCanvasПродолжение или прекращение пузырькового распространения
В текущий момент, когда пользователь щелкает на объекте
outerEllipseMouseDownEllipseClickHandledMouseButtonEventArgstruepublic void outerEllipse_MouseDown(object sender, MouseButtonEventArgs e){ // Изменить заголовок окна. this.Title = "You clicked the outer ellipse!"; // Остановить пузырьковое распространение. e.Handled = true;}В таком случае обнаружится, что заголовок окна изменился, но окно
MessageBoxClickButtonButtonEllipseButtonРоль туннельных маршрутизируемых событий
Строго говоря, маршрутизируемые события по своей природе могут быть пузырьковыми (как было описано только что) или туннельными. Туннельные события (имена которых начинаются с префикса
PreviewPreviewMouseDownMouseDownPreviewMouseDownОбработка туннельных событий выглядит очень похожей на обработку любых других событий: нужно просто указать имя обработчика события в разметке XAML (или при необходимости применить соответствующий синтаксис обработки событий C# в файле кода) и реализовать такой обработчик в коде. Для демонстрации взаимодействия туннельных и пузырьковых событий начните с организации обработки события
PreviewMouseDownouterEllipse MouseDown ="outerEllipse_MouseDown" PreviewMouseDown ="outerEllipse_PreviewMouseDown" Width ="50" Cursor="Hand" Canvas.Left="25" Canvas.Top="12"/>Затем модифицируйте текущее определение класса С#, обновив обработчики событий (для всех объектов) за счет добавления данных о событии в переменную-член
_mouseActivitystringpublic partial class MainWindow : Window{ string _mouseActivity = string.Empty; public MainWindow() { InitializeComponent(); } public void btnClickMe_Clicked(object sender, RoutedEventArgs e) { AddEventInfo(sender, e); MessageBox.Show(_mouseActivity, "Your Event Info"); // Очистить строку для следующего цикла. _mouseActivity = ""; } private void AddEventInfo(object sender, RoutedEventArgs e) { _mouseActivity += string.Format( "{0} sent a {1} event named {2}.\n", sender, e.RoutedEvent.RoutingStrategy, e.RoutedEvent.Name); } private void outerEllipse_MouseDown(object sender, MouseButtonEventArgs e) { AddEventInfo(sender, e); } private void outerEllipse_PreviewMouseDown(object sender, MouseButtonEventArgs e) { AddEventInfo(sender, e); }}Обратите внимание, что ни в одном обработчике событий пузырьковое распространение не останавливается. После запуска приложения отобразится окно с уникальным сообщением, которое зависит от места на кнопке, где был произведен щелчок. На рис. 25.15 показан результат щелчка на внешнем объекте
Ellipse
Итак, почему события WPF обычно встречаются парами (одно туннельное и одно пузырьковое)? Ответ можно сформулировать так: благодаря предварительному просмотру событий появляется возможность выполнения любой специальной логики (проверки достоверности данных, отключения пузырькового распространения и т.п.) перед запуском пузырькового аналога событий. В качестве примера предположим, что создается элемент
TextBoxPreviewKeyDownHandledtrueКак несложно было предположить, при построении специального элемента управления, который поддерживает специальные события, событие допускается реализовать так, чтобы оно могло распространяться пузырьковым (или туннельным) образом по дереву разметки XAML. В настоящей главе мы не рассматриваем процесс создания специальных маршрутизируемых событий (хотя он не особо отличается от построения специального свойства зависимости). Если интересно, загляните в раздел "Routed Events Overview" ("Обзор маршрутизируемых событий") документации по .NET Core, где предлагается несколько обучающих руководств, которые помогут в освоении этой темы.
Более глубокое исследование API-интерфейсов и элементов управления WPF
В оставшемся материале главы будет построено новое приложение WPF с применением Visual Studio. Целью является создание пользовательского интерфейса, который состоит из виджета
TabControlРабота с элементом управления TabControl
Первым делом создайте новый проект приложения WPF по имени
WpfControlsAndAPIsTabControlWidth800Height350Перетащите элемент управления
TabControl VerticalAlignment="Stretch"> Вы заметите, что два элемента типа вкладок предоставляются автоматически. Чтобы добавить дополнительные вкладки, нужно щелкнуть правой кнопкой мыши на узле
TabControlTabControlОбновите разметку каждого элемента управления
TabItemHeaderInk APIData BindingDataGrid
Имейте в виду, что выбранная для редактирования вкладка становится активной, и можно формировать ее содержимое, перетаскивая элементы управления из панели инструментов. Располагая определением основного элемента управления
TabControlПостроение вкладки Ink API
Первая вкладка предназначена для раскрытия общей роли интерфейса Ink API, который позволяет легко встраивать в программу функциональность рисования. Конечно, его применение не ограничивается приложениями для рисования; Ink API можно использовать для разнообразных целей, включая фиксацию рукописного ввода.
На заметку! В оставшейся части главы (и в последующих главах, посвященных WPF) вместо применения разнообразных окон визуального конструктора будет главным образом напрямую редактироваться разметка XAML. Хотя процедура перетаскивания элементов управления работает нормально, чаще всего компоновка оказывается нежелательной (Visual Studio добавляет границы и заполнение на основе того, где размещен элемент), а потому приходится тратить значительное время на очистку разметки XAML.
Начните с замены дескриптора
GridTabItemStackPanel Проектирование панели инструментов
Добавьте (используя редактор XAML) в
StackPanelToolBarInkToolbarHeight60Добавьте в
ToolbarRadioButtonWrapPanelBorder Content="Ink Mode!" IsChecked="True" /> Когда элемент управления
RadioButtonButtonRadioButtonWrapPanelДалее добавьте элемент
SeparatorComboBoxWidth175Margin10,0,0,0ComboBoxItemRedGreenBlueComboBoxSeparator Элемент управления RadioButton
В данном примере необходимо, чтобы три добавленных элемента управления
RadioButtonКласс
RadioButtonIsCheckedtruefalseRadioButtonCheckedUncheckedДобавление кнопок сохранения, загрузки и удаления
Финальным элементом управления внутри
ToolBarGridButtonSeparator Width="70" Content="Save Data"/> Width="70" Content="Load Data"/> Width="70" Content="Clear"/>Добавление элемента управления InkCanvas
Финальным элементом управления для
TabControlInkCanvasToolBarStackPanelПредварительный просмотр окна
Теперь все готово к тестированию программы, для чего понадобится нажать клавишу <F5>. Должны отобразиться три взаимно исключающих переключателя, раскрывающийся список с тремя элементами и три кнопки (рис. 25.17).
Обработка событий для вкладки Ink API
Следующая задача для вкладки
Ink APIClickRadioButtonClickRadioButtonRadioButtonClickedClickSelectionChangedComboBoxColorChangedpublic partial class MainWindow : Window{ public MainWindow() { this.InitializeComponent(); // Вставить сюда код, требуемый при создании объекта. } private void RadioButtonClicked(object sender,RoutedEventArgs e) { // TODO: добавить сюда реализацию обработчика событий. } private void ColorChanged(object sender,SelectionChangedEventArgs e) { // TODO: добавить сюда реализацию обработчика событий. }}Обработчики событий будут реализованы позже, так что оставьте их пока пустыми.
Добавление элементов управления в панель инструментов
Вы добавите элемент управления
InkCanvasЩелкните правой кнопкой мыши где-нибудь в области панели инструментов и выберите в контекстном меню пункт Choose Items (Выбрать элементы). Вскоре появится список возможных компонентов для добавления в панель инструментов. Вас интересует элемент управления
InkCanvas
На заметку! Элементы управления Ink API не совместимы с визуальным конструктором XAML в версии Visual Studio 16.8.3 (текущая версия на момент написания главы) или Visual Studio 16.9 Preview 2. Использовать элементы управления можно, но только не через визуальный конструктор.
Элемент управления InkCanvas
Простое добавление
InkCanvas
Элемент управления
InkCanvasEditingModeInkCanvasEditingModeInkSelectEraseByStrokeНа заметку! Штрих — это визуализация, которая происходит во время одиночной операции нажатия и отпускания кнопки мыши. Элемент управления
InkCanvasStrokeCollectionStrokesОбновите обработчик
RadioButtonClicked()InkCanvasRadioButtonprivate void RadioButtonClicked(object sender,RoutedEventArgs e){ // В зависимости от того, какая кнопка отправила событие, // поместить InkCanvas в нужный режим оперирования. this.MyInkCanvas.EditingMode = (sender as RadioButton)?.Content.ToString() switch { // Эти строки должны совпадать со значениями свойства Content // каждого элемента RadioButton. "Ink Mode!" => InkCanvasEditingMode.Ink, "Erase Mode!" => InkCanvasEditingMode.EraseByStroke, "Select Mode!" => InkCanvasEditingMode.Select, _ => this.MyInkCanvas.EditingMode };}Вдобавок установите
InkComboBoxComboBoxpublic MainWindow(){ this.InitializeComponent(); // Установить режим Ink в качестве стандартного. this.MyInkCanvas.EditingMode = InkCanvasEditingMode.Ink; this.inkRadio.IsChecked = true; this.comboColors.SelectedIndex = 0;}Теперь запустите программу еще раз, нажав <F5>. Войдите в режим
InkEraseSelectОхватив элемент, его можно перемещать по поверхности холста, а также изменять размеры. На рис. 25.20 демонстрируются разные режимы в действии.
Элемент управления ComboBox
После заполнения элемента управления
ComboBoxListBoxSelectedIndex-1SelectedItemSelectedValueToString()Последний фрагмент кода, который понадобится добавить для данной вкладки, отвечает за изменение цвета штрихов, нарисованных в
InkCanvasDefaultDrawingAttributesInkCanvasDrawingAttributesColorChanged()private void ColorChanged(object sender, SelectionChangedEventArgs e){ // Получить выбранный элемент в раскрывающемся списке. string colorToUse = (this.comboColors.SelectedItem as ComboBoxItem)?.Content.ToString(); // Изменить цвет, используемый для визуализации штрихов. this.MyInkCanvas.DefaultDrawingAttributes.Color = (Color)ColorConverter.ConvertFromString(colorToUse);}Вспомните, что
ComboBoxComboBoxIterns В результате обращения к свойству
SelectedItemComboBoxItemObjectObjectComboBoxItemContentRedGreenBlueColorColorConverterОбратите внимание, что элементы управления
ComboBoxListBoxComboBoxStackPanelEllipseLabelWidthComboBox175 SelectionChanged="ColorChanged"> VerticalAlignment="Center" Content="Red"/> VerticalAlignment="Center" Content="Green"/> VerticalAlignment="Center" Content="Blue"/> В определении каждого элемента
StackPanelTagColorChanged()private void ColorChanged(object sender, SelectionChangedEventArgs e){ // Получить свойство Tag выбранного элемента StackPanel. string colorToUse = (this.comboColors.SelectedItem as StackPanel).Tag.ToString(); ...}После запуска программы элемент управления
ComboBox
Сохранение, загрузка и очистка данных InkCanvas
Последняя часть вкладки
Ink APIInkCanvas Width="70" Content="Save Data" Click="SaveData"/> Width="70" Content="Load Data" Click="LoadData"/> Width="70" Content="Clear" Click="Clear"/>Импортируйте пространства имен
System.IOSystem.Windows.Inkprivate void SaveData(object sender, RoutedEventArgs e){ // Сохранить все данные InkCanvas в локальном файле. using (FileStream fs = new FileStream("StrokeData.bin", FileMode.Create)) this.MyInkCanvas.Strokes.Save(fs); fs.Close(); MessageBox.Show("Image Saved","Saved");}private void LoadData(object sender, RoutedEventArgs e){ // Наполнить StrokeCollection из файла. using(FileStream fs = new FileStream("StrokeData.bin", FileMode.Open, FileAccess.Read)) StrokeCollection strokes = new StrokeCollection(fs); this.MyInkCanvas.Strokes = strokes;}private void Clear(object sender, RoutedEventArgs e){ // Очистить все штрихи. this.MyInkCanvas.Strokes.Clear();}Теперь должна появиться возможность сохранения данных в файле, их загрузки из файла и очистки
InkCanvasTabControlВведение в модель привязки данных WPF
Элементы управления часто служат целью для разнообразных операций привязки данных. Выражаясь просто, привязка данных представляет собой действие по подключению свойств элемента управления к значениям данных, которые могут изменяться на протяжении жизненного цикла приложения. Это позволяет элементу пользовательского интерфейса отображать состояние переменной в коде. Например, привязку данных можно использовать для решения следующих задач:
• отмечать флажок элемента управления
Checkbox• отображать в элементах
TextBox• подключать элемент
LabelПри работе со встроенным механизмом привязки данных WPF важно помнить о разнице между источником и местом назначения операции привязки. Как и можно было ожидать, источником операции привязки данных являются сами данные (булевское свойство, реляционные данные и т.д.), а местом назначения (или целью) — свойство элемента управления пользовательского интерфейса, в котором задействуется содержимое данных (вроде свойства элемента управления
CheckBoxTextBoxВ дополнение к привязке традиционных данных инфраструктура WPF делает возможной привязку элементов, как было продемонстрировано в предшествующих примерах. Это значит, что можно привязать (скажем) видимость свойства к свойству состояния отметки флажка. Такое действие было определенно возможным в Windows Forms, но требовало реализации через код. Инфраструктура WPF предлагает развитую экосистему привязки данных, которая способна почти целиком поддерживаться в разметке. Она также позволяет обеспечивать синхронизацию источника и цели в случае изменения значений данных.
Построение вкладки Data Binding
В окне Document Outline замените элемент управления
GridStackPanel Minimum = "1" Maximum = "100" LargeChange="1" SmallChange="1"/> BorderThickness="2" Content = "0"/> Обратите внимание, что объект
ScrollBarmySB1100LabelContentLabel"0"Установка привязки данных
Механизмом, обеспечивающим определение привязки в разметке XAML, является расширение разметки
{Binding}ContentLabellabelSBThumb Content = "{Binding Path=Value, ElementName=mySB}"/>Обратите внимание на значение, присвоенное свойству
ContentLabel{Binding}ElementNameScrollBarPathValueЕсли вы запустите программу снова, то обнаружите, что содержимое метки обновляется на основе значения линейки прокрутки по мере перемещения ползунка.
Свойство DataContext
Для определения операции привязки данных в XAML может использоваться альтернативный формат, при котором допускается разбивать значения, указанные расширением разметки
{Binding}DataContext BorderThickness="2" DataContext = "{Binding ElementName=mySB}" Content = "{Binding Path=Value}" />В текущем примере вывод будет идентичным. С учетом этого вполне вероятно вас интересует, в каких случаях необходимо устанавливать свойство
DataContextПодобным образом можно легко устанавливать один и тот же источник данных для семейства элементов управления, не повторяя избыточные фрагменты XAML-разметки
"{Binding ElementName=X, Path=Y}"StackPanelButtonЧтобы сгенерировать привязки данных для множества элементов управления, вы могли бы применить Visual Studio, но взамен введите модифицированную разметку в редакторе XAML:
DataContext = "{Binding ElementName=mySB}"> ... BorderThickness="2" Content = "{Binding Path=Value}"/> Здесь свойство
DataContextStackPanelLabelButton
Форматирование привязанных данных
Вместо ожидаемого целого числа для представления положения ползунка тип
ScrollBardoubleLabel61.0576923076923616263При желании форматировать данные можно добавить свойство
ContentStringFormat BorderThickness="2" Content = "{Binding Path=Value}" ContentStringFormat="The value is: {0:F0}"/>Если в спецификаторе формата отсутствует какой-либо текст, тогда его понадобится предварить пустым набором фигурных скобок, который является управляющей последовательностью для XAML. Такой прием уведомляет процессор о том, что следующие за
{} BorderThickness="2" Content = "{Binding Path=Value}" ContentStringFormat="{}{0:F0}"/>На заметку! При привязке свойства
TextStringFormatContentПреобразование данных с использованием интерфейса IValueConverter
Если требуется нечто большее, чем просто форматирование данных, тогда можно создать специальный класс, реализующий интерфейс
IValueCVonverterSystem.Windows.DataIValueCVonverterВместо использования свойства форматирования можно применять преобразователь значений для отображения целых чисел внутри элемента управления
LabelMyDoubleConverterusing System;using System.Windows.Data;namespace WpfControlsAndAPIs{ public class MyDoubleConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter,System.Globalization.CultureInfo culture) { // Преобразовать значение double в int. double v = (double)value; return (int)v; } public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { // Поскольку заботиться здесь о "двунаправленной" привязке // не нужно, просто возвратить значение value. return value; } }}Метод
Convert()ScrollBarContentLabelobjectdoubleМетод
ConvertBack()valueTextBox99.999Convert()ConvertBack()nullConvertBack()TextBoxЧтобы применить построенный преобразователь в разметке, сначала нужно создать локальный ресурс, представляющий только что законченный класс. Не переживайте по поводу механики добавления ресурсов; тема будет детально раскрыта в нескольких последующих главах. Поместите показанную ниже разметку сразу после открывающего дескриптора
Window Далее обновите конструкцию привязки для элемента управления
Label BorderThickness="2" Content = "{Binding Path=Value, Converter={StaticResource DoubleConverter}}" />Теперь после запуска приложения вы будете видеть только целые числа.
Установление привязок данных в коде
Специальный преобразователь данных можно также регистрировать в коде. Начните с очистки текущего определения элемента управления
LabelData Binding{Binding} BorderThickness="2" />Добавьте оператор
usingSystem.Windows.DataSetBindings()using System.Windows.Data;...namespace WpfControlsAndAPIs{ public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); ... SetBindings(); } ... private void SetBindings() { // Создать объект Binding. Binding b = new Binding { // Зарегистрировать преобразователь, источник и путь. Converter = new MyDoubleConverter(), Source = this.mySB, Path = new PropertyPath("Value") // Вызвать метод SetBindingO объекта Label. this.labelSBThumb.SetBinding(Label.ContentProperty, b); } } }}Единственная часть метода
SetBindings()SetBinding()ContentPropertyLabelLabelPropertyLabelПостроение вкладки DataGrid
В предыдущем примере привязки данных иллюстрировался способ конфигурирования двух (или большего количества) элементов управления для участия в операции привязки данных. Наряду с тем, что это удобно, возможно также привязывать данные из файлов XML, базы данных и объектов в памяти. Чтобы завершить текущий пример, вы должны спроектировать финальную вкладку элемента управления
DataGridInventoryAutoLotКак и с другими вкладками, начните с замены текущего элемента
GridStackPanelStackPanelDataGridgridInventory С помощью диспетчера пакетов NuGet добавьте в проект следующие пакеты:
•
Microsoft.EntityFrameworkCore•
Microsoft.EntityFrameworkCore.SqlServer•
Microsoft.Extensions.Configuration•
Microsoft.Extensions.Configuration.JsonЕсли вы предпочитаете добавлять пакеты в интерфейсе командной строки .NET Core, тогда введите приведенные далее команды (в каталоге решения):
dotnet add WpfControlsAndAPIs package Microsoft.EntityFrameworkCoredotnet add WpfControlsAndAPIs package Microsoft.EntityFrameworkCore.SqlServerdotnet add WpfControlsAndAPIs package Microsoft.Extensions.Configurationdotnet add WpfControlsAndAPIs package Microsoft.Extensions.Configuration.JsonЗатем щелкните правой кнопкой мыши на имени решения, выберите в контекстном меню пункт Add►Existing Project (Добавить►Существующий проект) и добавьте проекты
AutoLot.DalAutoLot.Dal.Modelsdotnet sln .\Chapter25_AllProjects.sln add ..\Chapter_23\AutoLot.Modelsdotnet sln .\Chapter25_AllProjects.sln add ..\Chapter_23\AutoLot.Daldotnet add WpfControlsAndAPIs reference ..\Chapter_23\AutoLot.Modelsdotnet add WpfControlsAndAPIs reference ..\Chapter_23\AutoLot.DalУбедитесь, что в проекте
AutoLot.DalAutoLot.Dal.ModelsMainWindow.xaml.csusing System.Linq;using AutoLot.Dal.EfStructures;using AutoLot.Dal.Repos;using Microsoft.EntityFrameworkCore;using Microsoft.Extensions.Configuration;Добавьте в
MainWindow.csIConfigurationApplicationDbContextprivate IConfiguration _configuration;private ApplicationDbContext _context;Добавьте новый метод по имени
GetConfigurationAndContext()IConfigurationApplicationDbContextprivate void GetConfigurationAndDbContext(){ _configuration = new ConfigurationBuilder() .SetBasePath(Directory.GetCurrentDirectory()) .AddJsonFile("appsettings.json", true, true) .Build(); var optionsBuilder = new DbContextOptionsBuilder(); var connectionString = _configuration.GetConnectionString("AutoLot"); optionsBuilder.UseSqlServer(connectionString, sqlOptions => sqlOptions.EnableRetryOnFailure()); _context = new ApplicationDbContext(optionsBuilder.Options);}Добавьте в проект новый файл JSON по имени
appsettings.json Always Модифицируйте файл JSON, как показано ниже (приведя строку подключения в соответствие со своей средой):
{ "ConnectionStrings": { "AutoLotFinal": "server=.,5433;Database=AutoLot; User Id=sa;Password=P@ssw0rd;" }}Откройте файл
MainWindow.xaml.csConfigureGrid()ApplicationDbContextprivate void ConfigureGrid(){ using var repo = new CarRepo(_context); gridInventory.ItemsSource = repo .GetAllIgnoreQueryFilters() .ToList() .Select(x=> new { x.Id, Make=x.MakeName, x.Color, x.PetName });}Запустив проект, вы увидите данные, заполняющие сетку. При желании сделать сетку более привлекательной можно применить окно Properties в Visual Studio для редактирования свойств сетки, чтобы улучшить ее внешний вид.
На этом текущий пример завершен. В последующих главах вы увидите в действии другие элементы управления, но к настоящему моменту вы должны чувствовать себя увереннее с процессом построения пользовательских интерфейсов в Visual Studio, а также при работе с разметкой XAML и кодом С#.
Роль свойств зависимости
Подобно любому API-интерфейсу .NET Core внутри WPF используется каждый член системы типов .NET Core (классы, структуры, интерфейсы, делегаты, перечисления) и каждый член типа (свойства, методы, события, константные данные, поля только для чтения и т.д.). Однако в WPF также поддерживается уникальная программная концепция под названием свойство зависимости.
Как и "нормальное" свойство .NET Core (которое в литературе, посвященной WPF, часто называют свойством CLR), свойство зависимости можно устанавливать декларативно с помощью разметки XAML или программно в файле кода. Кроме того, свойства зависимости (подобно свойствам CLR) в конечном итоге предназначены для инкапсуляции полей данных класса и могут быть сконфигурированы как доступные только для чтения, только для записи или для чтения и записи.
Вы будете практически всегда пребывать в блаженном неведении относительно того, что фактически устанавливаете (или читаете) свойство зависимости, а не свойство CLR! Например, свойства
HeightWidthFrameworkElementContentControlContentС учетом всех указанных сходств возникает вопрос: зачем нужно было определять в WPF новый термин для такой знакомой концепции? Ответ кроется в способе реализации свойства зависимости внутри класса. Пример кода будет показан позже, а на высоком уровне все свойства зависимости создаются описанным ниже способом.
• Класс, который определяет свойство зависимости, должен иметь в своей цепочке наследования класс
DependencyObject• Одиночное свойство зависимости представляется как открытое, статическое, допускающее только чтение поле типа
DependencyProperty• Переменная типа
DependencyPropertyDependencyProperty.Register()• В классе будет определено дружественное к XAML свойство CLR, которое вызывает методы, предоставляемые классом
DependencyObjectПосле реализации свойства зависимости предлагают несколько мощных инструментов, которые применяются разнообразными технологиями WPF, в том числе привязкой данных, службами анимации, стилями, шаблонами и т.д. Мотивацией создания свойств зависимости было желание предоставить способ вычисления значений свойств на основе значений из других источников. Далее приведен список основных преимуществ, которые выходят далеко за рамки простой инкапсуляции данных, обеспечиваемой свойствами CLR.
• Свойства зависимости могут наследовать свои значения от определения XAML родительского элемента. Например, если в открывающем дескрипторе Window определено значение для атрибута
FontSizeWindow• Свойства зависимости поддерживают возможность получать значения, которые установлены элементами внутри их области определения XAML, например, в случае установки элементом
ButtonDockDockPanel• Свойства зависимости позволяют инфраструктуре WPF вычислять значение на основе множества внешних значений, что может быть важно для служб анимации и привязки данных.
• Свойства зависимости предоставляют поддержку инфраструктуры для триггеров WPF (также довольно часто используемых при работе с анимацией и привязкой данных).
Имейте в виду, что во многих случаях вы будете взаимодействовать с существующим свойством зависимости способом, идентичным работе с обычным свойством CLR (благодаря оболочке CLR). В предыдущем разделе, посвященном привязке данных, вы узнали, что если необходимо установить привязку данных в коде, то должен быть вызван метод
SetBinding()private void SetBindings(){ Binding b = new Binding { // Зарегистрировать преобразователь, источник и путь. Converter = new MyDoubleConverter(), Source = this.mySB, Path = new PropertyPath("Value") }; // Указать свойство зависимости. this.labelSBThumb.SetBinding(Label.ContentProperty, b);}Вы увидите похожий код в главе 27 во время исследования запуска анимации в коде:
// Указать свойство зависимости.rt.BeginAnimation(RotateTransform.AngleProperty, dblAnim);Потребность в построении специального свойства зависимости возникает только во время разработки собственного элемента управления WPF. Например, когда создается класс
UserControlВ частности, если нужно, чтобы свойство было целью операции привязки данных или анимации, если оно обязано уведомлять о своем изменении, если свойство должно быть в состоянии работать в качестве установщика в стиле WPF или получать свои значения от родительского элемента, то возможностей обычного свойства CLR окажется не достаточно. В случае использования обычного свойства другие программисты действительно могут получать и устанавливать его значение, но если они попытаются применить такое свойство внутри контекста службы WPF, то оно не будет работать ожидаемым образом. Поскольку заранее нельзя узнать, как другие пожелают взаимодействовать со свойствами специальных классов
UserControlИсследование существующего свойства зависимости
Прежде чем вы научитесь создавать специальные свойства зависимости, давайте рассмотрим внутреннюю реализацию свойства
HeightFrameworkElement// FrameworkElement "является" DependencyObject.public class FrameworkElement : UIElement, IFrameworkInputElement, IInputElement, ISupportInitialize, IHaveResources, IQueryAmbient{ ... // Статическое поле только для чтения типа DependencyProperty. public static readonly DependencyProperty HeightProperty; // Поле DependencyProperty часто регистрируется // в статическом конструкторе класса. static FrameworkElement() { ... HeightProperty = DependencyProperty.Register( "Height", typeof(double), typeof(FrameworkElement), new FrameworkPropertyMetadata((double) 1.0 / (double) 0.0, FrameworkPropertyMetadataOptions.AffectsMeasure, new PropertyChangedCallback(FrameworkElement.OnTransformDirty)), new ValidateValueCallback(FrameworkElement.IsWidthHeightValid)); } // Оболочка CLR, реализованная с использованием // унаследованных методов GetValue()/SetValue(). public double Height { get { return (double) base.GetValue(HeightProperty); } set { base.SetValue(HeightProperty, value); } }}Как видите, по сравнению с обычными свойствами CLR свойства зависимости требуют немалого объема дополнительного кода. В реальности зависимость может оказаться даже еще более сложной, чем показано здесь (к счастью, многие реализации проще свойства
HeightВ первую очередь вспомните, что если в классе необходимо определить свойство зависимости, то он должен иметь в своей цепочке наследования
DependencyObjectGetValue()SetValue()FrameworkElementDependencyObjectДалее вспомните, что сущность, где действительно хранится значение свойства (значение
doubleHeightDependencyPropertyPropertypublic static readonly DependencyProperty HeightProperty;Учитывая, что свойства зависимости объявляются как статические поля, они обычно создаются (и регистрируются) внутри статического конструктора класса. Объект
DependencyPropertyDependencyProperty.Register()HeightHeightProperty = DependencyProperty.Register( "Height", typeof(double), typeof(FrameworkElement), new FrameworkPropertyMetadata((double)0.0, FrameworkPropertyMetadataOptions.AffectsMeasure, new PropertyChangedCallback(FrameworkElement.OnTransformDirty)), new ValidateValueCallback(FrameworkElement.IsWidthHeightValid));Первым аргументом, передаваемым методу
DependencyProperty.Register()HeightdoubleFrameworkElementHeightPropertyFrameworkElementЧетвертый аргумент, передаваемый методу
DependencyProperty.Register()FrameworkPropertyMetadataFrameworkPropertyMetadataFrameworkPropertyMetadataOptionsFrameworkPropertyMetadatanew FrameworkPropertyMetadata( // Стандартное значение свойства. (double)0.0, // Параметры метаданных. FrameworkPropertyMetadataOptions.AffectsMeasure, // Делегат, который указывает на метод, // вызываемый при изменении свойства. new PropertyChangedCallback(FrameworkElement.OnTransformDirty))Поскольку последний аргумент конструктора
FrameworkPropertyMetadataOnTransformDirty()FrameworkElementOnTransformDirty()PropertyChangeCallbackЭто подводит к финальному параметру метода
DependencyProperty.Register()ValidateValueCallbackFrameworkElementnew ValidateValueCallback(FrameworkElement.IsWidthHeightValid)Метод
IsWidthHeightValid()private static bool IsWidthHeightValid(object value){ double num = (double) value; return ((!DoubleUtil.IsNaN(num) && (num >= 0.0)) && !double.IsPositiveInfinity(num));}После того, как объект
DependencyPropertyHeightgetsetdoubleGetValue()SetValue()System.Windows.DependencyObjectpublic double Height{ get { return (double) base.GetValue(HeightProperty); } set { base.SetValue(HeightProperty, value); }}Важные замечания относительно оболочек свойств CLR
Подводя итог, следует отметить, что свойства зависимости выглядят как обычные свойства, когда вы извлекаете или устанавливаете их значения в разметке XAML либо в коде, но "за кулисами" они реализованы с помощью гораздо более замысловатых программных приемов. Вспомните, что основным назначением этого процесса является построение специального элемента управления, имеющего специальные свойства, которые должны быть интегрированы со службами WPF, требующими взаимодействия через свойства зависимости (например, с анимацией, привязкой данных и стилями).
Несмотря на то что часть реализации свойства зависимости предусматривает определение оболочки CLR, вы никогда не должны помещать логику проверки достоверности в блок set. К тому же оболочка CLR свойства зависимости не должна делать ничего кроме вызовов
GetValue()SetValue()Исполняющая среда WPF сконструирована таким образом, что если написать разметку XAML, которая выглядит как установка свойства, например:
то исполняющая среда вообще обойдет блок установки свойства
HeightSetValue()HeightDependencyPropertySetValue()HeightGetValue()На самом деле установку или получение значения в разметке с применением оболочки CLR следует считать способом сообщения исполняющей среде WPF о необходимости вызова методов
GetValue()/SetValue()Button b = new Button();b.Height = 10;В таком случае, если блок
setHeightSetValue()Запомните основное правило: при регистрации свойства зависимости используйте делегат
ValidateValueCallbackПостроение специального свойства зависимости
Если к настоящему моменту вы слегка запутались, то такая реакция совершенно нормальна. Создание свойств зависимости может требовать некоторого времени на привыкание. Как бы то ни было, но это часть процесса построения многих специальных элементов управления WPF, так что давайте рассмотрим, каким образом создается свойство зависимости.
Начните с создания нового проекта приложения WPF по имени
CustomDependencyPropertyShowNumberControl.xamlНа заметку! Более подробные сведения о классе
UserControlПодобно окну типы
UserControlLabelGrid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="clr-namespace: CustomDependencyProperty" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="300"> Background="LightBlue"/> В файле кода для данного элемента создайте обычное свойство .NET Core, которое упаковывает поле типа
intContentLabelpublic partial class ShowNumberControl : UserControl{ public ShowNumberControl() { InitializeComponent(); } // Обычное свойство .NET Core. private int _currNumber = 0; public int CurrentNumber { get => _currNumber; set { _currNumber = value; numberDisplay.Content = CurrentNumber.ToString(); } }}Обновите определение XAML в
MainWindow.xmlStackPanel xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:myCtrls="clr-namespace: CustomDependencyProperty" xmlns:local="clr-namespace: CustomDependencyProperty" mc:Ignorable="d" Title="Simple Dependency Property App" Height="450" Width="450" WindowStartupLocation="CenterScreen"> HorizontalAlignment="Left" x:Name="myShowNumberCtrl" CurrentNumber="100"/> Похоже, что визуальный конструктор Visual Studio корректно отображает значение, установленное в свойстве
CurrentNumber
Однако что, если к свойству
CurrentNumbermyCtrls:ShowNumberControl После запуска приложения объект анимации не сможет найти подходящую цель и сгенерируется исключение. Причина в том, что свойство
CurrentNumberТеперь добавьте показанный ниже код, чтобы свойство
CurrentNumberpublic int CurrentNumber{ get => (int)GetValue(CurrentNumberProperty); set => SetValue(CurrentNumberProperty, value);}public static readonly DependencyProperty CurrentNumberProperty = DependencyProperty.Register("CurrentNumber", typeof(int), typeof(ShowNumberControl), new UIPropertyMetadata(0));Работа похожа на ту, что делалась в реализации свойства
HeightUIPropertyMetadata0FrameworkPropertyMetadataCurrentNumberДобавление процедуры проверки достоверности данных
Хотя у вас есть свойство зависимости по имени
CurrentNumberCurrentNumberДобавьте в метод
DependencyProperty.Register()ValidateValueCallbackValidateCurrentNumberЗдесь
ValidateValueCallbackboolobjectobjectValidateCurrentNumbertruefalsepublic static readonly DependencyProperty CurrentNumberProperty = DependencyProperty.Register("CurrentNumber", typeof(int), typeof(ShowNumberControl), new UIPropertyMetadata(100), new ValidateValueCallback(ValidateCurrentNumber));// Простое бизнес-правило: значение должно находиться// в диапазоне между 0 и 500.public static bool ValidateCurrentNumber(object value) => Convert.ToInt32(value) >= 0 && Convert.ToInt32(value) <= 500;Реагирование на изменение свойства
Итак, допустимое число уже есть, но анимация по-прежнему отсутствует. Последнее изменение, которое потребуется внести — передать во втором аргументе конструктора
UIPropertyMrtadataPropertyChangedCallbackDependencyObjectDependencyPropertyChangeEventArgs// Обратите внимание на второй параметр конструктора UIPropertyMetadata.public static readonly DependencyProperty CurrentNumberProperty = DependencyProperty.Register("CurrentNumber", typeof(int), typeof(ShowNumberControl), new UIPropertyMetadata(100, new PropertyChangedCallback(CurrentNumberChanged)), new ValidateValueCallback(ValidateCurrentNumber));Конечной целью внутри метода
CurrentNumberChamged()ContentLabelCurrentNumberCurrentNumberChanged()DependencyPropertyLabelShowNumberControlDependencyObjectContentLabelprivate static void CurrentNumberChanged(DependencyObject depObj, DependencyPropertyChangedEventArgs args){ // Привести DependencyObject к ShowNumberControl. ShowNumberControl c = (ShowNumberControl)depObj; // Получить элемент управления Label в ShowNumberControl. Label theLabel = c.numberDisplay; // Установить для Label новое значение. theLabel.Content = args.NewValue.ToString();}Видите, насколько долгий путь пришлось пройти, чтобы всего лишь изменить содержимое метки! Преимущество заключается в том, что теперь свойство зависимости
CurrentNumberНа этом обзор свойств зависимости WPF завершен. Хотя теперь вы должны гораздо лучше понимать, что они позволяют делать, и как создавать собственные свойства подобного рода, имейте в виду, что многие детали здесь не были раскрыты.
Если вам однажды понадобится создавать множество собственных элементов управления, поддерживающих специальные свойства, тогда загляните в подраздел "Properties" ("Свойства") раздела "Systems" ("Системы") документации по WPF
(https://docs.microsoft.com/ru-ru/dotnet/desktop/wpf/Резюме
В главе рассматривались некоторые аспекты элементов управления WPF, начиная с обзора набора инструментов для элементов управления и роли диспетчеров компоновки (панелей). Первый пример был посвящен построению простого приложения текстового процессора. В нем демонстрировалось использование интегрированной в WPF функциональности проверки правописания, а также создание главного окна с системой меню, строкой состояния и панелью инструментов.
Более важно то, что вы научились строить команды WPF. Эти независимые от элементов управления события можно присоединять к элементу пользовательского интерфейса или входному жесту для автоматического наследования готовой функциональности (например, операций с буфером обмена).
Кроме того, вы узнали немало сведений о построении пользовательских интерфейсов в XAML и попутно ознакомились с интерфейсом Ink API, предлагаемым WPF. Вы также получили представление об операциях привязки данных WPF, включая использование класса
DataGridAutoLotНаконец, вы выяснили, что инфраструктура WPF добавляет уникальный аспект к традиционным программным примитивам .NET Core, в частности к свойствам и событиям. Как было показано, механизм свойств зависимости позволяет строить свойство, которое может интегрироваться с набором служб WPF (анимации, привязки данных, стили и т.д.). В качестве связанного замечания: механизм маршрутизируемых событий предоставляет событию способ распространяться вверх или вниз по дереву разметки.
Глава 26 Службы визуализации графики WPF
В настоящей главе рассматриваются возможности графической визуализации WPF. Вы увидите, что инфраструктура WPF предоставляет три отдельных способа визуализации графических данных: фигуры, рисунки и визуальные объекты. Разобравшись в преимуществах и недостатках каждого подхода, вы приступите к исследованию мира интерактивной двумерной графики с использованием классов из пространства имен
System.Windows.ShapesПопутно затрагиваются многие связанные темы, такие как создание специальных кистей и перьев, применение графических трансформаций к визуализации и выполнение операций проверки попадания. В частности вы увидите, как можно упростить решение задач кодирования графики с помощью интегрированных инструментов Visual Studio и дополнительного средства под названием Inkscape.
На заметку! Графика является ключевым аспектом разработки WPF. Даже если вы не строите приложение с интенсивной графикой (вроде видеоигры или мультимедийного приложения), то рассматриваемые в главе темы критически важны при работе с такими службами, как шаблоны элементов управления, анимация и настройка привязки данных.
Понятие служб визуализации графики WPF
В WPF используется особая разновидность графической визуализации, которая известна под названием графика режима сохранения (retained mode). Выражаясь просто, это означает, что после применения разметки XAML или процедурного кода для генерирования графической визуализации инфраструктура WPF несет ответственность за сохранение визуальных элементов и обеспечение их корректной перерисовки и обновления оптимальным способом. Таким образом, визуализируемые графические данные присутствуют постоянно, даже когда конечный пользователь скрывает изображение, изменяя размер окна или сворачивая его, перекрывая одно окно другим и т.д.
По разительному контрасту предшествующие версии API-интерфейсов графической визуализации от Microsoft (включая GDI+ в Windows Forms) были графическими системами прямого режима (immediate mode). В такой модели ответственность за корректное "запоминание" и обновление визуализируемых элементов на протяжении времени жизни приложения возлагалась на программиста. Например, в приложении Windows Forms визуализация фигуры вроде прямоугольника предусматривала обработку события
PaintOnPaint()GraphicsInvalidate()Переход от графики прямого режима к графике режима сохранения — действительно удачное решение, т.к. программистам приходится писать и сопровождать гораздо меньший объем рутинного кода для поддержки графики. Однако речь не идет о том, что API-интерфейс графики WPF полностью отличается от более ранних инструментальных наборов визуализации. Например, как и GDI+, инфраструктура WPF поддерживает разнообразные типы объектов кистей и перьев, приемы проверки попадания, области отсечения, графические трансформации и т.д. Поэтому если у вас есть опыт работы с GDI+ (или GDI на языке C/C++), то вы уже имеете неплохое представление о способе выполнения базовой визуализации в WPF.
Варианты графической визуализации WPF
Как и с другими аспектами разработки приложений WPF, существует выбор из нескольких способов выполнения графической визуализации после принятия решения делать это посредством разметки XAML или процедурного кода C# (либо их комбинации). В частности, инфраструктура WPF предлагает следующие три индивидуальных подхода к визуализации графических данных.
• Фигуры. Инфраструктура WPF предоставляет пространство имен
System.Windows.Shapes• Рисунки и геометрические объекты. Второй способ визуализации графических данных в WPF предполагает работу с классами, производными от абстрактного класса
System.Windows.Media.DrawingGeometryDrawingImageDrawing• Визуальные объекты. Самый быстрый и легковесный способ визуализации графических данных в WPF предусматривает работу с визуальным уровнем, который доступен только через код С#. С применением классов, производных от
System.Windows.Media.VisualПричина предоставления разных способов решения той же самой задачи (т.е. визуализации графических данных) связана с расходом памяти и в конечном итоге с производительностью приложения. Поскольку WPF является системой, интенсивно использующей графику, нет ничего необычного в том, что приложению требуется визуализировать сотни или даже тысячи различных изображений на поверхности окна, и выбор реализации (фигуры, рисунки или визуальные объекты) может оказать огромное влияние.
Важно понимать, что при построении приложения WPF высока вероятность использования всех трех подходов. В качестве эмпирического правила запомните: если нужен умеренный объем интерактивных графических данных, которыми может манипулировать пользователь (принимающих ввод от мыши, отображающих всплывающие подсказки и т.д.), то следует применять члены из пространства имен
System.Windows.ShapesНапротив, рисунки и геометрические объекты лучше подходят, когда необходимо моделировать сложные и по большей части не интерактивные векторные графические данные с использованием разметки XAML или кода С#. Хотя рисунки и геометрические объекты способны реагировать на события мыши, а также поддерживают проверку попадания и операции перетаскивания, для выполнения таких действий обычно приходится писать больше кода.
Наконец, если требуется самый быстрый способ визуализации значительных объемов графических данных, то должен быть выбран визуальный уровень. Например, предположим, что инфраструктура WPF применяется для построения научного приложения, которое должно отображать тысячи точек на графике данных. За счет использования визуального уровня точки на графике можно визуализировать оптимальным образом. Как будет показано далее в главе, визуальный уровень доступен только из кода С#, но не из разметки XAML.
Независимо от выбранного подхода (фигуры, рисунки и геометрические объекты или визуальные объекты) всегда будут применяться распространенные графические примитивы, такие как кисти (для заполнения ограниченных областей), перья (для рисования контуров) и объекты трансформаций (которые видоизменяют данные). Исследование начинается с классов из пространства имен
System.Windows.ShapesНа заметку! Инфраструктура WPF поставляется также с полнофункциональным API-интерфейсом, который можно использовать для визуализации и манипулирования трехмерной графикой, но в книге он не рассматривается.
Визуализация графических данных с использованием фигур
Члены пространства имен
System.Windows.ShapesPresentationFramework.dllShapeEllipseRectangleLinePolygonPolylinePathАбстрактный класс
ShapeFrameworkElementUIElementShapeСкажем, для выяснения, щелкнул ли пользователь на визуализированном изображении, достаточно обработать событие
MouseDownRectangleGridWindowMouseDown="myRect_MouseDown"/>то можно реализовать обработчик события
MouseDownprivate void myRect_MouseDown(object sender, MouseButtonEventArgs e){ // Изменить цвет прямоугольника в результате щелчка на нем. myRect.Fill = Brushes.Pink;}В отличие от других инструментальных наборов, предназначенных для работы с графикой, вам не придется писать громоздкий код инфраструктуры, в котором вручную сопоставляются координаты мыши с геометрическим объектом, выясняется попадание курсора внутрь границ, выполняется визуализация в неотображаемый буфер и т.д. Члены пространства имен
System.Windows.ShapesButtonНедостаток всей готовой функциональности связан с тем, что фигуры потребляют довольно много памяти. Если строится научное приложение, которое рисует тысячи точек на экране, то использование фигур будет неудачным выбором (по существу таким же расточительным в плане памяти, как визуализация тысяч объектов
ButtonПомимо функциональности, унаследованной от родительских классов
UIElementFrameworkElementShape
На заметку! Если вы забудете установить свойства
FillStrokeДобавление прямоугольников, эллипсов и линий на поверхность Canvas
Вы построите приложение WPF, которое способно визуализировать фигуры, с применением XAML и С#, и попутно исследуете процесс проверки попадания. Создайте новый проект приложения WPF по имени
RenderingWithShapesMainWindow.xamlFun with Shapes!WindowGridDockPanelToolbarCanvasName pictureЗаполните элемент
ToolBarRadioButtonShapeRadioButtonGroupName Click="CircleOption_Click"> Click="RectOption_Click"> Click="LineOption_Click"> X1="10" Y1="10" Y2="25" X2="25" StrokeStartLineCap="Triangle" StrokeEndLineCap="Round" /> Как видите, объявление объектов
RectangleEllipseLineFillRectangleRadiusXRadiusYОбъект
LineX1Х2Y1Y2Line
С помощью окна Properties (Свойства) среды Visual Studio создайте обработчик события
MouseLeftButtonDownCanvasClickRadioButtonCanvasWindowpublic partial class MainWindow : Window{ private enum SelectedShape { Circle, Rectangle, Line } private SelectedShape _currentShape;}В каждом обработчике
ClickcurrentShapeSelectedShapeprivate void CircleOption_Click(object sender, RoutedEventArgs e){ _currentShape = SelectedShape.Circle;}private void RectOption_Click(object sender, RoutedEventArgs e){ _currentShape = SelectedShape.Rectangle;}private void LineOption_Click(object sender, RoutedEventArgs e){ _currentShape = SelectedShape.Line;}Посредством обработчика события
MouseLeftButtonDownCanvasхуprivate void CanvasDrawingArea_MouseLeftButtonDown(object sender, MouseButtonEventArgs e){ Shape shapeToRender = null; // Сконфигурировать корректную фигуру для рисования. switch (_currentShape) { case SelectedShape.Circle: shapeToRender = new Ellipse() { Fill = Brushes.Green, Height = 35, Width = 35 }; break; case SelectedShape.Rectangle: shapeToRender = new Rectangle() { Fill = Brushes.Red, Height = 35, Width = 35, RadiusX = 10, RadiusY = 10 }; break; case SelectedShape.Line: shapeToRender = new Line() { Stroke = Brushes.Blue, StrokeThickness = 10, X1 = 0, X2 = 50, Y1 = 0, Y2 = 50, StrokeStartLineCap= PenLineCap.Triangle, StrokeEndLineCap = PenLineCap.Round }; break; default: return; } // Установить левый верхний угол для рисования на холсте. Canvas.SetLeft(shapeToRender, e.GetPosition(canvasDrawingArea).X); Canvas.SetTop(shapeToRender, e.GetPosition(canvasDrawingArea).Y); // Нарисовать фигуру. canvasDrawingArea.Children.Add(shapeToRender);}На заметку! Возможно, вы заметили, что объекты
EllipseRectangleLinecanvasDrawingArea_MouseLeftButtonDown()В коде проверяется переменная-член
_currentShapeShapeCanvasMouseButtonEventArgsUIElementCanvasShapeУдаление прямоугольников, эллипсов и линий с поверхности Canvas
Имея в распоряжении элемент
CanvasVisualTreeHelperSystem.Windows.MediaMouseRightButtonDownCanvasprivate void CanvasDrawingArea_MouseRightButtonDown(object sender, MouseButtonEventArgs e){ // Сначала получить координаты x,y позиции, // где пользователь выполнил щелчок. Point pt = e.GetPosition((Canvas)sender); // Использовать метод HitTestO класса VisualTreeHelper, чтобы // выяснить, щелкнул ли пользователь на элементе внутри Canvas. HitTestResult result = VisualTreeHelper.HitTest(canvasDrawingArea, pt); // Если переменная result не равна null, то щелчок произведен на фигуре. if (result != null) { // Получить фигуру, на которой совершен щелчок, и удалить ее из Canvas. canvasDrawingArea.Children.Remove(result.VisualHit as Shape); }}Метод начинается с получения точных координат (
хуCanvasVisualTreeHelper.HitTest()HitTestResultnullUIElementCanvasHitTestResultnullVisualHitUIElementShapeCanvasUIElementНа заметку! По умолчанию метод
VisualTreeHelper.HitTest()UIElementВ результате внесенных модификаций должна появиться возможность добавления фигуры на
CanvasДо настоящего момента вы применяли объекты типов, производных от
ShapeRadioButtonCanvasUIElementSystem.Windows.ShapesРабота с элементами Polyline и Polygon
В текущем примере используются только три класса, производных от
ShapePolylinePolygonPathShapesТип
PolylineхуPointsPolygonStackPanel Points ="10,10 40,40 10,90 300,50"/> Points ="40,10 70,80 10,50" />На рис. 26.2 показан визуализированный вывод в Kaxaml.
Работа с элементом Path
Применяя только типы
RectangleEllipsePolygonPolylineLineShapePathDataPathСвойство
DataSystem.Windows.Media.Geometry
Классы, которые расширяют класс
GeometryShapeEllipseGeometryEllipseGeometryUIElementGeometryPath
На заметку! Класс
PathDoubleAnimationUsingPathDrawingGroupGeometryDrawingUIElementPathGeometryClipGeometryGeometryClipВ показанной далее разметке для элемента
PathGeometryDataPathGeometryGroupGeometryEllipseGeometryRectangleGeometryLineGeometry 
Изображение на рис. 26.3 может быть визуализировано с применением показанных ранее классов
LineEllipseRectangleUIElementPathТеперь вспомните, что класс
PathSystem.Windows.ShapesUIElement"Мини-язык" моделирования путей
Из всех классов, перечисленных в табл. 26.3, класс
PathGeometryPathGeometryArcSegmentBezierSegmentLineSegmentPolyBezierSegmentPolyLineSegmentPolyQuadraticBezierSegmentPathDataPathGeometry Point1="100,0" Point2="200,200" Point3="300,100"/> Size="50,50" RotationAngle="45" IsLargeArc="True" SweepDirection="Clockwise" Point="200,100"/> По правде говоря, лишь немногим программистам придется когда-либо вручную строить сложные двумерные изображения, напрямую описывая объекты производных от
GeometryPathSegmentДаже с учетом содействия со стороны упомянутых ранее инструментов объем разметки XAML, требуемой для определения сложных объектов
PathGeometryPathSegmentPathНапример, вместо установки свойства
DataPathGeometryPathSegment Data="M 10,75 C 70,15 250,270 300,175 H 240" />
Команда
МхуСНИ снова следует отметить, что вам очень редко придется вручную строить или анализировать строковый литерал, содержащий инструкции мини-языка моделирования путей. Тем не менее, цель в том, чтобы разметка XAML, генерируемая специализированными инструментами, не казалась вам совершенно непонятной.
Кисти и перья WPF
Каждый способ графической визуализации (фигуры, рисование и геометрические объекты, а также визуальные объекты) интенсивно использует кисти, которые позволяют управлять заполнением внутренней области двумерной фигуры. Инфраструктура WPF предлагает шесть разных типов кистей, и все они расширяют класс
System.Windows.Media.BrushBrush
Классы
DrawingBrushVisualBrushDrawingVisualКласс
ImageBrushImageSourceLinearGradientBrushRadialGradientBrushКонфигурирование кистей с использованием Visual Studio
Давайте обновим приложение WPF для рисования
RenderingShapesEllipseFill
В верхней части редактора кистей находится набор свойств, которые являются "совместимыми с кистью" для выбранного элемента (т.е.
FillStrokeOpacityMaskFillEllipseЧто более интересно, тот же самый редактор позволяет конфигурировать и градиентные кисти, которые применяются для определения последовательностей цветов и точек перехода цветов. Вспомните, что редактор кистей предлагает набор вкладок, первая из которых позволяет установить пустую кисть для отсутствующего визуализированного вывода. Остальные четыре дают возможность установить кисть сплошного цвета (как только что было показано), градиентную кисть, мозаичную кисть и кисть с изображением.
Щелкните на вкладке градиентной кисти; редактор отобразит несколько новых настроек (рис. 26.6).
Три кнопки в левом нижнем углу позволяют выбрать линейный градиент, радиальный градиент или обратить градиентные переходы. Полоса внизу покажет текущий цвет каждого градиентного перехода, который будет представлен специальным ползунком. Перетаскивая ползунок по полосе градиента, можно управлять смещением градиента. Кроме того, щелкая на конкретном ползунке, можно изменять цвет определенного градиентного перехода с помощью селектора цвета. Наконец, щелчок прямо на полосе градиента позволяет добавлять градиентные переходы.
Потратьте некоторое время на освоение этого редактора, чтобы построить радиальную градиентную кисть, содержащую три градиентных перехода, и установить их цвета. На рис. 26.6 показан пример кисти, использующей три оттенка зеленого цвета.
В результате IDE-среда обновит разметку XAML, добавив набор специальных кистей и присвоив их совместимым с кистями свойствам (свойство
FillEllipse Конфигурирование кистей в коде
Теперь, когда вы построили специальную кисть для определения XAML элемента Ellipse, соответствующий код C# устарел в том плане, что он по-прежнему будет визуализировать круг со сплошным зеленым цветом. Для восстановления синхронизации модифицируйте нужный оператор
caseColorSystem.Windows.Media.ColorConvertercase SelectedShape.Circle: shapeToRender = new Ellipse() { Height = 35, Width = 35 }; // Создать кисть RadialGradientBrush в коде. RadialGradientBrush brush = new RadialGradientBrush(); brush.GradientStops.Add(new GradientStop( (Color)ColorConverter.ConvertFromString("#FF77F177"), 0)); brush.GradientStops.Add(new GradientStop( (Color)ColorConverter.ConvertFromString("#FF11E611"), 1)); brush.GradientStops.Add(new GradientStop( (Color)ColorConverter.ConvertFromString("#FF5A8E5A"), 0.545)); shapeToRender.Fill = brush; break;
Кстати, объекты
GradientStopColorsColorGradientStop g = new GradientStop(Colors.Aquamarine, 1);Если требуется более тонкий контроль, то можно передавать объект
ColorColor myColor = new Color() { R = 200, G = 100, B = 20, A = 40 };GradientStop g = new GradientStop(myColor, 34);Разумеется, использование перечисления
ColorsColorКонфигурирование перьев
В сравнении с кистями перо представляет собой объект для рисования границ геометрических объектов или в случае класса
LinePolyLinePen
doublePenShape StartLineCap="Round" />Во многих случаях создавать объект
PenStrokeThicknessShapeUIElementPenDrawingПрименение графических трансформаций
В завершение обсуждения фигур будет рассмотрена тема трансформаций. Инфраструктура WPF поставляется с многочисленными классами, которые расширяют абстрактный базовый класс
System.Winodws.Media.TransformTransform
Трансформации могут применяться к любым объектам
UIElementShapeButtonTextBoxНа заметку! Хотя объекты трансформаций могут применяться повсеместно, вы сочтете их наиболее удобными при работе с анимацией WPF и специальными шаблонами элементов управления. Как будет показано далее в главе, анимацию WPF можно использовать для включения в специальный элемент управления визуальных подсказок, предназначенных конечному пользователю.
Назначать целевому объекту (
ButtonPathLayoutTransformRenderTransformСвойство
LayoutTransformС другой стороны, трансформация из свойства
RenderTransformПервый взгляд на трансформации
Вскоре вы добавите к проекту
RenderingWithShapesPageWindowStackPanelOrientationHorizontalRectangleRotateTransform Здесь элемент
ButtonSkewTransform Для полноты картины ниже приведен элемент
EllipseScaleTransformHeightWidthTextBox Следует отметить, что в случае применения трансформации выполнять какие-либо ручные вычисления для реагирования на проверку попадания, перемещение фокуса ввода и аналогичные действия не придется. Графический механизм WPF самостоятельно решает такие задачи. Например, на рис. 26.8 можно видеть, что элемент
TextBox
Трансформация данных Canvas
Теперь нужно внедрить в пример
RenderingWithShapesRectangleTextBoxDockPanel ...В рассматриваемом примере это несколько чрезмерно, так что добавьте последнюю (менее радикальную) возможность, которая позволит пользователю зеркально отобразить целый контейнер
CanvasToolBarToggleButton Content="Flip Canvas!"/>Внутри обработчика события
ClickToggleButtonRotateTransformCanvasLayoutTransformToggleButtonToggleButtonLayoutTransformnullprivate void FlipCanvas_Click(object sender, RoutedEventArgs e){ if (flipCanvas.IsChecked == true) { RotateTransform rotate = new RotateTransform(-180); canvasDrawingArea.LayoutTransform = rotate; } else { canvasDrawingArea.LayoutTransform = null; }}Запустите приложение и добавьте несколько графических фигур в область
CanvasCanvas
Исправить проблему легко. Вместо того чтобы вручную писать сложную логику отсечения, просто установите свойство
ClipToBoundsCanvastrueПоследняя крошечная модификация, которую понадобится внести, связана с тем фактом, что когда пользователь зеркально отображает холст, щелкая на кнопке переключения, а затем щелкает на нем для рисования новой фигуры, то точка, где был произведен щелчок, не является той позицией, куда попадут графические данные. Взамен они появятся в месте нахождения курсора мыши.
Чтобы устранить проблему, примените тот же самый объект трансформации к рисуемой фигуре перед выполнением визуализации (через
RenderTransformprivate void CanvasDrawingArea_MouseLeftButtonDown(object sender, MouseButtonEventArgs e){ // Для краткости код не показан. if (flipCanvas.IsChecked == true) { RotateTransform rotate = new RotateTransform(-180); shapeToRender.RenderTransform = rotate; } // Установить левую верхнюю точку для рисования на холсте. Canvas.SetLeft(shapeToRender, e.GetPosition(canvasDrawingArea).X); Canvas.SetTop(shapeToRender, e.GetPosition(canvasDrawingArea).Y); // Нарисовать фигуру. canvasDrawingArea.Children.Add(shapeToRender);}На этом исследование пространства имен
System.Windows.ShapesРабота с редактором трансформаций Visual Studio
В предыдущем примере разнообразные трансформации применялись за счет ручного ввода разметки и написания кода С#. Наряду с тем, что поступать так вполне удобно, последняя версия Visual Studio поставляется со встроенным редактором трансформаций. Вспомните, что получателем служб трансформаций может быть любой элемент пользовательского интерфейса, в том числе диспетчер компоновки, содержащий различные элементы управления. Для демонстрации работы с редактором трансформаций Visual Studio будет создан новый проект приложения WPF по имени
FunWithTransformsПостроение начальной компоновки
Первым делом разделите первоначальный элемент
GridStackPanelGridStackPanelButton Добавьте обработчики событий для кнопок:
private void Skew(object sender, RoutedEventArgs e){}private void Rotate(object sender, RoutedEventArgs e){}private void Flip(object sender, RoutedEventArgs e){}Чтобы завершить пользовательский интерфейс, создайте во второй колонке элемента
Grid Height="186" Width="92" Stroke="Black" Canvas.Left="20" Canvas.Top="31"> Height="101" Width="110" Stroke="Black" Canvas.Left="122" Canvas.Top="126"> Окончательная компоновка показана на рис. 26.10.
Применение трансформаций на этапе проектирования
Как упоминалось ранее, IDE-среда Visual Studio предоставляет встроенный редактор трансформаций, который можно найти в окне Properties. Раскройте раздел Transform (Трансформация), чтобы отобразить области RenderTransform и LayoutTransform редактора (рис. 26.11).
Подобно разделу Brush раздел Transform предлагает несколько вкладок, предназначенных для конфигурирования разнообразных типов графической трансформации текущего выбранного элемента. В табл. 26.6 описаны варианты трансформации, доступные на этих вкладках (в порядке слева направо).
Испытайте каждую из описанных трансформаций,используя в качестве цели специальную фигуру (для отмены выполненной операции просто нажимайте <Ctrl+Z>). Как и многие другие аспекты раздела Transform окна Properties, каждая трансформация имеет уникальный набор параметров конфигурации, которые должны стать вполне понятными, как только вы просмотрите их. Например, редактор трансформации Skew позволяет устанавливать значения скоса х и у, а редактор трансформации Flip дает возможность зеркально отображать относительно оси х или у и т.д.
Трансформация холста в коде
Реализации обработчиков для всех кнопок будут более или менее похожими. Мы сконфигурируем объект трансформации и присвоим его объекту
myCanvasLayoutTransformprivate void Flip(object sender, System.Windows.RoutedEventArgs e){ myCanvas.LayoutTransform = new ScaleTransform(-1, 1);}private void Rotate(object sender, System.Windows.RoutedEventArgs e){ myCanvas.LayoutTransform = new RotateTransform(180);}private void Skew(object sender, System.Windows.RoutedEventArgs e){ myCanvas.LayoutTransform = new SkewTransform(40, -20);}Визуализация графических данных с использованием рисунков и геометрических объектов
Несмотря на то что типы
ShapePathВходной точкой в этот API-интерфейс является абстрактный класс
System.Windows.Media.DrawingPresentationCore.dllИнфраструктура WPF предлагает разнообразные классы, расширяющие
Drawing
Будучи более легковесными, производные от
DrawingUIElementFrameworkElementДругое ключевое отличие между типами, производными от
DrawingShapeDrawingUIElementDrawingImageDrawingBrushDrawingVisualКласс
DrawingImageDrawingBrushDrawingVisualХотя работать с рисунками немного сложнее, чем с простыми фигурами, отделение графической композиции от графической визуализации делает типы, производные от
DrawingShapeПостроение кисти DrawingBrush с использованием геометрических объектов
Ранее в главе элемент
Path Поступая подобным образом, вы достигаете интерактивности
PathDrawingBrush При помещении группы геометрических объектов внутрь
DrawingBrushPenStrokeShapePenStrokeStrokeThicknessPathКроме того, поскольку свойство
FillShapeDrawingGeometryPathРисование с помощью DrawingBrush
Теперь объект
DrawingBrushPage xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> Или же элемент
DrawingBrushBackgroundButton xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> Независимо от того, какое совместимое с кистью свойство устанавливается с использованием специального объекта
DrawingBrushВключение типов Drawing в DrawingImage
Тип
DrawingImageImage В данном случае элемент
GeometryDrawingDrawingImageDrawingBrushDrawingImageSourceImageРабота с векторными изображениями
По всей видимости, вы согласитесь с тем, что художнику будет довольно трудно создавать сложное векторное изображение с использованием инструментов и приемов, предоставляемых средой Visual Studio. В распоряжении художников есть собственные наборы инструментов, которые позволяют производить замечательную векторную графику. Изобразительными возможностями подобного рода не обладает ни IDE-среда Visual Studio, ни сопровождающий ее инструмент Microsoft Blend. Перед тем, как векторные изображения можно будет импортировать в приложение WPF, они должны быть преобразованы в выражения путей. После этого можно программировать с применением сгенерированной объектной модели, используя Visual Studio.
На заметку! Используемое изображение (
LaserSign.svgLaserSign.xamlhttps://ru.wikipedia.org/wiki/Символы_опасностиПреобразование файла с векторной графикой в файл XAML
Прежде чем можно будет импортировать сложные графические данные (такие как векторная графика) в приложение WPF, графику понадобится преобразовать в данные путей. Чтобы проиллюстрировать, как это делается, возьмите пример файла изображения
.svgInkscapewww.inkscape.orgInkscapeLaserSign.svgChapter_26
Следующие шаги поначалу покажутся несколько странными, но на самом деле они представляют собой простой способ преобразования векторных изображений в разметку XAML. Когда изображение приобрело желаемый вид, необходимо выбрать пункт меню File► Print (Файл►Печать). В открывшемся окне нужно ввести имя файла и выбрать место, где он должен быть сохранен, после чего щелкнуть на кнопке Save (Сохранить). В результате получается файл
*.xps*.oxpsНа заметку! В зависимости от нескольких переменных среды в конфигурации системы сгенерированный файл будет иметь либо расширение
.xps.oxpsФорматы
*.xps*.oxps.zip
Необходимый файл находится в папке
PagesDocuments/1/Pages1.fpageFixedPageCanvasНа заметку! В последней версии
InkscapeИмпортирование графических данных в проект WPF
Создайте новый проект приложения WPF по имени
InteractiveLaserSignHeightWidthWindow600650GridCanvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="clr-namespace:InteractiveLaserSign" mc:Ignorable="d" Title="MainWindow" Height="600" Width="650"> Скопируйте полную разметку XAML из файла
1.fpageFixedPageCanvasMainWindowЗаглянув в окно Document Outline, вы заметите, что каждая часть изображения представлена как XAML-элемент
PathWindowPathВзаимодействие с изображением
Вспомните, что маршрутизируемое событие распространяется туннельным и пузырьковым образом, поэтому щелчок на любом элементе
PathCanvasCanvasCanvasДобавьте обработчик событий с таким кодом:
private void Canvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e){ if (e.OriginalSource is Path p) { p.Fill = new SolidColorBrush(Colors.Red); }}Запустите приложение и щелкните на линиях, чтобы увидеть эффекты.
Теперь вы понимаете процесс генерации данных путей для сложной графики и знаете, как взаимодействовать с графическими данными в коде. Вы наверняка согласитесь, что наличие у профессиональных художников возможности генерировать сложные графические данные и экспортировать их в виде разметки XAML исключительно важна. После того как графические данные сохранены в файле XAML, разработчики могут импортировать разметку иписать код для взаимодействия с объектной моделью.
Визуализация графических данных с использованием визуального уровня
Последний вариант визуализации графических данных с помощью WPF называется визуальным уровнем. Ранее уже упоминалось, что доступ к нему возможен только из кода (он не дружественен по отношению к разметке XAML). Несмотря на то что подавляющее большинство приложений WPF будут хорошо работать с применением фигур, рисунков и геометрических объектов, визуальный уровень обеспечивает самый быстрый способ визуализации крупных объемов графических данных. Визуальный уровень также может быть полезен, когда необходимо визуализировать единственное изображение в крупной области. Например, если требуется заполнить фон окна простым статическим изображением, тогда визуальный уровень будет наиболее быстрым способом решения такой задачи. Кроме того, он удобен, когда нужно очень быстро менять фон окна в зависимости от ввода пользователя или чего-нибудь еще.
Далее будет построена небольшая программа, иллюстрирующая основы использования визуального уровня.
Базовый класс Visual и производные дочерние классы
Абстрактный класс
System.Windows.Media.VisualVisualDrawingVisualViewport3DVisualContainerVisualРассматриваемый ниже пример сосредоточен только на
DrawingVisualПервый взгляд на класс DrawingVisual
Чтобы визуализировать данные на поверхности с применением класса
DrawingVisual• получить объект
DrawingContextDrawingVisual• использовать объект
DrawingContextЭти два шага представляют абсолютный минимум, необходимый для визуализации каких-то данных на поверхности. Тем не менее, когда нужно, чтобы визуализируемые графические данные реагировали на вычисления при проверке попадания (что важно для добавления взаимодействия с пользователем), потребуется также выполнить дополнительные шаги:
• обновить логическое и визуальное деревья, поддерживаемые контейнером, на котором производится визуализация;
• переопределить два виртуальных метода из класса
FrameworkElementДавайте исследуем последние два шага более подробно. Чтобы продемонстрировать применение класса
DrawingVisualRenderingWithVisualsDrawingVisualImageLoaded Title="Fun With Visual Layer" Height="450" Width="800" Loaded="MainWindow_Loaded">Замените элемент
GridStackPanelImage Элемент управления
ImageSourceLoadedDrawingBrushMainWindow.csusing System;using System.Windows;using System.Windows.Media;using System.Windows.Media.Imaging;Вот реализация обработчика события
Loadedprivate void MainWindow_Loaded( object sender, RoutedEventArgs e){ const int TextFontSize = 30; // Создать объект System.Windows.Media.FormattedText. FormattedText text = new FormattedText( "Hello Visual Layer!", new System.Globalization.CultureInfo("en-us"), FlowDirection.LeftToRight, new Typeface(this.FontFamily, FontStyles.Italic, FontWeights.DemiBold, FontStretches.UltraExpanded), TextFontSize, Brushes.Green, null, VisualTreeHelper.GetDpi(this).PixelsPerDip); // Создать объект DrawingVisual и получить объект DrawingContext. DrawingVisual drawingVisual = new DrawingVisual(); using(DrawingContext drawingContext = drawingVisual.RenderOpen()) { // Вызвать любой из методов DrawingContext для визуализации данных. drawingContext.DrawRoundedRectangle( Brushes.Yellow, new Pen(Brushes.Black, 5), new Rect(5, 5, 450, 100), 20, 20); drawingContext.DrawText(text, new Point(20, 20)); } // Динамически создать битовое изображение, // используя данные в объекте DrawingVisual. RenderTargetBitmap bmp = new RenderTargetBitmap( 500, 100, 100, 90, PixelFormats.Pbgra32); bmp.Render(drawingVisual); // Установить источник для элемента управления Image. myImage.Source = bmp;}В коде задействовано несколько новых классов WPF, которые будут кратко описаны ниже. Метод начинается с создания нового объекта
FormattedTextЗатем через вызов метода
RenderOpen()DrawingVisualDrawingContextDrawingVisualDrawingVisualНесколько последних операторов отображают
DrawingVisualRenderTagetBitmapSystem.Windows.Media.ImagingSourceImage
На заметку! Пространство имен
System.Windows.Media.ImagingRenderTargetBitmapJpegBitmapEncoderВизуализация графических данных в специальном диспетчере компоновки
Хотя применение
DrawingVisualGridStackPanelCanvasWindowPageUserControlЕсли дополнительная функциональность, предлагаемая специализированным диспетчером компоновки, не требуется, то можно просто расширить класс
FrameworkElementCustomVisualFrameworkElementУнаследуйте его от
FrameworkElementSystemSystem.WindowsSystem.Windows.InputSystem.Windows.MediaSystem.Windows.Media.ImagingКласс
CustomVisualFrameworkElementVisualCollectionDrawingVisualpublic class CustomVisualFrameworkElement : FrameworkElement{ // Коллекция всех визуальных объектов. VisualCollection theVisuals; public CustomVisualFrameworkElement() { // Заполнить коллекцию VisualCollection несколькими объектами DrawingVisual. // Аргумент конструктора представляет владельца визуальных объектов. theVisuals = new VisualCollection(this) {AddRect(),AddCircle()}; } private Visual AddCircle() { DrawingVisual drawingVisual = new DrawingVisual(); // Получить объект DrawingContext для создания нового содержимого. using DrawingContext drawingContext = drawingVisual.RenderOpen() // Создать круг и нарисовать его в DrawingContext. drawingContext.DrawEllipse(Brushes.DarkBlue, null, new Point(70, 90), 40, 50); return drawingVisual; } private Visual AddRect() { DrawingVisual drawingVisual = new DrawingVisual(); using DrawingContext drawingContext = drawingVisual.RenderOpen() Rect rect = new Rect(new Point(160, 100), new Size(320, 80)); drawingContext.DrawRectangle(Brushes.Tomato, null, rect); return drawingVisual; }}Прежде чем специальный элемент
FrameworkElementWindowGetVisualChild()VisualChildrenCountVisualCollectionprotected override int VisualChildrenCount => theVisuals.Count;protected override Visual GetVisualChild(int index){ // Значение должно быть больше нуля, поэтому разумно это проверить. if (index < 0 || index >= theVisuals.Count) { throw new ArgumentOutOfRangeException(); } return theVisuals[index];}Теперь вы располагаете достаточной функциональностью, чтобы протестировать специальный класс. Модифицируйте описание XAML элемента Window, добавив в существующий контейнер
StackPanelCustomVisualFrameworkElement xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:RenderingWithVisuals" Title="Fun with the Visual Layer" Height="350" Width="525" Loaded="Window_Loaded" WindowStartupLocation="CenterScreen"> Результат выполнения программы показан на рис. 26.15.
Реагирование на операции проверки попадания
Поскольку класс
DrawingVisualUIElementFrameworkElementУпомянутые деревья подробно рассматриваются в главе 27, а сейчас достаточно знать, что до тех пор, пока специальные визуальные объекты не будут зарегистрированы в таких структурах данных, выполнять операции проверки попадания невозможно. К счастью, контейнер
VisualCollectionFrameworkElementИзмените код класса
CustomVisualFrameworkElementMouseDownthis.MouseDown += CustomVisualFrameworkElement_MouseDown;Реализация данного обработчика будет вызывать метод
VisualTreeHelper.HitTest()HitTest()HitTestResultCallbackCustomVisualFrameworkElementvoid CustomVisualFrameworkElement_MouseDown(object sender, MouseButtonEventArgs e){ // Выяснить, где пользователь выполнил щелчок. Point pt = e.GetPosition((UIElement)sender); // Вызвать вспомогательную функцию через делегат, чтобы // посмотреть, был ли совершен щелчок на визуальном объекте. VisualTreeHelper.HitTest(this, null, new HitTestResultCallback(myCallback), new PointHitTestParameters(pt));}public HitTestResultBehavior myCallback(HitTestResult result){ // Если щелчок был совершен на визуальном объекте, то // переключиться между скошенной и нормальной визуализацией. if (result.VisualHit.GetType() == typeof(DrawingVisual)) { if (((DrawingVisual)result.VisualHit).Transform == null) { ((DrawingVisual)result.VisualHit).Transform = new SkewTransform(7, 7); } else { ((DrawingVisual)result.VisualHit).Transform = null; } } // Сообщить методу HitTest() о прекращении углубления в визуальное дерево. return HitTestResultBehavior.Stop;}Снова запустите программу. Теперь должна появиться возможность щелкать на любом из отображенных визуальных объектов и наблюдать за выполнением трансформации. Наряду с тем, что рассмотренный пример взаимодействия с визуальным уровнем WPF очень прост, не забывайте, что здесь можно использовать те же самые кисти, трансформации, перья и диспетчеры компоновки, которые обычно применяются в разметке XAML. Таким образом, вы уже знаете довольно много о работе с классами, производными от
VisualНа этом исследование служб графической визуализации WPF завершено. Несмотря на раскрытие ряда интересных тем, на самом деле мы лишь слегка затронули обширную область графических возможностей инфраструктуры WPF. Дальнейшее изучение фигур, рисунков, кистей, трансформаций и визуальных объектов вы можете продолжить самостоятельно (в оставшихся главах, посвященных WPF, еще встретятся дополнительные детали).
Резюме
Поскольку Windows Presentation Foundation является настолько насыщенной графикой инфраструктурой для построения графических пользовательских интерфейсов, не должно вызывать удивления наличие нескольких способов визуализации графического вывода. Плава начиналась с рассмотрения трех подходов к визуализации (фигуры, рисунки и визуальные объекты ), а также разнообразных примитивов визуализации, таких как кисти, перья и трансформации.
Вспомните, что когда необходимо строить интерактивную двумерную визуализацию, то фигуры делают такой процесс очень простым. С другой стороны, статические, не интерактивные изображения могут визуализироваться в оптимальной манере с использованием рисунков и геометрических объектов, а визуальный уровень (доступный только в коде) обеспечит максимальный контроль и производительность.
Глава 27 Ресурсы, анимация, стили и шаблоны WPF
В настоящей главе будут представлены три важные (и взаимосвязанные) темы, которые позволят углубить понимание API-интерфейса Windows Presentation Foundation (WPF). Первым делом вы изучите роль логических ресурсов. Вы увидите, что система логических ресурсов (также называемых объектными ресурсами) представляет собой способ ссылки на часто используемые объекты внутри приложения WPF. Хотя логические ресурсы нередко реализуются в разметке XAML, они могут быть определены и в процедурном коде.
Далее вы узнаете, как определять, выполнять и управлять анимационной последовательностью. Вопреки тому, что можно было подумать, применение анимации WPF не ограничивается видеоиграми или мультимедийными приложениями. В API-интерфейсе WPF анимация может использоваться, например, для подсветки кнопки, когда она получает фокус, или увеличения размера выбранной строки в
DataGridЗатем объясняется роль стилей и шаблонов WPF. Подобно веб-странице, в которой применяются стили CSS или механизм тем ASP.NET, приложение WPF может определять общий вид и поведение для набора элементов управления. Такие стили можно определять в разметке и сохранять их в виде объектных ресурсов для последующего использования, а также динамически применять во время выполнения. В последнем примере вы научитесь строить специальные шаблоны элементов управления.
Система ресурсов WPF
Первой задачей будет исследование темы встраивания и доступа к ресурсам приложения. Инфраструктура WPF поддерживает два вида ресурсов. Первый из них — двоичные ресурсы; эта категория обычно включает элементы, которые большинство программистов считают ресурсами в традиционном смысле (встроенные файлы изображений или звуковых клипов, значки, используемые приложением, и т.д.).
Вторая категория, называемая объектными ресурсами или логическими ресурсами, представляет именованные объекты .NET, которые можно упаковывать и многократно применять повсюду в приложении. Несмотря на то что упаковывать в виде объектного ресурса разрешено любой объект .NET, логические ресурсы особенно удобны при работе с графическими данными произвольного рода, поскольку можно определить часто используемые графические примитивы (кисти, перья, анимации и т.д.) и ссылаться на них по мере необходимости.
Работа с двоичными ресурсами
Прежде чем перейти к теме объектных ресурсов, давайте кратко проанализируем, как упаковывать двоичные ресурсы вроде значков и файлов изображений (например, логотипов компании либо изображений для анимации) внутри приложений. Создайте в Visual Studio новый проект приложения WPF по имени
BinaryResourcesAppLoadedDockPanel Title="Fun with Binary Resources" Height="500" Width="649" Loaded="MainWindow_OnLoaded"> Предположим, что приложение должно отображать внутри части окна один из трех файлов изображений, основываясь на пользовательском вводе. Элемент управления
Image*.bmp*.gif*.ico*.jpg*.png*.wdp*.tiffDrawingImageDockPanelImageSource Margin="5" Content="Previous" Click="btnPreviousImage_Click"/> Margin="5" Content="Next" Click="btnNextImage_Click"/> Добавьте следующие пустые обработчики событий:
private void MainWindow_OnLoaded( object sender, RoutedEventArgs e){}private void btnPreviousImage_Click( object sender, RoutedEventArgs e){}private void btnNextImage_Click( object sender, RoutedEventArgs e){}Во время загрузки окна изображения добавляются в коллекцию, по которой будет совершаться проход с помощью кнопок Next и Previous. Располагая инфраструктурой приложения, можно заняться исследованием разных вариантов ее реализации.
Включение в проект несвязанных файлов ресурсов
Один из вариантов предусматривает поставку файлов изображений в виде набора несвязанных файлов в каком-то подкаталоге внутри пути установки приложения. Начните с создания в проекте новой папки (по имени
ImagesDeer.jpgDogs.jpgWelcome.jpgКонфигурирование несвязанных ресурсов
Чтобы скопировать содержимое папки
\Images\bin\Debug
На заметку! Для свойства Copy Output Directory можно было бы также выбрать вариант Copy if Newer (Копировать, если новее), что позволит сократить время копирования при построении крупных проектов с большим объемом содержимого. В рассматриваемом примере варианта Copy always вполне достаточно.
После компиляции проекта появится возможность щелкнуть на кнопке Show all Files (Показать все файлы) в окне Solution Explorer и просмотреть скопированную папку
\Images\bin\DebugПрограммная загрузка изображения
Инфраструктура WPF предоставляет класс по имени
BitmapImageSystem.Windows.Media.ImagingSystem.UriListint// Список файлов BitmapImage.List _images=new List(); // Текущая позиция в списке.private int _currImage=0;Внутри обработчика события
LoadedSourceImageprivate void MainWindow_OnLoaded( object sender, RoutedEventArgs e){ try { string path=Environment.CurrentDirectory; // Загрузить эти изображения из диска при загрузке окна. _images.Add(new BitmapImage(new Uri($@"{path}\Images\Deer.jpg"))); _images.Add(new BitmapImage(new Uri($@"{path}\Images\Dogs.jpg"))); _images.Add(new BitmapImage(new Uri($@"{path}\Images\Welcome.jpg"))); // Показать первое изображение в списке. imageHolder.Source=_images[_currImage]; } catch (Exception ex) { MessageBox.Show(ex.Message); }}Реализуйте обработчики для кнопок Previous и Next, чтобы обеспечить проход по изображениям. Когда пользователь добирается до конца списка, происходит переход в начало и наоборот.
private void btnPreviousImage_Click( object sender, RoutedEventArgs e){ if (--_currImage < 0) { _currImage=_images.Count - 1; } imageHolder.Source=_images[_currImage];}private void btnNextImage_Click( object sender, RoutedEventArgs e){ if (++_currImage >=_images.Count) { _currImage=0; } imageHolder.Source=_images[_currImage];}Теперь можете запустить программу и переключаться между всеми изображениями.
Встраивание ресурсов приложения
Если файлы изображений необходимо встроить прямо в сборку .NET Core как двоичные ресурсы, тогда выберите файлы изображений в окне Solution Explorer (из папки
\Images\bin\Debug\Images
В меню Build (Сборка) среды Visual Studio выберите пункт Clean Solution (Очистить решение), чтобы очистить текущее содержимое папки
\bin\Debug\Images\bin\Debug\ImagesВам нужно модифицировать код для загрузки изображений в список, извлекая их из скомпилированной сборки:
// Извлечь из сборки и затем загрузить изображения._images.Add(new BitmapImage(new Uri(@"/Images/Deer.jpg", UriKind.Relative)));_images.Add(new BitmapImage(new Uri(@"/Images/Dogs.jpg", UriKind.Relative)));_images.Add(new BitmapImage(new Uri(@"/Images/Welcome.jpg", UriKind.Relative)));В таком случае больше не придется определять путь установки и можно просто задавать ресурсы по именам, которые учитывают название исходного подкаталога. Также обратите внимание, что при создании объектов
UriRelativeUriKindРабота с объектными (логическими) ресурсами
При построении приложения WPF часто приходится определять большой объем разметки XAML для использования во многих местах окна или возможно во множестве окон либо проектов. Например, пусть создана "безупречная" кисть с линейным градиентом, определение которой в разметке занимает 10 строк. Теперь кисть необходимо применить в качестве фонового цвета для каждого элемента
ButtonButtonХудшее, что можно было бы предпринять — копировать и вставлять одну и ту же разметку XAML в каждый элемент управления
ButtonК счастью, объектные ресурсы позволяют определить фрагмент разметки XAML, назначить ему имя и сохранить в подходящем словаре для использования в будущем. Подобно двоичным ресурсам объектные ресурсы часто компилируются в сборку, где они требуются. Однако в такой ситуации нет необходимости возиться со свойством Build Action. При условии, что разметка XAML помещена в корректное местоположение, компилятор позаботится обо всем остальном.
Взаимодействие с объектными ресурсами является крупной частью процесса разработки приложений WPF. Вы увидите, что объектные ресурсы могут быть намного сложнее, чем специальная кисть. Допускается определять анимацию на основе XAML, трехмерную визуализацию, специальный стиль элемента управления, шаблон данных, шаблон элемента управления и многое другое, и упаковывать каждую сущность в многократно используемый ресурс.
Роль свойства Resources
Как уже упоминалось, для применения в приложении объектные ресурсы должны быть помещены в подходящий объект словаря. Каждый производный от
FrameworkElementResourcesResourceDictionaryResourceDictionarySystem.ObjectВ инфраструктуре WPF все элементы управления плюс элементы
WindowPageUserControlFrameworkElementResourceDictionaryApplicationFrameworkElementОпределение ресурсов уровня окна
Чтобы приступить к исследованию роли объектных ресурсов, создайте в Visual Studio новый проект приложения WPF по имени
ObjectResourcesAppGridStackPanelButton Выберите кнопку OK и установите в свойстве
Background Чтобы разрешить использовать эту кисть также и в кнопке Cancel (Отмена), область определения
RadialGradientBrushRadialGradientBrushStackPanelКогда необходимо определить ресурс, для установки свойства
Resourcesх:Кеух:Keyх:Nameх:Nameх:КеуСреда Visual Studio позволяет переместить ресурс на более высокий уровень с применением соответствующего окна Properties. Чтобы сделать это, сначала понадобится идентифицировать свойство, имеющее сложный объект, который необходимо упаковать в виде ресурса (свойство
Background
Будет запрошено имя ресурса (
myBrush
В результате определение кисти переместится внутрь дескриптора
WindowResources: Свойство
BackgroundButton FontSize="20" Background="{DynamicResource myBrush}"/>Мастер создания ресурсов определил новый ресурс как динамический (
Dynamic ResourceStaticResource FontSize="20" Background="{StaticResource myBrush}"/>Чтобы оценить преимущества, модифицируйте свойство
BackgroundStaticResource FontSize="20" Background="{StaticResource myBrush}"/>Расширение разметки {StaticResource}
Расширение разметки
{StaticResource}BrushNameClickButton FontSize="20" Background="{StaticResource myBrush}" Click="Ok_OnClick"/> FontSize="20" Background="{StaticResource myBrush}" Click="Cancel_OnClick"/>Затем поместите в обработчик события
Ok_OnClick()private void Ok_OnClick(object sender, RoutedEventArgs e){ // Получить кисть и внести изменение. var b=(RadialGradientBrush)Resources["myBrush"]; b.GradientStops[1]=new GradientStop(Colors.Black, 0.0);}На заметку! Здесь для поиска ресурса по имени используется индексатор
ResourcesTryFindResource()nullЗапустив программу и щелкнув на кнопке ОК, вы заметите,что градиенты соответствующим образом изменяются. Добавьте в обработчик события
Cancel_OnClick()private void Cancel_OnClick(object sender, RoutedEventArgs e){ // Поместить в ячейку myBrush совершенно новую кисть. Resources["myBrush"]=new SolidColorBrush(Colors.Red);}Снова запустив программу и щелкнув на кнопке Cancel, вы обнаружите, что ничего не происходит!
Расширение разметки {DynamicResource}
Для свойства также можно использовать расширение разметки
DynamicResource FontSize="20" Background="{DynamicResource myBrush}" Click="Cancel_OnClick"/>На этот раз в результате щелчка на кнопке Cancel цвет фона для кнопки Cancel изменяется, а цвет фона для кнопки ОК остается прежним. Причина в том, что расширение разметки
{DynamicResource}{StaticResource}Ресурсы уровня приложения
Когда в словаре ресурсов окна имеются объектные ресурсы, их могут потреблять все элементы этого окна, но не другие окна приложения. Решение совместно использовать объектные ресурсы в рамках приложения предусматривает их определение на уровне приложения, а не на уровне какого-то окна. В Visual Studio отсутствуют способы автоматизации такого действия, а потому необходимо просто вырезать имеющееся определение объекта кисти из области
Windows.ResourceApplication.ResourcesАрр.xamlТеперь любое дополнительное окно или элемент управления в приложении в состоянии работать с данным объектом кисти. Ресурсы уровня приложения доступны для выбора при установке свойства
Background
На заметку! Помещение ресурса на уровень приложения и назначение его свойству элемента управления приводит к замораживанию ресурса, что препятствует изменению значений во время выполнения. Ресурс можно клонировать и модифицировать клон.
Определение объединенных словарей ресурсов
Ресурсов уровня приложения часто оказывается вполне достаточно, но они ничем не помогут, если ресурсы необходимо разделять между проектами. В таком случае понадобится определить то, что известно как объединенный словарь ресурсов. Считайте его библиотекой классов для ресурсов WPF; он представляет собой всего лишь файл
.xaml
Вырежьте текущие ресурсы из области определения
Application.ResourcesМуBrushes.xaml xmlns:local="clr-namespace:ObjectResourcesApp" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> Хотя данный словарь ресурсов является частью проекта, все словари ресурсов должны быть объединены (обычно на уровне приложения) в единый словарь ресурсов, чтобы их можно было использовать. Для этого применяется следующий формат в файле
Арр.xamlResourceDictionaryResourceDictionary.MergedDictionaries Проблема такого подхода в том, что каждый файл ресурсов потребуется добавлять в каждый проект, нуждающийся в ресурсах. Более удачный подход к разделению ресурсов заключается в определении библиотеки классов .NET Core для совместного использования проектами, чем мы и займемся.
Определение сборки, включающей только ресурсы
Самый легкий способ построения сборки из одних ресурсов предусматривает создание проекта WPF User Control Library (.NET Core) (Библиотека пользовательских элементов управления WPF (.NETCore)). Создайте такой проект (по имени
MyBrushesLibraryObjectResourcesAppТеперь удалите файл
UserControll.xamlMyBrushes.xamlMyBrushesLibraryObjectResourcesAppMyBrushes.xamlMyBrushesLibraryх:localclr-namespace:MyBrushesLibraryMyBrushes.xaml xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:MyBrushesLibrary"> Скомпилируйте проект WPF User Control Library. Объедините имеющиеся двоичные ресурсы со словарем ресурсов уровня приложения из проекта
ObjectResourcesApp Имейте в виду, что данная строка чувствительна к пробелам. Если возле символов двоеточия или косой черты будут присутствовать лишние пробелы, то возникнут ошибки времени выполнения. Первая часть строки представляет собой дружественное имя внешней библиотеки (без файлового расширения). После двоеточия идет слово
ComponentНа этом знакомство с системой управления ресурсами WPF завершено. Описанные здесь приемы придется часто применять в большинстве разрабатываемых приложений (а то и во всех). Теперь давайте займемся исследованием встроенного API-интерфейса анимации WPF.
Службы анимации WPF
В дополнение к службам графической визуализации, которые рассматривались в главе 26, инфраструктура WPF предлагает API-интерфейс для поддержки служб анимации. Встретив термин анимация, многим на ум приходит вращающийся логотип компании, последовательность сменяющих друг друга изображений (для создания иллюзии движения), подпрыгивающий текст на экране или программа специфического типа вроде видеоигры или мультимедийного приложения.
Наряду с тем, что API-интерфейсы анимации WPF определенно могли бы использоваться для упомянутых выше целей, анимация может применяться всякий раз, когда приложению необходимо придать особый стиль. Например, можно было бы построить анимацию для кнопки на экране, чтобы она слегка увеличивалась, когда курсор мыши находится внутри ее границ (и возвращалась к прежним размерам, когда курсор покидает границы). Или же можно было бы предусмотреть анимацию для окна, обеспечив его закрытие с использованием определенного визуального эффекта, такого как постепенное исчезновение до полной прозрачности. Применением, более ориентированным на бизнес-приложения, может быть постепенное увеличение четкости отображения сообщений об ошибках на экране, улучшая восприятие пользовательского интерфейса. Фактически поддержка анимации WPF может применяться в приложениях любого рода (бизнес-приложениях, мультимедийных программах, видеоиграх и т.д.) всякий раз, когда нужно создать более привлекательное впечатление у пользователей.
Как и для многих других аспектов WPF, с построением анимации не связано ничего нового. Единственная особенность заключается в том, что в отличие от других API-интерфейсов, которые вы могли использовать в прошлом (включая Windows Forms), разработчики не обязаны создавать необходимую инфраструктуру вручную. В WPF не придется заранее создавать фоновые потоки или таймеры, применяемые для продвижения вперед анимационной последовательности, определять специальные типы для представления анимации, очищать и перерисовывать изображения либо реализовывать утомительные математические вычисления. Подобно другим аспектам WPF анимацию можно строить целиком в разметке XAML, целиком в коде C# либо с использованием комбинации того и другого.
На заметку! В среде Visual Studio отсутствует поддержка создания анимации посредством каких-либо графических инструментов и потому разметку XAML необходимо вводить вручную. Тем не менее, поставляемый в составе Visual Studio 2019 продукт Blend на самом деле имеет встроенный редактор анимации, который способен существенно упростить решение задач.
Роль классов анимации
Чтобы разобраться в поддержке анимации WPF, потребуется начать с рассмотрения классов анимации из пространства имен
System.Windows.Media.AnimationPresentationCore.dllAnimationВсе классы такого рода могут быть отнесены к одной из трех обширных категорий. Во-первых, любой класс, который следует соглашению об именовании вида ТипДанных
AnimationByteAnimationColorAnimationDoubleAnimationInt32AnimationВо-вторых, классы, следующие соглашению об именовании вида ТипДанных
AnimationUsingKeyFramesStringAnimationUsingKeyFramesDoubleAnimationUsingKeyFramesPointAnimationUsingKeyFramesВ-третьих, классы, которые следуют соглашению об именовании вида ТипДанных
AnimationUsingPathDoubleAnimationUsingPathPointAnimationtJsingPathВполне очевидно, упомянутые классы не применяются для того, чтобы напрямую предоставить анимационную последовательность переменной определенного типа данных (в конце концов, как можно было бы выполнить анимацию значения 9, используя объект
Int32Animation?В качестве примера возьмем свойства
HeightWidthLabeldoubleDoubleAnimationHeightColorAnimationСледует уяснить, что классы
AnimationПо соглашению свойство зависимости определяется как статическое, доступное только для чтения поле класса, имя которого образуется добавлением слова
PropertyHeightButtonButton.HeightPropertyСвойства То, From и By
Во всех классах
Animation•
То•
From•
ByНесмотря на тот факт, что все классы поддерживают свойства
ТоFromByThicknessВ связи со сказанным может возникнуть вопрос: почему не использовались обобщения .NET для определения единственного обобщенного класса анимации с одиночным параметром типа (скажем,
AnimateРоль базового класса Timeline
Хотя для определения виртуальных свойств
ТоFromByAnimationSystem.Windows.Media.Animation.Timeline
Реализация анимации в коде C#
Вы построите окно, содержащее элемент
ButtonSpinningButtonAnimationAppMouseEnter MouseEnter="btnSpinner_MouseEnter" Click="btnSpinner_OnClick"/>В файле отделенного кода импортируйте пространство имен
System.Windows.Media.Animationprivate bool _isSpinning=false;private void btnSpinner_MouseEnter( object sender, MouseEventArgs e){ if (!_isSpinning) { _isSpinning=true; // Создать объект DoubleAnimation и зарегистрировать // его с событием Completed. var dblAnim=new DoubleAnimation(); dblAnim.Completed +=(o, s)=> { _isSpinning=false; }; // Установить начальное и конечное значения. dblAnim.From=0; dblAnim.To=360; // Создать объект RotateTransform и присвоить // его свойству RenderTransform кнопки. var rt=new RotateTransform(); btnSpinner.RenderTransform=rt; // Выполнить анимацию объекта RotateTransform. rt.BeginAnimation(RotateTransform.AngleProperty, dblAnim); }}private void btnSpinner_OnClick( object sender, RoutedEventArgs e){}Первая крупная задача метода
btnSpinner_MouseEnter()DoubleAnimation0360CompletedЗатем создается объект
RotateTransformRenderTransformButtonbtnSpinnerRenderTransformAngleDoubleAnimationBeginAnimation()Добавьте в программу еще одну анимацию, которая заставит кнопку после щелчка плавно становиться невидимой. Для начала создайте обработчик события
ClickbtnSpinnerprivate void btnSpinner_OnClick( object sender, RoutedEventArgs e){ var dblAnim=new DoubleAnimation { From=1.0, To=0.0 }; btnSpinner.BeginAnimation(Button.OpacityProperty, dblAnim);}В коде обработчика события
btnSpinner_Click()OpacityУправление темпом анимации
По умолчанию анимация будет занимать приблизительно одну секунду для перехода между значениями, которые присвоены свойствам
FromТоОпределить другой период времени для перехода анимации можно посредством свойства
DurationDurationTimeSpanDurationprivate void btnSpinner_MouseEnter( object sender, MouseEventArgs e){ if (!_isSpinning) { _isSpinning=true; // Создать объект DoubleAnimation и зарегистрировать // его с событием Completed. var dblAnim=new DoubleAnimation(); dblAnim.Completed +=(o, s)=> { _isSpinning=false; }; // На завершение поворота кнопке отводится четыре секунды. dblAnim.Duration=new Duration(TimeSpan.FromSeconds(4)); ... }}Благодаря такой модификации у вас должен появиться шанс щелкнуть на кнопке во время ее вращения, после чего она плавно исчезнет.
На заметку! Свойство
BeginTimeAnimationTimeSpanЗапуск в обратном порядке и циклическое выполнение анимации
За счет установки в
trueAutoReverseAnimationprivate void btnSpinner_OnClick(object sender, RoutedEventArgs e){ DoubleAnimation dblAnim=new DoubleAnimation { From=1.0, To=0.0 }; // После завершения запустить в обратном порядке. dblAnim.AutoReverse=true; btnSpinner.BeginAnimation(Button.OpacityProperty, dblAnim);}Если нужно, чтобы анимация повторялась несколько раз (или никогда не прекращалась), тогда можно воспользоваться свойством
RepeatBehaviorAnimationTimeSpanRepeatBehaviorRepeatBehavior.ForeverDoubleAnimation// Повторять бесконечно.dblAnim.RepeatBehavior=RepeatBehavior.Forever;// Повторять три раза.dblAnim.RepeatBehavior=new RepeatBehavior(3);// Повторять в течение 30 секунд.dblAnim.RepeatBehavior=new RepeatBehavior(TimeSpan.FromSeconds(30));Итак, исследование приемов добавления анимации к аспектам какого-то объекта с использованием кода C# и API-интерфейса анимации WPF завершено. Теперь посмотрим, как делать то же самое с помощью разметки XAML.
Реализация анимации в разметке XAML
Реализация анимации в разметке подобна ее реализации в коде, по крайней мере, для простых анимационных последовательностей. Когда необходимо создать более сложную анимацию, которая включает изменение значений множества свойств одновременно, объем разметки может заметно увеличиться. Даже в случае применения какого-то инструмента для генерирования анимации, основанной на разметке XAML, важно знать основы представления анимации в XAML, поскольку тогда облегчается задача модификации и настройки сгенерированного инструментом содержимого.
На заметку! В подкаталоге
XamlAnimationsChapter_27Большей частью создание анимации подобно всему тому, что вы уже видели: по-прежнему производится конфигурирование объекта
AnimationBeginAnimation()Давайте рассмотрим полный пример анимации, определенной в терминах XAML, и подробно ее проанализируем. Приведенное далее определение XAML будет отображать окно, содержащее единственную метку. После того как объект
LabelGrowLabelFont.xaml xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Height="200" Width="600" WindowStartupLocation="CenterScreen" Title="Growing Label Font!"> RepeatBehavior="Forever"/> А теперь подробно разберем пример.
Роль раскадровок
При продвижении от самого глубоко вложенного элемента наружу первым встречается элемент
FromТоDurationRepeatBehavior RepeatBehavior="Forever"/>Как упоминалось ранее, элементы
AnimationStoryboardTargetPropertyFontSizeStoryboardBeginStoryboard RepeatBehavior="Forever"/> Роль триггеров событий
После того как элемент
BeginStoryboardОбычно когда ответ на событие реализуется в С#, пишется специальный код, который будет выполнен при поступлении события. Однако триггер — всего лишь способ получить уведомление о том, что некоторое событие произошло (загрузка элемента в память, наведение на него курсора мыши, получение им фокуса и т.д.).
Получив уведомление о появлении события, можно запускать раскадровку. В показанном ниже примере обеспечивается реагирование на факт загрузки элемента
LabelLoadedLabelEventTriggerLabel RepeatBehavior="Forever"/> Рассмотрим еще один пример определения анимации в XAML, на этот раз анимации ключевыми кадрами.
Анимация с использованием дискретных ключевых кадров
В отличие от объектов анимации линейной интерполяцией, обеспечивающих только перемещение между начальной и конечной точками, объекты анимации ключевыми кадрами позволяют создавать коллекции специальных значений, которые должны достигаться в определенные моменты времени.
Чтобы проиллюстрировать применение типа дискретного ключевого кадра, предположим, что необходимо построить элемент управления
ButtonОК!StringAnimation.xaml xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Height="100" Width="300" WindowStartupLocation="CenterScreen" Title="Animate String Data!"> FontSize="16pt" FontFamily="Verdana" Width="100"> Storyboard.TargetProperty="Content" Duration="0:0:3"> Первым делом обратите внимание, что для кнопки определяется триггер события, который обеспечивает запуск раскадровки при загрузке кнопки в память. Класс
StringAnimationUsingKeyFramesStoryboard.TargetPropertyВнутри элемента
StringAnimationUsingKeyFramesDiscreteStringKeyFrameContentStringAnimationUsingKeyFrames!ОТеперь, когда вы получили некоторое представление о том, как строятся анимации в коде C# и разметке XAML, давайте выясним роль стилей WPF, которые интенсивно задействуют графику, объектные ресурсы и анимацию.
Роль стилей WPF
При построении пользовательского интерфейса приложения WPF нередко требуется обеспечить общий вид и поведение для целого семейства элементов управления. Например, может понадобиться сделать так, чтобы все типы кнопок имели ту же самую высоту, ширину, цвет и размер шрифта для своего строкового содержимого. Хотя решить задачу можно было бы установкой идентичных значений в индивидуальных свойствах, такой подход затрудняет внесение изменений, потому что при каждом изменении придется переустанавливать один и тот же набор свойств во множестве объектов.
К счастью, инфраструктура WPF предлагает простой способ ограничения внешнего вида и поведения связанных элементов управления с использованием стилей. Выражаясь просто, стиль WPF — это объект, который поддерживает коллекцию пар "свойство-значение". С точки зрения программирования отдельный стиль представляется с помощью класса
System.Windows.StyleStyleSettersSetterSetterВ дополнение к коллекции
SettersStyleStyle•
Triggers•
BasedOn•
TargetTypeОпределение и применение стиля
Почти в каждом случае объект
StyleStyleStyleSettersДавайте построим стиль, который фиксирует базовые характеристики шрифта элемента управления в нашем приложении. Начните с создания в Visual Studio нового проекта приложения WPF по имени
WpfStylesApp.xaml Обратите внимание, что объект
BasicControlStyleSetter{StackResource}{DynamicResource}StyleGrid Style="{StaticResource BasicControlStyle}" Width="150"/> Style="{StaticResource BasicControlStyle}" Width="250"/>Если вы просмотрите элемент
WindowПереопределение настроек стиля
В то время как оба элемента управления подчиняются стилю, после применения стиля к элементу управления вполне допустимо изменять некоторые из определенных настроек. Например, элемент
ButtonHelpHand Cursor="Help" Style="{StaticResource BasicControlStyle}" Width="250" />Стили обрабатываются перед настройками индивидуальных свойств элемента управления, к которому применен стиль; следовательно, элементы управления могут "переопределять" настройки от случая к случаю.
Влияние атрибута TargetType на стили
В настоящий момент наш стиль определен так, что его может задействовать любой элемент управления (и он должен делать это явно, устанавливая свое свойство
StyleControlTargetTypeTargetTypeStyleАрр.xamlНа заметку! При построении стиля, использующего базовый класс, нет нужды беспокоиться о том, что значение присваивается свойству зависимости, которое не поддерживается производными типами. Если производный тип не поддерживает заданное свойство зависимости, то оно игнорируется.
Кое в чем прием помог, но все равно вы имеете стиль, который может применяться к любому элементу управления. Атрибут
TargetTypeТакой стиль будет работать только с элементами управления
ButtonButton Style="{StaticResource BigGreenButton}" Width="250" Cursor="Help"/>Результирующий вывод представлен на рис. 27.7.
Еще один эффект от атрибута
TargetTypeх:KeyВот еще один стиль уровня приложения, который будет автоматически применяться ко всем элементам управления
TextBoxТеперь можно определять любое количество элементов управления
TextBoxTextBoxStyleB {x:Null}txtTesttxtTest2 BorderThickness="5" Height="60" Width="100" Text="Ha!"/>Создание подклассов существующих стилей
Новые стили можно также строить на основе существующего стиля посредством свойства
BasedOnх:Кеу{StaticResource}{DynamicResource}BigGreenButtonButtonЧтобы применить новый стиль, модифицируйте разметку для кнопки следующим образом:
Style="{StaticResource TiltButton}" Width="250" Cursor="Help"/>Такое действие изменяет внешний вид изображения, как показано на рис. 27.8.
Определение стилей с триггерами
Стили WPF могут также содержать триггеры за счет упаковки объектов
TriggerTriggersStyleSetterДалее приведена модифицированная разметка для стиля элементов управления типа
TextBoxTextBoxПри тестировании этого стиля вы обнаружите, что по мере перехода с помощью клавиши <ТаЬ> между элементами
TextBoxTextBox{x:Null}StyleТриггеры свойств также весьма интеллектуальны в том смысле, что когда условие триггера не истинно, то свойство автоматически получает стандартное значение. Следовательно, как только
TextBoxОпределение стилей с множеством триггеров
Триггеры могут быть спроектированы так, что определенные элементы
SetterTextBoxYellowMultiTriggernСтили с анимацией
Стили также могут содержать в себе триггеры, которые запускают анимационную последовательность. Ниже показан последний стиль, который после применения к элементам управления
ButtonЗдесь коллекция
TriggersIsMouseOvertrueTrigger.EnterActionsHeight200Height40Trigger.ExitActionsIsMouseOverfalseПрименение стилей в коде
Вспомните, что стиль может применяться также во время выполнения. Прием удобен, когда у конечных пользователей должна быть возможность выбора внешнего вида для их пользовательского интерфейса, требуется принудительно устанавливать внешний вид и поведение на основе настроек безопасности (например, стиль
DisableAllButtonВ текущем проекте было определено порядочное количество стилей, многие из которых могут применяться к элементам управления
ButtonListBoxDockPanel SelectionChanged="comboStyles_Changed" /> Элемент управления
ListBoxIstStylespublic MainWindow(){ InitializeComponent(); // Заполнить окно со списком всеми стилями для элементов Button. lstStyles.Items.Add("GrowingButtonStyle"); lstStyles.Items.Add("TiltButton"); lstStyles.Items.Add("BigGreenButton"); lstStyles.Items.Add("BasicControlStyle");}}Последней задачей является обработка события
SelectionChangedTryFindResouce()private void comboStyles_Changed(object sender, SelectionChangedEventArgs e){ // Получить имя стиля, выбранное в окне со списком. var currStyle=(Style)TryFindResource(lstStyles.SelectedValue); if (currStyle==null) return; // Установить стиль для типа кнопки. this.btnStyle.Style=currStyle;}После запуска приложения появляется возможность выбора одного из четырех стилей кнопок на лету. На рис. 27.9 показано готовое приложение в действии.
Логические деревья, визуальные деревья и стандартные шаблоны
Теперь, когда вы понимаете, что собой представляют стили и ресурсы, есть еще несколько тем, которые потребуется раскрыть, прежде чем приступать к изучению построения специальных элементов управления. В частности, необходимо выяснить разницу между логическим деревом, визуальным деревом и стандартным шаблоном. При вводе разметки XAML в Visual Studio или в редакторе вроде Kaxaml разметка является логическим представлением документа XAML. В случае написания кода С#, который добавляет в элемент управления
StackPanelWindowPageNavigationWindowОднако за каждым логическим деревом стоит намного более сложное представление, которое называется визуальным деревом и внутренне применяется инфраструктурой WPF для корректной визуализации элементов на экране. Внутри любого визуального дерева будут находиться полные детали шаблонов и стилей, используемых для визуализации каждого объекта, включая все необходимые рисунки, фигуры, визуальные объекты и объекты анимации.
Полезно уяснить разницу между логическим и визуальным деревьями, потому что при построении специального шаблона элемента управления на самом деле производится замена всего или части стандартного визуального дерева элемента управления собственным вариантом. Следовательно, если нужно, чтобы элемент управления
ButtonButtonButtonНа заметку! Элементы управления WPF часто описывают как лишенные внешности. Это относится к тому факту, что внешний вид элемента управления WPF совершенно не зависит от его поведения и допускает настройку.
Программное инспектирование логического дерева
Хотя анализ логического дерева окна во время выполнения — не слишком распространенное действие при программировании с применением WPF, полезно упомянуть о том, что в пространстве имен
System.WindowsLogicalTreeHelperTreesAndTemplatesAppЗамените элемент
GridButtonTextBoxClick Margin="4" BorderBrush="Blue" Height="40" Click="btnShowLogicalTree_Click"/> BorderBrush="Blue" Height="40" Click="btnShowVisualTree_Click"/> Background="AliceBlue" IsReadOnly="True" BorderBrush="Red" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" />Внутри файла кода C# определите переменную-член
_dataToShowstringClickbtnShowLogicalTreeWindowGetChildren()LogicalTreeHelperprivate string _dataToShow=string.Empty;private void btnShowLogicalTree_Click(object sender, RoutedEventArgs e){ _dataToShow=""; BuildLogicalTree(0, this); txtDisplayArea.Text=_dataToShow;}void BuildLogicalTree(int depth, object obj){ // Добавить имя типа к переменной-члену _dataToShow. _dataToShow +=new string(' ', depth) + obj.GetType().Name + "\n"; // Если элемент - не DependencyObject, тогда пропустить его. if (!(obj is DependencyObject)) return; // Выполнить рекурсивный вызов для каждого логического дочернего элемента. foreach (var child in LogicalTreeHelper.GetChildren((DependencyObject)obj)) { BuildLogicalTree(depth + 5, child); }}private void btnShowVisualTree_Click( object sender, RoutedEventArgs e){}После запуска приложения и щелчка на кнопке Logical Tree of Window (Логическое дерево окна) в текстовой области отобразится древовидное представление, которое выглядит почти как точная копия исходной разметки XAML (рис. 27.10).
Программное инспектирование визуального дерева
Визуальное дерево объекта
WindowVisualTreeHelperSystem.Windows.MediaClickButtonbtnShowVisualTreeusing System.Windows.Media;private void btnShowVisualTree_Click(object sender, RoutedEventArgs e){ _dataToShow=""; BuildVisualTree(0, this); txtDisplayArea.Text=_dataToShow;}void BuildVisualTree(int depth, DependencyObject obj){ // Добавить имя типа к переменной-члену _dataToShow. _dataToShow +=new string(' ', depth) + obj.GetType().Name + "\n"; // Выполнить рекурсивный вызов для каждого визуального дочернего элемента. for (int i=0; i < VisualTreeHelper.GetChildrenCount(obj); i++) { BuildVisualTree(depth + 1, VisualTreeHelper.GetChild(obj, i)); }}На рис. 27.11 видно, что визуальное дерево открывает доступ к нескольким низкоуровневым агентам визуализации, таким как
ContentPresenterAdornerDecoratorTextBoxLineDrawingVisual
Программное инспектирование стандартного шаблона элемента управления
Вспомните, что визуальное дерево применяется инфраструктурой WPF для выяснения, каким образом визуализировать элемент
WindowControlTemplateTemplate// Получить стандартный шаблон элемента Button.Button myBtn=new Button();ControlTemplate template=myBtn.Template;Подобным же образом можно создать в коде новый объект
ControlTemplateTemplate// Подключить новый шаблон для использования в кнопке.Button myBtn=new Button();ControlTemplate customTemplate=new ControlTemplate();// Предположим, что этот метод добавляет весь код для звездообразного шаблона.MakeStarTemplate(customTemplate);myBtn.Template=customTemplate;Наряду с тем, что новый шаблон можно строить в коде, намного чаще это делается в разметке XAML. Тем не менее, прежде чем приступить к построению собственных шаблонов, завершите текущий пример и добавьте возможность просмотра стандартного шаблона для элемента управления WPF во время выполнения, что может оказаться полезным способом ознакомления с общей структурой шаблона Добавьте в разметку окна новую панель
StackPanelDockPanel BorderThickness="4" Width="358"> FontWeight="DemiBold" /> Background="BlanchedAlmond" Height="22" Text="System.Windows.Controls.Button" /> Height="40" Width="100" Margin="5" Click="btnTemplate_Click" HorizontalAlignment="Left" /> Width="301" Margin="10" Background="LightGreen" > Добавьте пустой обработчик события
btnTemplate_Click()private void btnTemplate_Click( object sender, RoutedEventArgs e){}Текстовая область слева вверху позволяет вводить полностью заданное имя элемента управления WPF, расположенного в сборке
PresentationFramework.dllControlprivate Control _ctrlToExamine=null;Ниже показан остальной код, который требует импортирования пространств имен
System.Reflection.System.XmlSystem.Windows.Markupprivate void btnTemplate_Click( object sender, RoutedEventArgs e){ _dataToShow=""; ShowTemplate(); txtDisplayArea.Text=_dataToShow;}private void ShowTemplate(){ // Удалить элемент, который в текущий момент находится // в области предварительного просмотра. if (_ctrlToExamine !=null) stackTemplatePanel.Children.Remove(_ctrlToExamine); try { // Загрузить PresentationFramework и создать экземпляр // указанного элемента управления. Установить его размеры для // отображения, а затем добавить в пустой контейнер StackPanel. Assembly asm=Assembly.Load("PresentationFramework, Version=4.0.0.0," + "Culture=neutral, PublicKeyToken=31bf3856ad364e35"); _ctrlToExamine=(Control)asm.CreateInstance(txtFullName.Text); _ctrlToExamine.Height=200; _ctrlToExamine.Width=200; _ctrlToExamine.Margin=new Thickness(5); stackTemplatePanel.Children.Add(_ctrlToExamine); // Определить настройки XML для предохранения отступов. var xmlSettings=new XmlWriterSettings{Indent=true}; // Создать объект StringBuilder для хранения разметки XAML. var strBuilder=new StringBuilder(); // Создать объект XmlWriter на основе имеющихся настроек. var xWriter=XmlWriter.Create(strBuilder, xmlSettings); // Сохранить разметку XAML в объекте XmlWriter на основе ControlTemplate. XamlWriter.Save(_ctrlToExamine.Template, xWriter); // Отобразить разметку XAML в текстовом поле. _dataToShow=strBuilder.ToString(); } catch (Exception ex) { _dataToShow=ex.Message; }}Большая часть работы связана с отображением скомпилированного ресурса BAML на строку разметки XAML. На рис. 27.12 демонстрируется финальное приложение в действии на примере вывода стандартного шаблона для элемента управления
System.Windows.Controls.DatePicker
К настоящему моменту вы должны лучше понимать взаимосвязь между логическими деревьями, визуальными деревьями и стандартными шаблонами элементов управления. Остаток главы будет посвящен построению специальных шаблонов и пользовательских элементов управления.
Построение шаблона элемента управления с помощью инфраструктуры триггеров
Специальный шаблон для элемента управления можно создавать с помощью только кода С#. Такой подход предусматривает добавление данных к объекту
ControlTemplateTemplateControlTemplateВ оставшемся материале главы вы узнаете, как строить специальные шаблоны с применением Visual Studio. Попутно вы ознакомитесь с инфраструктурой триггеров WPF и научитесь использовать анимацию для встраивания визуальных подсказок конечным пользователям. Применение при построении сложных шаблонов только IDE-среды Visual Studio может быть связано с довольно большим объемом клавиатурного набора и трудной работы. Конечно, шаблоны производственного уровня получат преимущество от использования продукта Blend, устанавливаемого вместе с Visual Studio. Тем не менее, поскольку текущее издание книги не включает описание Blend, время засучить рукава и приступить к написанию некоторой разметки.
Для начала создайте новый проект приложения WPF по имени
ButtonTemplateGrid В обработчике события
ClickMessageBox.Show()В настоящее время этот элемент
ButtonButton VerticalAlignment="Center" HorizontalAlignment="Center" FontWeight="Bold" FontSize="20" Content="OK!"/> Здесь определен шаблон, который состоит из именованного элемента
GridEllipseLabelGridClickEllipsePolygonШаблоны как ресурсы
В текущий момент ваш шаблон внедрен в специфический элемент управления
ButtonButtonButtonApplication.ResourcesАрр.xamlKeyTargetType HorizontalAlignment="Center" FontWeight="Bold" FontSize="20" Content="OK!"/> Модифицируйте разметку для
Button Click="myButton_Click" Template="{StaticResource RoundButtonTemplate}">Из-за того, что этот ресурс доступен всему приложению, можно определять любое количество круглых кнопок, просто применяя имеющийся шаблон. В целях тестирования создайте два дополнительных элемента управления
ButtonClick Click="myButton_Click" Template="{StaticResource RoundButtonTemplate}"> Template="{StaticResource RoundButtonTemplate}"> Template="{StaticResource RoundButtonTemplate}">Встраивание визуальных подсказок с использованием триггеров
При определении специального шаблона также удаляются все визуальные подсказки стандартного шаблона. Например, стандартный шаблон кнопки содержит разметку,которая задает внешний вид элемента управления при возникновении определенных событий пользовательского интерфейса, таких как получение фокуса, щелчок кнопкой мыши, включение (или отключение) и т.д. Пользователи довольно хорошо приучены к визуальным подсказкам подобного рода, т.к. они придают элементу управления некоторую осязаемую реакцию. Тем не менее, в шаблоне
RoundButtonTemplateЗадачу можно решить с применением триггеров, как вы только что узнали. Для простых операций триггеры работают просто великолепно. Существуют дополнительные способы достижения цели, которые выходят за рамки настоящей книги, но больше информации доступно по адресу
https://docs.microsoft.com/ru-ru/dotnet/desktop/wpf/controls/how-to-create-apply-templateВ качестве примера обновите шаблон
RoundButtonTemplateGrid FontSize="20" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center" /> Value="Blue"/> Property="Foreground" Value="Yellow"/> Property="RenderTransformOrigin" Value="0.5,0.5"/> Property="RenderTransform"> Роль расширения разметки {TemplateBinding}
Проблема с шаблоном элемента управления связана с тем, что каждая кнопка выглядит и содержит тот же самый текст. Следующее обновление разметки не оказывает никакого влияния:
Background="Red" Content="Howdy!" Click="myButton_Click" Template="{StaticResource RoundButtonTemplate}" /> Background="LightGreen" Content="Cancel!" Template="{StaticResource RoundButtonTemplate}" /> Background="Yellow" Content="Format" Template="{StaticResource RoundButtonTemplate}" />Причина в том, что стандартные свойства элемента управления (такие как
BackGroundContent{TemplateBinding}Ниже приведена переделанная версия шаблона
RoundButtonTemplate{TemplateBinding}BackgroundButtonFillEllipseContentButtonContentLabel FontSize="20" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center" />После такого обновления появляется возможность создания кнопок с разными цветами и текстом. Результат обновления разметки XAML представлен на рис.27.13.
Роль класса ContentPresenter
При проектировании шаблона для отображения текстового значения элемента управления использовался элемент
LabelButtonContent{TemplateBinding}ButtonНо что, если необходимо передать сложное содержимое члену шаблона, который не имеет свойства
ContentLabelTextBoxContentPresenterContentPresenterContent Встраивание шаблонов в стили
В данный момент наш шаблон просто определяет базовый внешний вид и поведение элемента управления
ButtonButton FontWeight="Bold" Template="{StaticResource RoundButtonTemplate}" Click="myButton_Click"/>При желании значения базовых свойств можно устанавливать в шаблоне. В сущности, таким способом фактически создаются стандартный внешний вид и поведение. Как вам уже должно быть понятно, это работа стилей WPF. Когда строится стиль (для учета настроек базовых свойств), можно определить шаблон внутри стиля! Ниже показан измененный ресурс приложения внутри файла
App.xamlRoundButtonSyle После такого обновления кнопочные элементы управления можно создавать с установкой свойства
Style Click="myButton_Click" Style="{StaticResource RoundButtonStyle}"/>Несмотря на то что внешний вид и поведение кнопки остаются такими же, преимущество внедрения шаблонов внутрь стилей связано с тем, что появляется возможность предоставить готовый набор значений для общих свойств. На этом обзор применения Visual Studio и инфраструктуры триггеров при построении специальных шаблонов для элемента управления завершен. Хотя об инфраструктуре WPF можно еще много чего сказать, теперь у вас имеется хороший фундамент для дальнейшего самостоятельного изучения.
Резюме
Первой в главе рассматривалась система управления ресурсами WPF. Мы начали с исследования работы с двоичными ресурсами и роли объектных ресурсов. Вы узнали, что объектные ресурсы представляют собой именованные фрагменты разметки XAML, которые могут быть сохранены в разнообразных местах с целью многократного использования содержимого.
Затем был описан API-интерфейс анимации WPF. В приведенных примерах анимация создавалась с помощью кода С#, а также посредством разметки XAML. Для управления выполнением анимации, определенной в разметке, применяются элементы
StoryboardПосле этого вы прояснили отношение между логическим и визуальным деревьями. В своей основе логическое дерево является однозначным соответствием разметке, которая создана для описания корневого элемента WPF. Позади логического дерева находится гораздо более глубокое визуальное дерево, содержащее детальные инструкции визуализации.
Кроме того, вы изучили роль стандартного шаблона. Не забывайте, что при построении специальных шаблонов вы по существу заменяете все визуальное дерево элемента управления (или часть дерева) собственной реализацией.
Глава 28 Уведомления WPF, проверка достоверности, команды и MWM
В настоящей главе исследование программной модели WPF завершается рассмотрением возможностей, которые поддерживаются паттерном "модель-представление-модель представления" (Model View ViewModel — MWM). Вы также узнаете о системе уведомлений WPF и ее реализации паттерна "Наблюдатель" (Observer) через наблюдаемые модели и коллекции. Обеспечение автоматического отображения пользовательским интерфейсом текущего состояния данных значительно улучшает его восприятие конечными пользователями и сокращает объем ручного кодирования, требуемого для получения того же результата с помощью более старых технологий (вроде Windows Forms).
Во время разработки на основе паттерна "Наблюдатель" вы ознакомитесь с механизмами добавления проверки достоверности в свои приложения. Проверка достоверности — жизненно важная часть любого приложения, которая позволяет не только сообщать пользователю о том, что что-то пошло не так, но и указывать, в чем именно заключается проблема. Вы научитесь встраивать проверку достоверности в разметку представления для информирования пользователя о возникающих ошибках.
Затем вы более глубоко погрузитесь в систему команд WPF и создадите специальные команды для инкапсуляции программной логики почти так, как поступали в главе 25 со встроенными командами. С созданием специальных команд связано несколько преимуществ, включая (помимо прочего) возможность многократного использования кода, инкапсуляцию логики и разделение обязанностей.
Наконец, вы задействуете все это в примере приложения MWM.
Введение в паттерн MWM
Прежде чем приступить к детальному исследованию уведомлений, проверки достоверности и команд в WPF, было бы неплохо пролить свет на конечную цель настоящей главы, которой является паттерн "модель-представление-модель представления" (MWM). Будучи производным от паттерна проектирования "Модель представления" (Presentation Model) Мартина Фаулера, паттерн MWM задействует обсуждаемые в главе возможности, специфичные для XAML, чтобы сделать процесс разработки приложений WPF более быстрым и ясным. Само название паттерна отражает его основные компоненты: модель (Model), представление (View) и модель представления (ViewModel).
Модель
Модель — это объектное представление имеющихся данных. В паттерне MWM модели концептуально совпадают с моделями внутри нашего уровня доступа к данным (Data Access Layer — DAL). Иногда они являются теми же физическими классами, но поступать так вовсе не обязательно. По мере чтения главы вы узнаете, каким образом решать, применять ли модели DAL или же создавать новые модели.
Модели обычно используют в своих интересах встроенную (либо специальную) проверку достоверности через аннотации данных и интерфейс
INotifyDataErrorInfoПредставление
Представление — это пользовательский интерфейс приложения, который спроектирован так, чтобы быть чрезвычайно легковесным. Вспомните о стенде меню в ресторане для автомобилистов. На стенде отображаются позиции меню и цены, а также имеется механизм взаимодействия клиента с внутренними системами. Однако в стенд не внедрены какие-либо интеллектуальные возможности, разве что он может быть снабжен специальной логикой пользовательского интерфейса, такой как включение освещения в темное время суток.
Представления MWM должны разрабатываться с учетом аналогичных целей. Любые интеллектуальные возможности необходимо встраивать в какие-то другие места приложения. Иметь прямое отношение к манипулированию пользовательским интерфейсом может только код в файле отделенного кода (например, в
MainWindow.xaml.csМодель представления
В WPF и других технологиях XAML модель представления служит двум целям.
• Модель представления предлагает единственное местоположение для всех данных, необходимых представлению. Это вовсе не означает, что модель представления отвечает за получение действительных данных; взамен она является просто транспортным механизмом для перемещения данных из хранилища в представление. Обычно между представлениями и моделями представлений имеется отношение "один к одному", но существуют архитектурные отличия, которые в каждом конкретном случае могут варьироваться.
• Вторая цель модели представления касается ее действия в качестве контроллера для представления. Почти как стенд меню модель представления принимает указание от пользователя и передает их соответствующему коду для выполнения подходящих действий. Довольно часто такой код имеет форму специальных команд.
Анемичные модели или анемичные модели представлений
На заре развития WPF, когда разработчики все еще были в поиске лучшей реализации паттерна MWM, велись бурные (а временами и жаркие) дискуссии о том, где реализовывать элементы, подобные проверке достоверности и паттерну "Наблюдатель". Один лагерь (сторонников анемичной (иногда называемой бескровной) модели) аргументировал, что все элементы должны находиться в моделях представлений, поскольку добавление таких возможностей к модели нарушает принцип разделения обязанностей. Другой лагерь (сторонников анемичной модели представления) утверждал, что все элементы должны находиться в моделях, т.к. тогда сокращается дублирование кода.
Конечно, фактический ответ зависит от обстоятельств. Реализация классами моделей интерфейсов
INotifyPropertyChangedIDataErrorInfоINotifyDataErrorInfoНа заметку! Для WPF доступны многочисленные инфраструктуры MWM, такие как MWMLite, Caliburn.Micro и Prism (хотя Prism — нечто намного большее, чем просто инфраструктура MWM). В настоящей главе обсуждается паттерн MWM и функциональные средства WPF, которые поддерживают его реализацию. Исследование других инфраструктур и выбор среди них наиболее подходящей для нужд приложения остается за вами как разработчиком.
Система уведомлений привязки WPF
Значительным недостатком системы привязки Windows Forms является отсутствие уведомлений. Если находящиеся внутри представления данные модифицируются в коде, то пользовательский интерфейс также должен обновляться программно, чтобы оставаться в синхронном состоянии с ними. Итогом будет большое количество вызовов метода
Refresh()Refresh()Система привязки, встроенная в приложения на основе XAML, устраняет указанную проблему за счет того, что позволяет привязывать объекты данных и коллекции к системе уведомлений, разрабатывая их как наблюдаемые. Всякий раз, когда изменяется значение свойства в наблюдаемой модели либо происходит изменение в наблюдаемой коллекции (например, добавление, удаление или переупорядочение элементов), инициируется событие (
NotifyPropertyChangedNotifyCollectionChangedНаблюдаемые модели и коллекции
В этом разделе вы построите приложение, в котором используются наблюдаемые модели и коллекции. Для начала создайте новый проект приложения WPF по имени
WpfNotificationsComboBoxTextBoxMainWindow.xaml SharedSizeGroup="CarLabels"/> DisplayMemberPath="PetName" /> SharedSizeGroup="CarLabels"/> HorizontalAlignment="Right" Orientation="Horizontal" Margin="0,5,0,5"> Padding="4, 2"/> Окно должно напоминать показанное на рис. 28.1.
Свойство
IsSharedSizeScopeGridColumnDefinitionsSharedSizeGroupGridЩелкните правой кнопкой мыши на имени проекта в окне Solution Explorer, выберите в контекстном меню пункт Add►New Folder (Добавить►Новая папка) и назначьте новой папке имя
ModelsCar.cspublic class Car{ public int Id { get; set; } public string Make { get; set; } public string Color { get; set; } public string PetName { get; set; }}Добавление привязок и данных
Следующий шаг заключается в создании операторов привязки для элементов управления. Вспомните, что конструкции привязки данных вращаются вокруг контекста данных, который может быть установлен в самом элементе управления или в родительском элементе управления. Здесь контекст будет установлен в элементе
DetailsGridУстановите свойство
DataContextSelectedItemComboBoxGrid DataContext="{Binding ElementName=cboCars, Path=SelectedItem}">Текстовые поля в элементе
DetailsGridTextTextBoxНаконец, поместите нужные данные в элемент управления
ComboBoxMainWindow.xaml.csCarItemsSourceComboBoxusingWpfNotifications.Modelsusing WpfNotifications.Models;// Для краткости код не показан.public partial class MainWindow : Window{ readonly IList _cars = new List(); public MainWindow() { InitializeComponent(); _cars.Add(new Car {Id = 1, Color = "Blue", Make = "Chevy", PetName = "Kit"}); _cars.Add(new Car {Id = 2, Color = "Red", Make = "Ford", PetName = "Red Rider"}); cboCars.ItemsSource = _cars; }}Запустите приложение. Вы увидите, что в поле со списком Vehicle для выбора доступны два варианта автомобилей. Выбор одного из них приводит к автоматическому заполнению текстовых полей сведениями об автомобиле. Измените цвет одного из автомобилей, выберите другой автомобиль и затем возвратитесь к автомобилю, запись о котором редактировалась. Вы обнаружите, что новый цвет по-прежнему связан с автомобилем. Здесь нет ничего примечательного, просто демонстрируется мощь привязки данных XAML.
Изменение данных об автомобиле в коде
Несмотря на то что предыдущий пример работает ожидаемым образом, когда данные изменяются программно, пользовательский интерфейс не отразит изменения до тех пор, пока в приложении не будет предусмотрен код для обновления данных. Чтобы проиллюстрировать сказанное, добавьте обработчик события
ClickbtnChangeColorButton x:Name="btnChangeColor" Content="Change Color" Margin="5,0,5,0" Padding="4, 2" Click="BtnChangeColor_OnClick"/>Внутри обработчика события
BtnChangeColor_OnClick()SelectedItemComboBoxPinkprivate void BtnChangeColor_OnClick(object sender, RoutedEventArgs e){ _cars.First(x => x.Id == ((Car)cboCars.SelectedItem)?.Id).Color = "Pink";}Запустите приложение, выберите автомобиль и щелкните на кнопке Change Color (Изменить цвет). Никаких видимых изменений не произойдет. Выберите другой автомобиль и затем снова первоначальный. Теперь вы заметите обновленное значение. Для пользователя такое поведение не особенно подходит.
Добавьте обработчик события
ClickbtnAddCar Click="BtnAddCar_OnClick" />В обработчике события
BtnAddCar_OnClick()Carprivate void BtnAddCar_Click(object sender, RoutedEventArgs e){ var maxCount = _cars?.Max(x => x.Id) ?? 0; _cars?.Add(new Car { Id=++maxCount,Color="Yellow",Make="VW",PetName="Birdie"});}Запустите приложение, щелкните на кнопке Add Car (Добавить автомобиль) и просмотрите содержимое элемента управления
ComboBoxComboBoxCarCarНаблюдаемые модели
Проблема с тем, что изменение значения свойства модели не отображается в пользовательском интерфейсе, решается за счет реализации классом модели
CarINotifyPropertyChangedINotifyPropertyChangedPropertyChangedEventINotifyPropertyChangedINotifyPropertyChangedpublic interface INotifyPropertyChanged{ event PropertyChangedEventHandler PropertyChanged;}Добавьте в файл
Car.csusingusing System.ComponentModel;using System.Runtime.CompilerServices;Затем обеспечьте реализацию классом
CarINotifyPropertyChangedpublic class Car : INotifyPropertyChanged{ // Для краткости код не показан. public event PropertyChangedEventHandler PropertyChanged;}Событие
PropertyChangedPropertyChangedEventArgsPropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Model"));Первый параметр представляет собой объект, который инициирует событие. Конструктор класса
PropertyChangedEventArgsPropertyChangedEventArgsString.EmptyВы сами управляете тем, какие свойства вовлечены в процесс автоматического обновления. Автоматически обновляться будут только те свойства, которые генерируют событие
PropertyChangedsetPropertyChangedsetOnPropertyChanged()Carprotected void OnPropertyChanged([CallerMemberName] string propertyName = ""){ PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));}Модифицируйте каждое автоматическое свойство класса
CargetsetOnPropertyChanged()Idprivate int _id;public int Id{ get => _id; set { if (value == _id) return; _id = value; OnPropertyChanged(); }}Проделайте аналогичную работу со всеми остальными свойствами в классе и снова запустите приложение. Выберите автомобиль и щелкните на кнопке Change Color. Изменение немедленно отобразится в пользовательском интерфейсе. Первая проблема решена!
Использование операции nameof
В версии C# 6 появилась операция
nameofOnPropertyChanged()setpublic string Color{ get { return _color; } set { if (value == _color) return; _color = value; OnPropertyChanged(nameof(Color)); }}Обратите внимание на то, что в случае использования операции
nameof[CallerMemberName]OnPropertyChanged()nameofCallerMemberNameНаблюдаемые коллекции
Следующей проблемой, которую необходимо решить, является обновление пользовательского интерфейса при изменении содержимого коллекции, что достигается путем реализации интерфейса
INotifyCollectionChangedINotifyPropertyChangedCollectionChangedINotifyPropertyChangedINotifyCollectionChangedsetCollectionChanged
Использование класса ObservableCollection
К счастью, существует намного более легкий способ, чем создание собственных классов коллекций. Класс
ObservableCollectionINotifyCollectionChangedINotifyPropertyChangedCollectionusingSystem.Collections.ObjectModel_carsprivate readonly IList _cars = new ObservableCollection(); Снова запустите приложение и щелкните на кнопке Add Car. Новые записи будут должным образом появляться.
Реализация флага изменения
Еще одним преимуществом наблюдаемых моделей является способность отслеживать изменения состояния. Отслеживать флаги изменения (т.е. когда изменяется одно и более значений объекта) в WPF довольно легко. Добавьте в класс
CarboolIsChangedsetOnPropertyChanged()Carprivate bool _isChanged;public bool IsChanged { get => _isChanged; set { if (value == _isChanged) return; _isChanged = value; OnPropertyChanged(); }}Свойство
IsChangedtrueOnPropertyChanged()IsChangedtrueOnPropertyChanged()nameofprotected virtual void OnPropertyChanged( [CallerMemberName] string propertyName = ""){ if (propertyName != nameof(IsChanged)) { IsChanged = true; } PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));}Откройте файл
MainWindow.xamlDetailsGridRowDefinitionGridLabelCheckboxIsChanged Margin="10,0,0,0" IsEnabled="False" IsChecked="{Binding Path=IsChanged}" />Если вы запустите приложение прямо сейчас, то увидите, что каждая отдельная запись отображается как измененная, хотя пока ничего не изменялось! Дело в том, что во время создания объекта устанавливаются значения свойств, а установка любых значений приводит к вызову метода
OnPropertyChanged()IsChangedIsChangedfalseMainWindow.xaml.cs_cars.Add( new Car {Id = 1, Color = "Blue", Make = "Chevy", PetName = "Kit", IsChanged = false});_cars.Add( new Car {Id = 2, Color = "Red", Make = "Ford", PetName = "Red Rider", IsChanged = false});Снова запустите приложение, выберите автомобиль и щелкните на кнопке Change Color. Флажок Is Changed (Изменено) становится отмеченным наряду с изменением цвета.
Обновление источника через взаимодействие с пользовательским интерфейсом
Во время выполнения приложения можно заметить, что при вводе в текстовых полях флажок Is Changed не становится отмеченным до тех пор, пока фокус не покинет элемент управления, где производился ввод. Причина кроется в свойстве
UpdateSourceTriggerTextBoxСвойство
UpdateSourceTriggerUpdateSourceTrigger
Стандартным событием обновления для элементов управления
TextBoxLostFocusPropertyChangedTextBoxЕсли вы запустите приложение и начнете ввод в текстовом поле Color (Цвет), то флажок Is Changed немедленно отметится. Может возникнуть вопрос о том, почему для элементов управления
TextBoxLostFocusUpdateSourceTriggerTextBoxTextBoxTextBoxИтоговые сведения об уведомлениях и наблюдаемых моделях
Применение интерфейсов
INotifyPropertyChangedObservableCollectionObservableCollectionINotifyPropertyChangedПроверка достоверности WPF
Теперь, когда интерфейс
INotifyPropertyChangedObservableCollectionПроверка достоверности происходит, когда привязка данных пытается обновить источник данных. В дополнение к встроенным проверкам, таким как исключения в блоках
setValidationНа заметку! В каждом разделе главы можно продолжить работу с проектом из предыдущего раздела или создать копию проекта, специально предназначенную для нового раздела. Всем последующим разделам соответствуют отдельные проекты, которые доступны в каталоге с кодом для настоящей главы внутри хранилища GitHub.
Модификация примера для демонстрации проверки достоверности
В каталоге для этой главы внутри хранилища GitHub новый проект (скопированный из предыдущего примера) называется
WpfValidationsКласс Validation
Прежде чем добавлять проверку достоверности в проект, важно понять назначение класса
ValidationValidation
Варианты проверки достоверности
Как упоминалось ранее, технологии XAML поддерживают несколько механизмов для встраивания логики проверки достоверности внутрь приложения. В последующих разделах рассматриваются три самых распространенных варианта проверки.
Уведомление по исключениям
Хотя исключения не должны использоваться для обеспечения выполнения бизнес-логики, они могут (и будут) возникать, а потому требуют надлежащей обработки. Если исключения не обработаны в коде, тогда пользователь должен получить визуальную обратную связь об имеющейся проблеме. В отличие от Windows Forms в инфраструктуре WPF исключения привязки (по умолчанию) не распространяются до пользователя как собственно исключения. Тем не менее, они указываются визуально с применением декоратора (визуального уровня, который находится над элементами управления).
Запустите приложение, выберите запись в элементе
ComboВохIdIdintintnullIdCarIdintsetSystem.Windows.Data Error: 7 : ConvertBack cannot convert value '' (type 'String').
BindingExpression:Path=Id; DataItem='Car' (HashCode=52579650); target element is
'TextBox' (Name=''); target property is 'Text' (type 'String') FormatException:'System.
FormatException: Input string was not in a correct format.
Ошибка System.Windows.Data: 7 : ConvertBack не может преобразовать (типа String).
BindingExpression : Path=Id; DataItem='Car' (HashCode=52579650);
целевой элемент - TextBox (Name=''); целевое свойство - Text
(типа String) FormatExceptionSystem.FormatException:
Входная строка не имела корректный формат.
Визуально исключение представляется с помощью тонкого прямоугольника красного цвета вокруг элемента управления (рис. 28.2).
Прямоугольник красного цвета — это свойство
ErrorTemplateValidationErrorTemplateИнтерфейс IDataErrorInfo
Интерфейс
IDataErrorInfoПоказанный далее интерфейс
IDataErrorInfoErrorErrorpublic interface IDataErrorInfo{ string this[string columnName] { get; } string Error { get; }}Вскоре вы добавите частичный класс
CarCar.csModelsCarPartial.csCarpartialIDataErrorInfoIDataErrorInfopublic partial class Car : IDataErrorInfo{ public string this[string columnName] => string.Empty; public string Error { get;}}Чтобы привязанный элемент управления мог работать с интерфейсом
IDataErrorInfoValidatesOnDataErrorsMake Text="{Binding Path=Make, ValidatesOnDataErrors=True}" />После внесения изменений в конструкции привязки индексатор вызывается на модели каждый раз, когда возникает событие
PropertyChangedcolumnNamestring.Emptystring.EmptyHasErrorValidationtrueErrorTemplateДобавьте простую логику проверки достоверности к индексатору в файле
CorePartial.cs• если
MakeModelT"Too Old"• если
MakeChevyColorPink$" {Make}'s don't come in {Color}"Начните с добавления оператора
switchcasenameofswitchstring.EmptycasecaseMakeModelTstring.EmptycaseColorpublic string this[string columnName]{ get { switch (columnName) { case nameof(Id): break; case nameof(Make): return Make == "ModelT" ? "Too Old" : CheckMakeAndColor(); case nameof(Color): return CheckMakeAndColor(); case nameof(PetName): break; } return string.Empty; }}internal string CheckMakeAndColor(){ if (Make == "Chevy" && Color == "Pink") { return $"{Make}'s don't come in {Color}"; } return string.Empty;}Запустите приложение, выберите автомобиль
Red RiderFordModelTKitChevyPinkColorFordПричина в том, что индексатор выполняется, только когда для свойства сгенерировано событие
PropertyChangedPropertyChangedClickUpdateSourceTriggerPropertyChangedMakeРешить проблему можно двумя путями. Первый предусматривает изменение объекта
PropertyChangedEventArgsstring.EmptyOnPropertyChanged()protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = ""){ if (propertyName != nameof(IsChanged)) { IsChanged = true; } //PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(string.Empty));}Теперь при выполнении того же самого теста текстовые поля Make и Color декорируются с помощью шаблона отображения ошибки, когда одно из них обновляется. Так почему бы ни генерировать событие всегда в такой манере? В значительной степени причиной является производительность. Вполне возможно, что обновление каждого свойства объекта приведет к снижению производительности. Разумеется, без тестирования об этом утверждать нельзя, и конкретные ситуации могут (и вероятно будут) варьироваться.
Другое решение предполагает генерацию события
PropertyChangedMakeColorИнтерфейс INotifyDataErrorInfo
Интерфейс
INotifyDataErrorInfoIDataErrorInfoValidatesOnNotifyDataErrorstrueИнтерфейс
INotifyDataErrorInfoINotifyDataErrorInfopublic interface INotifyDataErrorInfo{ bool HasErrors { get; } event EventHandler ErrorsChanged; IEnumerable GetErrors(string propertyName);}Свойство
HasErrorsGetErrors()nullpropertyNamepropertyNameErrorsChangedPropertyChangedCollectionChangedРеализация поддерживающего кода
При реализации
INotifyDataErrorInfoIDataErrorInfoINotifyDataErrorInfoCarPartial.csIDataErrorInfopublic partial class Car: INotifyDataErrorInfo, IDataErrorInfo{...public IEnumerable GetErrors(string propertyName){ throw new NotImplementedException();}public bool HasErrors { get; }public event EventHandler ErrorsChanged; }Добавьте закрытое поле типа
Dictionary> usingSystem.Collections.Genericusing System.Collections.Generic;private readonly Dictionary> _errors = new Dictionary>(); Свойство
HasErrorstruepublic bool HasErrors => _errors.Any();Создайте вспомогательный метод для инициирования события
ErrorsChangedPropertyChangedprivate void OnErrorsChanged(string propertyName){ ErrorsChanged?.Invoke(this, new DataErrorsChangedEventArgs(propertyName));}Как упоминалось ранее, метод
GetErrors()nullpropertyNamenullpublic IEnumerable GetErrors(string propertyName){ if (string.IsNullOrEmpty(propertyName)) { return _errors.Values; } return _errors.ContainsKey(propertyName) ? _errors[propertyName] : null;}Финальный набор вспомогательных методов будет добавлять одну или большее число ошибок для свойства либо очищать все ошибки для свойства (или всех свойств). Не следует забывать о вызове вспомогательного метода
OnErrorsChanged()private void AddError(string propertyName, string error){ AddErrors(propertyName, new List { error }); }private void AddErrors( string propertyName, IList errors) { if (errors == null || !errors.Any()) { return; } var changed = false; if (!_errors.ContainsKey(propertyName)) { _errors.Add(propertyName, new List()); changed = true; } foreach (var err in errors) { if (_errors[propertyName].Contains(err)) continue; _errors[propertyName].Add(err); changed = true; } if (changed) { OnErrorsChanged(propertyName); }}protected void ClearErrors(string propertyName = ""){ if (string.IsNullOrEmpty(propertyName)) { _errors.Clear(); } else { _errors.Remove(propertyName); } OnErrorsChanged(propertyName);}Возникает вопрос: когда приведенный выше код активизируется? Механизм привязки прослушивает событие
ErrorsChangedИспользование интерфейса INotifyDataErrorInfo для проверки достоверности
Одним из мест выполнения проверки на предмет ошибок являются блоки
setMakeModelTpublic string Make{ get { return _make; } set { if (value == _make) return; _make = value; if (Make == "ModelT") { AddError(nameof(Make), "Too Old"); } else { ClearErrors(nameof(Make)); } OnPropertyChanged(nameof(Make)); OnPropertyChanged(nameof(Color)); }}Основная проблема такого подхода состоит в том, что вам приходится сочетать логику проверки достоверности с блоками
setКомбинирование IDataErrorInfo С INotifyDataErrorInfo для проверки достоверности
В предыдущем разделе было показано, что реализацию интерфейса
IDataErrorInfosetPropertyChangedIDataErrorInfoINotifyDataErrorInfoINotifyDataErrorInfosetIDataErrorInfoЦель применения
IDataErrorInfoINotifyDataErrorInfoPropertyChangedIDataErrorInfostring.EmptyCheckMakeAndColor()public string this[string columnName]{ get { ClearErrors(columnName); switch (columnName) { case nameof(Id): break; case nameof(Make): CheckMakeAndColor(); if (Make == "ModelT") { AddError(nameof(Make), "Too Old"); hasError = true; } break; case nameof(Color): CheckMakeAndColor(); break; case nameof(PetName): break; } return string.Empty; }}internal bool CheckMakeAndColor(){ if (Make == "Chevy" && Color == "Pink") { AddError(nameof(Make), $"{Make}'s don't come in {Color}"); AddError(nameof(Color), $"{Make}'s don't come in {Color}"); return true; } return false;}Запустите приложение, выберите автомобиль
ChevyPink
Это еще одно преимущество применения интерфейса
INotifyDataErrorInfoОтображение всех ошибок
Свойство
ErrorsValidationValidationErrorValidationErrorErrorContentListBoxListBoxПервым делом добавьте одну строку в
DetailsGridHeightWindow300ListBoxItemsSourceDetailsGridValidation.ErrorsPath ItemsSource="{Binding ElementName=DetailsGrid, Path=(Validation.Errors)}">Добавьте к
ListBoxDataTemplateListBoxErrorContentListBoxItemValidationErrorErrorContent Запустите приложение, выберите автомобиль
ChevyPink
Мы лишь слегка коснулись поверхности того, что можно делать при проверке достоверности и отображении сообщений об ошибках, но представленных сведений должно быть вполне достаточно для выработки вами способа разработки информативных пользовательских интерфейсов, которые улучшают восприятие.
Перемещение поддерживающего кода в базовый класс
Вероятно, вы заметили, что в настоящий момент в классе
CarPartialСоздайте в папке
ModelsBaseEntity.csusingSystem.CollectionsSystem.ComponentModelINotifyDataErrorInforusing System;using System.Collections;using System.Collections.Generic;using System.ComponentModel;using System.Linq;namespace Validations.Models{ public class BaseEntity : INotifyDataErrorInfo}Переместите в новый базовый класс весь код, относящийся к
INofityDataErrorInfoCarPartial.csINotifyDataErrorInfoCarPartial.csBaseEntitypublic partial class Car : BaseEntity, IDataErrorInfo{ // Для краткости код не показан.}Теперь любые создаваемые классы моделей будут наследовать весь связующий код
INotifyDataErrorInfoИспользование аннотаций данных в WPF
Для проверки достоверности в пользовательских интерфейсах инфраструктура WPF способна также задействовать аннотации данных. Давайте добавим несколько аннотаций данных к модели
CarДобавление аннотаций данных к модели
Откройте файл
Car.csusingSystem.ComponentModel.DataAnnotationsMakeColorPetName[Required][StringLength(50)][Required]nullIdintnull[StringLength(50)]Контроль ошибок проверки достоверности на основе аннотаций данных
В WPF вы должны программно контролировать наличие ошибок проверки достоверности на основе аннотаций данных. Двумя основными классами, отвечающими за проверку достоверности на основе аннотаций данных, являются
ValidationContextValidatorValidationContextValidatorValidationContextОткройте файл
BaseEntity.csusingusing System.ComponentModel;using System.ComponentModel.DataAnnotations;Далее создайте новый метод по имени
GetErrorsFromAnnotations()Тprotectedprotected string[] GetErrorsFromAnnotations( string propertyName, T value){}Внутри метода
GetErrorsFromAnnotations()ListValidationContextValidate.TryValidateProperty()booltruefalseListprotected string[] GetErrorsFromAnnotations( string propertyName, T value){ var results = new List(); var vc = new ValidationContext(this, null, null) { MemberName = propertyName }; var isValid = Validator.TryValidateProperty( value, vc, results); return (isValid) ? null : Array.ConvertAll( results.ToArray(), o => o.ErrorMessage);}Теперь можете модифицировать метод индексатора в файле
CarPartial.csINotifyDataErrorInfopublic string this[string columnName]{ get { ClearErrors(columnName); var errorsFromAnnotations = GetErrorsFromAnnotations(columnName, typeof(Car) .GetProperty(columnName)?.GetValue(this,null)); if (errorsFromAnnotations != null) { AddErrors(columnName, errorsFromAnnotations); } switch (columnName) { case nameof(Id): break; case nameof(Make): CheckMakeAndColor(); if (Make == "ModelT") { AddError(nameof(Make), "Too Old"); } break; case nameof(Color): CheckMakeAndColor(); break; case nameof(PetName): break; } return string.Empty; }}Запустите приложение, выберите один из автомобилей и введите в поле Color текст, содержащий более 50 символов. После превышения порога в 50 символов аннотация данных
StringLength
Настройка свойства ErrorTemplate
Финальной темой является создание стиля, который будет применяться, когда элемент управления содержит ошибку, а также обновление
ErrorTemplateНачните с добавления в раздел
Window.ResourcesMainWindow.xamlTextBoxValidation.HasErrortrueBackground(Pink)Foreground(Black)ToolTip(ErrorContent)SetterBackgroundForegroundToolTipBindingTextBoxPathErrorContentValidation.Errors Запустите приложение и создайте условие для ошибки. Результат будет подобен тому, что показан на рис. 28.6, и укомплектован всплывающей подсказкой с сообщением об ошибке.
Определенный выше стиль изменяет внешний вид любого элемента управления
TextBoxErrorTemplateValidationErrorTemplateErrorTemplateПоместите элемент
SetterStyle.TriggersTextBlockBorderBrushTextBoxErrorTemplateAdornedElementPlaceholderValidation.ErrorsErrorContentStyle.TriggerSetter ToolTip="{Binding ElementName=controlWithError, Path=AdornedElement.(Validation.Errors)[0].ErrorContent}"/> Запустите приложение и создайте условие для возникновения ошибки. Результат будет подобен представленному на рис. 28.7.
Итоговые сведения о проверке достоверности
На этом исследование методов проверки достоверности в WPF завершено. Разумеется, с их помощью можно делать намного большее. За дополнительными сведениями обращайтесь в документацию по WPF.
Создание специальных команд
Как и в разделе, посвященном проверке достоверности, можете продолжить работу с тем же проектом или создать новый проект и скопировать в него весь код из предыдущего проекта. Вы создадите новый проект по имени
WpfCommandsВ главе 25 объяснялось, что команды являются неотъемлемой частью WPF. Команды могут привязываться к элементам управления WPF (таким как
ButtonMenuItemExecute()CanExecute()ICommandРеализация интерфейса ICommand
Как было показано в главе 25, интерфейс
ICommandpublic interface ICommand{ event EventHandler CanExecuteChanged; bool CanExecute(object parameter); void Execute(object parameter);}Добавление класса ChangeColorCommand
Обработчики событий для элементов управления
ButtonCmdsChangeColorCornmand.csICommandusingusing WpfCommands.Models;using System.Windows.Input;Код класса должен выглядеть примерно так:
public class ChangeColorCommand : ICommand{ public bool CanExecute(object parameter) { throw new NotImplementedException(); } public void Execute(object parameter) { throw new NotImplementedException(); } public event EventHandler CanExecuteChanged;}Если метод
CanExecute()truefalseCanExecute()trueExecute()CommandParameterCanExecuteChangedCanExecute()PropertyChangedВ текущем примере кнопка Change Color должна работать, только если параметр отличается от
nullCarCanExecute()public bool CanExecute(object parameter) => (parameter as Car) != null;Значение параметра для метода
Execute()CanExecute()Execute()objectCarCarpublic void Execute(object parameter){ ((Car)parameter).Color="Pink";}Присоединение команды к CommandManager
Финальное обновление класса команды связано с присоединением команды к диспетчеру команд (
CommandManagerCanExecute()CanExecuteChangedpublic event EventHandler CanExecuteChanged{ add => CommandManager.RequerySuggested += value; remove => CommandManager.RequerySuggested -= value;}Изменение файла MainWindow.xaml.cs
Следующее изменение связано с созданием экземпляра класса
ChangeColorCommandButtonMainWindowMainWindow.xaml.csClickusingusing WpfCommands.Cmds;using System.Windows.Input;Добавьте открытое свойство по имени
ChangeColorCmdICommandChangeColorCommandnullprivate ICommand _changeColorCommand = null;public ICommand ChangeColorCmd => _changeColorCommand ??= new ChangeColorCommand());Изменение файла MainWindow.xaml
Как было показано в главе 25, элементы управления WPF, реагирующие на щелчки (вроде
ButtonCommandbtnChangeColorMainWindowRelativeSourceCommand="{Binding Path=ChangeColorCmd, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Window}}}"Кнопка также нуждается в передаче объекта
CarCanExecute()Execute()CommandParameterPathCommandParameterSelectedItemComboBoxcboCarsCommandParameter="{Binding ElementName=cboCars, Path=SelectedItem}"Вот завершенная разметка для кнопки:
Padding="4, 2" Command="{Binding Path=ChangeColorCmd, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Window}}}" CommandParameter="{Binding ElementName=cboCars, Path=SelectedItem}"/>Тестирование приложения
Запустите приложение. Кнопка Change Color не будет доступной (рис. 28.8), т.к. автомобиль еще не выбран.
Теперь выберите автомобиль; кнопка Change Color становится доступной, а щелчок на ней обеспечивает изменение цвета, как и ожидалось!
Создание класса CommandBase
Если распространить такой шаблон на
AddCarCommand.csCmdsCommandBase.csusingSystem.Windows.InputCommandBaseICommandExecute()CanExecute()CanExecuteChangedChangeColorCommandusing System;using System.Windows.Input;namespace WpfCommands.Cmds{ public abstract class CommandBase : ICommand { public abstract bool CanExecute(object parameter); public abstract void Execute(object parameter); public event EventHandler CanExecuteChanged { add => CommandManager.RequerySuggested += value; remove => CommandManager.RequerySuggested -= value; } }}Добавление класса AddCarCommand
Добавьте в папку
CmdsAddCarCommand.csCommandBaseusingusing System.Collections.ObjectModel;using System.Linq;using WpfCommands.Models;Ожидается, что параметр должен иметь тип
ObservableCollectionCanExecute()ObservableCollectionExecute()CarClickpublic class AddCarCommand :CommandBase{ public override bool CanExecute(object parameter) => parameter is ObservableCollection; public override void Execute(object parameter) { if (parameter is not ObservableCollection cars) { return; } var maxCount = cars.Max(x => x.Id); cars.Add(new Car { Id = ++maxCount, Color = "Yellow", Make = "VW", PetName = "Birdie" }); }}Изменение файла MainWindow.xaml.cs
Добавьте открытое свойство типа
ICommandAddCarCmdAddCarCommandnullprivate ICommand _addCarCommand = null;public ICommand AddCarCmd => _addCarCommand ??= new AddCarCommand());Изменение файла MainWindow.xaml
Модифицируйте разметку XAML, удалив атрибут
ClickCommandCommandParameterAddCarCommandcboCars Command="{Binding Path=AddCarCmd, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Window}}}" CommandParameter="{Binding ElementName=cboCars, Path=ItemsSource}"/>В результате появляется возможность добавления автомобилей и обновления их цветов (пока с весьма ограниченной функциональностью) с помощью многократно используемого кода, содержащегося в автономных классах.
Изменение класса ChangeColorCommand
Финальным шагом будет обновление класса
ChangeColorCommandCommandBaseICommandCommandBaseoverrideCanExecuteChangedpublic class ChangeColorCommand : CommandBase{ public override bool CanExecute(object parameter) => parameter is Car; public override void Execute(object parameter) { ((Car)parameter).Color = "Pink"; }}Объекты RelayCommand
Еще одной реализацией паттерна "Команда" (Command) в WPF является
RelayCommandICommandRelayCommandСоздание базового класса RelayCommand
Как правило, объекты
RelayCommandRelayCommandCanExecute()Execute()RelayCommandRelayCommandCommandBaseCmdsRelayCommand.csCommandBaseExecute()CanExecute()private readonly Action _execute;private readonly Func _canExecute; Создайте три конструктора. Первый — стандартный конструктор (необходимый для производного класса
RelayCommandActionActionFuncpublic RelayCommand(){}public RelayCommand(Action execute) : this(execute, null) { }public RelayCommand(Action execute, Func canExecute) { _execute = execute ?? throw new ArgumentNullException(nameof(execute)); _canExecute = canExecute;}Наконец, реализуйте переопределенные версии
CanExecute()Execute()CanExecute()trueFuncnullFuncnulltrueExecute()Actionpublic override bool CanExecute(object parameter) => _canExecute == null || _canExecute();public override void Execute(object parameter) { _execute(); }
Создание класса RelayCommand
Добавьте в папку
CmdsRelayCommandT.csRelayCommandTRelayCommandpublic class RelayCommand : RelayCommand Добавьте две переменные уровня класса для хранения делегатов
Execute()CanExecute()private readonly Action _execute; private readonly Func _canExecute; Создайте два конструктора. Первый из них принимает параметр
ActionActionFuncpublic RelayCommand(Action execute):this(execute, null) {} public RelayCommand( Action execute, Func canExecute) { _execute = execute ?? throw new ArgumentNullException(nameof(execute)); _canExecute = canExecute;}Наконец, реализуйте переопределенные версии
CanExecute()Execute()CanExecute()trueFuncnullFunctrueExecute()Actionpublic override bool CanExecute(object parameter) => _canExecute == null || _canExecute((T)parameter);public override void Execute(object parameter) { _execute((T)parameter); }Изменение файла MainWindow.xaml.cs
Когда используются объекты
RelayCommandДобавьте новую закрытую переменную типа
RelayCommandDeleteCarCmdprivate RelayCommand _deleteCarCommand = null; public RelayCommand DeleteCarCmd => _deleteCarCommand ??= new RelayCommand(DeleteCar,CanDeleteCar)); Также потребуется создать методы
DeleteCar()CanDeleteCar()private bool CanDeleteCar(Car car) => car != null;private void DeleteCar(Car car){ _cars.Remove(car);}Обратите внимание на строгую типизацию в методах — одно из преимуществ применения
RelayCommandДобавление и реализация кнопки удаления записи об автомобиле
Последним шагом будет добавление кнопки Delete Car (Удалить автомобиль) и установка привязок
CommandCommandParameter Command="{Binding Path=DeleteCarCmd, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Window}}}" CommandParameter="{Binding ElementName=cboCars, Path=SelectedItem}"/>Теперь, запустив приложение, вы можете удостовериться в том, что кнопка Delete Car доступна, только если в раскрывающемся списке выбран автомобиль, и щелчок на ней приводит к удалению записи об автомобиле.
Итоговые сведения о командах
На этом краткий экскурс в команды WPF завершен. За счет перемещения кода обработки событий из файла отделенного кода в индивидуальные классы команд появляются преимущества инкапсуляции, многократного использования и улучшенной возможности сопровождения. Если настолько большое разделение обязанностей не требуется, тогда можно применять легковесную реализацию
RelayCommandПеренос кода и данных в модель представления
Как и в разделе "Проверка достоверности WPF", вы можете продолжить работу с тем же самым проектом или создать новый и скопировать в него весь код. Вы создадите новый проект по имени
WpfViewModelСоздайте в проекте новую папку под названием
ViewModelsMainWindowViewModel.csusingusing System.Collections.Generic;using System.Collections.ObjectModel;using System.Windows.Input;using WpfViewModel.Cmds;using WpfViewModel.Models;На заметку! Популярное соглашение предусматривает именование моделей представлений в соответствие с окном, которое их поддерживает. Обычно имеет смысл следовать такому соглашению, поэтому оно соблюдается в настоящей главе. Тем не менее, как и любой паттерн или соглашение, это не норма, и на данный счет вы найдете широкий спектр мнений.
Перенос кода MainWindow.xaml.cs
В модель представления будет перемещен почти весь код из файла отделенного кода. В конце останется только несколько строк, включая вызов метода
InitializeComponent()Создайте открытое свойство типа
IListCarspublic IList Cars { get; } = new ObservableCollection(); Создайте стандартный конструктор и перенесите в него весь код создания объектов
CarMainWindow.xaml.cs_carsMainWindow.xaml.cspublic MainWindowViewModel(){ Cars.Add( new Car { Id = 1, Color = "Blue", Make = "Chevy", PetName = "Kit", IsChanged = false }); Cars.Add( new Car { Id = 2, Color = "Red", Make = "Ford", PetName = "Red Rider", IsChanged = false });}Далее переместите весь код, относящийся к командам, из файла отделенного кода окна в модель представления, заменив ссылку на переменную
_carsCars// Для краткости остальной код не показанprivate void DeleteCar(Car car){ Cars.Remove(car);}Обновление кода и разметки MainWindow
Из файла
MainWindow.xaml.csItemsSourceInitializeComponent()public MainWindow(){ InitializeComponent();}Добавьте в начало файла следующий оператор
usingusing WpfViewModel.ViewModels;Создайте строго типизированное свойство для хранения экземпляра модели представления:
public MainWindowViewModel ViewModel { get; set; } = new MainWindowViewModel();Добавьте свойство
DataContextDataContext="{Binding ViewModel, RelativeSource={RelativeSource Self}}"Обновление разметки элементов управления
Теперь, когда свойство
DataContextWindowItemsSourceItemsSource="{Binding Cars}" />Прием работает, т.к. контекстом данных для
WindowMainWindowViewModelCarsButtonDataContext Margin="5,0,5,0" Padding="4, 2" Command="{Binding Path=DataContext.AddCarCmd, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Window}}}" CommandParameter="{Binding ElementName=cboCars, Path=ItemsSource}"/> Margin="5,0,5,0" Padding="4, 2" Command="{Binding Path=DataContext.DeleteCarCmd, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Window}}}" CommandParameter="{Binding ElementName=cboCars, Path=SelectedItem}" /> Margin="5,0,5,0" Padding="4, 2" Command="{Binding Path=DataContext.ChangeColorCmd, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Window}}}" CommandParameter="{Binding ElementName=cboCars, Path=SelectedItem}"/>Итоговые сведения о моделях представлений
Верите или нет, но вы только что закончили построение первого WPF-приложения MWM. Вы можете подумать: "Это не реалистичное приложение. Как насчет данных? Данные в примере жестко закодированы". И вы будете совершенно правы. Это не реальное приложение, а лишь демонстрация. Однако в ней легко оценить всю прелесть паттерна MWM. Представлению ничего не известно о том, откуда поступают данные; оно просто привязывается к свойству модели представления. Реализации модели представления можно менять, скажем, использовать версию с жестко закодированными данными во время тестирования и версию, обращающуюся к базе данных, в производственной среде.
Можно было бы обсудить еще немало вопросов, в том числе разнообразные инфраструктуры с открытым кодом, паттерн "Локатор модели представления" (View Model Locator) и множество разных мнений на предмет того, как лучше реализовывать паттерн MWM. В том и заключается достоинство паттернов проектирования программного обеспечения — обычно существует много правильных способов их реализации, и вам необходимо лишь отыскать стиль, который наилучшим образом подходит к имеющимся требованиям.
Обновление проекта AutoLot.Dal для MWM
Если вы хотите обновить проект
AutoLot.DalCarAutoLot.Dal.ModelsBaseEntityРезюме
В главе рассматривались аспекты WPF, относящиеся к поддержке паттерна MWM. Сначала было показано, каким образом связывать классы моделей и коллекции с помощью системы уведомлений в диспетчере привязки. Демонстрировалась реализация интерфейса
INotifyPropertyChangedВы научились добавлять код проверки достоверности к модели с применением интерфейсов
IDataErrorInfoINotifyDataErrorInfоВ заключение вы узнали, каким образом собирать все компоненты вместе за счет добавления модели представления, а также приводить в порядок разметку и отделенный код пользовательского интерфейса, чтобы усилить разделение обязанностей.
ТЕЛЕГРАМКанал с обзорами, анонсами новинок и книжными подборками
Книжный Вестник
Бот для удобного поиска книг (если не нашлось на сайте)
Поиск книг
Свежие любовные романы в удобных форматах
Любовные романы
О психологии, саморазвитии и личностном росте
Саморазвитие
Детективы и триллеры, все новинки
Детективы
Фантастика и фэнтези, все новинки
Фантастика
Отборные классические книги
Классика
ВКОНТАКТЕБиблиотека с любовными романами, которая наверняка придётся по вкусу женской части аудитории
Любовные романы
Библиотека с фантастикой и фэнтези, а также смежных жанров
Фантастика
Самые популярные книги в формате фб2
Топ фб2
книги