CODEWITHSUNDEEP
c#iosvisual-studioxamlxamarin
walyzfan1
walyzfan1

Reputation: 127

How to autosize the height of a list view in XAML

My list view object receives an image, an ID number and a synopsis. The synopsis varies in size because some have whitespace returns. I notice that ListView has a row height that I can set (which I have set at 250 right now), but it can only be a fixed value. So what happens, is my grid becomes too big height wise for the ListView, causing it to overflow and overlay onto the next listed item. Is there anyway to auto size the list view in XAML?

<ListView ItemsSource="{Binding List}" VerticalOptions="FillAndExpand" RowHeight="250" SelectedItem="SelectedCTR" SeparatorVisibility="None">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <Image Grid.Row="0" HeightRequest="100" MinimumWidthRequest="160" WidthRequest="160" Source="{Binding AttachedmentData,Converter={StaticResource stringToImage}}" />
                    <StackLayout Grid.Row="1" VerticalOptions="FillAndExpand">
                        <Label Text="{Binding Number}" Font="19"
                             TextColor="#f35e20" />
                        <Label Text="{Binding TrimmedSynopsis}" Font="17"
                             TextColor="#503026" />
                    </StackLayout>
                </Grid>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Upvotes: 10

Views: 19973

Answers (3)

Chetan Rawat
Chetan Rawat

Reputation: 588

Set only ListView property HasUnevenRows="True"

Upvotes: 5

nzrytmn
nzrytmn

Reputation: 6981

When you use Syncfusion Listview than 

AutoFitMode="DynamicHeight"  VerticalOptions="FillAndExpand"

Properties works fine.

Upvotes: 2

Jesus Angulo
Jesus Angulo

Reputation: 2666

You need to add HasUnevenRows to True and let unset the RowHeight property.

<ListView ItemsSource="{Binding List}" VerticalOptions="FillAndExpand" HasUnevenRows="True" SelectedItem="SelectedCTR" SeparatorVisibility="None">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <Image Grid.Row="0" HeightRequest="100" MinimumWidthRequest="160" WidthRequest="160" Source="{Binding AttachedmentData,Converter={StaticResource stringToImage}}" />
                    <StackLayout Grid.Row="1" VerticalOptions="FillAndExpand">
                        <Label Text="{Binding Number}" Font="19"
                             TextColor="#f35e20" />
                        <Label Text="{Binding TrimmedSynopsis}" Font="17"
                             TextColor="#503026" />
                    </StackLayout>
                </Grid>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Upvotes: 20

Related Questions