CODEWITHSUNDEEP
c#wpfxamltemplatescontentcontrol
Gerard van den Bosch
Gerard van den Bosch

Reputation: 509

xaml controltemplate element disappear after adding contentcontrol

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?

Upvotes: 0

Views: 455

Answers (1)

King King
King King

Reputation: 63327

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).

Upvotes: 2

Related Questions