Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 479
walyzfan1 Avatar asked Jun 23 '17 18:06

walyzfan1


3 Answers

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>
like image 91
Jesus Angulo Avatar answered Nov 19 '22 14:11

Jesus Angulo


Set only ListView property HasUnevenRows="True"

like image 29
Chetan Rawat Avatar answered Nov 19 '22 13:11

Chetan Rawat


When you use Syncfusion Listview than

AutoFitMode="DynamicHeight"  VerticalOptions="FillAndExpand"

Properties works fine.

like image 1
nzrytmn Avatar answered Nov 19 '22 15:11

nzrytmn