How to update the rowheight of a clicked row in a listview in Xamarin forms?

Question

This is my current listview XAML that works and i successfully fill my listview with data. I try to adjust the rowheight of a unique cell by both making an item in a stacklayout visible/not visible, but also by adjusting the heightrequest of both the stacklayout and grid.

    <ContentPage.Resources>
    <ResourceDictionary>
        <DataTemplate
            x:Key="ClassTemplate">
            <ViewCell> <!-- I've tried to bind viewchells height (Height = "{Binding RowHeight}") but its not allowed to bind it -->

                <StackLayout HeightRequest = "{Binding RowHeight}" HorizontalOptions = "FillAndExpand" VerticalOptions = "FillAndExpand">

                <Button   HeightRequest = "10" />
                <Button  IsVisible = "{Binding ExpandedRowVisibility}" HeightRequest = "300" />

                <Grid VerticalOptions="Fill" HeightRequest = "{Binding RowHeight}">
                    <Grid.GestureRecognizers>
                        <TapGestureRecognizer
                            Command="{Binding OpenRowDetails}"
                            CommandParameter="{Binding .}"
                            NumberOfTapsRequired="1" />
                    </Grid.GestureRecognizers>
                </Grid>

                </StackLayout>

            </ViewCell>
        </DataTemplate>
    </ResourceDictionary>
</ContentPage.Resources>


<ListView
ItemsSource="{Binding List}"
HasUnevenRows="true"
Header="{Binding ShowHeaderObject}"
ItemTemplate="{StaticResource ClassTemplate}">

<ListView.HeaderTemplate>
   <DataTemplate>
      <StackLayout>
          <Label
          Text="{Binding .}"
          HorizontalTextAlignment="Center"
          TextColor="White" />
       </StackLayout>
     </DataTemplate>
  </ListView.HeaderTemplate>

  </ListView>

When I click a row in the list I update my RowHeight value that is binded to the Stacklayout, grid and button (i've tried all three, alone and together) but the row i click on does not update.

    private string Height = "140";
    public string RowHeight
    {
        get { return Height; }
        set
        {

    private bool ExpandRow;

    public bool ExpandedRowVisibility
    {
        get { return ExpandRow; }
        set
        {
            this.ExpandRow = value;
            OnPropertyChanged("ExpandedRowVisibility");
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    public void OnPropertyChanged([CallerMemberName]string propertyName = null)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }

public ICommand OpenRowDetails
    {
        get
        {
            return new Command(e =>
            {

                var Item = (ClassItemViewModel)e;
                Item.RowHeight = "280";
                Item.ExpandedRowVisibility = true;
            });
        }
    }

How can i update my code so that the row that was clicked will adjust its rowheight but the others stays the same?

Fahadsk Fahadsk · Accepted Answer · 2018-04-03T05:35:14

Try this

 <ListView x:Name="listView" HasUnevenRows="true">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <StackLayout HorizontalOptions = "FillAndExpand"  VerticalOptions = "FillAndExpand">
                        <StackLayout.GestureRecognizers>
                            <TapGestureRecognizer Tapped="OnItemTapped" NumberOfTapsRequired="1">
                           </StackLayout.GestureRecognizers>
                    </StackLayout>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

And in your tap event method change the height of the layout and update cell

void OnItemTapped(object sender, EventArgs args)
{
    var layout = sender as StackLayout;
    var viewCell = layout.Parent as ViewCell;
    layout.HeightRequest = layout.Height + 100;
    viewCell.ForceUpdateSize ();
}

How to update the rowheight of a clicked row in a listview in Xamarin forms?

1 Answers