c# - Xamarin 将 ListView 大小（高度）转换为内容？

问题描述

我正在开发一个移动应用程序，我想在 SrollView 中放置一个 Grid，在其下方放置一个具有其元素高度的 ListView，在 ListView 下方放置另一个具有相同高度的 ListView。我在 StackLayout 中放了两个 Listview。它应该看起来像这样这是应该在 ScrollView 中滚动的内容

但是有了这个实现（下面的代码），第一个 ListView 占据了整个剩余高度，而第二个 ListView 离它很远

而我的第二个滚动后的Listview很远，这里也占据了整个滚动视图的高度

这是代码：

 <ScrollView>
                <Grid RowSpacing="2">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="130"/>
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>

                    <Grid x:Name="RecommendedCaloriesGrid" Grid.Row="0"  RowSpacing="2" ColumnSpacing="1"
                          BackgroundColor="Violet" Margin="3">


                        // here is code of my Grid 1
                        </Grid>
                    </Grid>

                    <StackLayout Grid.Row="1"> // here I want to make a listview under Each other
                        <ListView x:Name="ItemsListView" BackgroundColor="red"
                                ItemsSource="{Binding Items}"
                                HasUnevenRows="true"
                                RefreshCommand="{Binding LoadItemsCommand}"
                                IsPullToRefreshEnabled="true"
                                IsRefreshing="{Binding IsBusy, Mode=OneWay}"
                                CachingStrategy="RecycleElement"
                                ItemSelected="OnItemSelected">
                            <d:ListView.ItemsSource>
                                <x:Array Type="{x:Type x:String}">
                                    <x:String>First Item</x:String>
                                    <x:String>Second Item</x:String>
                                </x:Array>
                            </d:ListView.ItemsSource>
                            <ListView.Header>
                                <StackLayout Margin="5" Spacing="2">
                                    <StackLayout Orientation="Horizontal">
                                        <Label Text="Завтрак" HorizontalOptions="StartAndExpand"
                                                   FontSize="Large" FontAttributes="Bold"/>
                                        <Label Text="744 ккал" HorizontalOptions="EndAndExpand"
                                                   FontSize="Large" FontAttributes="Bold"/>
                                    </StackLayout>
                                    <Label Text="Рекомендуется 30% от суточного потребления (n ккал)." FontSize="11"/>
                                </StackLayout>
                            </ListView.Header>
                            <ListView.ItemTemplate>
                                <DataTemplate>
                                    <ViewCell>
                                        <StackLayout Padding="10">
                                            <Label Text="{Binding Text}" 
                            d:Text="{Binding .}"
                            LineBreakMode="NoWrap" 
                            Style="{DynamicResource ListItemTextStyle}" 
                            FontSize="16" />
                                            <Label Text="{Binding Description}" 
                            d:Text="Item descripton"
                            LineBreakMode="NoWrap"
                            Style="{DynamicResource ListItemDetailTextStyle}"
                            FontSize="13" />
                                        </StackLayout>
                                    </ViewCell>
                                </DataTemplate>
                            </ListView.ItemTemplate>
                        </ListView>
                        <ListView x:Name="LunchListView"           // second  ListView under first
                                ItemsSource="{Binding Items}"
                                HasUnevenRows="true"
                                RefreshCommand="{Binding LoadItemsCommand}"
                                IsPullToRefreshEnabled="true"
                                IsRefreshing="{Binding IsBusy, Mode=OneWay}"
                                CachingStrategy="RecycleElement"
                                ItemSelected="OnItemSelected">
                            <d:ListView.ItemsSource>
                                <x:Array Type="{x:Type x:String}">
                                    <x:String>First Item</x:String>
                                    <x:String>Second Item</x:String>
                                    <x:String>Third Item</x:String>
                                    <x:String>Forth Item</x:String>
                                </x:Array>
                            </d:ListView.ItemsSource>
                            // SAME logic here

                            </ListView.ItemTemplate>
                        </ListView>
                    </StackLayout>

                </Grid>
            </ScrollView>

我该如何解决？

请帮我找到解决方案。我阅读了很多类似下面的文章，但没有找到答案。我想在不计算代码隐藏高度的情况下做到这一点：

Xamarin.Forms ListView 大小到内容？

Xamarin.Forms - ListView 在运行时更改高度

https://forums.xamarin.com/discussion/comment/66248

Xamarin.Forms：StackLayout 内的 ListView：如何设置高度？

标签： c#androidlistviewxamarin.formsheight

解决方案

为什么要用两个listview来做这个，你可以用不同DataTemplate的来实现这个功能。

您可以参考以下代码：

1.在 XAML 中使用 DataTemplateSelector

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr- 
namespace:Selector;assembly=Selector" x:Class="Selector.HomePage">
  <ContentPage.Resources>
    <ResourceDictionary>
        <DataTemplate x:Key="validPersonTemplate">
            <ViewCell>
               ...
            </ViewCell>
        </DataTemplate>
        <DataTemplate x:Key="invalidPersonTemplate">
            <ViewCell>
               ...
            </ViewCell>
        </DataTemplate>
        <local:PersonDataTemplateSelector x:Key="personDataTemplateSelector"
            ValidTemplate="{StaticResource validPersonTemplate}"
            InvalidTemplate="{StaticResource invalidPersonTemplate}" />
    </ResourceDictionary>
</ContentPage.Resources>
 ...
</ContentPage>

2.这样使用：

<ListView x:Name="listView"  ItemTemplate="{StaticResource personDataTemplateSelector}" 
 />

此外，您还可以try ListView Grouping，了解更多详情：

https://docs.microsoft.com/en-ie/xamarin/xamarin-forms/user-interface/listview/

https://docs.microsoft.com/en-us/samples/xamarin/xamarin-forms-samples/userinterface-listview-grouping/

c# - Xamarin 将 ListView 大小（高度）转换为内容？

问题描述

解决方案

推荐阅读