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个按钮，绑定到相同的命令，切换一个布尔值，表示你的网格应该是否可见。

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

您的观点：

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

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

2 个答案: