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

Вы можете настроить визуальную структуру элемента управления и визуальное поведение, создав шаблон элемента управления в платформе XAML. Элементы управления имеют множество свойств, таких как Задний план, Передний плани Семейство шрифтов, которые можно задать для указания различных аспектов внешнего вида элемента управления. Но изменения, которые можно внести, задав эти свойства, ограничены. Дополнительные настройки можно указать, создав шаблон с помощью класса ControlTemplate . Здесь мы покажем, как создать ControlTemplate для настройки внешнего вида контрола CheckBox.

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

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

По умолчанию элемент управления CheckBox размещает своё содержимое (строка или объект рядом с CheckBox ) справа от поля выбора, и флажок указывает, что пользователь выбрал CheckBox . Эти характеристики представляют визуальную структуру и визуальное поведение CheckBox.

Вот CheckBox, показанный в , и Unchecked состояниях, с помощью Checked.

Эти характеристики можно изменить, создав элемент ControlTemplate для CheckBox. Например, если вы хотите, чтобы содержимое флажка было ниже поля выбора, и вы хотите использовать X , чтобы указать, что пользователь выбрал флажок. Вы указываете эти характеристики в ControlTemplate элемента CheckBox.

Чтобы использовать пользовательский шаблон с элементом управления, присвойте ControlTemplate свойству Template элемента управления. Вот CheckBox с помощью ControlTemplate с именем CheckBoxTemplate1. Мы показываем язык разметки расширяемых приложений (XAML) для controlTemplate в следующем разделе.

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

Вот как этот CheckBox выглядит в состояниях Unchecked, Checkedи Indeterminate после применения шаблона.

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

При создании controlTemplate вы объединяете объекты FrameworkElement для создания единого элемента управления. Элемент ControlTemplate должен иметь только один элемент FrameworkElement в качестве корневого элемента. Корневой элемент обычно содержит другие объекты FrameworkElement . Комбинация объектов составляет визуальную структуру элемента управления.

Этот XAML создает шаблон управления () для флажка (CheckBox), в котором указано, что содержимое элемента управления расположено под полем выбора. Корневой элемент — это Граница. В примере указан путь для создания X, который указывает, что пользователь выбрал CheckBox, и создание эллипса, указывающего на неопределенное состояние. Обратите внимание, что прозрачность установлена ​​на 0 для пути и эллипса , чтобы они по умолчанию не отображались.

TemplateBinding — это специальная привязка, которая связывает значение свойства в шаблоне элемента управления со значением другого доступного свойства в шаблонном элементе управления. TemplateBinding можно использовать только в определении ControlTemplate в XAML. Дополнительные сведения см. в расширении разметки TemplateBinding .

<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>

Указание визуального поведения элемента управления

Визуальное поведение указывает внешний вид элемента управления, когда он находится в определенном состоянии. Элемент управления CheckBox имеет 3 состояния: Checked, Uncheckedи Indeterminate. Значение свойства IsChecked определяет состояние CheckBox, а его состояние определяет, что отображается в поле.

В этой таблице перечислены возможные значения IsChecked, соответствующие состояния CheckBoxи внешний вид CheckBox.

Вы указываете внешний вид элемента управления, если он находится в определенном состоянии с помощью объектов VisualState . VisualState содержит Setter или Storyboard, который изменяет внешний вид элементов в ControlTemplate. Когда элемент управления переходит в состояние, определенное свойством VisualState.Name, изменения в Setter или Storyboard применяются. Когда элемент управления выходит из состояния, изменения удаляются. Вы добавляете объекты VisualState в объектыVisualStateGroup. Вы добавляете объекты VisualStateGroup в свойство VisualStateManager.VisualStateGroups, присоединенное к корневому FrameworkElement в ControlTemplate.

В этом XAML показаны объекты VisualState для состояний Checked, Uncheckedи Indeterminate. В этом примере устанавливается присоединенное свойство VisualStateManager.VisualStateGroups в Border, которое является корневым элементомControlTemplate . Checked VisualState указывает, что Opacity для Path с именем CheckGlyph (который показан в предыдущем примере) равен 1. VisualStat e указывает, что непрозрачности Ellipse с именем равно 1. Unchecked VisualState не имеет сеттера или раскадровки , поэтому CheckBox возвращается к своему внешнему виду по умолчанию.

<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 переходит из состояния в состояние , а затем в состояние , а затем обратно в состояние . Ниже приведены переходы.

  Дополнительные сведения о создании визуальных состояний для элементов управления и, в частности, о том, как использовать класс Storyboard и типы анимаций, см. в разделе анимации с использованием Storyboard для визуальных состояний.

Легко работать с темами, используя инструменты.

Быстрый способ применить темы к элементам управления — щелкнуть правой кнопкой мыши элемент управления структуры документа Microsoft Visual Studio и выбрать изменить тему или изменить стиль (в зависимости от элемента управления, который вы щелкаете правой кнопкой мыши). Затем можно применить существующую тему, выбрав Применить тему или создать новую, выбрав Создать пустую тему.

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

При создании нового шаблона для элемента управления, помимо возможного изменения поведения элемента управления и внешнего вида элемента управления, вы также можете изменить способ представления элемента управления в платформы специальных возможностей. Приложение Windows поддерживает Microsoft UI Automation Framework для доступности. Все элементы управления по умолчанию и их шаблоны поддерживают распространенные типы и шаблоны элементов управления автоматизации пользовательского интерфейса, подходящие для назначения и функции элемента управления. Эти типы элементов управления и шаблоны интерпретируются клиентами UI Automation, такими как вспомогательные технологии, что позволяет обеспечить доступность элемента управления как часть более обширного доступного пользовательского интерфейса приложения.

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

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

Дополнительные сведения о шаблоне элемента управления по умолчанию

В разделах, которые документируют стили и шаблоны элементов управления XAML, отображаются фрагменты одного и того же начального XAML, который вы увидели бы, если использовали методы Редактирование темы или Редактирование стиля, объясненные ранее. Каждый раздел содержит имена визуальных состояний, используемых ресурсов темы и полный XAML для стиля, содержащего шаблон. Разделы могут быть полезными, если вы уже начали изменять шаблон и хотите увидеть, как выглядит исходный шаблон, или убедиться, что новый шаблон имеет все необходимые именованные визуальные состояния.

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

Для некоторых атрибутов в примерах XAML вы могли заметить ссылки на ресурсы, которые используют расширение разметки {ThemeResource}. Это метод, позволяющий одному шаблону элемента управления использовать ресурсы, которые могут быть разными значениями в зависимости от того, какая тема в настоящее время активна. Это особенно важно для кистей и цветов, так как основная цель темы заключается в том, чтобы пользователи могли выбирать, хотят ли они темной, светлой или высокой контрастности темы, примененной к системе в целом. Приложения, использующие систему ресурсов XAML, могут использовать набор ресурсов, подходящий для этой темы, чтобы выбор темы в пользовательском интерфейсе приложения отражает выбор системной темы пользователя.

Получите пример кода

• пример примера коллекции WinUI
• пример пользовательского элемента управления редактированием текста