How do you set a ListView to have a dynamic height?

We have a ListViewand a similar issue as on this thread: https://forums.xamarin.com/discussion/comment/66248

We want our ListView to expand upon adding new rows (or get smaller as we remove rows). Especially since one of its parent is a ScrollView which totally disables the scrolling of any of its children.

Here's what we tried:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:Klaim;assembly=Klaim"
             x:Class="Klaim.ClaimAddPage"
             BackgroundColor="#ffffff"
             Title="Soumettre une réclamation">

             <ContentPage.Padding>
                <OnPlatform x:TypeArguments="Thickness"
                            iOS="10, 20, 10, 10"
                            Android="10, 10, 10, 10"
                            WinPhone="10, 10, 10, 10" />
            </ContentPage.Padding>

    <ContentPage.Content>
        <ScrollView>
            <StackLayout HorizontalOptions="Center">
                <Label Text="Un agent vérifiera votre entrée dans un délai de 3 à 5 jours ouvrables." />
                <Picker x:Name="pckCategory"
                    Title="Catégorie" />
                <!--Entry x:Name="edtClaimCategory"
                       Placeholder="Catégorie" /-->
                <Entry x:Name="edtClaimProvider"
                       Placeholder="Nom complet du fournisseur"/>
                <Grid HorizontalOptions="FillAndExpand" HeightRequest="50" Padding="0, 0, 0, 0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"></RowDefinition>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"></ColumnDefinition>
                        <ColumnDefinition Width="*"></ColumnDefinition>
                    </Grid.ColumnDefinitions>

                    <local:ButtonView Grid.Row="0"
                                      Grid.Column="0"
                                      x:Name="btnTakePhoto"
                                      Text="Prendre photo"
                                      Image="ic_image_camera_alt.png"
                                      Clicked="btnTakePhotoClicked" />
                    <local:ButtonView Grid.Row="0"
                                      Grid.Column="1"
                                      x:Name="btnBrowse"
                                      Text="Parcourir"
                                      Image="ic_editor_attach_file.png"
                                      Clicked="btnBrowseClicked" />
                </Grid>
                <StackLayout VerticalOptions="FillAndExpand"
                             Orientation="Vertical">
                    <ListView x:Name="ClaimAddListView"
                              BackgroundColor="Transparent"
                              RowHeight="128">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <ViewCell>
                                    <StackLayout Orientation="Horizontal"
                                                 HorizontalOptions="FillAndExpand">
                                        <StackLayout Orientation="Vertical" VerticalOptions="Fill">
                                            <Image Source="logo_icon.png"
                                                   WidthRequest="128"
                                                   HeightRequest="128" />
                                        </StackLayout>
                                        <local:ButtonView HorizontalOptions="EndAndExpand"
                                                          VerticalOptions="Center"
                                                          x:Name="btnDeleteRow"
                                                          Image="ic_navigation_cancel.png"
                                                          Clicked="btnDeleteRowClicked"
                                                          CommandParameter="{Binding .}" />
                                    </StackLayout>
                                </ViewCell>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </StackLayout>
                <!--Image x:Name="TargetImage"
                       HorizontalOptions="Center" /-->
                <Label Text="En cliquant Envoyer, vous acceptez les termes et conditions" />
                <local:ButtonView x:Name="btnSend"
                            Clicked="btnSendClicked"
                            Text="Envoyer"
                            Image="ic_content_send.png" />
                <ActivityIndicator x:Name="actIndicator" />
            </StackLayout>
        </ScrollView>
    </ContentPage.Content>
</ContentPage>

We also tried without the StackLayout that contains the ListView, it gives the same behaviour.

The funny part is that when you rotate the fun to landscape and back, it resizes perfectly. It draws the ListView and considers what's inside.

Is the right approach to force the App to redraw the ListView after adding/removing elements? Or there is a XAML property combo that automatically reproduces this behaviour?

Best Answer

Answers

  • VincentPoirierVincentPoirier CAMember ✭✭

    That makes sense! I guess that if I look at it from the opposite side, it's ironic that it "fixes" itself after a rotation. It probably would be an unwanted behaviour.

    I'll try to see what replacing it by a StackLayout would involve or give it a fixed height and remove the ScrollView.

    Thanks again Adam!

Sign In or Register to comment.