如何创建一个自定义控件，用户可以在 Xamarin.Forms 中添加任何类型的视图？

Posted 2023-03-25

【中文标题】如何创建一个自定义控件，用户可以在 Xamarin.Forms 中添加任何类型的视图？

【英文标题】：How to create a custom control that user can add any kinds of view into it in Xamarin.Forms?

【发布时间】：2022-01-20 04:12:29

【问题描述】：

我想创建一个自定义控件，让用户可以将任何视图添加到特定位置，如下所示：

MyCustomControl.xaml

<ContentView ...>

    <!-- My customizations ... -->

    <StackLayout>
    <!-- Everything added by user should goes here -->
    </StackLayout>

    <!-- My other customizations ... -->

</ContentView>

使用时：

<ContentPage>

    <controls:MyCustomControl>
        <Label />
        <Image />
        ...
    <controls:MyCustomControl>

</ContentPage>

我该怎么做？

【问题讨论】：

有几种方法可以做到这一点。您希望能够在 XAML 或代码中添加自定义内容吗？

@CodingLumis 很好，我想在 XAML 中做大​​部分事情

【参考方案1】：

我将在此处发布一种执行此操作的方法，但还有其他方法。根据您的问题，我假设您想在各个地方重用 ContentView 并在实例化它时允许更改该内容视图的一部分。我将假设您将在 XAML 中指定自定义部分。您可以使用以下模式来实现此目的：

创建您的 ContentView 并为自定义部分添加可绑定属性：

ContentViewWithCustomPart.xaml

<ContentView.Content>
    <StackLayout>
        <Label Text="I'm always here!" />
        <StackLayout x:Name="StackToHoldCustomStuff">
            <!-- Stuff goes here injected by bindable property -->
        </StackLayout>
    </StackLayout>
</ContentView.Content>

ContenViewWithCustomPart.xaml.cs

public partial class ContentViewWithCustomPart : ContentView

    public static readonly BindableProperty CustomViewProperty = 
            BindableProperty.Create(nameof(CustomView), typeof(View), typeof(ContentViewWithCustomPart), propertyChanged: OnViewChanged);

    static void OnViewChanged(object bindable, object oldValue, object newValue)
    
        var page = (ContentViewWithCustomPart)bindable;
        page.StackToHoldCustomStuff.Children.Clear();
        if (newValue != null) page.StackToHoldCustomStuff.Children.Add((View)newValue);
    

    public View CustomView  get => (View)GetValue(CustomViewProperty); set => SetValue(CustomViewProperty, value); 

    public ContentViewWithCustomPart()
    
       InitializeComponent();
    

在演示页面中的使用：

<ContentPage.Content>
    <StackLayout>
        <cv:ContentViewWithCustomPart>             
            <cv:ContentViewWithCustomPart.CustomView>
                <Label Text="I'm a custom bit!" />
            </cv:ContentViewWithCustomPart.CustomView>
        </cv:ContentViewWithCustomPart>
    </StackLayout>
</ContentPage.Content>

结果：

【讨论】：

这是个好主意。我会试一试。谢谢！