Decorating UserControl WPF

Question

I want to decorate some controls in groups like:

<UserControl x:Class="Infrastructure.UI.ItemsGroup" ... >
    <Border BorderBrush="Black" BorderThickness="1" CornerRadius="5" Background="Red">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="25" />
            </Grid.RowDefinitions>
            <ContentPresenter Grid.Row="0" />
            <TextBlock x:Name="ctrlGroupText" Grid.Row="1" HorizontalAlignment="Center" />
        </Grid>
    </Border>
</UserControl>

And use it in other XAML-files like:

<Grid Grid.Column="0">
    <UI:ItemsGroup GroupText="Hello World">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Button>1111</Button>
            <Button>1111</Button>
        </Grid>
    </UI:ItemsGroup>
</Grid>

But it doesn't work. What did I wrong? :) Thanks

Answer 1

You need to edit the Template for the UserControl instead of adding the Border as the Child

<UserControl x:Class="Infrastructure.UI.ItemsGroup" ... >
    <UserControl.Template>
        <ControlTemplate TargetType="{x:Type UserControl}">
            <Border BorderBrush="Black" BorderThickness="1" CornerRadius="5" Background="Red">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="25" />
                    </Grid.RowDefinitions>
                    <ContentPresenter Grid.Row="0" />
                    <TextBlock x:Name="ctrlGroupText" Grid.Row="1" HorizontalAlignment="Center" />
                </Grid>
            </Border>
        </ControlTemplate>
    </UserControl.Template>
</UserControl>

Update

To set the Text for the TextBlock to GroupText you can use a Binding

<TextBlock x:Name="ctrlGroupText"
           Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:ItemsGroup}},
                          Path=GroupText}"
           Grid.Row="1"
           HorizontalAlignment="Center" />