Articles in this section
Category / Section

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

1 min read

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)
Please  to leave a comment
Access denied
Access denied