Редактируемый сгруппированный ListView в формах Xamarin

#c# #.net #xaml #mvvm #xamarin.forms

#c# #.net #xaml #mvvm #xamarin.forms

Вопрос:

Я хотел бы отобразить что-то вроде вложенного listview в формах Xamarin. Я имею в виду, что я хотел бы иметь список пользователей с их заказами (список заказов может быть пустым). Список позволил бы добавлять заказы конкретному пользователю, удалять пользователя (и все его заказы) и удалять конкретный заказ.

введите описание изображения здесь

Я бы хотел создать ListView из OrderModel, где OrderModel выглядел бы как:

 public class OrderModel
{
    public string PersonName {get;set;}
    public Order Order {get; set;}
}
  

Но я не знаю, хорошая ли это идея, и как реализовать что-то подобное.

Комментарии:

1. В чем ваш вопрос? Сгруппированные ListView задокументированы здесь: learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface /…

2. Благодарю за ответ. Но как я могу отобразить person3, если его список элементов пуст?

Ответ №1:

Я пишу простую демонстрационную версию для выполнения ваших требований. Я использую Grouped ListViews :

OrderModel:

 public class OrderModel
{

    public string orderName { get; set; }

    public OrderModel()
    {
    }
}

public class GroupedOrderModel : ObservableCollection<OrderModel>
{
    public string personName { get; set; }
}
  

Задайте источник данных:

 public partial class GroupedListXaml : ContentPage
{
    private ObservableCollection<GroupedOrderModel> grouped { get; set; }
    public GroupedListXaml ()
    {
        InitializeComponent ();
        grouped = new ObservableCollection<GroupedOrderModel> ();
        var person1Group = new GroupedOrderModel() { personName = "   john"};
        var person2Group = new GroupedOrderModel() { personName = "   alex"};
        var person3Group = new GroupedOrderModel() { personName = "   jack"};


        person1Group.Add (new OrderModel () { orderName = "   OrderOne"});
        person1Group.Add (new OrderModel() { orderName = "   OrderTwo" });
        person1Group.Add (new OrderModel() { orderName = "   OrderThree"});
        person1Group.Add (new OrderModel() { orderName = "   OrderFour"});

        person2Group.Add (new OrderModel() { orderName = "   OrderOne"});
        person2Group.Add (new OrderModel() { orderName = "   OrderTwo"});
        person2Group.Add (new OrderModel() { orderName = "   OrderThree"});

        grouped.Add (person1Group);
        grouped.Add (person2Group);

        //Person3 without OrderModel
        grouped.Add(person3Group);

        lstView.ItemsSource = grouped;
    }
}
  

В XAML используйте ListView.GroupHeaderTemplate для настройки заголовка группы:

 <ContentPage.Content>
    <ListView x:Name ="lstView" IsGroupingEnabled="true" Footer="">

        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <StackLayout Orientation="Horizontal">
                        <Label Text="{Binding orderName}" VerticalOptions="Center"  HorizontalOptions="StartAndExpand"/>
                        <Button Text="remove   " HorizontalOptions="EndAndExpand" VerticalOptions="CenterAndExpand"/>
                    </StackLayout>
                </ViewCell>

            </DataTemplate>
        </ListView.ItemTemplate>


        <ListView.GroupHeaderTemplate>
            <DataTemplate>
                <ViewCell>
                    <StackLayout Orientation="Horizontal">
                        <Label Text="{Binding personName}" VerticalOptions="Center"  HorizontalOptions="StartAndExpand"/>
                        <Button Text="remove all   " TextColor="Red" HorizontalOptions="EndAndExpand" VerticalOptions="CenterAndExpand"/>
                    </StackLayout>
                </ViewCell>
            </DataTemplate>
        </ListView.GroupHeaderTemplate>

    </ListView>
</ContentPage.Content>
  

Давайте посмотрим на результат:

Сгруппированные списки

как я могу отобразить person3, если его список элементов пуст?

Проверьте dataSource код, и у Person3 его нет orderModel .

Комментарии:

1. Вот и все. Спасибо! 🙂