可重用的内容视图 .NET MAUI

Question

简而言之，我有一个内容视图，例如；

<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="myapp.customstacklayout">
    <StackLayout>


        <StackLayout>
            <StackLayout x:Name="header">

                <!-- some title things here, such as a header label etc-->

            </StackLayout>
            <StackLayout x:Name="content">

                <!--Contents should be added here when reused-->


            </StackLayout>
            <StackLayout x:Name="footer">

                <!-- some footer things here, such as a summary label etc-->

            </StackLayout>
        </StackLayout>

        <!--Not here-->

    </StackLayout>
</ContentView>

我想在 ContentPage 中重用它，例如；

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:mycontrols="clr-namespace:myapp"
             x:Class="myapp.mainpage">

    <StackLayout>
        <mycontrols:customstacklayout>

            <Button Text="TestButton"/>
            <Entry Text="TestEntry"/>
            <Label Text="TestLabel"/>
                .... and etc..

        </mycontrols:customstacklayout>
    </StackLayout>
</ContentPage>

要创建这样一个可重用的项目，我认为，在 xaml 中，必须有一些内容让 contentview 指出应该将子项添加到哪个 IView 项目中

有什么想法或一段代码吗？

提前致谢。

安德

编辑：我更改了我的 contentview xaml 以使用 ControlTemplate。在我想要显示添加的子项的位置添加了资源和 contentPresenter。但还是看不到孩子们

<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="myapp.customstacklayout">
    <ContentView.Resources x:Key="template">
    <ControlTemplate>
    <StackLayout>


        <StackLayout>
            <StackLayout x:Name="header">

                <!-- some title things here, such as a header label etc-->

            </StackLayout>
            <StackLayout x:Name="content">

                <!--Contents should be added here when reused-->
                    <ContentPresenter/>


            </StackLayout>
            <StackLayout x:Name="footer">

                <!-- some footer things here, such as a summary label etc-->

            </StackLayout>
        </StackLayout>

        <!--Not here-->

    </StackLayout>
    </ControlTemplate>
</ContentView.Resources>

</ContentView>

Answer 1

好吧，如果您想创建一个可重用的ContentView.NET MAUI，您可以Control Templates使用它进行创建Content Presenter，然后在您想要的页面中重用它。

您可以参考下面的详细步骤来了解如何使用它。

1.创建一个自定义控件：CustomControl.xaml，继承ContentView自custom BindableProperty，如下所示：

XAML：

<ContentView.ControlTemplate>

    <ControlTemplate>

        <Frame>

            <VerticalStackLayout>
                <Label Text="{TemplateBinding Title}"/>

                <ContentPresenter/>
            </VerticalStackLayout>
        </Frame>
    </ControlTemplate>
    
    
</ContentView.ControlTemplate>

隐藏代码：

public partial class CustomControl : ContentView 
{
    public static readonly BindableProperty TitleProperty =
  BindableProperty.Create(nameof(Title), typeof(string), typeof(CustomControl) );

    public CustomControl()
    {
        InitializeComponent();
    }

    public string Title
    {

        get => GetValue(TitleProperty) as string;
        set => SetValue(TitleProperty, value);

    }
}

2.您可以多次重复使用它，如下所示MainPage.xaml：

<?xml version="1.0" encoding="utf-8" ?> 
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:controls="clr-namespace:MauiAppCustomDemo.Controls"
             x:Class="MauiAppCustomDemo.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">


            <controls:CustomControl Title="Hello World">
                <VerticalStackLayout>
                    <Label Text="Label 1"/>
                    <Label Text="Label 2"/>

                </VerticalStackLayout>
                
            </controls:CustomControl>

            <controls:CustomControl Title="Hello again">

                <HorizontalStackLayout>
                    <Label Text="Label 3"/>
                    <Label Text="Label 4"/>
                </HorizontalStackLayout>
            </controls:CustomControl>

        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

微软官方参考链接：https://learn.microsoft.com/en-us/dotnet/maui/fundamentals/controltemplate ?view=net-maui-7.0