Вопрос о структуре нового элемента управления, расширяющего существующий стиль

Question

Я пытаюсь использовать стиль для повторного использования. Я видел статью следующим образом.

https://charlesk.tistory.com/66

В статье показано, как расширить элемент управления для использования существующего стиля.

Я стал Любопытно, как будет выглядеть структура стиля при создании нового элемента управления путем расширения существующего стиля.

Например, в статье определен HeaderedContentControl, который имеет ключ "Style_HeaderedContentControl", как показано ниже.

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

И создайте новый элемент управления, расширив вышеприведенный стиль, как показано ниже.

<HeaderedContentControl Header="재생" Grid.Column="1"
                        Style="{DynamicResource Style_HeaderedContentControl}">
    <StackPanel>
        <Button Content="시작"/>
        <Button Content="정지"/>
    </StackPanel>
</HeaderedContentControl>

Здесь мне интересно, какой должна быть структура 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"/>
            <StackPanel>
                <Button Content="시작"/>
                <Button Content="정지"/>
            </StackPanel>
        <ContentPresenter />
    </StackPanel>
</Border>

или

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

или

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

Как правильно ответить? и не могли бы вы мне сказать, почему структура должна быть?

Спасибо за чтение.

Answer 1

Когда вы делаете это ...

<HeaderedContentControl Header="재생" Grid.Column="1"
                    Style="{DynamicResource Style_HeaderedContentControl}">
   <StackPanel>
        <Button Content="시작"/>
        <Button Content="정지"/>
   </StackPanel>
</HeaderedContentControl>

.. вы устанавливаете content элемента управления в качестве этой StackPanel. Стиль, однако, устанавливает шаблон , который определяет общий вид элемента управления и указывает, где содержимое должно go с этой строкой:

<ContentPresenter />

Итак, что вы получаете в конец - все в Style_HeaderedContentControl, но с заменой этого <ContentPresenter /> на предоставленный вами контент.

Более простой пример - что происходит, когда вы объявляете ContentControl с некоторым контентом, все, что вы видите это предоставленный вами контент:

<ContentControl HorizontalAlignment="Center" VerticalAlignment="Center">
    <TextBlock Text="This is the content" Background="CornflowerBlue" />
</ContentControl>

Который показывает это:

Теперь давайте объявим шаблон для него, и установите его с помощью Template="{StaticResource MyTemplate}":

<ControlTemplate x:Key="MyTemplate"  TargetType="{x:Type ContentControl}">
    <GroupBox Header="This is the template">
        <ContentPresenter />
    </GroupBox>
</ControlTemplate>

Теперь вы полностью изменили внешний вид элемента управления, но ваш контент появляется там, где вы указали с помощью <ContentPresenter />: