Xamarin表单到内容的ListView大小(高度)?

问题描述 投票:0回答:2

我正在开发移动应用程序,我想在SrollView中放置一个Grid,在其下方放置一个具有其元素高度的ListView,在ListView之下放置另一个具有相同高度的ListView。我在StackLayout中放置了两个Listviews。它应该看起来像这样This is content that should scroll in ScrollView

但是使用此实现(下面的代码),第一个ListView占据了整个剩余高度,第二个Listview距离它很远there is listview height at the full remaining size

而且滚动后我的第二个Listview很远,在这里It also occupies the entire height of the scrollview

这里是代码:

 <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 size to content?

Xamarin.Forms - ListView change height at runtime

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

Xamarin.Forms: ListView inside StackLayout: How to set height?

c# android listview xamarin.forms height
2个回答
0
投票

第一个ListView占据整个剩余高度

对我来说,它似乎是页脚的问题,它在listview中占用了额外的空间。您能只把Empty listview页脚放进去看看是否可行:

<ListView.Footer>
    <Label />
</ListView.Header>

0
投票

为什么要使用两个列表视图来执行此操作,您可以仅使用不同的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}" 
 />

有关更多详细信息,您可以检查:

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/templates/data-templates/selector

Besides,您也可以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/

© www.soinside.com 2019 - 2024. All rights reserved.