Forum Xamarin.Forms

Xamarn forms: How to show a listview under a listview item?

SreeeeSreeee INMember ✭✭✭✭✭
edited April 2020 in Xamarin.Forms

I need to show a list of classes in my UI. Under each class have some options like homework, attendance, etc.

Screenshot:

enter image description here

I have implemented the list of classes using the ListView feature. How can I include the options under the listview?

I have created a sample project here with the list of classes. Also I have created a function of options, How can I append the options as a sublist of classist?

Best Answers

  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭
    Accepted Answer

    expander control il XF4.6 is for you

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭
    Accepted Answer

    Then

    <Label.GestureRecognizers>
        <TapGestureRecognizer
            Tapped="LoadOption1"
            CommandParameter="{Binding .}"
            NumberOfTapsRequired="1">
        </TapGestureRecognizer>
    </Label.GestureRecognizers>
    
    public async void LoadOption1(object sender, EventArgs args)
    {
        var view = (View)sender;
        var gesture = view.GestureRecognizers.First(x => x is TapGestureRecognizer) as TapGestureRecognizer;
        var model = gesture.CommandParameter;
    }
    

    That's a quick by dirty way

Answers

  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭
    Accepted Answer

    expander control il XF4.6 is for you

  • SreeeeSreeee INMember ✭✭✭✭✭
    edited April 2020

    @AlessandroCaliaro I have tried grouped listview, but no data is showing on the UI. Could you please have a look at the new sample.

    Sample: https://drive.google.com/file/d/111RcnIyPhibnMcQH0kCbjVAYuI6UUJco/view?usp=drive_open

  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭

    I have suggest you Expander

  • SreeeeSreeee INMember ✭✭✭✭✭

    @AlessandroCaliaro I have tried the Expander.
    I have one doubt, How I can add data to Expander? In listview ItemsSource property is using for binding the data, what is the equal operation on expander?

  • SreeeeSreeee INMember ✭✭✭✭✭

    @AlessandroCaliaro

    I have tried my best, but only the header part is showing on UI, the child part of the expander is blank.

    I have uploaded a sample, could you please have a look?
    Sample Link: https://drive.google.com/open?id=1WsF5sfVu2ZO4FQWigLwRoBLf4PX2HL_X

  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭
    @AndreiMisiukevich_ can you help this friend?
  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭
    edited May 2020

    Every "ListItem" should contain a collection with "expander's items", then set "StackLayout" as expander's Content and bind that collection via BindableLayout .

    <Expander>
        <Expander.Header>
        ...
        </Exapnder.Header>
    
        <StackLayout BindableLayout.ItemsSource={Binding ExpanderItems}>
            <BindableLayout.ItemTeamplate>
                <DataTemplate>
                    ... 
                </DataTemplate>
            </BindableLayout.ItemTemplate>
        </StackLayout>
    
    </Expander>
    
  • SreeeeSreeee INMember ✭✭✭✭✭

    @AndreiMisiukevich_ and @AlessandroCaliaro

    My options under each item is same so I have done like below:

    <StackLayout BindableLayout.ItemsSource="{Binding  AllItems,Mode=TwoWay}">
            <BindableLayout.ItemTemplate>
                <DataTemplate>
                    <Expander>
                        <Expander.Header>
                            <Label Text="{Binding title}"
                               FontAttributes="Bold"
                               FontSize="Medium" />
                        </Expander.Header>
                        <Expander.ContentTemplate>
                            <DataTemplate>
                                <StackLayout Orientation="Vertical">
                                    <Label 
                                    Text="option1"
                                    FontAttributes="Italic">
                                        <Label.GestureRecognizers>
                                            <TapGestureRecognizer
                                            Tapped="LoadOption1"
                                            NumberOfTapsRequired="1">
                                            </TapGestureRecognizer>
                                        </Label.GestureRecognizers>
                                    </Label>
    
                                    <Label 
                                    Text="option2"
                                    FontAttributes="Italic"/>
    
                                    <Label 
                                    Text="option3"
                                    FontAttributes="Italic"/>
                                </StackLayout>
                            </DataTemplate>
                        </Expander.ContentTemplate>
                    </Expander>
                </DataTemplate>
            </BindableLayout.ItemTemplate>
        </StackLayout>
    

    Label gesture function:

    public async void LoadOption1(object sender, EventArgs args)
    {
        //How can I get the selected class(selected Expander Header) details here
    }
    
  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    @Sreeee

    1. You can put your Expander as a command parameter and use command.
    2. You can ((Expander)((View)sender).Parent.Parent))
  • SreeeeSreeee INMember ✭✭✭✭✭
    edited May 2020

    @AndreiMisiukevich_ said:
    @Sreeee

    1. You can put your Expander as a command parameter and use command.
    2. You can ((Expander)((View)sender).Parent.Parent))

    I didn't get completely, can you explain detail what changes need to done on xaml and xaml.cs files?

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭
    public async void LoadOption1(object sender, EventArgs args)
    {
        var expander = ((Expander)((View)sender).Parent.Parent.Parent));
        var label = (Label)expander.Header;
        var text = label.Text;
    }
    
  • SreeeeSreeee INMember ✭✭✭✭✭

    @AndreiMisiukevich_ I have tried this code now, but getting System.InvalidCastException: Specified cast is not valid exception.

    Instead of getting the expander Header label text, getting the complete expander header model details is very useful. I need the entire header model data to go to the next page.

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭
    Accepted Answer

    Then

    <Label.GestureRecognizers>
        <TapGestureRecognizer
            Tapped="LoadOption1"
            CommandParameter="{Binding .}"
            NumberOfTapsRequired="1">
        </TapGestureRecognizer>
    </Label.GestureRecognizers>
    
    public async void LoadOption1(object sender, EventArgs args)
    {
        var view = (View)sender;
        var gesture = view.GestureRecognizers.First(x => x is TapGestureRecognizer) as TapGestureRecognizer;
        var model = gesture.CommandParameter;
    }
    

    That's a quick by dirty way

  • SreeeeSreeee INMember ✭✭✭✭✭
    edited May 2020

    Thank you very much @AndreiMisiukevich_
    I have added my model casting on the last line and now I am able to fetch the model data.

    var model = (model) gesture.CommandParameter;
    
Sign In or Register to comment.