Шаблоны данных
В то время как шаблон элемента управления позволяет задавать внешний вид элемента управления, шаблон данных позволяет задавать внешний вид содержимого элемента управления. Шаблоны данных часто используются для улучшения способа отображения данных, связанных с элементом управления. На следующем рисунке показан внешний вид по умолчанию элемента управления ListBox, который связан с коллекцией объектов Task, где каждый объект имеет имя, описание и приоритет.
Внешний вид по умолчанию ― это вид, который ожидается от ListBox. Однако внешний вид по умолчанию каждого объекта коллекции содержит только имя. Чтобы отобразить имя, описание и приоритет объекта коллекции, внешний вид по умолчанию элементов связанного списка элемента управления ListBoxдолжен быть изменен с помощью DataTemplate. В следующем XAML-коде определяется такой шаблон DataTemplate, который применяется к каждой задаче с помощью атрибута ItemTemplate.
XAML
Копировать
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="SDKSample.DataTemplateWindow"
Title="With a Data Template">
...
<Window.Resources>
<!-- Data Template (applied to each bound task item in the task collection) -->
<DataTemplate x:Key="myTaskTemplate">
<Border Name="border" BorderBrush="DarkSlateBlue" BorderThickness="2"
CornerRadius="2" Padding="5" Margin="5">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Padding="0,0,5,0" Text="Task Name:"/>
<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Path=TaskName}"/>
<TextBlock Grid.Row="1" Grid.Column="0" Padding="0,0,5,0" Text="Description:"/>
<TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Path=Description}"/>
<TextBlock Grid.Row="2" Grid.Column="0" Padding="0,0,5,0" Text="Priority:"/>
<TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding Path=Priority}"/>
</Grid>
</Border>
</DataTemplate>
</Window.Resources>
...
<!-- UI -->
<DockPanel>
<!-- Title -->
<Label DockPanel.Dock="Top" FontSize="18" Margin="5" Content="My Task List:"/>
<!-- Data template is specified by the ItemTemplate attribute -->
<ListBox
ItemsSource="{Binding}"
ItemTemplate="{StaticResource myTaskTemplate}"
HorizontalContentAlignment="Stretch"
IsSynchronizedWithCurrentItem="True"
Margin="5,0,5,5" />
</DockPanel>
...
</Window>
На следующем рисунке показан результат этого кода.
Обратите внимание, что элемент управления ListBox сохраняет свое поведение и общий внешний вид; был изменен только внешний вид содержимого, отображаемого в списке.
Дополнительные сведения см. в разделе Общие сведения о шаблонах данных. Ознакомительный пример см. в файле Introduction to Data Templating Sample.
Стили
Стили позволяют разработчикам и конструкторам выработать стандарт внешнего вида для продукта. WPF предоставляет строгую модель стилей, основой которой служит элемент Style. В следующем примере создается стиль, который устанавливает цвет фона Orange для каждой кнопки Button в окне.
XAML
Копировать
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="SDKSample.StyleWindow"
Title="Styles">
...
<!-- Style that will be applied to all buttons -->
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="Orange" />
<Setter Property="BorderBrush" Value="Crimson" />
<Setter Property="FontSize" Value="20" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="Margin" Value="5" />
</Style>
...
<!-- This button will have the style applied to it -->
<Button>Click Me!</Button>
<!-- This label will not have the style applied to it -->
<Label>Don't Click Me!</Label>
<!-- This button will have the style applied to it -->
<Button>Click Me!</Button>
...
</Window>
Поскольку этот стиль задается для всех элементов управления Button, он будет автоматически применен ко всем кнопкам в окне, как показано на следующем рисунке.
Дополнительные сведения см. в разделе Стилизация и использование шаблонов. Ознакомительный пример см. в файле Introduction to Styling and Templating Sample.