xaml controltemplate element disappear after adding contentcontrol

Question

I have the following control template that I apply on a Thumb class:

<ControlTemplate x:Key="StateShape">
    <StackPanel>
        <Image Name="tplImage" Source="/Images/state.png" Stretch="Uniform" Width="128" Height="128" HorizontalAlignment="Center"/>
        <TextBlock Name="tplTextBlock" Text="User stage" HorizontalAlignment="Center"/>
    </StackPanel>
</ControlTemplate>

I am trying to add markers for a resizer to this using the following:

<ControlTemplate x:Key="ResizeDecoratorTemplate" TargetType="{x:Type Control}">
    <Grid>
        <c:ResizeThumb Height="3" Cursor="SizeNS" Margin="0 -4 0 0"
                   VerticalAlignment="Top" HorizontalAlignment="Stretch"/>
        <c:ResizeThumb Width="3" Cursor="SizeWE" Margin="-4 0 0 0"
                   VerticalAlignment="Stretch" HorizontalAlignment="Left"/>
        <c:ResizeThumb Width="3" Cursor="SizeWE" Margin="0 0 -4 0"
                   VerticalAlignment="Stretch" HorizontalAlignment="Right"/>
        <c:ResizeThumb Height="3" Cursor="SizeNS" Margin="0 0 0 -4"
                   VerticalAlignment="Bottom" HorizontalAlignment="Stretch"/>
        <c:ResizeThumb Width="7" Height="7" Cursor="SizeNWSE" Margin="-6 -6 0 0"
                   VerticalAlignment="Top" HorizontalAlignment="Left"/>
        <c:ResizeThumb Width="7" Height="7" Cursor="SizeNESW" Margin="0 -6 -6 0"
                   VerticalAlignment="Top" HorizontalAlignment="Right"/>
        <c:ResizeThumb Width="7" Height="7" Cursor="SizeNESW" Margin="-6 0 0 -6"
                   VerticalAlignment="Bottom" HorizontalAlignment="Left"/>
        <c:ResizeThumb Width="7" Height="7" Cursor="SizeNWSE" Margin="0 0 -6 -6"
                   VerticalAlignment="Bottom" HorizontalAlignment="Right"/>
    </Grid>
</ControlTemplate>

This template I try to apply on the following way:

<ControlTemplate x:Key="StateShape">
    <ContentControl Width="128"
                Height="128"
                Template="{StaticResource ResizeDecoratorTemplate}">
        <StackPanel>
            <Image Name="tplImage" Source="/Images/state.png" Stretch="Uniform" Width="128" Height="128" HorizontalAlignment="Center"/>
            <TextBlock Name="tplTextBlock" Text="User stage" HorizontalAlignment="Center"/>
        </StackPanel>
    </ContentControl>
</ControlTemplate>

However as soon as I add the content control the image and textblock element disappears. The decoration for the resizer is showing up nicely.

It seems that the contentcontrol comes on top of the stackpanel that is inside the contentcontrol or simply doesn't display it.

I have no clue why this happens, can anyone give a pointer in the right direction?

Answer 1

It's because the Template overrides the whole content of your ContentControl . You have to place the content inside the ControlTemplate using ContentPresenter like this:

<ControlTemplate x:Key="ResizeDecoratorTemplate" 
                 TargetType="{x:Type ContentControl}">
  <Grid>
    <c:ResizeThumb Height="3" Cursor="SizeNS" Margin="0 -4 0 0"
               VerticalAlignment="Top" HorizontalAlignment="Stretch"/>
    <c:ResizeThumb Width="3" Cursor="SizeWE" Margin="-4 0 0 0"
               VerticalAlignment="Stretch" HorizontalAlignment="Left"/>
    <c:ResizeThumb Width="3" Cursor="SizeWE" Margin="0 0 -4 0"
               VerticalAlignment="Stretch" HorizontalAlignment="Right"/>
    <c:ResizeThumb Height="3" Cursor="SizeNS" Margin="0 0 0 -4"
               VerticalAlignment="Bottom" HorizontalAlignment="Stretch"/>
    <c:ResizeThumb Width="7" Height="7" Cursor="SizeNWSE" Margin="-6 -6 0 0"
               VerticalAlignment="Top" HorizontalAlignment="Left"/>
    <c:ResizeThumb Width="7" Height="7" Cursor="SizeNESW" Margin="0 -6 -6 0"
               VerticalAlignment="Top" HorizontalAlignment="Right"/>
    <c:ResizeThumb Width="7" Height="7" Cursor="SizeNESW" Margin="-6 0 0 -6"
               VerticalAlignment="Bottom" HorizontalAlignment="Left"/>
    <c:ResizeThumb Width="7" Height="7" Cursor="SizeNWSE" Margin="0 0 -6 -6"
               VerticalAlignment="Bottom" HorizontalAlignment="Right"/>
    <!-- we place the ContentPresenter here -->
    <ContentPresenter/>
  </Grid>
</ControlTemplate>

Also note that the TargetType of the ControlTemplate should be ContentControl (not just Control ).