ContentControl in ControlTemplate does not show Border nor Background - wpf

Question

I have a Button with a custom control template and a Grid as sibling. The Button should use the TriangleUpPath when the Grid is visible, otherwise it should use the TriangleDownPath. So far so good.
But I want that the Path has a Border around. So I thought I could just set the BorderBrush of the ContentControl, but this does not work. I don't see the Border. Same goes for the Background of the ContentControl.
Here is my minimal not working example:
<Button x:Name="_hideButton"
Grid.Row="0"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Click="ToggleResultsVisibility">
<Button.Style>
<Style TargetType="Button" >
<Style.Resources>
<Path x:Key="TriangleUpPath"
Data="M 0,5 L 7,0 L 14,5"
Margin="3,3,0,0"
Stroke="Black"
StrokeThickness="1"/>
<Path x:Key="TriangleDownPath"
Data="M 0,0 L 7,5 L 14,0"
Margin="3,3,0,0"
Stroke="Black"
StrokeThickness="1"/>
</Style.Resources>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<ContentControl Margin="0,5,5,0"
Width="20"
Height="11"
BorderBrush="Magenta"
BorderThickness="1"
Background="Cyan">
<ContentControl.Style>
<Style TargetType="ContentControl">
<Setter Property="Background"
Value="HotPink"></Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding Visibility, ElementName=_resultsGrid}"
Value="Collapsed">
<Setter Property="Content"
Value="{StaticResource TriangleDownPath}"/>
</DataTrigger>
<DataTrigger Binding="{Binding Visibility, ElementName=_resultsGrid}"
Value="Visible">
<Setter Property="Content"
Value="{StaticResource TriangleUpPath}"/>
</DataTrigger>
</Style.Triggers>
</Style>
</ContentControl.Style>
</ContentControl>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>
<Grid x:Name="_resultsGrid"/>
As you can see, I even tried to set the Background in the Style (to HotPink) to no avail.
It helps, when I have a Border around the ContentControl.
But the question is: why do the Background-Property and the BorderBrush-Property of the ContentControl have no influence?

Answer 1

The default style for ContentControl does not contain a way of rendering the Border and Background properties, it just has a ContentPresenter.
You need to add a custom template for the content control yourself, containing the additional elements you need:
<ContentControl.Template>
<ControlTemplate TargetType="ContentControl">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" >
<ContentPresenter
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Cursor="{TemplateBinding Cursor}"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
</ControlTemplate>
</ContentControl.Template>

Answer 2

It's because BorderThickness/Brush aren't some magic properties that make the border magically appear out of nowhere.
For making borders, you should be using a <Border> element somewhere.
By default, the Button has some Border inside. That's why setting BorderBrush/BorderThickness on a Button does something. Specifically, the default control template of a Button contains a Border as one of its topmost elements, and that Border's definition looks similar to:
// the DEFAULT Button's control template
<ControlTemplate>
...
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
.... >
...here goes other things like textblock/content..
</Border>
...
</ControlTemplate>
so, as you see, there's a border and it has its settings bound to the owning control, so bound to the Button. The TemplateBinding binds BBrush of Border to BBrush of the Button that owns it.
Now, as you have completely rewritten/overridden the Button's control template, it now does not contain any Border, so there is nothing that would draw the border.
Try:
<Border BorderBrush=... BorderThickness=...>
<ContentControl ....
and it should be like you wanted.
Afterthought: If I understood you wrong and if you meant your setting the BorderBrush/Thickness on the ContentControl inside the buttons' template that it didn't add border around your paths, then there's a surprise.
The properties are available on the CC only because they are commonly used, they came from base Control class. But the ContentControl does not use them at all. They are ignored. ContentControl does not draw any borders, texts, etc. ContentControl shows its content, and the content is just a Path which draws itself only. So, either add a Border around the ContentControl as above, or change your resources and wrap each Path into a Border and use that as a content resource.
<Style.Resources>
<Border x:Key="TriangleUpPath"
BorderBrush=... BorderThickness=...
<Path Data="M 0,5 L 7,0 L 14,5"
.... />
</Border>
<Border x:Key="TriangleDownPath"
BorderBrush=... BorderThickness=...
<Path Data="M 0,0 L 7,5 L 14,0"
.... />
</Border>
</Style.Resources>