Reputation: 3671

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

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

Screenshot:

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?

UPDATE

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
}

Upvotes: 1

Answers (2)

ColeX

Reputation: 14475

You can create the listview with group style ,and customize the GroupHeaderTemplate , modify the binding data when click on the group , check my sample .

XAML

<ListView x:Name ="lstView" IsGroupingEnabled="true">
    <ListView.GroupHeaderTemplate>
        <DataTemplate>
            <ViewCell>
                <Label Text="{Binding LongName}" BackgroundColor="LightBlue" >
                    <Label.GestureRecognizers>
                        <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
                    </Label.GestureRecognizers>
                </Label>
            </ViewCell>
        </DataTemplate>
    </ListView.GroupHeaderTemplate>
    <ListView.ItemTemplate>
        <DataTemplate>
            <TextCell Text="{Binding Name}" Detail="{Binding Comment}" />
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Model

public class VeggieModel
{
    public string Name { get; set; }
    public string Comment { get; set; }
    public bool IsReallyAVeggie { get; set; }
    public string Image { get; set; }
    public VeggieModel ()
    { }
}

public class GroupedVeggieModel : ObservableCollection<VeggieModel> 
{
    public string LongName { get; set; }
    public string ShortName { get; set; }
    public bool IsExpand { get; set; }
}

Page

public partial class GroupedListXaml : ContentPage
{
    private ObservableCollection<GroupedVeggieModel> grouped { get; set; }
    private ObservableCollection<GroupedVeggieModel> groupedCopy { get; set;  }

    public GroupedListXaml ()
    {
        InitializeComponent ();
        grouped = InitData();
        groupedCopy = InitData();

        lstView.ItemsSource = grouped;
    }

    ObservableCollection<GroupedVeggieModel> InitData()
    {
        ObservableCollection<GroupedVeggieModel> grouped = new ObservableCollection<GroupedVeggieModel>();
        GroupedVeggieModel veggieGroup = new GroupedVeggieModel() { LongName = "vegetables", ShortName = "v", IsExpand = true };
        GroupedVeggieModel fruitGroup = new GroupedVeggieModel() { LongName = "fruit", ShortName = "f", IsExpand = true };

        veggieGroup.Add(new VeggieModel() { Name = "celery", IsReallyAVeggie = true, Comment = "try ants on a log" });
        veggieGroup.Add(new VeggieModel() { Name = "tomato", IsReallyAVeggie = false, Comment = "pairs well with basil" });
        veggieGroup.Add(new VeggieModel() { Name = "zucchini", IsReallyAVeggie = true, Comment = "zucchini bread > bannana bread" });
        veggieGroup.Add(new VeggieModel() { Name = "peas", IsReallyAVeggie = true, Comment = "like peas in a pod" });
        fruitGroup.Add(new VeggieModel() { Name = "banana", IsReallyAVeggie = false, Comment = "available in chip form factor" });
        fruitGroup.Add(new VeggieModel() { Name = "strawberry", IsReallyAVeggie = false, Comment = "spring plant" });
        fruitGroup.Add(new VeggieModel() { Name = "cherry", IsReallyAVeggie = false, Comment = "topper for icecream" });
        grouped.Add(veggieGroup);
        grouped.Add(fruitGroup);
        return grouped;
    }

    void Click(GroupedVeggieModel model)
    {
        if (model.IsExpand)
        {
            var index = grouped.IndexOf(model);
            var context = groupedCopy[index];
            foreach (var m in context)
            {
                model.Add(m);
            }
        }
        else
        {
            model.Clear();
        }
    }

    private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
    {
        var label = sender as Label;
        var model = label.BindingContext as GroupedVeggieModel;
        model.IsExpand = !model.IsExpand;

        Click(model);           
    }
}

Upvotes: 4

Marcel Callo

Reputation: 437

If you are using Xamarin Forms 4.6, you can look for the Expander https://devblogs.microsoft.com/xamarin/xamarin-forms-4-6/. Nota: it is for the moment in experimental mode.

For details about how to set the content of the Expander control, see the following link:

Upvotes: 1

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

Answers (2)

Related Questions