Шаг 2. Привязка адресов к нашему AddressUserControl – контроллеру.
Поскольку с инкапсуляциями покончено, давайте построим класс - модель для вводимой информации (в нашем случае адреса). Зададим класс (рисунок л. р. 3.12) пользуясь удобной функцией «автоматические свойства»:
Рис.
л. р. 3.12. Класс Address.
В режиме просмотра кода нашего файла Page.xaml мы сразу увидим оба наших объекта (ShippingAddress” и “BillingAddress”), первый будет служить для вставки адресата доставки, а второй – адресата выставления счета (в данном случае мы просто заполним строки «пустой» информацией). Затем привяжем объекты – адреса к нашим элементам управления на странице (рисунок л. р. 3.13). Сделаем мы это, используя свойство “DataContext”, задавая каждому контролу свою модель (1-му- адрес доставки, 2-му – адрес счета):
Рис.
л. р. 3.13. Установка каждому контролу
своей модели через DataContext.
Последним шагом будет добавление выражения {Binding} (привязка) в нашем AddressUserControl.xaml файле, что обеспечит двустороннюю связь между свойствами текста в TextBox и созданной нами моделью информации – адреса, закрепленной нами в качестве контроллера (рисунок л. р. 3.14):
Рис.
л. р. 3.14. Добавление выражения привязки.
При нажатии F5 для запуска приложения мы увидим, что они связаны (рисунок л. р. 3.15):
Рис.
л. р. 3.15. Результат созданного проекта
с пользовательскими элементами
управления.
Поскольку мы задали двустороннюю связь (используя “Mode=TwoWay”), то изменения, вносимые пользователями, будут без специального кода вноситься в модель. Например, мы захотели поменять исходный адрес на адрес Диснейленда:
Устанавливаем breakpoint (рисунок л. р. 3.16) на обработчик “Click” кнопки «Save» (затем на неё нажмём) и видим, как с изменением содержимого TextBox меняется и наша модель “_shippingAddress”:
Рис.
л. р. 3.16. Результат работы двусторонней
привязки.
Потом можно также реализовать обработчик событий SaveBtn_Click, чтобы фиксировать модели так, как мы хотим, при этом пальцем не притрагиваясь к UI. Это четкое разделение модели и представления, представленное WPF и поддерживаемоеSilverlight, позволяет и в дальнейшей работе изменять UI адрес – модуля без внесения каких – либо изменений в сам код. Также это упрощает тестовый прогон работоспособности программы.
Краткие итоги
WPF и Silverlight позволяют легко проводить инкапсуляцию функций UI в элементах управления, и поддерживаемая ими механика пользовательского управления только способствует этому. Привязка вкупе с пользовательским управлением создают границу между моделью/представлением, что позволяет написать рациональный код при работе с информацией.
Литература
Практическое руководство. Создание проекта библиотеки элементов UserControl в WPF http://msdn.microsoft.com/ru-ru/library/bb514641(v=vs.90).aspx
Лекция 8. Использование событий, команд и триггеров в технологиях wpf и Silverlight
Краткая аннотация лекции: разбирается способ привязки поведения сущностей к средствам пользовательского интерфейса WPF и Silverlight. Описывается интерфейс ICommand.
Цель лекции: команды представляют собой механизм ввода в WPF и Silverlight, обеспечивающий обработку ввода на более семантическом уровне по сравнению с устройствами ввода. Примерами команд являются операции Копировать, Вырезать и Вставить, доступные во многих приложениях. В этом разделе представлены общие сведения о командах, классах, входящих в состав модели команд, а также о порядке использования и создания событий, команд и триггиров в приложениях.
В двух предшествующих лекциях мы рассмотрели, как можно включать в приложение данные и визуализировать их различными способами. До сих пор нас интересовало главным образом, как в приложениях WPF/Silverlight устроен вывод; мы занимались конструированием приложения из элементов управления, которые пользуются визуальными элементами для собственного отображения и менеджерами размещения для позиционирования. Теперь обратим свой взгляд на организацию ввода.
Часто мы хотим, чтобы приложение определенным образом реагировало на движения мышью, нажатия кнопок или клавиш. На платформе Windows Presentation Foundation есть три способа работы с действиями: события, команды и триггеры. В данной лекции мы познакомимся с принципами, применимыми ко всем этим механизмам, а затем углубимся в детали каждого в отдельности.