如何在 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 属性的值。

也就是说，如果 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>