- •Разделы дисциплины и виды занятий в часах
- •Общая информация о курсе
- •Введение
- •Об авторах
- •Лекция 1. Краткое знакомство с моделью программирования xaml.
- •Краткий экскурс в историю графических интерфейсов пользователя
- •Windows Presentation Foundation – три в одном
- •Декларативное программирование ui и xaml
- •Основы модели ui и xaml
- •Элементы xaml
- •Элементы управления
- •Графические примитивы
- •Службы документов
- •Преобразования и анимация
- •Ресурсы и стили
- •Разделение труда дизайнера и разработчика
- •Xaml – текущая поддержка
- •Модель программирования xaml
- •Ключевые термины
- •Краткие итоги
- •Xaml подчиняется всем правилам wellformed xml, в частности это означает, что xaml документ:
- •Вариант 2 Задачи 3.
- •Вариант 2 Задачи 8.
- •Вариант 3 Задачи 8.
- •Xaml может использоваться для описания ui:
- •Xaml может использоваться:
- •Лабораторная работа 1. Размещение элементов управления.
- •Задания для самостоятельного выполнения
- •Учебный элемент. Создание нового проекта для Silverlight в VisualStudio 2010.
- •Шаг 1. Создание проекта
- •Шаг 2. Добавляем элементы интерфейса для xaml-страниц
- •Учебный элемент. Silverlight: размещение элементов.
- •Шаг 1. Принципы разметки
- •Шаг 2. Создаем Twitter-приложение
- •Шаг 3. Навигация
- •Шаг 4. Размещаем элементы для страницы поиска
- •Шаг 5. Изменяем UriMapper для Search.Xaml
- •Краткие итоги
- •Литература
- •Лекция 2. Сведения о wpf и Silverlight: Введение и архитектура платформ.
- •Независимость от разрешения
- •Архитектура Silverlight
- •Состав ядра представления:
- •В подмножество .Net Framework входят:
- •Архитектура wpf
- •Иерархия классов
- •Элементы управления wpf
- •Компоновочные элементы управления в системе wpf
- •Ключевые термины
- •Краткие итоги
- •Лекция 3. Стили и шаблоны элементов управления wpf.
- •Создание стиля
- •Использование стиля
- •Размещение стилей
- •Основы шаблонов
- •Создание шаблона
- •Повторное использование шаблона Control’а
- •Связывание в Шаблонах
- •Установка шаблонов через стили
- •Повторное использование настроек цвета
- •Ключевые термины
- •Краткие итоги
- •Вариант 2 Задачи 5.
- •Задания для самостоятельного выполнения
- •Учебный элемент. Стили и ресурсы в wpf
- •Шаг 1. Применение стиля в xaml документе
- •Шаг 2. Динамическое применение стилей в коде приложения
- •Поддержка множества целевых платформ
- •Клиентский профиль .Net
- •Визуальный конструктор Visual Studio
- •Графика Шейдеры
- •Кеширование графики
- •Новые функции для анимации
- •Усовершенствования двухмерной графики.
- •Поддержка Generics
- •Ключевые термины
- •Краткие итоги
- •Набор для практики
- •Литература
- •Лекция 5. Silverlight и wpf в Visual Studio 2010 (продолжение).
- •Новые возможности Silverlight 4. Silverlight 5: основные нововведения ожидаемого релиза. Хронология Silverlight
- •Связывание с данными Отладка
- •Поддержка Full-Trust внутри браузера
- •Обработка множественного нажатия кнопки мыши
- •Поддержка выбора элементов в ItemsControl с клавиатуры
- •Повышение полномочий для приложений в браузере
- •Поддержка нескольких окон
- •Доступ к файловой системе для приложений с повышенными привилегиями
- •Установка имени файла по умолчанию в SaveFileDialog
- •Улучшение работы с аудио
- •Изменение скорости проигрывания медиа
- •Поддержка пульта дистанционного управления
- •Работа с текстом
- •Отладка при связывании с данными
- •Улучшенная поддержка шаблона mvvm
- •Использование связывания в стилях
- •Неявные шаблоны
- •Другие изменения
- •Краткие итоги
- •Вариант 2 Задачи 2.
- •Вариант 2 Задачи 4.
- •Вариант 2 Задачи 6.
- •Вариант 3 Задачи 6.
- •Литература
- •Лекция 6. Привязка данных в технологиях wpf и Silverlight
- •Принципы работы с данными
- •Модель данных в .Net
- •Всепроникающее связывание
- •Преобразование данных
- •Ресурсы
- •Основные принципы связывания
- •Привязка к объектам clr
- •Редактирование
- •Ключевые термины
- •Вариант 2 Задачи 5.
- •Шаг 1. Создание повторно используемой функциональности
- •Устанавливаем стили для элементов управления
- •Двусторонняя привязка данных
- •Шаг 2. Добавление обработки событий клавиатуры
- •Шаг 3. Инкапсуляция разметки и логики в элемент управления UserControl
- •Реализация элемента управления
- •Добавление кода
- •Использование пользовательского элемента управления
- •Многократное использование
- •Шаг 1. Рефакторинг кода адресной формы
- •Код внутри класса AdressCustomControl
- •Определение свойств зависимости
- •Шаг 2. Рефакторинг кода разметки указателя цвета
- •Шаг 3. Оптимизация шаблона элемента управления
- •Манипулирование частями шаблона
- •Документирование частей шаблона
- •Ключевые термины
- •Вариант 2 Задачи 3.
- •Вариант 3 Задачи 3.
- •Задача 4. Вариант 1 Задачи 4.
- •Вариант 2 Задачи 4.
- •Вариант 3 Задачи 4.
- •Задача 5. Вариант 1 Задачи 5.
- •Вариант 2 Задачи 5.
- •Вариант 3 Задачи 5.
- •Задача 6. Вариант 1 Задачи 6.
- •Вариант 2 Задачи 6.
- •Вариант 3 Задачи 6.
- •Задача 7. Вариант 1 Задачи 7.
- •Вариант 2 Задачи 7.
- •Вариант 3 Задачи 7.
- •Литература
- •Лабораторная работа 3. Пользовательские элементы управления.
- •Задания для самостоятельного выполнения
- •Учебный элемент. Создание пользовательского элемента управления средствами дизайнера VisualStudio Шаг 1. Создание Silverlight проекта
- •Шаг 2. Создание пользовательского элемента управления
- •Шаг 5. Использование Custom Control
- •Учебный элемент. Создание пользовательского элемента управления средствами дизайнера Expression Blend
- •Шаг 1. Инкапсуляция ui в User Control
- •Шаг 2. Привязка адресов к нашему AddressUserControl – контроллеру.
- •Краткие итоги
- •Литература
- •Лекция 8. Использование событий, команд и триггеров в технологиях wpf и Silverlight
- •Принципиальные основы действий
- •Композиция элементов
- •Слабая связь
- •Декларативные действия
- •События
- •Команды
- •Команды и привязка к данным
- •Триггеры
- •Добавление триггеров к данным
- •Добавление триггеров к элементам управления
- •Вариант 2 Задачи 2.
- •Вариант 2 Задачи 6.
- •Вариант 2 Задачи 8.
- •Вариант 3 Задачи 8.
- •Литература
- •Лабораторная работа 4. Использование команд в технологиях wpf и Silverlight
- •Задания для самостоятельного выполнения
- •Учебный элемент. Использование стандартных и нестандартных команд Шаг 1. Использование стандартных команд.
- •Шаг 2. Использование нестандартных команд.
- •Шаг 3. Перевод команд из неактивного состояния в активное и обратно.
- •Краткие итоги
- •Литература
- •Лекция 9. Применение паттерна mvvm как оптимального при проектировании wpf и Silverlight приложений
- •Паттерн Model-View-ViewModel (mvvm)
- •Обязанности и характеристики классов.
- •Класс представления (View).
- •Класс модели представления (View Model).
- •Представление или Модель Представления?
- •Класс модели (Model).
- •Взаимодействие классов.
- •Привязка данных.
- •Реализация iNotifyPropertyChanged.
- •Реализация iNotifyCollectionChanged.
- •Реализация iCollectionView.
- •Команды.
- •Реализация Command Objects.
- •Подтверждение правильности данных и сообщение об ошибках.
- •Реализация iDataErrorInfo.
- •Создание и соединение.
- •Создание модели представления через xaml.
- •Создание модели представления программно.
- •Создание представления, определенного как шаблон данных.
- •Вариант 2 Задачи 1.
- •Вариант 3 Задачи 1.
- •Задача 2. Вариант 1 Задачи 2.
- •Вариант 2 Задачи 2.
- •Вариант 3 Задачи 2.
- •Задача 3. Вариант 1 Задачи 3.
- •Вариант 2 Задачи 3.
- •Вариант 2 Задачи 6.
- •Вариант 3 Задачи 6.
- •Задача 7. Вариант 1 Задачи 7.
- •Вариант 2 Задачи 7.
- •Вариант 3 Задачи 7.
- •Литература
- •Лабораторная работа 5. Реализация wpf проекта с помощью mvvm toolkit’а
- •Задания для самостоятельного выполнения
- •Учебный элемент. Реализация паттерна mvvm средствами Model-View-ViewModel Toolkit 0.1
- •Шаг 1. Постановка задачи
- •Шаг 4. Редактирование
- •Шаг 5. Команды
- •Краткие итоги
- •Литература
- •Лекция 10. Проектирование приложения с учетом использования единого опыта разработки для настольных и Web-проектов.
- •Подходы к решению задачи
- •Разработка кроссплатформенного проекта с самого начала
- •Разработка для одной платформы с последующим портированием на другую
- •Инструментарий
- •Создание ссылок на файлы в Visual Studio
- •Создание ссылок на xaml файлы
- •Директивы препроцессора
- •Разделяемые классы
- •Синхронное использование xaml
- •Решение проблем недостающего функционала Отсутствие FrameworkPropertyMetadata
- •Отсутствие приведения значения
- •Отсутствие метода OverrideMetadata()
- •Отсутствие зависимых свойств только для чтения
- •Отсутствие класса Brushes
- •Конструкторы по умолчанию для геометрий
- •Отсутствие свойства No PathSegment.IsStroked
- •Краткие итоги
- •Принцип инверсии зависимостей
- •Формы инверсии зависимостей
- •IoC контейнер
- •Определение моделей представления
- •Определение представлений
- •Сопоставление модели представления и представления
- •Реализация iNotifyPropertyChanged средствами аспектно-ориентированного программирования
- •Краткие итоги
- •IoC контейнер в mef инкапсулируется классом …
- •Понятие iChildViewModelManager
- •Реализация ChildViewModelBase
- •Реализация ModalChildViewModelBase
- •Реализация MessageViewModel
- •Краткие итоги
- •Литература Лабораторная работа 6. Построение кроссплатформенного Silverlight/wpf приложения.
- •Создание проектов
- •Краткие итоги
- •Список литературы
Определение моделей представления
Для возможности разрешения моделей представления через IoC контейнер, безусловно, в первую очередь необходимо зарегистрировать их в качестве экспорта в MEF:
1: [Export]
2: [PartCreationPolicy(CreationPolicy.NonShared)]
3: public class MainViewModel
4: {
5: //
6: }
Обратите внимание на атрибут PartCreationPolicy: он указывает на то, что данный экспорт необходимо создавать заново при удовлетворении каждой новое зависимости, т.е. он не является синглетоном.
Для разрешения модели в контексте текущего IoC контейнера представления достаточно воспользоваться определенным выше интерфейсом ServiceLocator: так, для получения модели представления MainViewModel необходимо выполнить код:
1: var mainViewModel =
2: ServiceLocator.Current.GetInstance<MainViewModel>();
В данном случае можно возразить, что с точки зрения языка корректно создать экземпляр модели представления посредством оператора new, не привлекая к работе IoC контейнер. Однако, хоть такая операция и не произведет ошибок компиляции, код будет не совсем верен: у созданной через конструктор по умолчанию модели представления не будут удовлетворены зависимости (импорты), так как IoC контейнер о ней будет попросту не знать. Также использование IoC контейнера для создания моделей представления открывает возможность использования элементов аспектно-ориентированного программирования, о чем будет сказано несколько позже.
Определение представлений
Следующим этапом является регистрация представлений и декларативная привязка их к соответствующим моделям представления.
Для абстрагирования от конкретной реализации представления в соответствии с принципами инверсии управления необходимо определить общий интерфейс:
1: public interface IView
2: {
3: object DataContext { set; }
4: }
Представления будут реализовывать данный интерфейс, в качестве ключа экспорта указывая свое имя:
1: [Export("MainView", typeof(IView))]
2: [PartCreationPolicy(CreationPolicy.NonShared)]
3: public partial class MainView : IView
4: {
5: public MainView()
6: {
7: InitializeComponent();
8: }
9: }
Сопоставление модели представления и представления
Теперь, когда MEF имеет информацию как о представлении, так и о модели представления, следует реализовать логику сопоставления, которая на основании соглашении об именовании определяет представление, соответствующее переданной модели представления.
Обычной практикой является добавление суффикса ViewModel моделям представления и суффикса View представлениям. Таким образом, имея имя типа модели представления, достаточно заменить в нем ViewModel на View, чтобы получить имя представления.
1: var view = ServiceLocator.Current.GetInstance<IView>(
2: viewModel.GetType().Name.Replace("ViewModel", "View"));
На практике часто возникает ситуация, в которой целое семейство моделей представления, объединенное в одну иерархию, соответствует единственному представлению. Например, модели представления по редактированию доменных объектов UserEditViewModel, RoleEditViewModel будут иметь общего предка EditViewModel, и обеим моделям представления должно быть сопоставлено одно представление EditView, содержащее элемент управления DataForm, предоставляющий обобщенный интерфейс редактирования объекта на основе отражения типов.
Простым решением будет создание 2 наследников для представления EditView, UserEditView и RoleEditView, не содержащих никакой логики и служащих для соблюдения соглашения о наименовании. Однако более разумно включить в логику поиска соответствия обход по всему дереву наследования, до тех пор, пока не будет найдено соответствие:
1: IView view;
2: Type viewModelType = viewModel.GetType();
3:
4: do
5: {
6: view = ServiceLocator.Current.GetInstance<IView>(
7: viewModelType.Name.Replace("ViewModel", "View"));
8:
9: if (view != null)
10: {
11: break;
12: }
13:
14: viewModelType = viewModelType.BaseType;
15: } while (viewModelType != null);
Для возможности повторного использования данная логика добавляется в наследника класса ContentControl, который по переданной через зависимое свойство ViewModel модели представления находит соответствующее представление и устанавливает её своим содержимым:
1: /// <summary>
2: /// Presents a View corresponding to the View Model
3: /// </summary>
4: public class ViewModelPresenter : ContentControl
5: {
6: /// <summary>
7: /// Initializes a new instance
8: /// </summary>
9: public ViewModelPresenter()
10: {
11: HorizontalContentAlignment = HorizontalAlignment.Stretch;
12: VerticalContentAlignment = VerticalAlignment.Stretch;
13: }
14:
15: // Dependency properties
16: public static readonly DependencyProperty ViewModelProperty
17: = DependencyProperty.Register(
18: "ViewModel", typeof(object), typeof(ViewModelPresenter),
19: new PropertyMetadata(null, OnViewModelPropertyChanged));
20:
21: // Private fields
22: private Type _oldViewType;
23:
24: /// <summary>
25: /// View Model to be presented
26: /// </summary>
27: public object ViewModel
28: {
29: get { return GetValue(ViewModelProperty); }
30: set { SetValue(ViewModelProperty, value); }
31: }
32:
33: private static void OnViewModelPropertyChanged(
34: DependencyObject changedObject,
35: DependencyPropertyChangedEventArgs args)
36: {
37: var contentControl = (ViewModelPresenter)changedObject;
38: contentControl.RefreshContentPresenter();
39: }
40:
41: private void RefreshContentPresenter()
42: {
43: if (ViewModel == null)
44: {
45: Content = null;
46: _oldViewType = null;
47:
48: return;
49: }
50:
51: IView view;
52: Type viewModelType = ViewModel.GetType();
53:
54: do
55: {
56: view = ServiceLocator.Current.GetInstance<IView>(
57: viewModelType.Name.Replace("ViewModel", "View"));
58:
59: if (view != null)
60: {
61: break;
62: }
63:
64: viewModelType = viewModelType.BaseType;
65: } while (viewModelType != null);
66:
67: if (view != null)
68: {
69: Type viewType = view.GetType();
70:
71: if (viewType == _oldViewType && Content is IView)
72: {
73: ((IView)Content).DataContext = ViewModel;
73: }
74: else
75: {
76: view.DataContext = ViewModel;
77: Content = view;
78: _oldViewType = viewType;
79: }
80: }
81: else
82: {
83: Content = "View hasn't been found";
84: _oldViewType = null;
85: }
86: }
87: }
В данном элементе управления также реализовано простейшее кеширование: если представление не изменилось, а изменилась только модель представления, то создания нового объекта не произойдет, и новая модель представления будет назначена контекстом представления взамен старой.
Далее, в если в XAML разметке необходимо отобразить представление, соответствующее определенной модели представления, достаточно вставить элемент управления ViewModelPresenter и передать ему в зависимое свойство данную модель представления. Внутри ViewModelPresenter будет отображено представление, найденное по описанному выше алгоритму.
