如何在元素列表之前向模板添加元素? [英] How can I add an element to a template before a list of elements?

问题描述

我创建了一个框架，里面有一个 StackLayout.我想做的是在将项目添加到框架内部之前，然后我希望出现标题标签.这是我目前所拥有的:

I have created a frame with a StackLayout inside of it. What I would like to do is before the items are added to the inside of the frame then I would like Heading label to appear. Here is what I have so far:

public class ContentFrame : Frame
{
    StackLayout contentStack { get; } = new StackLayout()
    {
        Spacing = 0,
        Padding = new Thickness(0),
        Orientation = StackOrientation.Vertical
    };
    public IList<View> Contents { get => contentStack.Children; }
    public static readonly BindableProperty HeadingProperty =
            BindableProperty.Create(nameof(Heading), typeof(string),
            typeof(ContentFrame), null, propertyChanged: OnHeadingChanged);

    public string Heading
    {
        get => (Heading)GetValue(HeadingProperty);
        set => SetValue(HeadingProperty, value);
    }

    public ContentFrame()
    {
        Content = contentStack;
        HasShadow = false;
        SetDynamicResource(BackgroundColorProperty, "ContentFrameBackgroundColor");
        SetDynamicResource(BorderColorProperty, "ContentFrameBorderColor");
        SetDynamicResource(CornerRadiusProperty, "ContentFrameCornerRadius");
    }
}

我想要的是能够像这样使用它:

What I would like is to be able to use it like this:

 <t:ContentFrame Heading="The heading here">
    <Label Text="ABC" />
    <Label Text="ABC" />
    <Label Text="GHI" />
 </t:ContentFrame>

并让输出看起来像这样:

and have the output look like this:

 ********************
 * The heading here *
 * ABC              *
 * DEF              *
 * GHI              *
 ********************

有谁知道我如何修改 ContentFrame 以便将标题作为元素添加到包含元素之前?

Does anyone know how I can modify ContentFrame so that the heading is added as an element before the containing elements?

这是我根据 Shubham 的建议尝试的当前代码:

Here's the current code I am trying based on Shubham's suggestion:

[Xamarin.Forms.ContentProperty("Contents")]
public class ContentFrame : CustomFrame
{
    StackLayout contentStack { get; } = new StackLayout()
    {
        Spacing = 0,
        Padding = new Thickness(0),
        Orientation = StackOrientation.Vertical
    };
    public IList<View> Contents { get => contentStack.Children; }

    public ContentFrame()
    {
        var heading = new Label();
        if (!string.IsNullOrEmpty(Heading))
        {

            heading.Text = Heading;
            contentStack.Children.Insert(0, heading);
        }
        Content = contentStack;
        HasShadow = false;
        SetDynamicResource(BackgroundColorProperty, "ContentFrameBackgroundColor");
        SetDynamicResource(BorderColorProperty, "ContentFrameBorderColor");
        SetDynamicResource(CornerRadiusProperty, "ContentFrameCornerRadius");
        SetDynamicResource(ElevationProperty, "ContentFrameElevation");
        SetDynamicResource(MarginProperty, "ContentFrameMargin");
        SetDynamicResource(PaddingProperty, "ContentFrameBorderPadding");
    }

    public static readonly BindableProperty HeadingProperty =
        BindableProperty.Create(nameof(Heading), typeof(string), typeof(ContentFrame), null);


    public string Heading
    {
        get { return (string)GetValue(HeadingProperty); }
        set { SetValue(HeadingProperty, value); }
    }
}

推荐答案

根据你的描述和代码，你想创建带有bindableproperty的自定义框架，我修改你的代码，请拿下面的代码.不要忘记实现 bindableproperty propertyChanged 方法.

According to your description and code, you want to create custom frame with bindableproperty, I modify your code, please take a following code. Don't forget implement bindableproperty propertyChanged method.

public class ContentFrame : Frame
{
    StackLayout contentStack { get; } = new StackLayout()
    {
        Spacing = 0,
        Padding = new Thickness(0),
        Orientation = StackOrientation.Vertical
    };

    Label headinglabel { get; set; } = new Label()
    {
        TextColor=Color.Red
    };
    public IList<View> Contents { get => contentStack.Children; }
    public static readonly BindableProperty HeadingProperty =
            BindableProperty.Create(nameof(Heading), typeof(string),
            typeof(ContentFrame), null, propertyChanged: OnHeadingChanged);

    private static void OnHeadingChanged(BindableObject bindable, object oldValue, object newValue)
    {
        var customframe = (ContentFrame)bindable;
        customframe.headinglabel.Text = newValue.ToString();
    }

    public string Heading
    {
        get => (string)GetValue(HeadingProperty);
        set => SetValue(HeadingProperty, value);
    }

    public ContentFrame()
    {
        contentStack.Children.Add(headinglabel);
      
        Content = contentStack;
        HasShadow = false;
       
    }
}

<ContentPage
x:Class="demo3.customcontrol.Page4"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:control="clr-namespace:demo3.customcontrol">
<ContentPage.Content>
    <StackLayout>
        <control:ContentFrame Heading="The heading here">
            <control:ContentFrame.Contents>
                <Label Text="ABC" />
                <Label Text="ABC" />
                <Label Text="GHI" />
            </control:ContentFrame.Contents>

        </control:ContentFrame>
    </StackLayout>
</ContentPage.Content>

截图:

这篇关于如何在元素列表之前向模板添加元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！