#1,204 – Using a DataTrigger to Change Content in a ContentPresenter

April 6, 2017 4 Comments

You can set the ContentTemplate property of a ContentPresenter to a panel containing some content, using a DataTemplate.

This technique becomes even more useful when you have different types of content to display, depending on a particular state in your application. In the example below, we set up a Style for a ContentPresenter that sets default content for the ContentPresenter and then swaps in entirely different content when the JobDone property in the data context becomes true.

    <Window.Resources>
        <DataTemplate x:Key="DefaultContent">
            <StackPanel>
                <TextBlock Margin="10" Text="Some default content here.."/>
                <TextBlock Margin="10" Text="Maybe show progress for operation"/>
            </StackPanel>
        </DataTemplate>

        <DataTemplate x:Key="AllDoneContent">
            <StackPanel>
                <TextBlock Margin="10" Text="** This is the ALL DONE content..."
                           Foreground="Green"/>
                <TextBlock Margin="10" Text="Put anything you like here"/>
                <Button Margin="10" Content="Click Me" HorizontalAlignment="Left"/>
            </StackPanel>
        </DataTemplate>

        <Style x:Key="MyContentStyle" TargetType="ContentPresenter">
            <Setter Property="ContentTemplate" Value="{StaticResource DefaultContent}"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding JobDone}" Value="True">
                    <Setter Property="ContentTemplate" Value="{StaticResource AllDoneContent}"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
        
    </Window.Resources>
    
    <Grid Margin="10">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <ContentPresenter Grid.Row="0" Style="{StaticResource MyContentStyle}" Content="{Binding}"/>
        
        <Separator Grid.Row="1"/>

        <CheckBox Grid.Row="2" Margin="10" Content="Mark job done" IsChecked="{Binding JobDone}"/>
    </Grid>

Here’s how the application looks in the two states. Note that we can toggle between the two states using the CheckBox.

Advertisement

Filed under Triggers Tagged with , , , ,

#1,203 – Create a Reusable Group of Elements with a ContentPresenter

March 31, 2017 4 Comments

There are several ways to achieve reuse in WPF. You can create a reusable control by creating shared data and control templates for a single type of control. You can also create custom controls, providing custom code and layout.

One simple way to reuse a group of controls is by using a ContentPresenter with a reusable ContentTemplate.

In the example below, we have a small grid displaying a person’s name and address. To use this set of controls in multiple places in an application, we place them in a DataTemplate and then use a ContentPresenter wherever we want the set of controls to appear.

The DataTemplate is defined in the resources section for a window. The main body of the Window includes two instances of the set of controls. Note that we need to set the Content of each ContentPresenter to the bound data context of the window. Not shown here, but assumed, is that our Window is bound to an object having MyName and Address properties.

    <Window.Resources>
        <DataTemplate x:Key="MyGridContentTemplate">
            <Grid Margin="8">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>

                <TextBlock Text="Your name is:"/>
                <TextBlock Grid.Column="1" Margin="8,0,0,0"
                           FontWeight="Bold"
                           Text="{Binding MyName}"/>

                <TextBlock Grid.Row="1" Text="Your address is:"/>
                <TextBlock Grid.Row="1" Grid.Column="1" Margin="8,0,0,0"
                           FontWeight="Bold"
                           Text="{Binding Address}"/>
            </Grid>
        </DataTemplate>
    </Window.Resources>
    
    <Grid Margin="10">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <ContentPresenter Grid.Row="0" ContentTemplate="{StaticResource MyGridContentTemplate}" Content="{Binding}"/>
        
        <Separator Grid.Row="1"/>

        <ContentPresenter Grid.Row="2" ContentTemplate="{StaticResource MyGridContentTemplate}" Content="{Binding}"/>
    </Grid>

Here’s what the application looks like at run-time:

Filed under Controls Tagged with , , ,

#1,184 – Where Data Templates Are Used, part II

October 21, 2014 Leave a comment

A data template is typically set as the value of the ContentTemplate property of a ContentControl or the ItemTemplate property of an ItemsControl.

The ContentTemplate and ItemTemplate properties are typically used as follows:

  • The ContentTemplate is used as the ContentTemplate of a ContentPresenter, which is itself contained in the control’s control template
  • The ItemTemplate is used as the ContentTemplate for each item presented by an ItemsPresenter (e.g. used as ContentTemplate for a ListBoxItem).

Below is a fragment of the default control template for a Label. You can see that it contains a ContentPresenter that has its ContentTemplate set to the ContentTemplate of the parent control.

                    <ControlTemplate TargetType="{x:Type Label}">
                        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="True">
                            <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>

Filed under Controls Tagged with , , , ,