Шаблон управления

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

Пример ControlTemplate будет

Создание кнопки

<Button Style="{StaticResource newTemplate}" 
        Background="Navy" 
        Foreground="White" 
        FontSize="14"
        Content="Button1"/>

ControlTemplate для кнопки

<Style TargetType="Button" x:Key="newTemplate"> 
      <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border x:Name="RootElement">
                <!--Create the SolidColorBrush for the Background 
                as an object elemment and give it a name so 
                it can be referred to elsewhere in the control template.-->
                    <Border.Background>
                        <SolidColorBrush x:Name="BorderBrush" Color="Black"/>
                    </Border.Background>
                    <!--Create a border that has a different color by adding smaller grid.
                    The background of this grid is specificied by the button's Background
                    property.-->
                    <Grid Margin="4" Background="{TemplateBinding Background}">
                    <!--Use a ContentPresenter to display the Content of
                    the Button.-->
                        <ContentPresenter
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                        Margin="4,5,4,4" />
                    </Grid>
                </Border>
            </ControlTemplate>      
        </Setter.Value>
    </Setter>
</Style>

Подробнее о ControlTemplate

Шаблоны данных

Шаблон данных аналогичен концепции шаблонов управления. Они предоставляют вам очень гибкое и мощное решение для замены внешнего вида элемента данных в элементе управления, таком как ListBox, ComboBox или ListView. Элементы управления WPF имеют встроенные функции для поддержки настройки представления данных.

Примером DataTemplate может быть

<!-- Without DataTemplate -->
<ListBox ItemsSource="{Binding}" /> 

<!-- With DataTemplate -->
<ListBox ItemsSource="{Binding}" BorderBrush="Transparent" 
         Grid.IsSharedSizeScope="True"
         HorizontalContentAlignment="Stretch">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid Margin="4">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" SharedSizeGroup="Key" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <TextBlock Text="{Binding Name}" FontWeight="Bold"  />
                <TextBox Grid.Column="1" Text="{Binding Value }" />
            </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Подробнее о DataTemplates и триггерах

Шаблоны предметов

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

Примером шаблона элемента будет

<ListBox Margin="10" Name="lvDataBinding">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <WrapPanel>
                <TextBlock Text="Name: " />
                <TextBlock Text="{Binding Name}" FontWeight="Bold" />
                <TextBlock Text=", " />
                <TextBlock Text="Age: " />
                <TextBlock Text="{Binding Age}" FontWeight="Bold" />
                <TextBlock Text=" (" />
                <TextBlock Text="{Binding Mail}" TextDecorations="Underline" Foreground="Blue" Cursor="Hand" />
                <TextBlock Text=")" />
            </WrapPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Когда вы устанавливаете ItemTemplate для ItemsControl, пользовательский интерфейс создается следующим образом (с использованием ListBox в качестве примера):

1. Во время создания контента ItemsPanel инициирует запрос к ItemContainerGenerator, чтобы создать контейнер для каждого элемента данных. Для ListBox контейнером является ListBoxItem. Генератор обращается к ItemsControl для подготовки контейнера.

2. Часть подготовки включает в себя копирование ItemTemplate ListBox в ContentTemplate ListBoxItem.

3. Как и все типы ContentControl, ControlTemplate ListBoxItem содержит ContentPresenter. Когда шаблон применяется, он создает ContentPresenter, ContentTemplate которого привязан к ContentTemplate ListBoxItem.

4. Наконец, ContentPresenter применяет этот ContentTemplate к себе, и это создает пользовательский интерфейс.

Если у вас определено несколько DataTemplate и вы хотите предоставить логику для программного выбора и применения DataTemplate, используйте свойство ItemTemplateSelector.

ItemsControl обеспечивает большую гибкость для визуальной настройки и предоставляет множество свойств стилей и шаблонов. Используйте свойство ItemContainerStyle или свойство ItemContainerStyleSelector, чтобы установить стиль, влияющий на внешний вид элементов, содержащих элементы данных. Например, для ListBox созданными контейнерами являются элементы управления ListBoxItem; для ComboBox это элементы управления ComboBoxItem. Чтобы изменить макет элементов, используйте свойство ItemsPanel. Если вы используете группировку в своем элементе управления, вы можете использовать свойство GroupStyle или GroupStyleSelector.

Для получения дополнительной информации см. Обзор шаблонов данных.

1. ControlTemplaes определяет «внешний вид» и «поведение» элемента управления. По умолчанию кнопка имеет прямоугольную форму. По умолчанию ListBox имеет белый фон. Все они определены ControlTemple элемента управления.

2. DataTemplae помогает элементу управления размещением данных, которые он хранит. Если список пользователей добавлен в список и вы хотите, чтобы UserName отображался перед UserPassword, вы определите его внутри DataTemples. DataTemples назначается свойству ItemTemplate (4) ListBox.

3. HierarchalDataTemplte такой же, как DataTemples, за исключением того, что имеет дело с иерархическим источником данных. Обычно он используется с TreeView Control.