如何在.NET MAUI中实现2-4级多级项目符号列表？选XAML还是Blazor？

优先选XAML（原生MAUI项目） #

纯原生XAML实现更贴合MAUI的性能和原生体验，完全不需要依赖Blazor，核心是通过层级数据模型+嵌套控件来实现2-4级列表：

1. 定义层级数据模型：

public class HierarchicalListItem
{
    public string Content { get; set; }
    public List<HierarchicalListItem> SubItems { get; set; } = new();
}

2. 用嵌套CollectionView+缩进控制实现多级列表，每个层级用不同的项目符号（比如•、◦、▪、▫），通过Margin设置缩进：

<CollectionView ItemsSource="{Binding TopLevelItems}">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <VerticalStackLayout>
                <!-- 一级列表 -->
                <HorizontalStackLayout>
                    <Label Text="•" Margin="0,0,6,0" FontSize="Medium"/>
                    <Label Text="{Binding Content}" FontSize="Medium"/>
                </HorizontalStackLayout>

                <!-- 二级列表 -->
                <CollectionView ItemsSource="{Binding SubItems}" Margin="24,0,0,0">
                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                            <VerticalStackLayout>
                                <HorizontalStackLayout>
                                    <Label Text="◦" Margin="0,0,6,0" FontSize="Medium"/>
                                    <Label Text="{Binding Content}" FontSize="Medium"/>
                                </HorizontalStackLayout>

                                <!-- 三级列表 -->
                                <CollectionView ItemsSource="{Binding SubItems}" Margin="24,0,0,0">
                                    <CollectionView.ItemTemplate>
                                        <DataTemplate>
                                            <VerticalStackLayout>
                                                <HorizontalStackLayout>
                                                    <Label Text="▪" Margin="0,0,6,0" FontSize="Medium"/>
                                                    <Label Text="{Binding Content}" FontSize="Medium"/>
                                                </HorizontalStackLayout>

                                                <!-- 四级列表 -->
                                                <CollectionView ItemsSource="{Binding SubItems}" Margin="24,0,0,0">
                                                    <CollectionView.ItemTemplate>
                                                        <DataTemplate>
                                                            <HorizontalStackLayout>
                                                                <Label Text="▫" Margin="0,0,6,0" FontSize="Medium"/>
                                                                <Label Text="{Binding Content}" FontSize="Medium"/>
                                                            </HorizontalStackLayout>
                                                        </DataTemplate>
                                                    </CollectionView.ItemTemplate>
                                                </CollectionView>
                                            </VerticalStackLayout>
                                        </DataTemplate>
                                    </CollectionView.ItemTemplate>
                                </CollectionView>
                            </VerticalStackLayout>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>
            </VerticalStackLayout>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

这种方式可以精准控制每个层级的样式、间距，性能也更优，适合原生MAUI项目。

用Blazor（Blazor Hybrid项目） #

如果你的MAUI项目是Blazor Hybrid架构，或者你更熟悉Web的HTML/CSS写法，用Blazor实现会更简洁，直接复用HTML的多级列表逻辑：

1. 同样使用上面的HierarchicalListItem数据模型，在Razor组件中递归渲染：

<ul style="list-style-type: disc; padding-left: 24px;">
    @foreach (var item in TopLevelItems)
    {
        <li>@item.Content</li>
        @if (item.SubItems.Any())
        {
            @RenderSubList(item.SubItems, 2)
        }
    }
</ul>

@code {
    [Parameter]
    public List<HierarchicalListItem> TopLevelItems { get; set; } = new();

    private RenderFragment RenderSubList(List<HierarchicalListItem> items, int currentLevel)
    {
        var listStyle = currentLevel switch
        {
            2 => "circle",
            3 => "square",
            4 => "square",
            _ => "disc"
        };

        return @<ul style="list-style-type: @listStyle; padding-left: 24px;">
            @foreach (var item in items)
            {
                <li>@item.Content</li>
                @if (item.SubItems.Any() && currentLevel < 4)
                {
                    @RenderSubList(item.SubItems, currentLevel + 1)
                }
            }
        </ul>;
    }
}

Blazor的优势是写法更简洁，用CSS就能快速调整列表样式和缩进，适合已经采用Blazor技术栈的项目。

总结 #

• 纯原生MAUI项目：选XAML实现，性能更好，原生体验更统一
• Blazor Hybrid项目：选Blazor实现，开发效率更高，复用Web技术经验

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