模板控制中的ContentPresenter无法正常工作

Question

I have created a templated control. All I did to the default style was add a content presenter. I also referenced the Generic.xaml in the App.xaml file.

<Style TargetType="local2:TestingControl" >
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local2:TestingControl">
                <Border
                    Height="200px"
                    Background="Green">

                    <ContentPresenter />
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>


public sealed class TestingControl : Control
{
    public TestingControl()
    {
        this.DefaultStyleKey = typeof(TestingControl);
    }

}

I haven't made any changes to the .cs code of the control. I tried setting the content, but was told that the control does not allow direct content.

 <StackPanel>
        <local1:TestingControl >
            Testing
        </local1:TestingControl>

    </StackPanel>

What should i be doing to make use of the content presenter?

The same approach works perfectly if i try to use a user control.

Answer 1

To handle XAML content in a custom Templated Control you have to either derive your control from the ContentControl or stay inherited from a Control , implement a custom ContentProperty and bind a ContentPresenter to it.

Going with the ContentControl is a bit easier, and here's the code you'd probably end up with.

Style definition in Themes/Generic.xaml

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:local="using:SmallTests2018">

    <Style TargetType="local:TemplatedControlWithContent" >
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:TemplatedControlWithContent">
                    <Border
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                        <Viewbox>
                            <Grid>
                                <Viewbox HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                                    <Ellipse Width="10" Height="10" Fill="#80808080" />
                                </Viewbox>
                                <ContentPresenter />
                            </Grid>
                        </Viewbox>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

• I prefer to keep Border bound to the templated control properties, so a developer using it has more control over the looks.
• An ellipse here is an example of some extra custom content.

TemplatedControlWithContent.cs

using System;
using Windows.UI.Xaml.Controls;

namespace SmallTests2018
{
    public sealed class TemplatedControlWithContent : ContentControl
    {
        public TemplatedControlWithContent()
        {
            DefaultStyleKey = typeof(TemplatedControlWithContent);
        }
    }
}

• note that the only change here is that control is derived from ContentControl .

A test page TemplatedControlWithContentPage.xaml

<Page
    x:Class="SmallTests2018.TemplatedControlWithContentPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SmallTests2018"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <local:TemplatedControlWithContent>
        <TextBlock>Hello World!</TextBlock>
    </local:TemplatedControlWithContent>
</Page>

How it looks in the page XAML designer

Answer 2

While the answer posted by @DK. was perfect, I was trying to use a Control instead of a ContentControl. The reason why is because i'm simply messing around trying to familiarize myself with UWP.

His answer was extremely helpful in getting me to solve the issue for a control inheriting from Control.

TestingControl.cs

[ContentProperty(Name = "Content")]
public sealed class TestingControl : Control
{
    public TestingControl()
    {
        this.DefaultStyleKey = typeof(TestingControl);
    }

    public object Content
    {
        get { return (string)GetValue(ContentProperty); }
        set { SetValue(ContentProperty, value); }
    }

    public static readonly DependencyProperty ContentProperty =
        DependencyProperty.Register("Content", typeof(string), typeof(TestingControl), new PropertyMetadata(string.Empty));

}

Style

<Style TargetType="local2:TestingControl" >
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local2:TestingControl">
                <Border
                    Height="200px"
                    Background="Green"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}">

                    <ContentPresenter Content="{TemplateBinding Content}"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Usage

    <StackPanel>
        <local1:TestingControl >                
                Testing                
        </local1:TestingControl>
    </StackPanel>