Шаг 3. Инкапсуляция разметки и логики в элемент управления UserControl

На самом деле, нам наверняка понадобится наличие домашнего адреса (Home Address), рабочего адреса (Work Address) и адреса выставления счета (Billing Address), и неплохо было бы иметь комбинацию клавиш для каждого из адресов. Это можно реализовать двумя способами:

• продублировать xaml на стартовой странице нашего приложения и его фоновый код для каждого экземпляра (home, work, billing);

• перестроить (инкапсулировать) ранее созданную разметку и код в независимый элемент управления (отдельный UserControl).

Разумный подход - инкапсулировать стандартный xaml и поддерживающий код в элемент управления путем создания пользовательского элемента управления (UserControl).

Добавим в проект Silverlight User Control. Назовем новый элемент управления AddressUserControl.xaml.

К проекту будут добавлены два файла

• AddressUserControl.xaml

• AddressUserControl.xaml.cs

AddressUserControl.xaml выглядит очень знакомо при открытии.

<UserControl x:Class="ControlsExample.AddressUserControl"     xmlns="http://schemas.microsoft.com/client/2007"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"     Width="400" Height="300">     <Grid x:Name="LayoutRoot" Background="White"> …     </Grid> </UserControl>

Реализация элемента управления

Вернемся к MainPage.xaml и вынесем xaml разметку начиная с Border во вновь созданный UserControl, заменив табличную сетку, созданную там Visual Studio 2010.

Обратите внимание на то, что ваш элемент управления находится в правильном месте, но немного узок. Удалите атрибуты ширины (Width) и высоты (Height) и внешнего пользовательского элемента управления,

<UserControl x:Class="ControlsExample.AddressUserControl"     xmlns="http://schemas.microsoft.com/client/2007"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"     > <!--no specific size-->     <Border BorderBrush="Black"  BorderThickness="1" Margin="15">  …

Как только вы удалите их, элемент управления будет выровнен по центру, а также расширен для того, чтобы вместить в себя элементы управления (рис. 7.2).

  Рисунок 7.2. Автоматическое изменение размера пользовательского элемента управления

Добавление кода

Все последующие шаги выполняются в AddressUserControl.xaml.cs: Добавляем переменную экземпляра Address так же, как и в MainPage.xaml.cs. В конструкторе выделяем память для объекта Address и настраиваем обработчик события Loaded. В реализации OnLoaded добавляем новый обработчик для события KeyDown табличной сетки.

public partial class AddressUserControl : UserControl {     private Address theAddress = null;     public AddressUserControl()     {         InitializeComponent();         theAddress = new Address();         Loaded += new RoutedEventHandler(OnLoaded);     }     void OnLoaded(object sender, RoutedEventArgs e)     {         AddressGrid.KeyDown += new KeyEventHandler(AddressGrid_KeyDown);     }

Реализация AddressGrid.KeyDown была вырезана из MainPage.xaml.cs

void AddressGrid_KeyDown(object sender, KeyEventArgs e)     {         if (e.Key == Key.M && Keyboard.Modifiers == ModifierKeys.Control)         {             theAddress.Location = "Microsoft";             theAddress.Address1 = "One Microsoft Way";             theAddress.Address2 = "Building 10";             theAddress.City = "Redmond, WA 98052";         }         this.DataContext = theAddress;     }    }