CODEWITHSUNDEEP
c#listviewaccordionxamarin.forms
Atul Dhanuka
Atul Dhanuka

Reputation: 1463

How to create an accordion in Xamarin.Forms ListView

How can I create an accordion in a ListView with data binding? I am creating this app with Xamarin.Forms.

This is what I have so far:

<ListView x:Name="List" HasUnevenRows="True" >
  <ListView.ItemTemplate>
    <DataTemplate>
      <ViewCell>
        <ViewCell.View>
          <Grid Padding="10,10,10,10">
            <Grid.RowDefinitions>
              <RowDefinition Height="Auto"></RowDefinition>
              <RowDefinition Height="Auto"></RowDefinition>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="*" />
              <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Label Text="ABC:-" FontSize="20" TextColor="Black" Grid.Column="0" Grid.Row ="0"/>
            <Label Text="{Binding ABC}" FontSize="20" TextColor="Black" Grid.Column="1" Grid.Row ="0" HorizontalOptions="EndAndExpand" VerticalOptions="FillAndExpand"/>
            <Label Text="XYZ:-" FontSize="20" TextColor="Black" Grid.Column="0" Grid.Row ="1"/>
            <Label Text="{Binding XYZ}" FontSize="20" TextColor="Black" Grid.Column="1" Grid.Row ="1" HorizontalOptions="EndAndExpand" VerticalOptions="FillAndExpand"/>
           </Grid>
        </ViewCell.View>
      </ViewCell>
    </DataTemplate>
  </ListView.ItemTemplate>
</ListView>

Upvotes: 3

Views: 10750

Answers (1)

hvaughan3
hvaughan3

Reputation: 11105

You may want to check out the thread below which lists a few options for this. Our accordion view was not within a ListView but we basically just used WidthRequest and a little animation to make various WebViews expand and collapse.

https://forums.xamarin.com/discussion/33975/how-to-implement-expandable-collapsible-listview-in-xamarin-forms

Upvotes: 0

Related Questions