Шаг 5. Использование Custom Control

Давайте добавим пользовательский элемент управления, который мы создали на нашей главной странице проекта. Чтобы сделать это, Вам нужно добавить XMLNS namespace в XAML. В нашем случае, это имя проекта. Как только Вы объявляете пространства имен, Вы будете иметь доступ к созданному элементу управления.

<UserControl x:Class="CustomControlDemo.MainPage" 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:mc=http://schemas.openxmlformats.org/markup-compatibility/2006 xmlns:CustomControlDemo="clr-namespace:CustomControlDemo" c:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400"> <Grid x:Name="LayoutRoot" Background="White"> <CustomControlDemo:MyControl Width="200" Height="200" Background="Yellow" BorderBrush="Red" BorderThickness="1"/> </Grid> </UserControl>

Приведенный выше код говорит сам за себя. Там мы добавили наш пользовательский элемент управления под названием "MyControl" с заданной высотой и шириной. Если Вы не указываете высоту и ширину, то контрол займет весь экран приложения (в приведенном примере).

Как только запустится приложение Вы увидите в браузере прямоугольник -пользовательский элемент управления, который мы создали в этом примере. Меняя шаблон элемента управления, будет меняться и внешний вид соответствующего контрола (рисунок л.р. 3.5).

Рис. л. р. 3.5. Созданный пользовательский элемент управления.

Учебный элемент. Создание пользовательского элемента управления средствами дизайнера Expression Blend

В пердыдущем учебном элементе мы рассмотрели, как создавать новый пользовательский элемент управления при помощи диалогового окна VS 2010 “Add New Item“ (добавить новый элемент) с последующим построением UI. Такой способ работы идеален в случае, если вы представляете, как должен выглядеть UI. Также эту задачу можно выполнить и при помощи Expression Blend.

Шаг 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 на первоначальной странице.

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