UWP如何创建承载内容的用户控件？

Question

尝试实现一件非常琐碎的事情（或者至少是我期望的琐碎事情……）让我感到非常沮丧

我有一个自定义切换按钮的要求，我需要为此创建一个用户控件，该控件承载该切换按钮，并承载该用户控件中描述的内容。我制作了一个小型迷你应用程序来演示“需求”。

<local:MyUserControl1>
    <TextBlock>Just an example</TextBlock>
</local:MyUserControl1>

MyUserControl1如下所示：

<UserControl
    x:Class="App2.MyUserControl1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" Name="Bla" d:DesignHeight="300" d:DesignWidth="400">
    <UserControl.Resources>
        <Style TargetType="ToggleButton">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Grid>
                            <Ellipse Width="300" Height="300" Fill="Blue"/>
                            <ContentPresenter Content="{Binding ElementName=Bla, Path=MainContent}"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>

    <ToggleButton/>
</UserControl>

后面的代码：

    public static DependencyProperty MainContentProperty = DependencyProperty.Register(
        "MainContent",
        typeof(object),
        typeof(MyUserControl1),
        null);

    public object MainContent
    {
        get => GetValue(MainContentProperty);
        set => SetValue(MainContentProperty, value);
    }

当我运行应用程序时，将显示文本，但是样式/切换按钮将被忽略/未应用/等等。

视觉树确认我做错了事：

我已经查看了许多其他相关的SO问答，但是我仍然不知道如何以自己想要的方式进行这项工作。

Answer 1

您的代码应该可以工作，除了没有显示ContentPropertyAttribute所在位置的行。您可以确定[ContentProperty(Name = "MainContent")] public sealed partial class MyUserControl1 : UserControl ... 的内容属性已确定，看看是否有帮助。

UserControl.Resources

---

更新

下面有完整的代码，已通过Win 10 Pro 1803，内部版本17134，NETCore 6.2.2进行了测试。

请注意，您可以在ToggleButton.Template或外部资源中定义控件模板，以将其与“主” UI布局分开，或将其保留在<UserControl x:Class="SmallTests2018.UserControlWithContent" x:Name="Self" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <ToggleButton> <ToggleButton.Template> <ControlTemplate> <Grid> <Ellipse Width="300" Height="300" Fill="Blue"/> <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Content="{Binding MainContent, ElementName=Self, FallbackValue='{}{ content }'}" /> </Grid> </ControlTemplate> </ToggleButton.Template> </ToggleButton> </UserControl> 中，以减少XAML的行数。

UserControlWithContent.xaml

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Markup;

namespace SmallTests2018
{
    [ContentProperty(Name = "MainContent")]
    public sealed partial class UserControlWithContent : UserControl
    {
        public UserControlWithContent()
        {
            this.InitializeComponent();
        }

        public static DependencyProperty MainContentProperty =
            DependencyProperty.Register("MainContent", typeof(object), typeof(UserControlWithContent), null);

        public object MainContent
        {
            get => GetValue(MainContentProperty);
            set => SetValue(MainContentProperty, value);
        }
    }
}

UserControlWithContent.xaml.cs

<Page
    x:Class="SmallTests2018.UserControlWithContentPage"
    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}">

    <Viewbox>
        <local:UserControlWithContent>
            <TextBlock FontSize="32" Foreground="Yellow">Just an example</TextBlock>
        </local:UserControlWithContent>
    </Viewbox>
</Page>

UserControlWithContentPage.xaml

{{1}}

页面XAML设计器屏幕截图