c# - 如何覆盖/修改 Frame 的 Content 属性以接受 Xamarin.Forms 中的多个视图？

Question

这是我拥有的C#模板代码：

public class PopupFrame : Frame
{
    public PopupFrame()
    {
        this.SetDynamicResource(BackgroundColorProperty, "PopUpBackgroundColor");
        this.SetDynamicResource(CornerRadiusProperty, "PopupCornerRadius");
        HasShadow = true;
        HorizontalOptions = LayoutOptions.FillAndExpand;
        Padding = 0;
        VerticalOptions = LayoutOptions.Center;
    }
}

我这样使用它：

<t:PopupFrame>
   <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
         <t:PopupHeader Text="Copy Deck" />
         <t:PopupEntryHeader Text="New Deck Name" />
                
                More XAML here
   </StackLayout>
</t:PopupFrame>

有什么方法可以让我编码PopupFrame，以便它StackLayout是它的一部分并且它需要内容。

这是我想编码的内容：

<t:PopupFrame>
   <t:PopupHeader Text="Copy Deck" />
   <t:PopupEntryHeader Text="New Deck Name" />
                
       More XAML here

</t:PopupFrame>

Answer 1

如果我是对的，您可以通过将ContentProperty您的PopupFrame类的属性设置为本身就是一个集合的属性来实现这一点。这将覆盖ContentProperty允许Frame您Content将多个视图设置为内容，而不是仅设置一个 Frame 的默认视图...

所以，如果这一切对你来说听起来不错，请继续阅读。

操作方法

ContentProperty您可以为您的PopupFrame班级定义一个，如下所示：

[Xamarin.Forms.ContentProperty("Contents")]
class PopupFrame : Frame
{
    StackLayout contentStack { get; } = new StackLayout();

    public IList<View> Contents { get => contentStack.Children; }


    public PopupFrame()
    {
        Content = contentStack;

        HasShadow = true;
        HorizontalOptions = LayoutOptions.FillAndExpand;
        Padding = 0;
        VerticalOptions = LayoutOptions.Center;
    }
}

然后你就可以做你想做的事情：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:t="clr-namespace:popupframe"
             x:Class="popupframe.MainPage">

    <StackLayout>
        <t:PopupFrame>
            <t:PopupHeader Text="Test header"/>
            <Label Text="Test content"/>
        </t:PopupFrame>
    </StackLayout>

</ContentPage>

我这边的作品同时显示了PopupHeader和Label：

最后一点关于 ContentProperty 的理论

下面的内容是从Ch. Petzold 在 Xamarin.Forms 上。

XAML中使用的每个类都可以将一个属性定义为内容属性（有时也称为类的默认属性）。对于此内容属性，不需要属性元素标记，开始和结束标记中的任何 XML 内容都会自动分配给此属性。非常方便的ContentPage是 isContent的 content 属性、is 的 content 属性和isStackLayout的Childrencontent 属性。FrameContent

这些内容属性已记录在案，但您需要知道在哪里查看。类使用 ContentPropertyAttribute 指定其内容属性。如果此属性附加到类，它会与类声明一起出现在联机 Xamarin.Forms API 文档中。以下是它在文档中的显示方式ContentPage：

[Xamarin.Forms.ContentProperty("Content")]
public class ContentPage : TemplatedPage

如果你大声说出来，听起来有点多余：“Content 属性是 ContentPage 的内容属性。”

类的声明Frame类似：

[Xamarin.Forms.ContentProperty("Content")]
public class Frame : ContentView

StackLayout没有ContentProperty应用属性，但StackLayout派生自Layout<View>，并且Layout<T>有一个ContentProperty属性：

[Xamarin.Forms.ContentProperty("Children")]
public abstract class Layout<T> : Layout, IViewContainer<T>
where T : View

该ContentProperty属性由派生自 的类继承，Layout<T>的Children内容属性也是如此StackLayout。

Answer 2

弹出框.cs

public class PopupFrame : Frame
{
    StackLayout PopupContent;
    public IList<View> Body
    {
        get => PopupContent.Children;
    }
    public PopupFrame()
    {

        PopupContent = new StackLayout();

        SetDynamicResource(Frame.BackgroundColorProperty, "PopUpBackgroundColor");
        SetDynamicResource(Frame.CornerRadiusProperty, "PopupCornerRadius");
        HasShadow = true;
        HorizontalOptions = LayoutOptions.FillAndExpand;
        Padding = 0;
        VerticalOptions = LayoutOptions.Center;

        Content = PopupContent;
    }

现在你可以使用

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:t="clr-namespace:popupframe"
             x:Class="popupframe.MainPage">

    <StackLayout>
       <t:PopupFrame>
         <t:PopupFrame.Body>
             <t:PopupHeader Text="Test header"/>
             <Label Text="Test content"/>
           </t:PopupFrame.Body>
        </t:PopupFrame>
    </StackLayout>

</ContentPage>