Xamarin ListView在滚动视图中时未显示完整项目

时间:2019-02-18 23:13:45

标签: listview xamarin.forms xamarin.android scrollview

我的xaml布局如下所示:

<ContentPage.Content>
<ScrollView>
    <StackLayout Padding="3">
        <Label x:Name="Totalhours" Text="{Binding THours}" TextColor="Black" HorizontalOptions="CenterAndExpand" VerticalOptions="Center" FontSize="Large" />
        <microcharts:ChartView Margin="0,10,0,4" x:Name="chartView" HeightRequest="200" Chart="{Binding Chart}"  />
        <ListView x:Name="lvActivities" ItemsSource="{Binding LaborMiscTimeList}" ItemTapped="lvActivities_ItemTapped" CachingStrategy="RecycleElement" IsGroupingEnabled="True" SeparatorVisibility="None" HasUnevenRows="True">
            <ListView.GroupHeaderTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid Margin="8,8,2,8">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"></ColumnDefinition>
                                <ColumnDefinition Width="80"></ColumnDefinition>
                            </Grid.ColumnDefinitions>
                            <Label Text="{Binding Key}" FontSize="Large" TextColor="Black" Grid.Column="0"/>
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.GroupHeaderTemplate>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <cardView:CardView
            BackgroundColor="White"
            CardViewHasShadow="True"
            HeightRequest="145">
                            <cardView:CardView.CardViewContent>
                                <Grid Padding="1">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="*"></RowDefinition>
                                        <RowDefinition Height="*"></RowDefinition>
                                        <RowDefinition Height="Auto"></RowDefinition>
                                        <RowDefinition Height="Auto"></RowDefinition>
                                    </Grid.RowDefinitions>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="30"></ColumnDefinition>
                                        <ColumnDefinition Width="2*"></ColumnDefinition>
                                        <ColumnDefinition Width="5*"></ColumnDefinition>
                                    </Grid.ColumnDefinitions>
                                    <Image Source="{Binding WorkCodeImage}" Grid.Row ="0" Grid.Column="0" HorizontalOptions="FillAndExpand"  Aspect="AspectFit"/>
                                    <Label  Text="{Binding WorkDescription}" Grid.Row="0" Grid.Column="1" FontSize="20" VerticalOptions="Center"></Label>
                                    <Label Text="{Binding StartEndTime}" Grid.Row="1" Grid.Column="1"  TextColor="Black" FontSize="15" VerticalOptions="StartAndExpand"></Label>
                                    <Label Text="{Binding TotalHours}" Margin="10,0,0,0" Grid.Row="0"  Grid.Column="2" Grid.RowSpan="2" HorizontalOptions="EndAndExpand"   TextColor="Black" VerticalOptions="Center"></Label>
                                    <Label Text ="Notes" Grid.Row="2" Grid.Column="1" VerticalOptions="Center"></Label>
                                    <local:EditorXF Text="{Binding Comments}" Focused="DriverNotes_Focused" Grid.Row="3" Grid.Column="1" Grid.ColumnSpan="2" x:Name="DriverNotes" 
                         FontSize="Small" TextColor="Black" VerticalOptions="FillAndExpand">
                                    </local:EditorXF>
                                </Grid>
                            </cardView:CardView.CardViewContent>
                        </cardView:CardView>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
            <ListView.Footer>
                <Label/>
            </ListView.Footer>
        </ListView>
    </StackLayout>
</ScrollView>
</ContentPage.Content>

我们看到包含listview init的stacklayout在滚动视图中。 当用户滚动它时,我要整个页面滚动,包括listview。 有了这段代码,我就能实现这一点,但是列表视图的最后4至5个项目没有显示(切除)。

有什么想法吗?

1 个答案:

答案 0 :(得分:1)

如果将listview放在scrollView中,那将是一个糟糕的设计。

解决方案:

首先,删除您的scollView

第二,将标签和图表添加到ListView.Header

<ContentPage.Content>

        <StackLayout Padding="3">

            <ListView x:Name="lvActivities" ItemsSource="{Binding LaborMiscTimeList}" ItemTapped="lvActivities_ItemTapped" CachingStrategy="RecycleElement" IsGroupingEnabled="True" SeparatorVisibility="None" HasUnevenRows="True">

                <!--Add you label and charts here-->
                <ListView.Header>
                    <StackLayout>

                        <Label x:Name="Totalhours" Text="THours" TextColor="Black" HorizontalOptions="CenterAndExpand" VerticalOptions="Center" FontSize="Large" />
                        <microcharts:ChartView Margin="0,10,0,4" x:Name="chartView" HeightRequest="200" Chart="{Binding Chart}"  />
                    </StackLayout>

                </ListView.Header>

                <ListView.GroupHeaderTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <Grid Margin="8,8,2,8">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"></ColumnDefinition>
                                    <ColumnDefinition Width="80"></ColumnDefinition>
                                </Grid.ColumnDefinitions>
                                <Label Text="{Binding Key}" FontSize="Large" TextColor="Black" Grid.Column="0"/>
                            </Grid>
                        </ViewCell>
                    </DataTemplate>
                </ListView.GroupHeaderTemplate>
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <cardView:CardView
        BackgroundColor="White"
        CardViewHasShadow="True"
        HeightRequest="145">
                                <cardView:CardView.CardViewContent>
                                    <Grid Padding="1">
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="*"></RowDefinition>
                                            <RowDefinition Height="*"></RowDefinition>
                                            <RowDefinition Height="Auto"></RowDefinition>
                                            <RowDefinition Height="Auto"></RowDefinition>
                                        </Grid.RowDefinitions>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="30"></ColumnDefinition>
                                            <ColumnDefinition Width="2*"></ColumnDefinition>
                                            <ColumnDefinition Width="5*"></ColumnDefinition>
                                        </Grid.ColumnDefinitions>
                                        <Image Source="{Binding WorkCodeImage}" Grid.Row ="0" Grid.Column="0" HorizontalOptions="FillAndExpand"  Aspect="AspectFit"/>
                                        <Label  Text="{Binding WorkDescription}" Grid.Row="0" Grid.Column="1" FontSize="20" VerticalOptions="Center"></Label>
                                        <Label Text="{Binding StartEndTime}" Grid.Row="1" Grid.Column="1"  TextColor="Black" FontSize="15" VerticalOptions="StartAndExpand"></Label>
                                        <Label Text="{Binding TotalHours}" Margin="10,0,0,0" Grid.Row="0"  Grid.Column="2" Grid.RowSpan="2" HorizontalOptions="EndAndExpand"   TextColor="Black" VerticalOptions="Center"></Label>
                                        <Label Text ="Notes" Grid.Row="2" Grid.Column="1" VerticalOptions="Center"></Label>
                                        <local:EditorXF Text="{Binding Comments}" Focused="DriverNotes_Focused" Grid.Row="3" Grid.Column="1" Grid.ColumnSpan="2" x:Name="DriverNotes" 
                     FontSize="Small" TextColor="Black" VerticalOptions="FillAndExpand">
                                        </local:EditorXF>
                                    </Grid>
                                </cardView:CardView.CardViewContent>
                            </cardView:CardView>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
                <ListView.Footer>
                    <Label/>
                </ListView.Footer>
            </ListView>
        </StackLayout>

</ContentPage.Content>