Шаг 1. Инкапсуляция UI в User Control

В данном примере, мы работаем над формой, который будет позволять прикреплять пользователям информацию об адресах доставки и выставления счета (рисунок л. р. 3.6). Можно начать с создания некоторого UI, который будет принимать информацию об адересе. Что бы это сделать, мы добавим на страницу элементу правления <border> и поместим в него gird layout panel (2 колонки по 4 ряда), а затем поместим labels (метки) и textbox (текстовые поля) там же:

Рис. л. р. 3.6. Создаваемая форма в дизайнере Expression Blend.

Можно использовать “Add New Item“ (добавить новый элемент), затем в пустой шаблон контрола при помощи копирования переместить уже собранный UI.

В Blend можно сделать еще проще – выбираем нужные для инкапсуляции элементы урпавления в дизайнере и после щелчка правой кнопкой мыши в появившемся меню щелкаем “Make Control” (сделать элементом управления, рисунок л. р. 3.7):

Рис. л. р. 3.7. Процесс инкапсуляции UI

При этом Blend попросит задать имя для нового юзер-контрола (рисунок л. р. 3.8):

Рис. л. р. 3.8. Задание имени элементу управления.

Назовем его “AddressUserControl” и нажимаем ОК. Появится новый юзер-контрол, содержимое которого будет идентично ранее выделенному (рисунок л. р. 3.9):

Рис. л. р. 3.9. AddressUserControl.

Когда мы пересоберем весть проект и дойдем до первоначальной страницы, то увидим тот же UI, за исключением того, что пользовательский интерфейс адреса «зашит» в наш AddressUserControl (рисунок л. р. 3.10):

Рис. л. р. 3.10. AddressUserControl на первоначальной странице.

Мы можем переименовать 1 - ый AddressUserControl в “ShippingAddress” (дословно - адрес доставки), а вторую копию превратить в “BillingAddress” (досл. - адрес выставления счета) и использовать их обоих соответственно названиям (рисунок л. р. 3.11).

Рис. л. р. 3.11. ShippingAddress и BillingAddress на первоначальной странице.

А если мы хотим изменить внешний вид, то изменения будут проводиться единократно и сразу для обоих адреса доставки и выставления счета.

Шаг 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 адрес – модуля без внесения каких – либо изменений в сам код. Также это упрощает тестовый прогон работоспособности программы.

Дата добавления: 2015-08-13