ControlTemplate & DataTemplate

개념

Templates:
Templates in WPF are used to define the structure and appearance of controls. They provide a way to customize the look and feel of a control without changing its functionality. There are two main types of templates in WPF:
a. ControlTemplate: A ControlTemplate allows you to redefine the entire visual appearance of a control, such as a Button, ListBox, or ComboBox. It is a blueprint for rendering a control, specifying its visual tree (consisting of elements like panels, borders, and other controls).

b. DataTemplate: A DataTemplate is used to define the appearance of data-bound controls like ListBox, ListView, or ItemsControl. It specifies how the data should be displayed, by defining the visual tree for each data item. DataTemplates are often used when you have a collection of items with complex data structures, and you want to display them in a customized way.


To create a flippable ListBox where each album item is flippable when clicked, you can combine ControlTemplate and DataTemplate. You'll use the DataTemplate for the ListBox items and a ControlTemplate for a custom control that flips when clicked.

First, create a custom control that flips when clicked. This can be achieved using a ControlTemplate for a Button or ToggleButton:

<Window.Resources>
    <ControlTemplate x:Key="FlippableButtonTemplate" TargetType="{x:Type ToggleButton}">
        <Grid>
            <Grid.Resources>
                <Style TargetType="Border">
                    <Setter Property="Width" Value="150" />
                    <Setter Property="Height" Value="200" />
                    <Setter Property="CornerRadius" Value="5" />
                    <Setter Property="Background" Value="White" />
                </Style>
            </Grid.Resources>
            <Border x:Name="Front" Visibility="Visible">
                <ContentPresenter Content="{TemplateBinding Content}" />
            </Border>
            <Border x:Name="Back" Visibility="Collapsed">
                <ContentPresenter Content="{TemplateBinding Tag}" />
            </Border>
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="IsChecked" Value="True">
                <Setter TargetName="Front" Property="Visibility" Value="Collapsed" />
                <Setter TargetName="Back" Property="Visibility" Value="Visible" />
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
</Window.Resources>

This control uses a ToggleButton, and when it's checked, the front side becomes collapsed, and the back side becomes visible.

Next, create the DataTemplate for the Album class, including the FlippableButton control:

<Window.Resources>
    <DataTemplate x:Key="AlbumTemplate">
        <ToggleButton Template="{StaticResource FlippableButtonTemplate}">
            <ToggleButton.Content>
                <!-- Front side of the FlippableButton -->
                <StackPanel Orientation="Horizontal">
                    <Image Source="{Binding CoverImagePath}" Width="50" Height="50" Margin="0,0,10,0"/>
                    <StackPanel>
                        <TextBlock Text="{Binding Title}" FontWeight="Bold" />
                        <TextBlock Text="{Binding Artist}" FontStyle="Italic" />
                    </StackPanel>
                </StackPanel>
            </ToggleButton.Content>
            <ToggleButton.Tag>
                <!-- Back side of the FlippableButton -->
                <TextBlock Text="{Binding Description}" TextWrapping="Wrap" />
            </ToggleButton.Tag>
        </ToggleButton>
    </DataTemplate>
</Window.Resources>

<ListBox ItemTemplate="{StaticResource AlbumTemplate}" ItemsSource="{Binding Albums}" />

In this DataTemplate, we use the FlippableButton control created in the previous step. The front side displays the album cover, title, and artist, while the back side shows the album description.

Now, when you click an album item in the ListBox, it will flip to display the album description on the back side. To flip it back, simply click the item again.

Remember to add the "Description" property to the Album class:

public class Album
{
    public string Title { get; set; }
    public string Artist { get; set; }
    public string CoverImagePath { get; set; }
    public string Description { get; set; }
}

By combining ControlTemplate and DataTemplate, you can create complex and interactive user interfaces in WPF.

In Summary,

 

• Style: Sets properties and behaviors for a control, without changing its visual structure.
• ControlTemplate: Defines the entire visual structure of a control, enabling you to create a custom appearance while maintaining its functionality.
• DataTemplate : used to customize the display of data objects.
• Both templates are important in WPF applications to create a consistent and customized user interface.