XAML 可重用内容视图.NET MAUI

c9x0cxw0  于 2023-02-17  发布在  .NET
关注(0)|答案(1)|浏览(227)

简单地说,我有一个contentview,例如:

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

yiytaume1#

如果您想创建一个可重用的ContentView .NET MAUI,您可以使用Content Presenter创建Control Templates,然后在您想要的页面中重用它。
您可以参考以下详细步骤了解如何使用它。

**1.**创建自定义控件:CustomControl.xaml继承自ContentView,具有如下custom绑定属性:
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>

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

相关问题