MAUI：如何在XAML中用Label显示含HTML标签的字符串列表

我需要在XAML中遍历SearchPageResultViewModel里的Highlights字符串列表（每个条目带HTML标签），用TextType="Html"的Label正确渲染内容。以下是相关代码和解决方案：

原代码 #

ViewModel #

using CommunityToolkit.Mvvm.ComponentModel;

namespace MyProject.ViewModels;

public partial class SearchPageResultViewModel : ObservableObject
{
   [ObservableProperty]
   private ObservableCollection<SearchPageResultViewModel> _searchResults;
}

数据模型 #

using CommunityToolkit.Mvvm.ComponentModel;

namespace MyProject.ViewModels;

public partial class SearchPageResultViewModel : ObservableObject
{
    public DateTime Date { get; set; }
    public List<string> Highlights { get; set; } = new();
}

原XAML（待修改） #

<CollectionView Grid.Row="1" ItemsSource="{Binding SearchResults}" >
    <CollectionView.ItemTemplate>
        <DataTemplate x:DataType="viewModels:SearchPageResultViewModel">
            <Grid RowDefinitions="auto, auto, *" ColumnDefinitions="Auto" >
                <HorizontalStackLayout Grid.Row="0" >
                    <Label Text="(" />
                    <Label Text="{Binding Date, StringFormat='{0:dd.MM.yyyy}'}" />
                    <Label Text=")" />
                </HorizontalStackLayout>
                <!-- 需要替换的伪代码：遍历Highlights -->
                <!-- foreach(string highlight in Highlights) -->
                <!-- { -->
                <!--    <Label TextType="Html" Grid.Row="1" Text="{Binding highlight}" /> -->
                <!-- } -->
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

解决方案 #

要遍历Highlights列表，可使用BindableLayout（轻量方案）或嵌套CollectionView（功能更丰富），以下是两种实现方式：

方式一：使用BindableLayout（推荐） #

BindableLayout适合简单的列表展示，无需额外滚动容器：

<CollectionView Grid.Row="1" ItemsSource="{Binding SearchResults}">
    <CollectionView.ItemTemplate>
        <DataTemplate x:DataType="viewModels:SearchPageResultViewModel">
            <Grid RowDefinitions="auto, auto, *" ColumnDefinitions="Auto">
                <HorizontalStackLayout Grid.Row="0">
                    <Label Text="(" />
                    <Label Text="{Binding Date, StringFormat='{0:dd.MM.yyyy}'}" />
                    <Label Text=")" />
                </HorizontalStackLayout>
                
                <!-- 遍历Highlights列表 -->
                <VerticalStackLayout Grid.Row="1" 
                                     BindableLayout.ItemsSource="{Binding Highlights}">
                    <BindableLayout.ItemTemplate>
                        <DataTemplate>
                            <Label TextType="Html" 
                                   Text="{Binding .}" 
                                   Margin="0,4,0,0" /> <!-- 可选：添加上下间距区分条目 -->
                        </DataTemplate>
                    </BindableLayout.ItemTemplate>
                </VerticalStackLayout>
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

方式二：使用嵌套CollectionView #

如果Highlights条目较多需要滚动，或需要更多交互功能，可使用嵌套的CollectionView：

<CollectionView Grid.Row="1" ItemsSource="{Binding SearchResults}">
    <CollectionView.ItemTemplate>
        <DataTemplate x:DataType="viewModels:SearchPageResultViewModel">
            <Grid RowDefinitions="auto, auto, *" ColumnDefinitions="Auto">
                <HorizontalStackLayout Grid.Row="0">
                    <Label Text="(" />
                    <Label Text="{Binding Date, StringFormat='{0:dd.MM.yyyy}'}" />
                    <Label Text=")" />
                </HorizontalStackLayout>
                
                <!-- 嵌套CollectionView遍历Highlights -->
                <CollectionView Grid.Row="1" 
                                ItemsSource="{Binding Highlights}"
                                VerticalOptions="Start"
                                ItemSpacing="4">
                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                            <Label TextType="Html" Text="{Binding .}" />
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

优化建议 #

如果需要动态更新Highlights列表（比如添加/删除条目后自动刷新UI），建议将数据模型中的List<string>改为ObservableCollection<string>：

public ObservableCollection<string> Highlights { get; set; } = new();

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