красивые приложения на wpf
Красивые приложения на wpf
The samples in this repo are generally about illustrating specific concepts and may go against accessibility best practices. However, the team has spent some time illustrating accessibility best practices in a subset of these samples.
For additional WPF samples, see WPF Samples.
Please note that the documentation on the repo is still being updated, so all links might not point to the right location.
Unless otherwise mentioned, the samples are released under the MIT license
Help us improve our samples
Help us improve out samples by sending us a pull-request or opening a GitHub Issue
To use the samples with Git, clone the WPF-Samples repository with ‘git clone https://github.com/microsoft/WPF-Samples’
After cloning the WPF-Samples respository, there will be two solution files in the root directory: WPF-Samples.sln and WPF-Samples.msbuild.sln
The easiest way to use these samples without using Git is to download the zip file containing the current version (using the link below or by clicking the «Download ZIP» button on the repo page). You can then unzip the entire archive and use the samples in Visual Studio 2019.
Notes:
For more info about the programming models, platforms, languages, and APIs demonstrated in these samples, please refer to the guidance available in MSDN. These samples are provided as-is in order to indicate or demonstrate the functionality of the programming models and feature APIs for WPF.
Быстрый старт с WPF. Часть 1. Привязка, INotifyPropertyChanged и MVVM
По разным причинам большинство из нас использует десктопные приложения, как минимум, браузер 🙂 А у некоторых из нас возникает необходимость в написании своих. В этой статье я хочу пробежаться по процессу разработки несложного десктопного приложения с использованием технологии Windows Presentation Foundation (WPF) и применением паттерна MVVM. Желающих продолжить чтение прошу под кат.
В чём особенность WPF?
Два основных отличия WPF от других средств построения десктопных приложений:
Я не буду углубляться в подробности, т.к. это не совсем тема статьи. Если интересно, то гуглить XAML, WPF rendering, milcore.dll и DirectX 🙂
О чём эта статья?
Эта статья содержит пример приложения, построенного на технологии WPF:
Я постараюсь ориентировать материал статьи в практическую сторону в стиле «повторяй за мной» с пояснениями.
Что нам понадобится для повторения статьи?
Так же в этом разделе я опишу создание проекта.
Запускаем VS, создаём новый проект, тип приложения выбираем WPF App (.NET Framework) (можно ввести в строке поиска справа вверху), называем как угодно.
После создания нового проекта откроется окно редактора интерфейса, у меня оно выглядит так
Внизу находится редактор разметки, вверху — предпросмотр интерфейса окна, но можно поменять относительное расположение редактора кода и предпросмотра интерфейса так, что они будут располагаться в горизонтальном порядке, с помощью вот этих кнопок (справа на границе двух областей):
Перед тем, как начать
Элементы окна (их ещё называют контрОлами от слова Control) должны размещаться внутри контейнера или внутри другого элемента типа ContentControl. Контейнер — это специальный контрол, позволяющий разместить внутри себя несколько дочерних контролов и организовать их взаимное расположение. Примеры контейнеров:
Есть и другие контейнеры. Поскольку контейнер тоже является контролом, то внутри контейнера могут быть вложенные контейнеры, содержащие вложенные контейнеры и так далее. Это позволяет гибко располагать контролы относительно друг друга. Так же с помощью контейнеров мы можем не менее гибко управлять поведением вложенных контролов при изменении размеров окна.
MVVM и интерфейс INotifyPropertyChanged. Копия текста.
Итогом этого примера станет приложение с двумя контролами, в одном из которых можно редактировать текст, а в другом только просматривать. Изменения из одного в другой будут переходить синхронно без явного копирования текста с помощью привязки (binding).
Теперь сосредоточимся на цели этого примера. Мы хотим, чтобы при наборе текста в текстбоксе этот же текст синхронно отображался в текстблоке, избежав при этом явной операции копирования текста. Нам понадобится некая связующая сущность, и вот тут-то мы и подошли к такой штуке, как привязка (binding), о которой было сказано выше. Привязка в терминологии WPF — это механизм, позволяющий связывать некоторые свойства контролов с некоторыми свойствами объекта C#-класса и выполнять взаимное обновление этих свойств при изменении одной из частей связки (это может работать в одну, в другую или в обе стороны сразу). Для тех, кто знаком с Qt, можно провести аналогию слотов и сигналов. Чтобы не растягивать время, перейдём к коду.
Итак, для организации привязки нужны свойства контролов и некое свойство некоего C#-класса. Для начала разберёмся с XAML-кодом. Текст обоих контролов хранится в свойстве Text, поэтому добавим привязку для этих свойств. Делается это так:
Мы сделали привязку, но пока непонятно к чему 🙂 Нам нужен объект какого-то класса и какое-то свойство в этом объекте, к которому будет выполнена привязка (как ещё говорят, на которое нужно забиндиться).
Так что это за класс? Этот класс называется вьюмоделью (view model) и служит как раз связующим звеном между view (интерфейсом или его частями) и model (моделью, т.е. теми частями кода, которые отвечают за логику приложения. Это позволяет отделить (в какой-то степени) логику приложения от интерфейса (представления, view) и называется паттерном Model-View-ViewModel (MVVM). В рамках WPF этот класс также называется DataContext.
Однако, просто написать класс вьюмодели недостаточно. Нужно ещё как-то оповещать механизм привязки о том, что свойство вьюмодели или свойство вью изменилось. Для этого существует специальный интерфейс INotifyPropertyChanged, который содержит событие PropertyChanged. Реализуем этот интерфейс в рамках базового класса BaseViewModel. В дальнейшем все наши вьюмодели мы будем наследовать от этого базового класса, чтобы не дублировать реализацию интерфейса. Итак, добавим в проект каталог ViewModels, а в этот каталог добавим файл BaseViewModel.cs. Получим такую структуру проекта:
Код реализации базовой вьюмодели:
Создадим для нашего класса MainWindow свою вьюмодель, унаследовавшись от базовой. Для этого в том же каталоге ViewModels создадим файл MainWindowViewModel.cs, внутри которого будет такой код:
Шикарно! Теперь нужно добавить в эту вьюмодель свойство, на которое будем биндить текст наших контролов. Поскольку это текст, тип этого свойства должен быть string:
В итоге получим такой код
Так, кажется, справились. Осталось забиндиться на это свойство из вьюхи и готово. Давайте сделаем это прямо сейчас:
Ништяк, запускаем проект, набираем текст в текстбокс иииии… ничего не происходит))) Ну, ничего страшного, на самом деле мы идём правильной дорогой, просто пока ещё не дошли до нужной точки.
Предлагаю на минутку остановиться и подумать, чего же нам не хватает. Вьюха у нас есть. Вьюмодель тоже. Свойства вроде забиндили. Нужный интерфейс реализовали. Проделали кучу работы ради копирования жалкой строчки текста, за что нам это. 111
Ладно, шутки в сторону. Мы забыли создать объект вьюмодели и кое-что ещё (об этом позже). Сам класс мы описали, но это ничего не значит, ведь у нас нет объектов этого класса. Ок, где нужно хранить ссылку на этот объект? Ближе к началу примера я упомянул некий DataContext, используемый в WPF. Так вот, у любой вью есть свойство DataContext, которому мы можем присвоить ссылку на нашу вьюмодель. Сделаем это. Для этого откроем файл MainWindow.xaml и нажмём F7, чтобы открыть код этой вьюхи. Он практически пустой, в нём есть только конструктор класса окна. Добавим в него создание нашей вьюмодели и поместим её в DataContext окна (не забываем добавить using с нужным неймспейсом):
Это было просто, но этого всё равно не хватает. По-прежнему при запуске приложения никакой синхронизации текста не происходит. Что ещё нужно сделать?
Нужно вызвать событие PropertyChanged при изменении свойства SynchronizedText и сообщить вьюхе о том, что она должна следить за этим событием. Итак, чтобы вызвать событие, модифицируем код вьюмодели:
Что мы тут сделали? Добавили скрытое поле для хранения текста, обернули его в уже существующее свойство, а при изменении этого свойства не только меняем скрытое поле, но и вызываем метод OnPropertyChanged, определённый в базовой вьюмодели и вызывающий событие PropertyChanged, объявленное в интерфейсе INotifyPropertyChanged, так же реализованное в базовой вьюмодели. Получается, что при каждом изменении текста возникает событие PropertyChanged, которому передаётся имя свойства вьюмодели, которое было изменено.
Ну, почти всё, финишная прямая! Осталось указать вьюхе, что оно должно слушать событие PropertyChanged:
Помимо того, что мы указали, по какому триггеру должно происходить обновление, мы так же указали, в какую сторону это обновление отслеживается: от вью к вьюмодели или наоборот. Поскольку в текстбоксе мы вводим текст, то нам интересны изменения только во вью, поэтому выбираем режим OneWayToSource. В случае с текстблоком всё ровно наоборот: нам интересны изменения во вьюмодели, чтобы отобразить их во вью, поэтому выбираем режим OneWay. Если бы нам нужно было, чтобы изменения отслеживались в обе стороны, можно было не указывать Mode вообще, либо указать TwoWay явно.
Итак, запускаем программу, набираем текст и voi-la! Текст синхронно меняется, и мы нигде ничего не копировали!
Спасибо за внимание, продолжение следует. Будем разбираться с DataTemplate и паттерном Command.
Дизайн интерфейса приложения на WPF, и немного о юзабилити
Дизайн в WPF строится по принципу матрешек. Главное окно — это большой контейнер, внутри которого располагаются элементы управления (контролы) или другие контейнеры. Координат нет, а чтобы содержимое не болталось — используются привязки. Допустим, нам нужно главное меню — создаем для него контейнер, делаем привязку к верхней стороне рабочего окна. Внутрь контейнера главного меню уже помещаем кнопочки с привязкой влево. Расположение объектов внутри контейнера скользящее, поэтому, если левая кнопочка увеличится в размере, то остальные просто без проблем пододвинутся и все.
Всю эту компоновку можно делать в Visual Studio, но зачем нужен Expression Blend, спросите вы? А потому что там есть стили! По-хорошему, чтобы дизайнеру научиться работать в программе Blend — ему надо посидеть рядом с программистом, который бы объяснил что такое контролы, какой из них TextBox, а какой Button. Мне изначально казалось, что такие вещи должны знать все, кто занимается веб-дизайном. Наверное это верстальщики должны быть в курсе. А вот дизайнеры все как один живут под девизом «Достаточно знать фотошоп, а там хоть трава не расти». Для меня дизайн — это в первую очередь пропорции и гаммы, ну и потом уже закорючки. А фотошоп — это один из инструментов, которых много. И если мне нужно приложение, то я хочу чтобы дизайнеры мне расставляли кнопочки сразу прямо там где они и будут работать.
Дизайнера WPF было найти сложно всего, если не считать проектировщика архитектуры — такового я вообще не нашел. Итак, мне крупно, повезло и я нашел самоотверженного человека, готового постигать Blend и WPF. После трёх объяснений на пальцах дизайнер без всяких взбрыков был уже морально готов творить. Я сам из породы не рисующих дизайнеров, как и Татьяныч, но все же сделал над собой усилие и открыл паинт. Получилось вот так: 
Моему дизайнеру было совершенно не жалко свои силы и страшно было браться за Blend, поэтому он начал все же в фотошопе. После 4-5 итераций подкручивания и переделывания получилось вот такое: 
Да-да, согласен, желтые кнопочки боковых панелей слишком оттягивают внимание, но это уже мелочи.
Кстати, о птичках. Недавно видел обсуждение вопроса, о том, какое должно быть образование у специалиста по пользовательским интерфейсам. Говорят, что и гуманитарное и техническое, рассуждали которого больше. Мне как специалисту по профориентации это было смешно. Говорят, ведь, что образование ума не прибавляет. Точно образование и не влияет на способности человека к разным видам деятельности. А еще, художественная гармоничность и логика функциональности в одном человеке не могут сочетаться. Поэтому, дизайн пользовательского интерфейса не может быть продуктом труда одного человека, как минимум двоих тут надо.
WPF: Нестандартное окно
На днях, после долгого перерыва, надо было поработать на WPF, и возникло желание заменить поднадоевший стандартный вид окон Windows 7 на что-нибудь более вдохновляющее, скажем в стиле Visual Studio 2012:
Переходить на Windows 8 ради этого еще не хотелось, как и добавлять в проекты ссылки на метро-подобные библиотеки и разбираться с ними — это будет следуюшим шагом. А пока было интересно потратить вечер и добиться такого результата с минимальными изменениями рабочего кода. Забегая вперед, скажу что результат, как и планировалось, получился довольно чистым: фрагмент следующего кода, если не считать нескольких аттрибутов пропущенных для наглядности, это и есть окно с первого скриншота. Все изменения ограничились заданием стиля.
Дальше я остановлюсь на ключевых моментах и подводных камнях при создания стиля окна. Демонстрационный проект доступен на github’е, если вы захотите поразбираться с исходниками самостоятельно или же просто использовать этот стиль не вдаваясь в подробности.
Основная проблема
WPF не работает с NC-area. NC, она же «Non-client area», она же «не-клиентская часть», она же хром, обрабатывается на более низком уровне. Если вам захотелось изменить какой-то из элементов окна — бордюр, иконку, заголовок или кнопку, то первый совет, который попадается при поиске — это убрать стиль окна и переделать все самому. Целиком.
За всю историю развития WPF в этом отношении мало что изменилось. К счастью, у меня были исходники из старинного поста Алекса Яхнина по стилизации под Офис 2007, которые он писал работая над демо проектом по популяризации WPF для Микрософта, так что с нуля начинать мне не грозило.
В итоге нам надо получить один стиль, и по возможности, без дополнительных контролов: в дереве проекта XAML и код стиля расположились в директории CustomizedWindow, а основное окно в корне проекта.
Мне хотелось избежать добавления новых библиотек в проект, но сохранить возможность легко перенести стиль в другое приложение, что и определило такую структуру.
Создаем стиль
Стиль для окна, как и для любого другого контрола в WPF задается при помощи ControlTemplate. Содержимое окна будет показываться ContentPresenter’ом, а функциональность которую проще сделать в коде c#, подключится через x:Class атрибут в ResourceDictionary. Все очень стандартно для XAML’а.
Сразу же определим кнопки управления окном в стиле Студии 2012. Это будет единственный дополнительный глобальный стиль на случай если потом возникнет желание использовать такие кнопки в приложении.
Нам нужна функциональность обычной кнопки, но с очень примитивной отрисовкой — фактически только фон и содержимое.
Изображения на кнопках проще всего сделать «в векторе». Например, вот так выглядит maximize:
Для текста заголовка используем стандартный шрифт Segoe UI. Единственная особенность здесь — убедиться, что текст отрисован без размытия, иначе заголовок окна будет выглядеть… плохо он будет выглядеть — как во второй строчке на скриншоте.
Кстати, для Path’а на кнопках с той же целью использовался EdgeMode=«Aliased», а
для текста в WPF 4+ появилась долгожданная возможность указать, что отображаться он будет на дисплее, а не на «идеальном устройстве», что и позволило добиться приемлимой четкости на наших неидеальных экранах.
Еще одна интересная особенность связана с «геометрией Windows 7» при распахивании окна на весь экран. Windows жульничает, масштабируя окно так, что бордюр целиком уходит за границу экрана, оставляя на мониторе только клиентскую часть окна. Естественно, что Windows при этом больше не отрисовывает бордюр и для стандартных окон все работает как ожидалось. WPF это никак не отрабатывает и, для таких окон как у нас, есть риск потерять часть изображения или начать рисовать на соседнем мониторе, если он подключен.
Остальные детали менее существенны, но если интересно, добро пожаловать в исходники.
Оживляем окно
.Net 4.0
Помимо реакции на кнопки и иконку, окно должно перемещаться и изменять размер при drag’е за заголовок, за края и уголки. Соответствующие горячие зоны проще всего задать при помощи невидимых контролов. Пример для левого верхнего (северо-западного) угла.
При наличие атрибута Class в ресурсах, методы этого класса можно вызывать просто по имени как обычные обработчики событий, чем мы и воспользовались. Сами обработчики, например MinButtonClick и OnSizeNorthWest, выглядят примерно так:
DragSize далее вызывает WinAPI (исходник) и заставляет Windows перейти в режим измененения размера окна как в до-дотнетовские времена.
.Net 4.5
В 4.5 появились удобные классы SystemCommands и WindowChrome. При добавлении к окну, WindowChrome берет на себя функции изменения размера, положения и состояния окна, оставляя нам более «глобальные» проблемы.
Почти готово. Зададим триггеры для контроля изменений интерфейса при изменении состояния окна. Вернемся в XAML и, например, заставим StatusBar’ы изменять цвет в зависимости от значения Window.IsActive.
Обратите внимание, что этот стиль влияет не на темплэйт окна, а на контролы помещенные в наше окно. Помните самый первый фрагмент с пользовательским кодом?
Вот стиль именно этого StatusBar’а мы сейчас и задали. При желании и времени так же можно задать и стиль для других классов контролов, например подправить ScrollBar, чтобы он тоже соответствовал нужному стилю. Но это уже будет упражнение на следующий свободный вечер.
Собираем все вместе
Все. Нам осталось только подключить стиль к проекту через ресурсы приложения:
И можно использовать его в любом окне.
Адаптивная компоновка на WPF
Отличие WPF компоновки от других методик
Компоновка интерфейсов приложений WPF в корне отличается от методик размещения визуальных элементов C++ Win32, C++ MFC, C# Windows Forms. В ранних системах распределение элементов интерфейса строилось на абсолютных величинах, отсчитываемых от краёв окна: Left, Top, Right, Bottom. С появлением резиновых контейнеров FlowLayoutPanel TableLayoutPanel в Windows Forms появилась возможность создавать гибкие, Web-подобные интерфейсы. Вероятно, для увеличения возможностей дизайнеров и конкурентная борьба мировых операционных систем побудили разработчиков команды Microsoft к созданию платформы интерфейсов нового поколения Windows Presentation Foundation.
Начиная работать с WPF вначале появляется растерянность перед новой компоновочной системой. Привычные шаги добавления и затем распределения элементов по форме в новой системе не дают ожидаемого результата. Макет интерфейса в WPF основан на невидимых контейнерах, размещающих внутри себя дочерние элементы. Контейнеры, по заложенным в них алгоритмах, самостоятельно распределяют свои элементы в пределах выделенного сектора окна. В свою очередь родительский контейнер может быть также вложен в другой, становясь при этом дочерним. Глубина вложенности может быть любой, при этом компоновка всегда начинается с единственного корневого контейнера. Разнообразие контейнеров и возможность создания собственных дают неограниченную свободу дизайнерам фронтенда.
Примеры компоновки
Программа «Языков программирования»
Полноценное приложение с адаптивной компоновкой на платформе WPF. Программа представляет собой информационное приложение для изучения языков программирования. Информация, в виде XML базы данных, хранится отдельно в папке приложения.
Для примера в базу данных приложения внесены данные языков: C#, C++, Java, Python, PHP. При необходимости базу можно дополнить данными других языков. Доступ к XML базе осуществляется классическим способом, без привязки данных. Интерфейс приложения показывает текстовые описания, изображения и примеры исходных кодов для наглядности.
Приложение «Языки программирования» имеет компоновку, подстраивающуюся под различные размеры окна. Макет приложения построен на нескольких типах контейнеров, которые вмещают в себя, также, различные виды элементов управления. Интерфейс получился довольно гибкий, и информация приемлемо читается и смотрится в окне с размерами от 600х400 пикселей.
Для удобного восприятия информации шрифты приложения масштабируются в зависимости от размеров окна. Размеры шрифтов привязаны к базовой ширине окна. При изменении ширины соответственно уменьшаются или увеличиваются шрифты заголовков и текста приложения. Основную часть обеспечения адаптивности интерфейса берут на себя умные контейнеры платформы Windows Presentation Foundation. Добавлен лишь небольшой программный код и приложение сформировалось полностью.
Адаптивная компоновка
Основная трудность создания интерфейса пользователя это организация визуального содержимого. Сложность задачи в том, чтобы получить компоновку видимых элементов легко адаптирующуюся к различным размерам окна приложения. В WPF гибкая компоновка достигается с помощью умных контейнеров, обладающие собственной логикой размещения дочерних элементов. Компоновка на основе абсолютных координат уверенно вытесняется в пользу адаптивной вёрстки, эффективно распределяющей элементы в поле доступного пространства.
В приложении «Языки программирования» макет интерфейса начинается с панели Grid. Данная панель имеет табличную структуру и позволяет вмещать в себя множество дочерних элементов. Grid наиболее универсальный контейнер, умеет формировать ячейки с адаптивной и фиксированной шириной. Контейнер Grid и его ячейки не имеют свойства Padding и не создают видимых границ, в этом случае его удачно дополняет декоративный компонент Border. В компоновке макета и применён этот удачный симбиоз. В свою очередь Border может вмещать в себя только один элемент. Расширить возможности декоративного компонента можно разместив в нём любой контейнер производный от класса Panel.
Текстовые заголовки интерфейса отображены элементом управления TextBlock. Текстовые блоки отлично подходят для небольшого текста, не более нескольких строк. Для больших объемов текстового содержимого рекомендуется использовать потоковые документы FlowDocument.
В случае, когда визуальный элемент не может отобразится полностью в отведённом ему пространстве, можно обернуть элемент экземпляром класса прокрутки ScrollViewer. При урезании видимой части компонента появляются полосы прокрутки дающие возможность увидеть скрытые области.
Программа презентации
Интерфейс программы презентации, по своей реакции на изменение размера, напоминает HTML каркас Bootstrap. При растягивании окна элементы выстраиваются горизонтально в одну строку, при уменьшении ширины компоненты располагаются, сначала попарно в двух строках, затем складываются в один столбец.
Адаптивность интерфейса достигается с помощью контейнеров WrapPanel. В макете участвуют изображения и текстовые описания обёрнутые во FlowDocument.
Компоновка на WrapPanel
Гибкость интерфейса программы презентации базируется на компоненте WrapPanel. Данный контейнер, при достаточной ширине окна, располагает свои потомки последовательно слева направо. При нехватке ширины WrapPanel заворачивает содержимое на следующую строку вниз и справа налево. При использовании в макете нескольких вложенных WrapPanel можно получить интересный эффект автоматического расчета количества элементов в строке в зависимости от ширины окна.
StackPanel в данном макете служит для расположения друг над другом смежных элементов: изображения и текстового блока. StackPanel умеет размещать дочерние элементы вертикально или горизонтально. По умолчанию установлено вертикальное размещение.
В заголовке презентации, контейнером служит экземпляр декоративного класса Border. Часто Border применяют в макетах для получения дистанции Padding в контейнерах с отсутствием аналогичного свойства. Все контейнеры и элементы презентации заключены в один корневой контейнер Grid с двумя строками. Один, поскольку класс окна не допускает несколько вложенных компонентов.
Графика и код
Дизайнерская часть в приложениях WPF отделена от программной. Основная графическая часть находится в текстовом файле XAML (язык разметки пользовательских интерфейсов, похожий на XML). Хотя можно всю графику строить и программным способом, XAML позволяет визуально отлаживать макет интерфейса. Visual Studio имеет XAML дизайнер помогающий визуально отлаживать интерфейсы приложений WPF. В комплект Visual Studio также входит дизайнерский инструмент Microsoft Blend для автоматизированного проектирования интерфейсов XAML. Microsoft Blend позволяет визуально создавать и отлаживать анимацию. Это быстрее и удобнее, чем создание анимации в коде.
Интерфейс Калькулятор
На примере калькулятора отлично демонстрируется компоновка множества однородных элементов управления. Интерфейс калькулятора состоит из 24 кнопок и одного дисплея калькулятора, с цветовой гаммой минималистского стиля. Наиболее подходящий контейнер для одинаковых элементов это UniformGrid. При изменении размеров окна клавиши калькулятора неизменно сохраняют свой порядок.
Данный контейнер представляет собой адаптивную сеточную структуру с ячейками одинакового размера. Контейнер располагает дочерние элементы в порядке их добавления в родительский контейнер. Если значения для строк и столбцов не указаны, UniformGrid создаст квадратный макет на основе общего количества видимых элементов, где количество строк будет равно количеству столбцов. Интерфейс калькулятора создан полностью на XAML, без применения программного кода.
XAML калькулятора
Общие стили для всех кнопок
Общие стили для всех элементов Button калькулятора: