How to set group name in DevExpress Collectionview in Xamarin Forms?

Question

I followed this documentation and I got some progress. But I can not set group header name that I want.

In tutorials and documentations people add this group name from MenuGroup name but I can not.

This is my code:

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

I want that Raporlar as a group header. I tried so many things and found no solution yet.

My classes:

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; }
}

View model:

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>

Answer 1

Referring to the official doc and sample, you don't have to create a collection like your MenuGroup. The way you use to group data is for Xamarin Forms CollectionView. DevExpress is different though.

1.If you want to group the data based on the Grup property value, and display it as the group header, as you did in the code

<dxcv:DXCollectionView.GroupDescription>
            <dxcv:GroupDescription FieldName="Grup"   GroupInterval="Value"/>
</dxcv:DXCollectionView.GroupDescription>

you just have to create a

public ObservableCollection<FlyoutItemPage> FlyoutItemPages { get; set; } = new ObservableCollection<FlyoutItemPage>();

and use data bindings for itemsSource

<dxcv:DXCollectionView ItemsSource="{Binding FlyoutItemPages}" 

2.If Grup value is not the value you want to display in header, then you could define a new Group property in FlyoutItemPage class.

public class FlyoutItemPage
{
    ...
    public string Group { get; set; }
}

And use Group value as header

<dxcv:DXCollectionView.GroupDescription>
            <dxcv:GroupDescription FieldName="Group"   GroupInterval="Value"/>
</dxcv:DXCollectionView.GroupDescription>

Also create and bind to this collection,

public ObservableCollection<FlyoutItemPage> FlyoutItemPages { get; set; } = new ObservableCollection<FlyoutItemPage>();

Don't forget to set the Group value of each items when adding them to the collection.