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

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:

#1,202 – Using a Color Animation to Draw Emphasis to Something

There are times when you might want to draw a user’s attention to some user interface element, for example when some event causes the contents of the element to change. A ColorAnimation on the Background of the element is a nice way to do that.

Below, we have a TextBlock that binds to a string property and a Button that changes that property’s value. We set up a style for the TextBlock containing an EventTrigger that fires whenever the target of the binding changes, i.e. the trigger will fire whenever the value of the Text property changes.

In the trigger, we have a Storyboard continuing two animations that run consecutively. The first fades in the background color and the second fades back to the original transparent value. The first animation is shorter, so that we have a longer fade out.

Here’s the XAML fragement:

<Window.Resources>
    <ResourceDictionary>
        <Style x:Key="LookAtMe" TargetType="TextBlock">
            <Setter Property="Background" Value="Transparent"/>
            <Style.Triggers>
                <EventTrigger RoutedEvent="Binding.TargetUpdated">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation Storyboard.TargetProperty="(TextBlock.Background).(SolidColorBrush.Color)" 
                                                From="Transparent" To="Magenta" FillBehavior="Stop" 
                                                BeginTime="0:0:0" Duration="0:0:0.3"/>
                                <ColorAnimation Storyboard.TargetProperty="(TextBlock.Background).(SolidColorBrush.Color)" 
                                                From="Magenta" To="Transparent" 
                                                BeginTime="0:0:0.3" Duration="0:0:1"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </ResourceDictionary>
</Window.Resources>
    
    <StackPanel Margin="10">
        <TextBlock Text="{Binding SomeText, NotifyOnTargetUpdated=True}" 
                   Style="{StaticResource LookAtMe}"/>
        <Button Content="Do Something" 
                Margin="0,10,0,0" HorizontalAlignment="Center" 
                Click="btnDoSomething_Click"/>
    </StackPanel>

In the code-behind, we have the SomeText property and code to change this property whenever the button is pressed.

private string _someText = "Original text";
public string SomeText
{
    get { return _someText; }
    set
    {
        if (value != _someText)
        {
            _someText = value;
            RaisePropChanged("SomeText");
        }
    }
}

private int nextNum = 1;
private void btnDoSomething_Click(object sender, RoutedEventArgs e)
{
    SomeText = string.Format("Change to {0}", nextNum++);
}

public event PropertyChangedEventHandler PropertyChanged = delegate { };

private void RaisePropChanged(string propname)
{
    PropertyChanged(this, new PropertyChangedEventArgs(propname));
}

When you run this code, the background of the TextBlock flashes magenta whenever you click on the button.

#1,201 – How to Share Star Sized Column Sizes

You can use the SharedSizeGroup attribute to share column sizes across different grids. You can’t normally share sizes of star-sized columns across multiple grids, however, since star sizing works only in the context of the current grid.

Below is an example of how to get a star sized column to be the same size as a star sized column in a different grid. In the example, we have two grids. In the first, we have two auto-sized TextBlocks and then a star-sized TextBox that takes up the remaining space. In the second grid, we have just a TextBlock and a TextBox, but we want the TextBox to be the same size as the one in the first grid. Using SharedSizeGroup on the TextBox columns won’t work, since the columns would then get auto-sized.

The solution is to set up a SharedSizeGroup on every column except for the TextBox columns and to add a dummy third column in the second grid. The TextBox columns will then each independently use star sizing and end up the same size.

    <StackPanel Margin="15" Grid.IsSharedSizeScope="True">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" SharedSizeGroup="A"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto" SharedSizeGroup="B"/>
            </Grid.ColumnDefinitions>

            <TextBlock Grid.Column="0" Text="Col 1"/>
            <TextBox Grid.Column="1" />
            <TextBlock Grid.Column="2" Text="3rd column here"/>
        </Grid>

        <Separator Margin="0,20"/>

        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" SharedSizeGroup="A"/>
                <ColumnDefinition />
                <ColumnDefinition SharedSizeGroup="B"/>
            </Grid.ColumnDefinitions>

            <TextBlock Grid.Column="0" Text="1"/>
            <TextBox Grid.Column="1"/>
        </Grid>
    </StackPanel>

1201