如何在包含Grids,StackPanels和ListView的复杂XAML页面上使用scrollviewer?

时间:2018-04-23 01:37:17

标签: listview uwp-xaml

我有一个很长的UWP XAML页面,包括大量的控件,包括Grids,StackPanels和ListView。我尝试在ScrollViewer中包装整个堆栈,但页面上没有任何内容垂直滚动。页面很长,所以在这里作为示例粘贴是不实际的,但实质上我想要将固定内容控件与ListView一起呈现,并能够垂直滚动整个视图。我知道ListView在其样式模板中包含一个scrollviewer,但我还没有找到一个有效的覆盖。

我认为我正在寻找的不是在ListView中启用滚动我喜欢它的所有项目都有助于它的整体高度,然后能够立即渲染它的所有项目并将它们包括在内滚动浏览整个页面时的组合视图。

稍后我有了这个工作,我想查看一个从ListView数据源获取其他项目的动作,这样如果我最初渲染说50个项目,滚动到最后,我可以滑动up并获取要添加到ListView的更多项目。

任何人都知道如何创建此统一滚动行为来控制XAML页面上的所有控件?

1 个答案:

答案 0 :(得分:0)

  

我有一个很长的UWP XAML页面,包括大量的控件,包括Grids,StackPanels和ListView。我尝试在ScrollViewer中包装整个堆栈,但页面上没有任何内容垂直滚动。

  • 确保ScrollViewer不是StackPanel的孩子,ScrollViewer(如果您没有给heightmax-height )将在StackPanel
  • 中扩展到其全高
  

我想将固定内容控件与ListView一起渲染,并能够垂直滚动整个视图。

我认为您的意思是希望“内容控件”与ScrollViewer一起移动。我会推荐一个与此类似的结构:

Grid > ScrollViewer > StackPanel > Grid > Controls & a StackPanel wrapping your ListView

这是一个示例(非常混乱 - 在网格中使用正确的布局(不是边距)) 请记住将控件放在XAML中的ListView之后,文档中稍后的元素将呈现在顶部。

<Grid>
<ScrollViewer>
    <StackPanel>
        <Grid>
            <ListView>
                <ListViewItem>Hello World</ListViewItem><ListViewItem>Hello World</ListViewItem><ListViewItem>Hello World</ListViewItem><ListViewItem>Hello World</ListViewItem><ListViewItem>Hello World</ListViewItem><ListViewItem>Hello World</ListViewItem><ListViewItem>Hello World</ListViewItem><ListViewItem>Hello World</ListViewItem><ListViewItem>Hello World</ListViewItem><ListViewItem>Hello World</ListViewItem><ListViewItem>Hello World</ListViewItem><ListViewItem>Hello World</ListViewItem><ListViewItem>Hello World</ListViewItem><ListViewItem>Hello World</ListViewItem><ListViewItem>Hello World</ListViewItem><ListViewItem>Hello World</ListViewItem><ListViewItem>Hello World</ListViewItem><ListViewItem>Hello World</ListViewItem><ListViewItem>Hello World</ListViewItem><ListViewItem>Hello World</ListViewItem><ListViewItem>Hello World</ListViewItem><ListViewItem>Hello World</ListViewItem><ListViewItem>Hello World</ListViewItem>
                <ListViewItem>Hello World</ListViewItem><ListViewItem>Hello World</ListViewItem><ListViewItem>Hello World</ListViewItem><ListViewItem>Hello World</ListViewItem><ListViewItem>Hello World</ListViewItem><ListViewItem>Hello World</ListViewItem><ListViewItem>Hello World</ListViewItem><ListViewItem>Hello World</ListViewItem><ListViewItem>Hello World</ListViewItem><ListViewItem>Hello World</ListViewItem><ListViewItem>Hello World</ListViewItem>
            </ListView>
            <Rectangle Fill="Red" Width="100" Height="300" VerticalAlignment="Top" Margin="0,20,0,0"/>
            <TextBlock VerticalAlignment="Top" Margin="140,40,0,0" Text="Other Controls"/>
        </Grid>
    </StackPanel>
</ScrollViewer>
</Grid>
  

我想查看一个从ListView数据源中获取其他项目的操作,这样如果我最初渲染说出50个项目,在向下滚动到最后,我可以向上滑动并获取更多项目以添加到的ListView。

  • 使用 Microsoft UWP社区工具包中的IncrementalLoadingCollection

从Nuget安装Package后,使用类似于下面的方法创建一个Helper类(取自社区工具包示例) 这里People是ListView中显示的类类型。您所要做的就是返回给定参数的列表。

public async Task<IEnumerable<Person>> GetPagedItemsAsync(int pageIndex, int pageSize)
{
// Gets items from the collection according to pageIndex and pageSize parameters.
    var result = (from p in people
                    select p).Skip(pageIndex * pageSize).Take(pageSize);

    // Simulates a longer request...
    await Task.Delay(1000);

    return result;
 }

创建IncrementalLoadingCollection并将其绑定到ListView。 低于HelperClass表示包含上一步骤方法的助手类。我没有包含绑定步骤,但它就像任何其他列表一样。你可以在XAML中或在MyListView.ItemSource = collection;

之类的代码中执行此操作
IncrementalLoadingCollection collection = new IncrementalLoadingCollection<HelperClass, Person>();

有关更广泛的示例(包含xaml游乐场),请查看工具包的http://aka.ms/uwptoolkitapp示例应用。您可以在{{下找到IncrementalLoadingCollection 1}}标签。