Пользовательские элементы управления

Цель лабораторной работы: показать реализацию пользовательского элемента управления двумя путями: средствами дизайнера VisualStudio 2010 и Expression Blend 4. Дать представление о том, какой из вариантов целесообразно использовать в той или иной ситуации. Закрепить знания, полученные в лекциях 4, 5, 6, 7.

Задания для самостоятельного выполнения

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

Шаг 1. Создание Silverlight проекта

Прежде всего, нам нужно создать Silverlight проект. В левой панели выберите пункт меню Silverlight, а из правой панели "Silverlight Application". Дайте собственное имя для Вашего приложения и решения. Нажмите "ОК" для продолжения (рис. 10.1).

Так же на этом этапе (если Вы используете VS2010) имеется возможность выбора целевой версии .NET Framework.

Шаг 2. Создание пользовательского элемента управления

После того как мы создали проект Silverlight, приступим к созданию пользовательского элемента управления. Обращаем Ваше внимание на то, что в данном учебном элементе мы создадим самый элементарный пользовательский элемент управления. Предложенное задание для самостоятельного выполнения немногим сложнее (для его выполнения необходимо опираться на материал предыдущих лекций).

Итак, для создания пользовательского элемента управления щелкните правой кнопкой мыши на ваш проект Silverlight, из контекстного меню выберите пункт "Add" и из контекстного меню второго уровня нажмите кнопку "New item…". Откроется диалоговое окно "Add New Item" (рис. 10.2).

Как показано на скриншоте ниже (рис. 10.3), в открывшемся диалоговом окне, необходимо выбрать "Silverlight Templated Control" и задать собственное имя для контрола. Помните, что "Silverlight Templated Control" является шаблоном для пользовательских Silverlight-контролов.

Нажмите кнопку "Add", чтобы добавить пользовательский элемент управления в проект. Разверните "Solution Explorer". Там вы найдете следующие вещи:

Обратите внимание, если Вы создаете несколько элементов управления, IDE будет создавать несколько файлов класса контролов, но файл ресурсов будет общим (рис. 10.4.).

Шаг 3. Class CustomControlDemo

Рассмотрим созданный класс CustomControlDemo более подробно. По умолчанию наш пользовательский элемент управления является наследником от базового класса всех элементов управления - Control. Вы можете изменить базовый класс в зависимости от ваших требований. Посмотрите на код, который был создан IDE:

using System.Windows.Controls;
namespace CustomControlDemo
{
    public class MyControl : Control
    {
        public MyControl()
        {
            this.DefaultStyleKey = typeof(MyControl);
        }
    }
}

Обратите внимание на код внутри конструктора. В конструкторе идет применение стиля из файла ресурсов и установка его в качестве стиля по умолчанию элемента управления.

Шаг 4. Template CustomControlDemo

Шаблон созданного пользовательского элемента управления Вы можете увидеть в файле Generic.xaml. Откройте файл и посмотрите на стиль внутри ResourceDictionary:

<Style TargetType="local:MyControl">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:MyControl">
                <Border Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Первая строка описывает тип стиля. Вторая строка объявляет шаблон элемента управления. Третья строка устанавливает значение шаблона. На приведенном выше листинге мы видим шаблон, созданный по умолчанию, который мы можем изменить под наши задачи.

Шаг 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" с заданной высотой и шириной. Если Вы не указываете высоту и ширину, то контрол займет весь экран приложения (в приведенном примере).

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

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

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

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

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

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

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

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

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

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

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

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

Шаг 2. Привязка адресов к нашему AddressUserControl – контроллеру

Поскольку с инкапсуляциями покончено, давайте построим класс - модель для вводимой информации (в нашем случае адреса). Зададим класс (рис. 10.12 ) пользуясь удобной функцией "автоматические свойства":

В режиме просмотра кода нашего файла Page.xaml мы сразу увидим оба наших объекта (ShippingAddress" и "BillingAddress"), первый будет служить для вставки адресата доставки, а второй – адресата выставления счета (в данном случае мы просто заполним строки "пустой" информацией). Затем привяжем объекты – адреса к нашим элементам управления на странице (рис. 10.13). Сделаем мы это, используя свойство "DataContext", задавая каждому контролу свою модель (1-му- адрес доставки, 2-му – адрес счета):

Последним шагом будет добавление выражения {Binding} (привязка) в нашем AddressUserControl.xaml файле, что обеспечит двустороннюю связь между свойствами текста в TextBox и созданной нами моделью информации – адреса, закрепленной нами в качестве контроллера (рис. 10.14 ):

При нажатии F5 для запуска приложения мы увидим, что они связаны (рис. 10.15 ):

Поскольку мы задали двустороннюю связь (используя "Mode=TwoWay"), то изменения, вносимые пользователями, будут без специального кода вноситься в модель. Например, мы захотели поменять исходный адрес на адрес Диснейленда:

Устанавливаем breakpoint (рис. 10.16) на обработчик "Click" кнопки "Save" (затем на неё нажмём) и видим, как с изменением содержимого TextBox меняется и наша модель "_shippingAddress":

Потом можно также реализовать обработчик событий SaveBtn_Click, чтобы фиксировать модели так, как мы хотим, при этом пальцем не притрагиваясь к UI. Это четкое разделение модели и представления, представленное WPF и поддерживаемое Silverlight, позволяет и в дальнейшей работе изменять UI адрес – модуля без внесения каких–либо изменений в сам код. Также это упрощает тестовый прогон работоспособности программы.

Краткие итоги

WPF и Silverlight позволяют легко проводить инкапсуляцию функций UI в элементах управления, и поддерживаемая ими механика пользовательского управления только способствует этому. Привязка вкупе с пользовательским элементом управления создают границу между моделью/представлением, что позволяет написать рациональный код при работе с информацией.