如何在Xamarin Forms的DevExpress CollectionView中设置自定义组头名称

我参考了DevExpress官方文档后取得了一些进展，但没法设置想要的组头名称。教程和文档里通常通过MenuGroup的Name属性添加组名，但我实现不了。我代码里执行了MenuGroupList.Add(new MenuGroup("Raporlar",new[] { fPage }));，希望把“Raporlar”作为组头显示，但试了各种方法都没解决。

我的类定义 #

public class MenuGroup : ObservableCollection<FlyoutItemPage>
{
    public string Name { get; private set; }

    public MenuGroup(string name) : base()
    {
        Name = name;
    }

    public MenuGroup(string name, IEnumerable<FlyoutItemPage> collection) : base(collection)
    {
        Name = name;
    }
}

public class FlyoutItemPage
{
    public FlyoutItemPage(int pageID, string title, Type targetPage, string iconSource, string grup, string programkod)
    {
        this.PageID = pageID;
        this.TargetPage = targetPage;
        this.Title = title;
        this.IconSource = iconSource;
        this.Grup = grup;
        this.PROGRAMKOD = programkod;   
    }

    public int PageID { get; set; }
    public string Title { get; set; }
    public Type TargetPage { get; set; }

    public string Grup {get; set;}
    public string IconSource { get; set; }
    public string PROGRAMKOD { get; set; }
}

ViewModel代码 #

private ObservableCollection<MenuGroup> _menuGroupList;

public ObservableCollection<MenuGroup> MenuGroupList
{
    get
    {
        if (_menuGroupList == null)
            _menuGroupList = new ObservableCollection<MenuGroup>();

        return _menuGroupList;
    }
    set { _menuGroupList = value; OnPropertyChanged(); }
}

FlyoutItemPage fPage = new FlyoutItemPage(i, yetkiList[i].BASLIK, typeof(RaporSecimPage), "@drawable/delivery.png", yetkiList[i].GRUP, yetkiList[i].PROGRAMKOD);

MenuGroupList.Add(new MenuGroup("Raporlar", new[] { fPage }));

XAML代码 #

<StackLayout WidthRequest="250" HorizontalOptions="Start"  BackgroundColor="#93EDC7">
        <Image Source="@drawable/ida_logo" Margin="20"/>
        <!-- Collectionview -->
        <!--ItemTapped="menuPopUpPagesList_ItemTapped"-->
        <dxcv:DXCollectionView ItemsSource="{Binding MenuPageList}"    DisplayMember="Title">
            <dxcv:DXCollectionView.ItemTemplate>
                <DataTemplate>
                    <Grid xct:TouchEffect.Command="{Binding GotoOtherPageCommand, Source={RelativeSource AncestorType={x:Type local:MenuPagePopUpViewModel}} }" 
                            xct:TouchEffect.CommandParameter="{Binding .}"
                            xct:TouchEffect.LongPressCommand="{Binding OnLongPressCommand, Source={RelativeSource AncestorType={x:Type local:MenuPagePopUpViewModel}}}"
                            xct:TouchEffect.LongPressCommandParameter="{Binding .}" >
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="33"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>

                        <Image Source="{Binding IconSource}" Grid.Column="0" />
                        <Label Text="{Binding Title}" Margin="0,2" Grid.Column="1" TextColor="Black"/>
                    </Grid>
                </DataTemplate>
            </dxcv:DXCollectionView.ItemTemplate>
            <!--Group items.-->
            <dxcv:DXCollectionView.GroupDescription>
                <dxcv:GroupDescription FieldName="Grup"   GroupInterval="Value"/>
            </dxcv:DXCollectionView.GroupDescription>

            <!--Define the group header template.-->
            <dxcv:DXCollectionView.GroupHeaderTemplate>
                <DataTemplate>
                    <StackLayout Margin="3" BackgroundColor="LightGray" Orientation="Horizontal">
                        <Label FontFamily="Roboto" TextColor="Black" FontSize="Small" VerticalTextAlignment="Center" Text="{Binding Value}"/>
                        <Image Source="@drawable/popupmenu.png"  HeightRequest="20" />
                    </StackLayout>
                </DataTemplate>
            </dxcv:DXCollectionView.GroupHeaderTemplate>
        </dxcv:DXCollectionView>
</StackLayout>

问题原因及解决方案 #

核心问题 #

1. 绑定对象不匹配：XAML中DXCollectionView的ItemsSource绑定的是MenuPageList，但ViewModel中实际维护的分组集合是MenuGroupList，导致分组数据未被正确加载。
2. 分组逻辑冲突：当前配置了基于FlyoutItemPage.Grup字段的自动分组，而非直接使用已创建的MenuGroup分组集合，因此MenuGroup.Name属性无法被读取显示。

方案一：直接使用已分组的MenuGroup集合（推荐） #

修改XAML中的DXCollectionView配置，直接绑定分组好的集合并调整组头绑定：

<dxcv:DXCollectionView ItemsSource="{Binding MenuGroupList}" DisplayMember="Title">
    <dxcv:DXCollectionView.ItemTemplate>
        <!-- 保留原有ItemTemplate内容不变 -->
    </dxcv:DXCollectionView.ItemTemplate>

    <!-- 移除自动分组的GroupDescription配置，因为集合已经是分组状态 -->

    <!-- 修改组头模板，绑定MenuGroup的Name属性 -->
    <dxcv:DXCollectionView.GroupHeaderTemplate>
        <DataTemplate>
            <StackLayout Margin="3" BackgroundColor="LightGray" Orientation="Horizontal">
                <Label FontFamily="Roboto" TextColor="Black" FontSize="Small" VerticalTextAlignment="Center" Text="{Binding Name}"/>
                <Image Source="@drawable/popupmenu.png" HeightRequest="20" />
            </StackLayout>
        </DataTemplate>
    </dxcv:DXCollectionView.GroupHeaderTemplate>
</dxcv:DXCollectionView>

方案二：继续使用自动分组逻辑 #

如果希望保留基于Grup字段的自动分组，需确保FlyoutItemPage的Grup属性值为你想要显示的组头名称：

// 创建fPage时，将Grup参数设置为"Raporlar"
FlyoutItemPage fPage = new FlyoutItemPage(i, yetkiList[i].BASLIK, typeof(RaporSecimPage), "@drawable/delivery.png", "Raporlar", yetkiList[i].PROGRAMKOD);

此时XAML中的GroupDescription和GroupHeaderTemplate无需修改，组头会自动显示Grup字段的值。

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