.NET MAUI中如何复用包含内部控件的Border控件？

方案一：数据驱动（DataTemplate + FlexLayout） #

这是MAUI中最推荐的实现方式，无需手动复制控件，直接通过数据集合自动生成对应数量的Border模板。

1. 定义数据模型 #

创建对应的数据类，包含你需要展示的字段：

public class ItemModel : INotifyPropertyChanged
{
    private string _name;
    private ImageSource _imageSource;

    public string Name
    {
        get => _name;
        set
        {
            _name = value;
            OnPropertyChanged();
        }
    }

    public ImageSource ImageSource
    {
        get => _imageSource;
        set
        {
            _imageSource = value;
            OnPropertyChanged();
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    private void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

2. 准备数据源 #

在页面的代码后台或ViewModel中创建可观察集合：

public ObservableCollection<ItemModel> Items { get; } = new();

// 示例：添加测试数据
public void LoadData()
{
    Items.Add(new ItemModel { Name = "Item 1", ImageSource = "image1.png" });
    Items.Add(new ItemModel { Name = "Item 2", ImageSource = "image2.png" });
    // 按需添加更多数据
}

3. XAML中绑定FlexLayout #

用DataTemplate定义Border的结构，FlexLayout会自动根据Items数量生成控件：

<FlexLayout 
    ItemsSource="{Binding Items}"
    Direction="Row"
    Wrap="Wrap"
    Spacing="10"
    Padding="10">
    <FlexLayout.ItemTemplate>
        <DataTemplate>
            <Border Stroke="#CCCCCC" StrokeThickness="1" CornerRadius="8" Padding="8" WidthRequest="120">
                <VerticalStackLayout>
                    <Image Source="{Binding ImageSource}" Aspect="AspectFit" HeightRequest="80"/>
                    <Label Text="{Binding Name}" HorizontalTextAlignment="Center" Margin="0,4,0,0"/>
                </VerticalStackLayout>
            </Border>
        </DataTemplate>
    </FlexLayout.ItemTemplate>
</FlexLayout>

记得在页面根元素设置BindingContext为你的数据源实例。

方案二：封装自定义控件 #

如果需要手动实例化控件并传入数据，可以封装成自定义ContentView：

1. 创建自定义控件 #

新建ItemCard.xaml文件：

<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourNamespace.ItemCard">
    <Border x:Name="CardBorder" Stroke="#CCCCCC" StrokeThickness="1" CornerRadius="8" Padding="8" WidthRequest="120">
        <VerticalStackLayout>
            <Image x:Name="ItemImage" Aspect="AspectFit" HeightRequest="80"/>
            <Label x:Name="ItemNameLabel" HorizontalTextAlignment="Center" Margin="0,4,0,0"/>
        </VerticalStackLayout>
    </Border>
</ContentView>

在ItemCard.xaml.cs中添加可绑定属性，方便外部传值：

public partial class ItemCard : ContentView
{
    // 名称属性
    public static readonly BindableProperty NameProperty = BindableProperty.Create(
        nameof(Name), typeof(string), typeof(ItemCard), propertyChanged: (bindable, oldVal, newVal) =>
        {
            ((ItemCard)bindable).ItemNameLabel.Text = (string)newVal;
        });

    public string Name
    {
        get => (string)GetValue(NameProperty);
        set => SetValue(NameProperty, value);
    }

    // 图片源属性
    public static readonly BindableProperty ImageSourceProperty = BindableProperty.Create(
        nameof(ImageSource), typeof(ImageSource), typeof(ItemCard), propertyChanged: (bindable, oldVal, newVal) =>
        {
            ((ItemCard)bindable).ItemImage.Source = (ImageSource)newVal;
        });

    public ImageSource ImageSource
    {
        get => (ImageSource)GetValue(ImageSourceProperty);
        set => SetValue(ImageSourceProperty, value);
    }

    public ItemCard()
    {
        InitializeComponent();
    }
}

2. 复用自定义控件 #

方式1：XAML中绑定使用

<FlexLayout Direction="Row" Wrap="Wrap" Spacing="10" Padding="10">
    <!-- 手动添加示例 -->
    <local:ItemCard Name="Item 1" ImageSource="image1.png"/>
    <local:ItemCard Name="Item 2" ImageSource="image2.png"/>
    <!-- 或者配合ItemsSource绑定批量生成 -->
    <FlexLayout.ItemTemplate>
        <DataTemplate>
            <local:ItemCard Name="{Binding Name}" ImageSource="{Binding ImageSource}"/>
        </DataTemplate>
    </FlexLayout.ItemTemplate>
</FlexLayout>

方式2：C#代码中实例化添加

// 假设flexLayout是页面中的FlexLayout实例
foreach (var item in Items)
{
    var card = new ItemCard
    {
        Name = item.Name,
        ImageSource = item.ImageSource
    };
    flexLayout.Children.Add(card);
}

内容的提问来源于stack exchange，提问作者TLDev