Articles in this section
Category / Section

How to change the height of Xamarin.Forms listview based on size of an items?

ListView allows you to change its height based on the size of an item added at runtime by setting the AutoFitMode property to DynamicHeight.

Xaml

 
<ContentPage xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms" >
    <ContentPage.Content>
<Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="50"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Button Text="Add item" Clicked="Button_Clicked"/>
            <syncfusion:SfListView x:Name="listView" BackgroundColor="Azure" AutoFitMode="DynamicHeight"
                                   ItemSpacing="3" ItemSize="70" ItemsSource="{Binding contactsinfo}" Grid.Row="1">
                <syncfusion:SfListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <ViewCell.View>
                               <Grid>   
                                  <Image Source="{Binding ContactImage}"/>
                                  <Label Text="{Binding ContactName}"/>                             
                                  <Label Text="{Binding ContactNumber}" />                                         
                                </Grid>
                            </ViewCell.View>
                        </ViewCell>
                    </DataTemplate>
                </syncfusion:SfListView.ItemTemplate>                
            </syncfusion:SfListView>
        </Grid>
    </ContentPage.Content>
</ContentPage>
 

C#

 
using Syncfusion.ListView.XForms.Control.Helpers;
 
private void Button_Clicked(object sender, EventArgs e)
{
      Random r=new Random();
      var contact = new Contacts();
      contact.ContactName = "Irene";
      contact.ContactNumber = "123-456";
      contact.ContactImage = ImageSource.FromResource("SfListViewSample.Images.Image" + r.Next(0, 28) + ".png");
       viewModel.contactsinfo.Add(contact);
}
 

Sample Link : ListviewSample

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Access denied
Access denied