当一个页面在uwp中有很多GridView/ListView时如何处理答案

【问题标题】：How to handle when a page has many GridView/ListView vertically in uwp当一个页面在uwp中有很多GridView/ListView时如何处理
【发布时间】：2019-11-12 16:13:59
【问题描述】：

当一个页面垂直有很多GridView/ListViews时，我们必须使用ScrollViewer来向上/向下滚动。但是ScrollViewer会破坏GridView/ListView的UI虚拟化，导致CPU和内存占用很大。

但是 uwp 并没有提供纯粹的 ScrollViewer，它只是向上/向下/向左/向右滚动，并且不会破坏 GridView/ListView 的 UI 虚拟化。

那么如何处理这种情况呢？

【问题讨论】：

2 种情况：第一种，一个页面有一个GridView/ListView，每个ListViewItem模板是一个GridView/ListView，类似NetFlix布局。第二，一页中有很多GridView/ListViews 布局。

标签： xaml uwp winrt-xaml uwp-xaml

【解决方案1】：

但是一个 ScrollViewer 会破坏 GridView/ListView 的 UI 虚拟化，这会导致巨大的 cpu 和内存使用。

有很多方法可以接近，您可以创建Pivot 来放置每个GridView。并使用分页数据来减少内存和 CPU 使用率。

<Pivot Title="EMAIL">
    <PivotItem Header="All">
        <TextBlock Text="all emails go here." />
    </PivotItem>
    <PivotItem Header="Unread">
        <TextBlock Text="unread emails go here." />
    </PivotItem>
    <PivotItem Header="Flagged">
        <TextBlock Text="flagged emails go here." />
    </PivotItem>
    <PivotItem Header="Urgent">
        <TextBlock Text="urgent emails go here." />
    </PivotItem>
</Pivot>

您还使用社区工具包 nuget 包附带的Blade。根据您的数据模型创建多个放置GridView 或ListView 的刀片。

<controls:BladeItem x:Name="SecondBlade"
                          Header="Default blade"
                          IsOpen="False"
                          Style="{StaticResource BladeStyle}">
        <TextBlock Margin="24"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center"
                   Style="{StaticResource SubtitleTextBlockStyle}"
                   Text="This is a blade with all settings set to default." />
</controls:BladeItem>

更多信息请参考document。

【讨论】：