Формы Xamarn: Как показать представление списка под элементом списка? - PullRequest
1 голос
/ 30 апреля 2020

Мне нужно показать список классов в моем интерфейсе. Под каждым классом есть несколько вариантов, таких как домашнее задание, посещаемость и т. Д. c.

Снимок экрана:

enter image description here

Я реализовал список классов с помощью функции ListView. Как я могу включить опции под списком?

Я создал пример проекта здесь со списком классов. Также я создал функцию параметров. Как я могу добавить параметры в качестве подсписка classist?

ОБНОВЛЕНИЕ

Мои параметры для каждого элемента одинаковы , поэтому я сделал, как показано ниже:

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

Функция жеста метки:

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

Ответы [ 2 ]

3 голосов
/ 30 апреля 2020

Вы можете создать список со стилем группы и настроить шаблон GroupHeaderTemplate, изменить данные привязки при щелчке по группе, проверить мой образец.

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>

Модель

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

Страница

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

    }
}

enter image description here

1 голос
/ 30 апреля 2020

Если вы используете Xamarin Forms 4.6, вы можете найти Expander https://devblogs.microsoft.com/xamarin/xamarin-forms-4-6/. Примечание: на данный момент в экспериментальном режиме.

Подробнее о настройке содержимого элемента управления Expander см. По следующей ссылке:

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...