Xamarin.forms 如何在Xamarin表单中展开和折叠ListView

我是Xamarin表单的新手，我知道有很多有用的控件。我正在寻找一个控件，它可以扩展以在网格中显示数据，如下面的示例所示

更新

型号：

public class Phone
{
    public string mobile { get; set; }
    public string home { get; set; }
    public string office { get; set; }
}

public class Contact
{
    public string id { get; set; }
    public string name { get; set; }
    public string email { get; set; }
    public string address { get; set; }
    public string gender { get; set; }
    public Phone phone { get; set; }
}

public class ContactList
{
    public List<Contact> contacts { get; set; }
}

公共类电话
{
公共字符串mobile{get；set；}
公共字符串home{get；set；}
公共字符串办公室{get；set；}
}
公共类联系人
{
公共字符串id{get；set；}
公共字符串名称{get；set；}
公共字符串电子邮件{get；set；}
公共字符串地址{get；set；}
公共字符串{get；set；}
公用电话{get；set；}
}
公共类联系人列表
{
公共列表联系人{get；set；}
}

XAML：

<Grid>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Label Grid.Row="0" Margin="10" Text="Display Json Data" FontSize="25" />
        <ListView x:Name="listviewConacts" Grid.Row="1" HorizontalOptions="FillAndExpand" HasUnevenRows="True" ItemSelected="listviewContacts_ItemSelected">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid HorizontalOptions="FillAndExpand" Padding="10">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <Label Text="{Binding name}" HorizontalOptions="StartAndExpand" Grid.Row="0" TextColor="Blue"  FontAttributes="Bold"/>
                            <Label Text="{Binding email}" HorizontalOptions="StartAndExpand" Grid.Row="1" TextColor="Orange"  FontAttributes="Bold"/>
                            <Label Text="{Binding phone.mobile}" HorizontalOptions="StartAndExpand" Grid.Row="2" TextColor="Gray"  FontAttributes="Bold"/>
                            <BoxView HeightRequest="2" Margin="0,10,10,0" BackgroundColor="Gray" Grid.Row="3" HorizontalOptions="FillAndExpand" />
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
    <ActivityIndicator x:Name="ProgressLoader" IsRunning="True"/>
</Grid>

---

基于上面的模型和XAML，如何实现可扩展和可折叠的

ListView

，如上图所示？

在ListView中显示数据，只需在ViewCell中使用一个GridLayout即可。在GridLayout中使用“高度自动”设置两行。在第一行中，显示标题和按钮，在第二行中，只需添加项目relatesd数据并将一个isvisible属性绑定到第二行。单击向上箭头，只需反转isvisible属性的值

也就是说，如果isvisible属性为true，那么它将显示2行，如果isvisible属性为false，那么它将只显示该标题

<ListView.ItemTemplate>
  <DataTemplate>
            <ViewCell>
      <Grid>
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />           
      </Grid.RowDefinitions>
      <Grid.ColumnDefinitions>
          <ColumnDefinition Width="*"/>
          <ColumnDefinition Width="40"/>
        </Grid.ColumnDefinitions>
                <Label Text="{Binding HeaderText}" Grid.Row="0" 
                       Grid.Column="0" />
                <Button Text="Show"  Grid.Row="0" Grid.Column="1" 
                        Clicked="LableVisibleButton"/>
                <Label
                   Grid.Row="1" Grid.Grid.ColumnSpan="2"
                   FormattedText="{Binding FormattedText}" IsVisible="
                   {Binding LabelVisible}"/>
            </ViewCell>

---

我在记事本上做过，所以没有测试过。此外，我通常不做xaml。然而，这应该是可行的。我刚刚在网格顶部添加了两个按钮，绑定到同一个命令，该命令切换布尔值，以表示网格是否应可见

您的ViewModel：

namespace XamlSamples.Models
{
    public class Phone
    {
        public string mobile { get; set; }
        public string home { get; set; }
        public string office { get; set; }
    }

    public class Contact
    {
        public string id { get; set; }
        public string name { get; set; }
        public string email { get; set; }
        public string address { get; set; }
        public string gender { get; set; }
        public Phone phone { get; set; }
        public bool IsCollapsed { get; private set; }
        public ICommand ToggleCollapseCommand { get; }

        public Contact() => ToggleCollapseCommand = new Command(_ => IsCollapsed = !IsCollapsed);
    }

    public class ContactList
    {
        public List<Contact> contacts { get; set; }
    }

    public class InvertBoolConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture) => !(bool)value;

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) => !(bool)value;
    }
}

名称空间XamlSamples.Models
{
公用电话
{
公共字符串mobile{get；set；}
公共字符串home{get；set；}
公共字符串办公室{get；set；}
}
公共类联系人
{
公共字符串id{get；set；}
公共字符串名称{get；set；}
公共字符串电子邮件{get；set；}
公共字符串地址{get；set；}
公共字符串{get；set；}
公用电话{get；set；}
公共集合{get；私有集合；}
public ICommand ToggleCollapseCommand{get；}
public Contact（）=>ToggleCollapseCommand=new命令（=>IsCollapsed=！IsCollapsed）；
}
公共类联系人列表
{
公共列表联系人{get；set；}
}
公共类InvertBoolConverter:IValueConverter
{
公共对象转换（对象值、类型targetType、对象参数、CultureInfo区域性）=>！（bool）值；
公共对象ConvertBack（对象值、类型targetType、对象参数、CultureInfo区域性）=>！（bool）值；
}
}

你的看法：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:models="clr-namespace:XamlSamples.Models;assembly=XamlSamples"
         x:Class="XamlSamples.CollapsableListView">
<ContentPage.Resources>
    <ResourceDictionary>
        <models:InvertBoolConverter x:Key="invertBoolConverter" />
    </ResourceDictionary>
</ContentPage.Resources>
<Grid>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Label Grid.Row="0" Margin="10" Text="Display Json Data" FontSize="25" />
        <ListView x:Name="listviewConacts" Grid.Row="1" HorizontalOptions="FillAndExpand" HasUnevenRows="True" ItemSelected="listviewContacts_ItemSelected">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout Orientation="Vertical">
                            <Button Text="Tap to Uncollapse" Command="{Binding ToggleCollapseCommand}" IsVisible="{Binding IsCollapsed}"/>
                            <Button Text="Tap to Collapse" Command="{Binding ToggleCollapseCommand}" IsVisible="{Binding IsCollapsed, Converter={StaticResource invertBoolConverter}}"/>
                            <Grid HorizontalOptions="FillAndExpand" Padding="10" IsVisible="{Binding IsCollapsed, Converter={StaticResource invertBoolConverter}}">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <Label Text="{Binding name}" HorizontalOptions="StartAndExpand" Grid.Row="0" TextColor="Blue"  FontAttributes="Bold"/>
                                <Label Text="{Binding email}" HorizontalOptions="StartAndExpand" Grid.Row="1" TextColor="Orange"  FontAttributes="Bold"/>
                                <Label Text="{Binding phone.mobile}" HorizontalOptions="StartAndExpand" Grid.Row="2" TextColor="Gray"  FontAttributes="Bold"/>
                                <BoxView HeightRequest="2" Margin="0,10,10,0" BackgroundColor="Gray" Grid.Row="3" HorizontalOptions="FillAndExpand" />
                            </Grid>
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
    <ActivityIndicator x:Name="ProgressLoader" IsRunning="True"/>
</Grid>

---

默认情况下没有，但从外观上看，您正在寻找手风琴控件或