如何在Xamarin Forms中借助XCT:Expander实现树形菜单？

一、Expander是否适合实现树形菜单？ #

完全合适。Xamarin Community Toolkit（XCT）的Expander控件原生支持展开/折叠交互，自带过渡动画，代码侵入性低，非常适合快速实现层级化的树形菜单结构，完全匹配你需求中的样式。

二、如何将Expander作为ListView子项使用？ #

核心是先把服务端返回的平级数据转换为父子树形结构，再通过嵌套控件绑定数据：

1. 定义树形数据模型 #

先将原始数据映射为包含父组和子项的层级模型：

// 菜单组（父节点）
public class MenuGroup
{
    public string GroupName { get; set; } // 对应ANAGRUPADI
    public string GroupCode { get; set; } // 对应ANAGRUPKODU
    public List<MenuItem> MenuItems { get; set; } = new List<MenuItem>();
}

// 菜单项（子节点）
public class MenuItem
{
    public string Title { get; set; } // 对应BASLIK
    public string ProgramCode { get; set; } // 对应PROGRAMKOD
    public bool CanView { get; set; } // 对应VIEW字段，"E"转为true
    // 可添加其他需要的权限/属性字段
}

2. 转换服务端平级数据为树形结构 #

通过分组将原始数据整理为父子结构：

// 假设serviceResponse是从服务端获取的原始数据列表
var treeMenuData = serviceResponse
    .GroupBy(item => item.ANAGRUPADI)
    .Select(group => new MenuGroup
    {
        GroupName = group.Key,
        GroupCode = group.First().ANAGRUPKODU,
        MenuItems = group.Select(item => new MenuItem
        {
            Title = item.BASLIK,
            ProgramCode = item.PROGRAMKOD,
            CanView = item.VIEW == "E"
        }).ToList()
    })
    .ToList();

3. XAML布局实现嵌套结构 #

在ListView的ItemTemplate中嵌套Expander，Expander的Header显示父组名称，Content区域用CollectionView展示子菜单项：

<!-- 需要先声明XCT命名空间：xmlns:xct="http://xamarin.com/schemas/2020/toolkit" -->
<ListView ItemsSource="{Binding TreeMenuData}"
          HasUnevenRows="True">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <xct:Expander>
                    <!-- 父组头部 -->
                    <xct:Expander.Header>
                        <Label Text="{Binding GroupName}"
                               FontSize="Medium"
                               FontAttributes="Bold"
                               Padding="12,8"/>
                    </xct:Expander.Header>
                    <!-- 子菜单项区域 -->
                    <CollectionView ItemsSource="{Binding MenuItems}">
                        <CollectionView.ItemTemplate>
                            <DataTemplate>
                                <Label Text="{Binding Title}"
                                       Padding="24,6"
                                       FontSize="Small"
                                       IsEnabled="{Binding CanView}"/>
                                <!-- 可添加TapGestureRecognizer实现页面跳转逻辑 -->
                            </DataTemplate>
                        </CollectionView.ItemTemplate>
                    </CollectionView>
                </xct:Expander>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

三、其他可选解决方案 #

如果需要更复杂的树形交互（比如三级以上嵌套、节点拖拽、复选框选择等），可以考虑：

• Syncfusion TreeView控件：功能强大，支持多级嵌套、自定义模板、节点操作等，但属于商业控件，需要授权。
• 自定义树形View：通过递归绑定实现，但开发成本高，仅适合高度定制化的场景，一般不推荐。

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