Xamarin.Forms ListView 大小到内容答案

【问题标题】：Xamarin.Forms ListView size to contentXamarin.Forms ListView 大小到内容
【发布时间】：2020-02-08 06:14:11
【问题描述】：

我有一个相当大的表单（主要适用于平板电脑），它有一个嵌套两个堆栈布局和列表视图的 GridView

我有一个 ListView 包含几个单行项目的情况很少发生，我需要它调整大小以适应内容。

这是我的源代码

<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>

这是我的代码。

        OrderPricingDetailsListRow.Height = 280;

        OfferList.ItemsSource = connectionsNames;

        int i = connectionsNames.Count;
        int heightRowList = 90;
        i = (i * heightRowList);
        OfferList.HeightRequest = i;

My Project image

我只是想消除列表视图和堆栈布局之间的差距

【问题讨论】：

标签： c# xaml xamarin xamarin.forms

【解决方案1】：

您可以在 listview 属性上添加 HasUnevenRows="True" 而不是 rowheight，这将像HeightRequest="-1" 一样工作，ListItem 将具有填充内容所需的确切高度。

【讨论】：

【解决方案2】：

只需在 stacklayout 中设置Spacing="0" 如果你想删除网格子元素之间的间距，设置ColumnSpacing="0"和RowSpacing="0"

【讨论】：

【解决方案3】：

而不是使用 ListView 控件。只需使用 Stacklayout 并向其添加 BindableLayout 即可。它基本上将 Stacklayout 变成了 ListView 但没有滚动。

<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>

或者你也可以用 C# 代码来做，因为我注意到你没有绑定你的 ListView

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

这里有一篇关于此功能的不错的博客。 https://devblogs.microsoft.com/xamarin/xamarin-forms-3-5-a-little-bindable-love/

【讨论】：