Xamarinフォームで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に基づいて、どのように私は、展開や縮小が可能なを達成することができます012上記の画像のような？

Answer 1

In ListViewでは、ViewCellで1つのGridLayoutを取ります。 GridLayoutで高さautoで2行を取得します。最初の行のヘッダーとボタンを表示し、2行目にその項目の関連データを追加し、isvisibleプロパティーをその2行目にバインドします。その上向きの矢印をクリックするだけで、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>