如何在Xamarin Forms中展开和折叠ListView

Question

我是Xamarin Forms的新手，我明白有很多有用的控件。我正在寻找一个可以展开的控件来显示网格中的数据，如下例所示。

更新

型号：

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

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如上图中的那个？

Answer 1

在ListView中显示数据只需要在ViewCell中使用一个GridLayout。在GridLayout中采用两行高度为auto的行。在第一行显示标题和按钮，在第二行只添加该项目涉及的数据，并绑定一个不可见的属性到第二行。点击该向上箭头就会反转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> 

Answer 2

我在记事本中做过，所以没有测试过它。而且我通常不会做xaml。但是，这应该工作。我刚刚在网格顶部添加了2个按钮，绑定到切换布尔值的相同命令，以表示您的网格应该可见或不可见。

您的视图模型：

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

您的看法：

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