Шаблоны элементов управленияControl templates

Вы можете настроить визуальную структуру и визуальное поведение элемента управления, создав шаблон элемента управления в среде XAML.You can customize a control's visual structure and visual behavior by creating a control template in the XAML framework. У элементов управления много свойств, таких как Background, Foreground и FontFamily, которые можно задать, чтобы указать различные аспекты вида элемента управления.Controls have many properties, such as Background, Foreground, and FontFamily, that you can set to specify different aspects of the control's appearance. Однако настройка этих свойств позволяет вносить ограниченные изменения.But the changes that you can make by setting these properties are limited. Вы можете указать дополнительные настройки, создав шаблон с помощью класса ControlTemplate.You can specify additional customizations by creating a template using the ControlTemplate class. Здесь мы покажем, как создать ControlTemplate для настройки вида элемента управления CheckBox.Here, we show you how to create a ControlTemplate to customize the appearance of a CheckBox control.

Важные API : класс ControlTemplate и свойство Control.TemplateImportant APIs : ControlTemplate class, Control.Template property

Пример пользовательского шаблона элемента управленияCustom control template example

По умолчанию элемент управления CheckBox помещает свое содержимое (строку или объект рядом с CheckBox ) справа от поля выбора, а флажок указывает, что пользователь выбрал CheckBox.By default, a CheckBox control puts its content (the string or object next to the CheckBox ) to the right of the selection box, and a check mark indicates that a user selected the CheckBox. Эти характеристики представляют визуальную структуру и визуальное поведение CheckBox.These characteristics represent the visual structure and visual behavior of the CheckBox.

Здесь CheckBox использует шаблон по умолчанию ControlTemplate, показанный в состояниях Unchecked, Checked и Indeterminate.Here's a CheckBox using the default ControlTemplate shown in the Unchecked, Checked, and Indeterminate states.

Шаблон по умолчанию CheckBox

Эти характеристики можно изменить, создав ControlTemplate для CheckBox.You can change these characteristics by creating a ControlTemplate for the CheckBox. Например, если содержимое поля флажка должно быть ниже поля выбора, а для указания того, что пользователь установил флажок, следует использовать X.For example, if you want the content of the check box to be below the selection box, and you want to use an X to indicate that a user selected the check box. Эти характеристики указываются в ControlTemplate элемента управления CheckBox.You specify these characteristics in the ControlTemplate of the CheckBox.

Чтобы использовать пользовательский шаблон с элементом управления, ControlTemplate назначается свойству Template элемента управления.To use a custom template with a control, assign the ControlTemplate to the Template property of the control. Вот CheckBox, использующий ControlTemplate под названием CheckBoxTemplate1.Here's a CheckBox using a ControlTemplate called CheckBoxTemplate1. Мы покажем код XAML (Extensible Application Markup Language) для ControlTemplate в следующем разделе.We show the Extensible Application Markup Language (XAML) for the ControlTemplate in the next section.

<CheckBox Content="CheckBox" Template="{StaticResource CheckBoxTemplate1}" IsThreeState="True" Margin="20"/>

Вот как этот класс CheckBox выглядит в состояниях Unchecked, Checked и Indeterminate после применения нашего шаблона.Here's how this CheckBox looks in the Unchecked, Checked, and Indeterminate states after we apply our template.

Пользовательский шаблон CheckBox

Указание визуальной структуры элемента управленияSpecify the visual structure of a control

При создании ControlTemplate мы объединяем объекты FrameworkElement, чтобы создать единый элемент управления.When you create a ControlTemplate, you combine FrameworkElement objects to build a single control. У ControlTemplate должен быть только один FrameworkElement в качестве корневого элемента.A ControlTemplate must have only one FrameworkElement as its root element. Корневой элемент обычно содержит другие объекты FrameworkElement.The root element usually contains other FrameworkElement objects. Такое сочетание объектов формирует визуальную структуру элемента управления.The combination of objects makes up the control's visual structure.

Данный код XAML создает ControlTemplate для CheckBox, указывающий, что содержимое элемента управления находится под полем выбора.This XAML creates a ControlTemplate for a CheckBox that specifies that the content of the control is below the selection box. Корневой элемент — Border.The root element is a Border. Этот пример предлагает Path создать X , указывающий на то, что пользователь выбрал CheckBox , и Ellipse, указывающий на неопределенное состояние.The example specifies a Path to create an X that indicates that a user selected the CheckBox , and an Ellipse that indicates an indeterminate state. Обратите внимание, что свойству Opacity задано значение 0 в Path и Ellipse , так что по умолчанию последние не выводятся.Note that the Opacity is set to 0 on the Path and the Ellipse so that by default, neither appear.

TemplateBinding связывает значение свойства в шаблоне элемента управления и значение какого-либо другого предоставленного свойства элемента управления-шаблона.A TemplateBinding is a special binding that links the value of a property in a control template to the value of some other exposed property on the templated control. TemplateBinding может использоваться только в пределах определения ControlTemplate в XAML.TemplateBinding can only be used within a ControlTemplate definition in XAML. См. подробнее в разделе Расширение разметки TemplateBinding.See TemplateBinding markup extension for more info.

Примечание

Начиная с Windows 10, версия 1809 ( SDK 17763), вы можете использовать расширения разметки x:Bind вместе с TemplateBinding.Starting with Windows 10, version 1809 ( SDK 17763), you can use x:Bind markup extensions in places you use TemplateBinding. См. подробнее в разделе Расширение разметки TemplateBinding.See TemplateBinding markup extension for more info.

<ControlTemplate x:Key="CheckBoxTemplate1" TargetType="CheckBox">
    <Border BorderBrush="{TemplateBinding BorderBrush}"
            BorderThickness="{TemplateBinding BorderThickness}"
            Background="{TemplateBinding Background}">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="25"/>
            </Grid.RowDefinitions>
            <Rectangle x:Name="NormalRectangle" Fill="Transparent" Height="20" Width="20"
                       Stroke="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
                       StrokeThickness="{ThemeResource CheckBoxBorderThemeThickness}"
                       UseLayoutRounding="False"/>
            <!-- Create an X to indicate that the CheckBox is selected. -->
            <Path x:Name="CheckGlyph"
                  Data="M103,240 L111,240 119,248 127,240 135,240 123,252 135,264 127,264 119,257 111,264 103,264 114,252 z"
                  Fill="{ThemeResource CheckBoxForegroundThemeBrush}"
                  FlowDirection="LeftToRight"
                  Height="14" Width="16" Opacity="0" Stretch="Fill"/>
            <Ellipse x:Name="IndeterminateGlyph"
                     Fill="{ThemeResource CheckBoxForegroundThemeBrush}"
                     Height="8" Width="8" Opacity="0" UseLayoutRounding="False" />
            <ContentPresenter x:Name="ContentPresenter"
                              ContentTemplate="{TemplateBinding ContentTemplate}"
                              Content="{TemplateBinding Content}"
                              Margin="{TemplateBinding Padding}" Grid.Row="1"
                              HorizontalAlignment="Center"
                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
        </Grid>
    </Border>
</ControlTemplate>

Указание визуального поведения элемента управленияSpecify the visual behavior of a control

Визуальное поведение описывает внешний вид элемента управления в определенных состояниях.A visual behavior specifies the appearance of a control when it is in a certain state. У элемента управления CheckBox есть три состояния выставления: Checked, Unchecked и Indeterminate.The CheckBox control has 3 check states: Checked, Unchecked, and Indeterminate. Значение свойства IsChecked определяет состояние CheckBox , а состояние последнего определяет, что появляется в поле.The value of the IsChecked property determines the state of the CheckBox , and its state determines what appears in the box.

В приведенной ниже таблице перечислены возможные значения IsChecked, соответствующие состояния CheckBox и представление CheckBox.This table lists the possible values of IsChecked, the corresponding states of the CheckBox, and the appearance of the CheckBox.

Значение IsCheckedIsChecked value Состояние CheckBoxCheckBox state Вид CheckBoxCheckBox appearance
truetrue Checked Содержит X.Contains an "X".
falsefalse Unchecked Пусто.Empty.
nullnull Indeterminate Содержит кружок.Contains a circle.

Для указания представления элемента управления, когда он находится в определенном состоянии, используйте объекты VisualState.You specify the appearance of a control when it is in a certain state by using VisualState objects. Объект VisualState содержит класс Setter или Storyboard, меняющий представление элементов в классе ControlTemplate.A VisualState contains a Setter or Storyboard that changes the appearance of the elements in the ControlTemplate. Когда элемент управления переходит в состояние, указанное в свойстве VisualState.Name, применяются изменения свойств в Setter или Storyboard.When the control enters the state that the VisualState.Name property specifies, the property changes in the Setter or Storyboard are applied. Когда элемент управления выходит из этого состояния, изменения удаляются.When the control exits the state, the changes are removed. Мы добавляем объекты VisualState к объектам VisualStateGroup.You add VisualState objects to VisualStateGroup objects. Мы добавляем объекты VisualStateGroup к подключенному свойству VisualStateManager.VisualStateGroups, установленному на корневом элементе FrameworkElement шаблона ControlTemplate.You add VisualStateGroup objects to the VisualStateManager.VisualStateGroups attached property, which you set on the root FrameworkElement of the ControlTemplate.

Приведенный XAML-код показывает объекты VisualState для состояний Checked, Unchecked и Indeterminate.This XAML shows the VisualState objects for the Checked, Unchecked, and Indeterminate states. Данный пример задает присоединенное свойство VisualStateManager.VisualStateGroups для Border, который является корневым элементом ControlTemplate.The example sets the VisualStateManager.VisualStateGroups attached property on the Border, which is the root element of the ControlTemplate. VisualState Checked указывает, что значение Opacity для Path с именем CheckGlyph (см. предыдущий пример) равно 1.The Checked VisualState specifies that the Opacity of the Path named CheckGlyph (which we show in the previous example) is 1. VisualState Indeterminate указывает, что значение Opacity для Ellipse с именем IndeterminateGlyph равно 1.The Indeterminate VisualState specifies that the Opacity of the Ellipse named IndeterminateGlyph is 1. VisualState Unchecked нет имеет Setter или Storyboard, поэтому CheckBox возвращается к своему внешнему виду по умолчанию.The Unchecked VisualState has no Setter or Storyboard, so the CheckBox returns to its default appearance.

<ControlTemplate x:Key="CheckBoxTemplate1" TargetType="CheckBox">
    <Border BorderBrush="{TemplateBinding BorderBrush}"
            BorderThickness="{TemplateBinding BorderThickness}"
            Background="{TemplateBinding Background}">

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CheckStates">
                <VisualState x:Name="Checked">
                    <VisualState.Setters>
                        <Setter Target="CheckGlyph.Opacity" Value="1"/>
                    </VisualState.Setters>
                    <!-- This Storyboard is equivalent to the Setter. -->
                    <!--<Storyboard>
                        <DoubleAnimation Duration="0" To="1"
                         Storyboard.TargetName="CheckGlyph" Storyboard.TargetProperty="Opacity"/>
                    </Storyboard>-->
                </VisualState>
                <VisualState x:Name="Unchecked"/>
                <VisualState x:Name="Indeterminate">
                    <VisualState.Setters>
                        <Setter Target="IndeterminateGlyph.Opacity" Value="1"/>
                    </VisualState.Setters>
                    <!-- This Storyboard is equivalent to the Setter. -->
                    <!--<Storyboard>
                        <DoubleAnimation Duration="0" To="1"
                         Storyboard.TargetName="IndeterminateGlyph" Storyboard.TargetProperty="Opacity"/>
                    </Storyboard>-->
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="25"/>
            </Grid.RowDefinitions>
            <Rectangle x:Name="NormalRectangle" Fill="Transparent" Height="20" Width="20"
                       Stroke="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
                       StrokeThickness="{ThemeResource CheckBoxBorderThemeThickness}"
                       UseLayoutRounding="False"/>
            <!-- Create an X to indicate that the CheckBox is selected. -->
            <Path x:Name="CheckGlyph"
                  Data="M103,240 L111,240 119,248 127,240 135,240 123,252 135,264 127,264 119,257 111,264 103,264 114,252 z"
                  Fill="{ThemeResource CheckBoxForegroundThemeBrush}"
                  FlowDirection="LeftToRight"
                  Height="14" Width="16" Opacity="0" Stretch="Fill"/>
            <Ellipse x:Name="IndeterminateGlyph"
                     Fill="{ThemeResource CheckBoxForegroundThemeBrush}"
                     Height="8" Width="8" Opacity="0" UseLayoutRounding="False" />
            <ContentPresenter x:Name="ContentPresenter"
                              ContentTemplate="{TemplateBinding ContentTemplate}"
                              Content="{TemplateBinding Content}"
                              Margin="{TemplateBinding Padding}" Grid.Row="1"
                              HorizontalAlignment="Center"
                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
        </Grid>
    </Border>
</ControlTemplate>

Чтобы лучше понять, как работают объекты VisualState, давайте рассмотрим, что происходит, когда CheckBox переходит из состояния Unchecked в состояние Checked, затем в состояние Indeterminate и обратно в состояние Unchecked.To better understand how VisualState objects work, consider what happens when the CheckBox goes from the Unchecked state to the Checked state, then to the Indeterminate state, and then back to the Unchecked state. Вот эти переходы.Here are the transitions.

Смена состоянияState transition Что происходитWhat happens Представление CheckBox по завершении смены состоянияCheckBox appearance when the transition completes
С Unchecked на Checked.From Unchecked to Checked. Применяется значение Setter VisualState Checked, поэтому значение Opacity для CheckGlyph равно 1.The Setter value of the Checked VisualState is applied, so the Opacity of CheckGlyph is 1. Отображается X.An X is displayed.
С Checked на Indeterminate.From Checked to Indeterminate. Применяется значение Setter VisualState Indeterminate, поэтому значение Opacity для IndeterminateGlyph равно 1.The Setter value of the Indeterminate VisualState is applied, so the Opacity of IndeterminateGlyph is 1. Значение Setter VisualState Checked удаляется, поэтому значение Opacity для CheckGlyph равно 0.The Setter value of the Checked VisualState is removed, so the Opacity of CheckGlyph is 0. Отображается круг.A circle is displayed.
С Indeterminate на Unchecked.From Indeterminate to Unchecked. Значение Setter VisualState Indeterminate удаляется, поэтому значение Opacity для IndeterminateGlyph равно 0.The Setter value of the Indeterminate VisualState is removed, so the Opacity of IndeterminateGlyph is 0. Не отображается ничего.Nothing is displayed.

Подробнее о том, как создавать визуальные состояния элементов управления, в частности о том, как использовать класс Storyboard и типы анимации см. в разделе Раскадрованные анимации для визуальных состояний.For more info about how to create visual states for controls, and in particular how to use the Storyboard class and the animation types, see Storyboarded animations for visual states.

Используйте средства для упрощения работы с темамиUse tools to work with themes easily

Чтобы быстро применить темы к своим элементам управления, щелкните элемент управления правой кнопкой мыши в структуре документа Microsoft Visual Studio XAML и выберите команду Изменить тему или Изменить стиль (в зависимости от элемента управления).A fast way to apply themes to your controls is to right-click on a control on the Microsoft Visual Studio Document Outline and select Edit Theme or Edit Style (depending on the control you are right-clicking on). Затем можно применить существующую тему, выбрав команду Применить ресурс , или определить новую командой Создать пустой.You can then apply an existing theme by selecting Apply Resource or define a new one by selecting Create Empty.

Элементы управления и специальные возможностиControls and accessibility

При создании нового шаблона для элемента управления помимо возможного изменения его поведения и внешнего вида вы, вероятно, также измените то, как элемент управления заявляет о себе платформам специальных возможностей.When you create a new template for a control, in addition to possibly changing the control's behavior and visual appearance, you might also be changing how the control represents itself to accessibility frameworks. Приложения для Windows поддерживают инфраструктуру автоматизации пользовательского интерфейса Майкрософт для включения специальных возможностей.The Windows app supports the Microsoft UI Automation framework for accessibility. Все элементы управления по умолчанию и их шаблоны поддерживают общие типы и схемы элементов управления автоматизацией пользовательского интерфейса, соответствующие назначению и функции элемента управления.All of the default controls and their templates have support for common UI Automation control types and patterns that are appropriate for the control's purpose and function. Эти типы и схемы элементов управления интерпретируются такими клиентами автоматизации пользовательского интерфейса, как клиенты специальных возможностей. И это обеспечивает доступ к элементу управления в составе более масштабного доступного пользовательского интерфейса приложения.These control types and patterns are interpreted by UI Automation clients such as assistive technologies, and this enables a control to be accessible as a part of a larger accessible app UI.

Чтобы выделить базовую логику элементов управления, а также соответствовать ряду архитектурных требований автоматизации пользовательского интерфейса, классы элементов управления включают поддержку специальных возможностей в отдельном классе, называемом "одноранговый элемент автоматизации".To separate the basic control logic and also to satisfy some of the architectural requirements of UI Automation, control classes include their accessibility support in a separate class, an automation peer. Одноранговые элементы автоматизации иногда взаимодействуют с шаблонами элементов управления, так как эти элементы автоматизации ожидают наличия в шаблонах определенных именованных частей. Благодаря этому доступны такие функции, как включение специальных возможностей при вызове действий кнопок.The automation peers sometimes have interactions with the control templates because the peers expect certain named parts to exist in the templates, so that functionality such as enabling assistive technologies to invoke actions of buttons is possible.

Когда вы создаете совершенно новый пользовательский элемент управления, порой бывает необходимо создать помимо этого новый одноранговый элемент автоматизации.When you create a completely new custom control, you sometimes also will want to create a new automation peer to go along with it. Дополнительную информацию см. в разделе Настраиваемые одноранговые элементы автоматизации.For more info, see Custom automation peers.

Дополнительные сведения о стандартном шаблоне элемента управленияLearn more about a control's default template

Разделы, описывающие стили и шаблоны для элементов управления XAML, показывают выдержки из аналогичных разделов краткого руководства по XAML, которые вы бы увидели, если бы использовали команды Изменить тему или Изменить стиль , описанные ранее.The topics that document the styles and templates for XAML controls show you excerpts of the same starting XAML you'd see if you used the Edit Theme or Edit Style techniques explained previously. Каждый раздел перечисляет имена визуальных состояний, использованные ресурсы тем, а также полный код XAML для стиля, содержащего шаблон.Each topic lists the names of the visual states, the theme resources used, and the full XAML for the style that contains the template. Разделы могут стать полезным руководством, если вы уже начали изменение шаблона и хотите посмотреть, как выглядит первоначальный шаблон, либо хотите проверить, имеет ли новый шаблон все необходимые именованные визуальные состояния.The topics can be useful guidance if you've already started modifying a template and want to see what the original template looked like, or to verify that your new template has all of the required named visual states.

Ресурсы тем в шаблонах элементов управленияTheme resources in control templates

В некоторых атрибутах в примерах кода XAML вы могли заметить ссылки на ресурсы, которые используют расширение разметки {ThemeResource}.For some of the attributes in the XAML examples, you may have noticed resource references that use the {ThemeResource} markup extension. Данная технология позволяет одному шаблону элемента управления использовать разнообразные ресурсы в зависимости от того, какая из тем активна на текущий момент.This is a technique that enables a single control template to use resources that can be different values depending on which theme is currently active. Это особенно важно для кистей и цветов, поскольку основная цель тем — предоставить пользователям возможность выбора темной или светлой темы либо темы "Высокая контрастность" в применении к системе в целом.This is particularly important for brushes and colors, because the main purpose of the themes is to enable users to choose whether they want a dark, light, or high contrast theme applied to the system overall. Приложения, которые используют систему на базе ресурсов XAML, могут использовать набор ресурсов, соответствующий определенной теме. Выбор темы в пользовательском интерфейсе приложения будет отражать выбор пользователем темы для всей системы в целом.Apps that use the XAML resource system can use a resource set that's appropriate for that theme, so that the theme choices in an app's UI are reflective of the user's systemwide theme choice.

Получение примера кодаGet the sample code