Question about the structure of the new control extending the existing style - wpf

Question

I trying to use the Style to reuse.
I saw the article as follows.
https://charlesk.tistory.com/66
The article shows how to extend the control to use the existing style.
I became curious about how the style structure to be when a new control is created by extending the existing style.
For example, in the article defined the HeaderedContentControl that has "Style_HeaderedContentControl" key as below.
<Style x:Key="Style_HeaderedContentControl" TargetType="{x:Type HeaderedContentControl}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type HeaderedContentControl}">
<Border Background="WhiteSmoke"
BorderBrush="DarkGray"
BorderThickness="1"
Margin="5">
<StackPanel Background="WhiteSmoke"
Margin="5">
<ContentPresenter ContentSource="Header"
TextBlock.FontWeight="Bold"
Margin="0,0,0,5"/>
<ContentPresenter />
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And create a new control by extending the above style as below.
<HeaderedContentControl Header="재생" Grid.Column="1"
Style="{DynamicResource Style_HeaderedContentControl}">
<StackPanel>
<Button Content="시작"/>
<Button Content="정지"/>
</StackPanel>
</HeaderedContentControl>
Here, I wonder how the HeaderedContentControl structure to be.
The candidates I think are:
<Border Background="WhiteSmoke"
BorderBrush="DarkGray"
BorderThickness="1"
Margin="5">
<StackPanel Background="WhiteSmoke"
Margin="5">
<ContentPresenter ContentSource="Header"
TextBlock.FontWeight="Bold"
Margin="0,0,0,5"/>
<StackPanel>
<Button Content="시작"/>
<Button Content="정지"/>
</StackPanel>
<ContentPresenter />
</StackPanel>
</Border>
or
<Border Background="WhiteSmoke"
BorderBrush="DarkGray"
BorderThickness="1"
Margin="5">
<StackPanel Background="WhiteSmoke"
Margin="5">
<ContentPresenter ContentSource="Header"
TextBlock.FontWeight="Bold"
Margin="0,0,0,5"/>
<ContentPresenter />
<StackPanel>
<Button Content="시작"/>
<Button Content="정지"/>
</StackPanel>
</StackPanel>
</Border>
or
<Border Background="WhiteSmoke"
BorderBrush="DarkGray"
BorderThickness="1"
Margin="5">
<StackPanel Background="WhiteSmoke"
Margin="5">
<ContentPresenter ContentSource="Header"
TextBlock.FontWeight="Bold"
Margin="0,0,0,5"/>
<ContentPresenter />
</StackPanel>
<StackPanel>
<Button Content="시작"/>
<Button Content="정지"/>
</StackPanel>
</Border>
How is the right answer? and could you tell me why the structure to be?
Thanks for reading.

Answer 1

When you do this...
<HeaderedContentControl Header="재생" Grid.Column="1"
Style="{DynamicResource Style_HeaderedContentControl}">
<StackPanel>
<Button Content="시작"/>
<Button Content="정지"/>
</StackPanel>
</HeaderedContentControl>
.. you are setting the content of the control to be that StackPanel. The style, however, sets the template, which dictates the overall look of the control and specifies where the content should go with this line:
<ContentPresenter />
So what you get in the end is everything in Style_HeaderedContentControl, but with that <ContentPresenter /> replaced with the content that you provided.
A more simple example is what happens when you declare a ContentControl with some content, all you see is the content you've provided:
<ContentControl HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock Text="This is the content" Background="CornflowerBlue" />
</ContentControl>
Which shows this:
Now let's declare a template for it, and set it with Template="{StaticResource MyTemplate}":
<ControlTemplate x:Key="MyTemplate" TargetType="{x:Type ContentControl}">
<GroupBox Header="This is the template">
<ContentPresenter />
</GroupBox>
</ControlTemplate>
Now you've completely changed the whole look of the control, but your content appears where you've specified with <ContentPresenter />: