Шаблоны, визуальное и логическое дерево

Наряду со стилями Universal Windows Platform предоставляет еще оно средство для кастомизации элементов управления - шаблоны (control template). Но чтобы понять, что представляют шаблоны, вначале необходимо ознакомиться с такими понятиями как логическое дерево и визуальное дерево.

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

<Page
    x:Class="TemplateApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TemplateApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Button x:Name="someButton">Click Me</Button>
    </Grid>
</Page>

Здесь структуру визуальных элементов можно описать следующим образом:

Так, в элементе Page есть вложенный элемент Grid, в Gride - элемент Button, в кнопке в качестве содержимого установлен некоторый текст в виде объекта String. И все это находится во фрейме, который устанавливается в качестве содержимого в объекте Window. В итоге получается некое дерево элементов, которое является логическим. Логическое дерево образует модель доступа к дочерним элементам.

От него отличается визуальное дерево, которое для той же разметки XAML будет выглядеть следующим образом:

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

Visual Studio имеет встроенные средства для просмотра визуального дерева элементов. Для этого нам надо запустить проект в режиме отладки и в меню выбрать Debug -> Windows -> Live Visual Tree. После выбора этого пункта Visual Studio откроет окно со схемой визуального дерева, на котором мы можем увидеть, как устроен элемент:

Визуальное дерево элемента управления определяет шаблон элемента - своего рода визуальный скелет элемента управления. Например, для элемента Button упрощенно шаблон выглядит следующим образом:

<ControlTemplate TargetType="Button">
    <Grid x:Name="RootGrid" Background="{TemplateBinding Background}">
        <ContentPresenter x:Name="ContentPresenter"
                BorderBrush="{TemplateBinding BorderBrush}"
                BorderThickness="{TemplateBinding BorderThickness}"
                Content="{TemplateBinding Content}"
                ContentTransitions="{TemplateBinding ContentTransitions}"
                ContentTemplate="{TemplateBinding ContentTemplate}"
                Padding="{TemplateBinding Padding}"
                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                AutomationProperties.AccessibilityView="Raw"/>
    </Grid>
</ControlTemplate>

Полностью встроенный шаблон и стиль кнопки можно найти по ссылке https://msdn.microsoft.com/en-us/library/windows/apps/mt299109.aspx

И здесь мы можем увидеть, что сам шаблон задается с помощью элемента ControlTemplate. Атрибут TargetType="Button" как раз определяет, что данный шаблон применяется к элементу Button. А в самом элементе можно увидеть вложенность элемента ContentPresenter в Grid, которые и определяют визуальное дерево элемента Button.