黑色填充剩余空间Listview xamarin-UWP

Question

我遇到了一个奇怪的问题。这仅在 Xamarin 形式 - UWP 中发生。我在 Listview 中使用 Listview。当我单击每个列表时，将显示子列表。我还为子列表设置了一个固定的高度，以便可以滚动它。现在在检查时，即使它有更多的项目，底部也填充了黑色。我该如何解决这个问题。

用于列表的 XAML：

<ListView x:Name="MyProducts" 
          IsRefreshing="{Binding IsBusy, Mode=TwoWay}"
          RefreshCommand="{Binding GetAllProducts,Mode=TwoWay}"
          IsPullToRefreshEnabled="true"
          HasUnevenRows="True" 
          BackgroundColor="White"
          ItemSelected="CategorySelected"
          SeparatorVisibility="None"
          ItemsSource="{Binding MyProductsList}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout BackgroundColor="#e6e6e6" Margin="0,2,0,2">
                    <StackLayout Margin="1" BackgroundColor="White">
                        <Grid Padding="0,10,0,0">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="9*"/>
                                <ColumnDefinition Width="1*"/>
                            </Grid.ColumnDefinitions>
                            <Label Grid.Row="0" Grid.Column="0"  Text="Product Category" YAlign="Center"  Margin="10,0,0,0"  Style="{DynamicResource LabelLightStyle}"/>
                            <Label Grid.Row="1" Grid.Column="0"  Text="{Binding Model.ProductCategoryName}" Style="{DynamicResource LabelRedStyle}" YAlign="Center"  Margin="10,0,0,0"/>
                            <Image Grid.Row="0" Grid.Column="1" IsVisible="{Binding IconDown}" Source="ArrowDown.png" HeightRequest="15" Grid.RowSpan="2" Margin="0,0,5,0" HorizontalOptions="End" VerticalOptions="Center"/>
                            <Image Grid.Row="0" Grid.Column="1" IsVisible="{Binding IconUp}" Source="ArrowUp.png" HeightRequest="15" Grid.RowSpan="2" Margin="0,0,5,0" HorizontalOptions="End" VerticalOptions="Center"/>
                            <ListView Grid.Row="2"  Grid.ColumnSpan="2"
                                      IsVisible="{Binding ListVisibility}"
                                      SeparatorVisibility="Default"
                                      SeparatorColor="#e6e6e6"
                                      ItemSelected="ProductSelected"
                                      HeightRequest="220"
                                      BackgroundColor="#f2f2f2" 
                                      HorizontalOptions="FillAndExpand"
                                      ItemsSource="{Binding Model.Products}">
                                <ListView.ItemTemplate>
                                    <DataTemplate>
                                        <ViewCell>
                                            <StackLayout BackgroundColor="#e6e6e6">
                                                <StackLayout Margin="0,0,0,1" BackgroundColor="#f2f2f2">
                                                    <Grid Padding="0,10,0,10">
                                                        <Grid.RowDefinitions>
                                                            <RowDefinition Height="Auto"/>
                                                            <RowDefinition Height="Auto"/>
                                                        </Grid.RowDefinitions>
                                                        <Grid.ColumnDefinitions>
                                                            <ColumnDefinition Width="9*"/>
                                                            <ColumnDefinition Width="1*"/>
                                                        </Grid.ColumnDefinitions>
                                                        <Label Grid.Row="0" Grid.Column="0"  Text="{Binding MachineModel, StringFormat='Machine Model Number : {0}'}" YAlign="Center"  Margin="10,0,0,0"  Style="{DynamicResource LabelStyle}"/>
                                                        <Label Grid.Row="1" Grid.Column="0"  Text="{Binding CreatedDate, StringFormat='Date {0}'}" Style="{DynamicResource LabelTinyStyle}" YAlign="Center"  Margin="10,0,0,0"/>
                                                        <Image Grid.Row="0" Grid.Column="1" Source="ArrowRight.png" HeightRequest="15" Grid.RowSpan="2" Margin="0,0,10,0" HorizontalOptions="End" VerticalOptions="Center"/>
                                                    </Grid>
                                                </StackLayout>
                                            </StackLayout>
                                        </ViewCell>
                                    </DataTemplate>
                                </ListView.ItemTemplate>
                            </ListView>
                        </Grid>
                    </StackLayout>
                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Answer 1

通过编写自定义 ViewCell 和使用本机数据模板解决了该问题。现在快速滚动没有黑色单元格。我发布我的答案，以便有人会发现它有用。

例如：如果您有要显示的名称列表，请遵循：

首先添加自定义viewcell如下

    public class CustomViewCell : ViewCell
   {
    public static readonly BindableProperty NameProperty =
        BindableProperty.Create("Name", typeof(string), typeof(CustomViewCell), "");

    public string Name
    {
        get { return (string)GetValue(NameProperty); }
        set { SetValue(NameProperty, value); }
    }

   }

现在在 XAML 中添加 ListView，如下所示：

        <ListView 
        ItemsSource="{Binding Products}">
        <ListView.ItemTemplate>
            <DataTemplate>
                <custom:CustomViewCell  Name="{Binding Name}"/>
            </DataTemplate>
        </ListView.ItemTemplate>
        </ListView>

那你得在UWP项目的App.xaml中写下DateTemplate样式如下：

    <ResourceDictionary>
    <DataTemplate x:Key="CustomTemplate">
        <Grid Padding="10">
            <TextBlock  Foreground="#333333" FontSize="14" VerticalAlignment="Center" Text="{Binding Name"/>
        </Grid>
    </DataTemplate>
    </ResourceDictionary>

最后编写一个 CustomRenderer 将原生 viewcell 替换为我们的 ListView。

public class CustomViewCellRenderer : ViewCellRenderer
{
public override Windows.UI.Xaml.DataTemplate GetTemplate(Cell cell)
{
    return App.Current.Resources["CustomTemplate"] as Windows.UI.Xaml.DataTemplate;
}
}

现在列表可以完美运行，没有任何黑色单元格渲染问题。