Шаг 2. Рефакторинг кода разметки указателя цвета

После добавления вызова OverrideMetadata понадобится просто подключить правильный стиль. Этот стиль должен быть помещен в словарь ресурсов по имени generic.xaml, который следует сохранить в папке Themes проекта. Таким образом, этот стиль будет распознан как стиль по умолчанию для элемента управления. Для добавления файла generic.xaml выполните следующее:

1. Щелкните правой кнопкой мыши на проекте библиотеки классов в окне Solution Explorer и выберите в контекстном меню пункт Add -> New Folder. Назовите новую папку Themes.

2. Щелкните правой кнопкой мыши на папке Themes и выберите в контекстном меню пункт Add -> New Item.

3. В диалоговом окне Add New Item выберите вариант XML file template, введите имя generic.xaml и щелкните на кнопке Add.

Часто библиотека пользовательских элементов управления содержит несколько таких элементов. Чтобы держать их стили отдельно для облегчения редактирования, файл generic.xaml часто использует слияние словарей ресурсов. В следующей разметке показано содержимое файла generic.xaml, который извлекает ресурсы из ресурсного словаря AdressCustomControl.xaml, который необходимо создать в той же папке Themes.

<ResourceDictionary xmlns=http://schemas.microsoft.com/winfx/200 6/xaml/presentation xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="/themes/AdressCustomControl.xaml"/> </ResourceDictionary.MergedDictionaries> </ResourceDictionary>

Стиль пользовательского элемента управления должен использовать атрибут TargetType для автоматического присоединения себя к типу. Ниже приведена базовая структура разметки, которая находится в файле AdressCustomControl.xaml:

<ResourceDictionary xmlns=http://schemas.microsoft.com/winfx/200 6/xaml/presentation xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml xmlns:local="clr-namespace:Example"> <Style TargetType="{x:Type local:AdressCustomControl}"> <- Стиль CustomControl -> </Style> </ResourceDictionary>

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

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

1. При создании выражений привязки, которые связываются со свойствами родительского класса элемента управления, нельзя использовать свойство ElementName. Вместо него нужно применять свойство RelativeSource для указания того, что необходимо привязаться к родительскому элементу управления. Если все, что необходимо — это однонаправленная привязка, обычно можно использовать облегченное расширение разметки TemplateBinding вместо полноценного Binding.

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

3. Не именуйте элемент в шаблоне элемента управления, если только не хотите присоединить обработчик событий для программного взаимодействия с ним. При необходимости именования элемента называйте его в стиле PART_ИмяЭлемента.

Принимая во внимание перечисленные соображения, можно создать следующий шаблон для нашей адресной формы.

<Style TargetType="{x:Type local:AdressCustomControl}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type local:AdressCustomControl}"> <Border BorderBrush="Black"  BorderThickness="1" Margin="{TemplateBinding Padding}"> <Grid>     <Grid.RowDefinitions>         <RowDefinition Height="10" />         <RowDefinition Height="auto" />         <RowDefinition Height="auto" />         <RowDefinition Height="auto" />         <RowDefinition Height="auto" />         <RowDefinition Height="auto" />         <RowDefinition Height="10" />     </Grid.RowDefinitions>     <Grid.ColumnDefinitions>         <ColumnDefinition Width="10" />         <ColumnDefinition Width="auto" />         <ColumnDefinition Width="10" />         <ColumnDefinition Width="auto"/>         <ColumnDefinition Width="10" />     </Grid.ColumnDefinitions>

     <TextBlock Grid.Row="2" Grid.Column="1" Text="Location:"/>       <TextBox Grid.Row="2" Grid.Column="3"        Text ="{Binding Path=Location, RelativeSource={ RelativeSource TemplatedParent}}" />      <TextBlock Grid.Row="3" Grid.Column="1"         Text="Address1" />      <TextBox Grid.Row="3" Grid.Column="3"         Text="{Binding Path=Address1, RelativeSource={ RelativeSource TemplatedParent}}" />      <TextBox Grid.Row="4" Grid.Column="1"         Text="Address2"/>      <TextBox Grid.Row="4" Grid.Column="3"         Text="{Binding Path=Address2, RelativeSource={ RelativeSource TemplatedParent}}" />      <TextBlock Grid.Row="5" Grid.Column="1" Text="City, State, Zip " />      <TextBox Grid.Row="5" Grid.Column="3"         Text="{Binding Path=State, RelativeSource={ RelativeSource TemplatedParent}}" /> </Grid> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style>

Как видите, некоторые выражения привязки заменены расширением TemplateBinding. Другие по-прежнему используют расширение Binding, но имеют свойство RelativeSource, указывающее на родителя шаблона (пользовательский элемент управления). Хотя и TemplateBinding, и Binding с RelativeSource из TemplatedParent служат одной и той же цели — извлечению данных из свойств пользовательского элемента управления, все же облегченный TemplateBinding более предпочтителен. Однако он не будет работать, если нужна двунаправленная привязка (как в случае с адресом).