Xamarin.Forms ListView size to content

c#, xamarin, xamarin.forms, xaml

Solution

Instead of using a ListView control. Just use a Stacklayout and add a BindableLayout to it. It basically turns the Stacklayout into a ListView but without the scrolling.

<StackLayout x:Name="OfferList" BindableLayout.ItemsSource="{Binding ConnectionNames}">
    <BindableLayout.ItemTemplate>
        <DataTemplate>
            <Frame CornerRadius="5" OutlineColor="#c3c3c3" Padding="5,10,5,5" Margin="0,10,0,0" BackgroundColor="Transparent">
                <StackLayout Orientation="Horizontal" Padding="5" BackgroundColor="Transparent" VerticalOptions="Center" >
                    <FlexLayout JustifyContent="SpaceBetween" HorizontalOptions="FillAndExpand" Direction="Row" AlignItems="Center" x:Name="SelectedConnectionfeeSection">
                        <StackLayout Orientation="Horizontal">
                            <Label Text="{Binding DisplayName}" FontSize="Medium" />
                        </StackLayout>
                        <Label Text="{Binding Amount}" x:Name="selectedConnectionfee" TextColor="#757575" FontAttributes="Bold" FontSize="Small" Margin="0,0,20,0" />
                    </FlexLayout>

                </StackLayout>
            </Frame>
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</StackLayout>

Or you can do it in C# code too since I noticed you are not binding your ListView

DataTemplate useItemTemplate = null;
BindableLayout.SetItemTemplate(usersPanel, userItemTemplate);

There is a pretty good blog on this feature here. https://devblogs.microsoft.com/xamarin/xamarin-forms-3-5-a-little-bindable-love/

Problem

I have a pretty large form (adapted mainly for tablets), that has a GridView nesting a two stacklayouts and listview I have few occurrences where I have a ListView that contains a few single-line items, and I need it to size to content. So this is my source code for this ``` <Grid Grid.Row="2" Grid.ColumnSpan="2" HorizontalOptions="FillAndExpand" x:Name="OrderPricingDetails"> <Grid.RowDefinitions> <RowDefinition Height="90"/> <RowDefinition Height="auto" x:Name="OrderPricingDetailsListRow"/> <RowDefinition Height="90"/> </Grid.RowDefinitions> <StackLayout Grid.Row="0" Orientation="Vertical" Margin="10" Padding="10" x:Name="PackageSelectionSection" > <Label Text="Order Pricing" FontAttributes="Bold" TextColor="Black" /> <Label Text="Listing details for this specific order" FontSize="Small" TextColor="#757575" /> <Frame CornerRadius="5" BackgroundColor="Transparent" HeightRequest="270" BorderColor="#c3c3c3" Padding="10,10,5,10" Margin="0,20,0,0"> <StackLayout> <FlexLayout JustifyContent="SpaceBetween" HorizontalOptions="FillAndExpand" Direction="Row" AlignItems="Center" x:Name="SelectedPackageSection"> <StackLayout Orientation="Horizontal"> <Label Text="Selected Package " FontSize="Medium" /> </StackLayout> <Label Text="ALA_CARTE_300" x:Name="selectedOfrferDesc" TextColor="#757575" FontAttributes="Bold" FontSize="Small" Grid.Column="1" Grid.ColumnSpan="2"/> <Label Text="for" FontSize="Medium" /> <Label Text="LCD" x:Name="selectedOfferPrice" TextColor="#757575" FontAttributes="Bold" FontSize="Small" Margin="0,0,20,0" /> </FlexLayout> </StackLayout> </Frame> </StackLayout> <StackLayout Grid.Row="1" Orientation="Vertical" Margin="10" Padding="10" x:Name="ConnectionfeeSection" HorizontalOptions="FillAndExpand"> <ListView x:Name="OfferList" HasUnevenRows="True" VerticalOptions="Center" Margin="0,10,0,0" SelectionMode="None"> <ListView.ItemTemplate> <DataTemplate> <ViewCell> <Frame CornerRadius="5" OutlineColor="#c3c3c3" Padding="5,10,5,5" Margin="0,10,0,0" BackgroundColor="Transparent"> <StackLayout Orientation="Horizontal" Padding="5" BackgroundColor="Transparent" VerticalOptions="Center" > <FlexLayout JustifyContent="SpaceBetween" HorizontalOptions="FillAndExpand" Direction="Row" AlignItems="Center" x:Name="SelectedConnectionfeeSection"> <StackLayout Orientation="Horizontal"> <Label Text="{Binding DisplayName}" FontSize="Medium" /> </StackLayout> <Label Text="{Binding Amount}" x:Name="selectedConnectionfee" TextColor="#757575" FontAttributes="Bold" FontSize="Small" Margin="0,0,20,0" /> </FlexLayout> </StackLayout> </Frame> </ViewCell> </DataTemplate> </ListView.ItemTemplate> </ListView> </StackLayout> <StackLayout Grid.Row="2" Orientation="Vertical" Margin="10" Padding="10" x:Name="ConnectionTotalSection" > <Frame CornerRadius="5" BackgroundColor="Transparent" BorderColor="#c3c3c3" Padding="20,10,5,10" Margin="0,10,0,0"> <StackLayout> <FlexLayout JustifyContent="SpaceBetween" HorizontalOptions="FillAndExpand" Direction="Row" AlignItems="Center" x:Name="SelectedConnectionTotalSection"> <StackLayout Orientation="Horizontal"> <Label Text="Total " FontSize="Medium" /> </StackLayout> <Label Text="{Binding Total, StringFormat='{0:N}'}" x:Name="selectedConnectionTotal" TextColor="#757575" FontAttributes="Bold" FontSize="Small" Margin="0,0,20,0" /> </FlexLayout> </StackLayout> </Frame> </StackLayout> </Grid> ``` And this is my code behind. ``` OrderPricingDetailsListRow.Height = 280; OfferList.ItemsSource = connectionsNames; int i = connectionsNames.Count; int heightRowList = 90; i = (i * heightRowList); OfferList.HeightRequest = i; ``` My Project image Simply I want to remove that gap between listview and stack layout

Original source