UWP 独立滚动视图

Posted 2023-04-13

【中文标题】UWP 独立滚动视图

【英文标题】：UWP independent scrollviews

【发布时间】：2021-05-30 11:10:59

【问题描述】：

这个想法是在一个可滚动的列表视图中拥有一个包含大量元素的列，以及一个包含小细节的第二列（不可滚动）。问题是整个页面都在滚动，因此第二列不在视图中。

<Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="300" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Scrollviewer x:Name="scrollviewer" Grid.Column="0">
            <Listview ItemsSource=... ItemTemplate=... />
        </Scrollviewer>
        <StackPanel Grid.Column="1">
            <...>
        </StackPanel>
</Grid>

我尝试使用 SizeChanged 事件 (scrollviewer.Height = Window.Current.Bounds.Height) 将窗口高度链接到滚动查看器高度，它可以正常工作，直到我滚动一点，然后它因错误“检测到布局周期”而崩溃。 我认为这应该是非常常见的情况，我在这里遗漏了一些东西。有人可以帮忙吗？

【问题讨论】：

不检查，设置行定义，因为通常网格将占用所有可用空间，因此列将始终扩展到内容大小，您必须通过查看 Heigh="*" 或静态值来分隔

仅供参考，通常不要将 ListView 放在 ScrollViewer 中。它破坏了 ListView 执行的性能处理，并可能导致大量布局成本。 ListView 包含它自己的内部 ScrollViewer，因此默认滚动而无需您指定任何内容。

设置行定义并没有帮助，Heigh="*" 整个页面仍在滚动，静态值有效，但我想要一列填充整个窗口高度。如果我在 OnSizeChanged 事件后面的代码中将值设置为窗口高度，快速调整窗口大小会使应用程序崩溃。

@user2814036 为什么在ScrollViewer 中使用ListView？ ListView 本身已经有 ScrollViewer。此外，我复制了您的 XAML，在您的 StackPanel 中添加了一个 TextBlock 并添加了一些填充文本，并添加了一个用 500 个项目填充 ListView 的方法。我无法重现您的问题。

@Leander 我添加了 gif 我的页面是如何滚动的。我知道 Listview 有自己的滚动查看器我都试过了，不管有没有它我都不能只滚动左列。

【参考方案1】：

我无法重现您的问题。 您可以查看以下示例来比较您的代码。

MainPage.xaml：

<Page
..>

<Grid>
    <NavigationView PaneDisplayMode="Left"  ItemInvoked="NavigationView_ItemInvoked">
        <NavigationView.MenuItems >
            <NavigationViewItem Content="A" x:Name="A" />
            <NavigationViewItem Content="B" x:Name="B" />
            <NavigationViewItem Content="C" x:Name="C" />
        </NavigationView.MenuItems>
        <Frame x:Name="ContentFrame"/>
    </NavigationView>
</Grid>

MainPage.xaml.cs：

private void NavigationView_ItemInvoked(NavigationView sender, NavigationViewItemInvokedEventArgs args)
    
        var item = args.InvokedItemContainer;
        switch (item.Name)
        
            case "B":
                ContentFrame.Navigate(typeof(BlankPage1));
                break;
        
    

BlankPage1.xaml：

<Page
..>
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="300" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

        <ListView x:Name="listView" ItemsSource="x:Bind Fruits">
            <ListView.ItemTemplate>
                <DataTemplate x:DataType="local:Fruit">
                    <TextBlock Text="x:Bind price"/>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
 
    <StackPanel Grid.Column="1">
        <TextBlock Text="yyyyyyyyygggg"/>
        <TextBlock Text="hkcsduhgfuhiualhfijht" />
    </StackPanel>
</Grid>

BlankPage1.xaml.cs：

public sealed partial class BlankPage1 : Page

    public ObservableCollection<Fruit> Fruits  get; set; 
    public BlankPage1()
    
        this.InitializeComponent();
        Fruits = new ObservableCollection<Fruit>()
        
            new Fruit()name="apple",price=12,
            new Fruit()name="peach",price=15,
            new Fruit()name="pear",price=8,
            new Fruit()name="banana",price=31,
            new Fruit()name="grape",price=5,
            .......
            // Add items that fill the entire page
           new Fruit()name="banana",price=31,
            new Fruit()name="grape",price=5,
            new Fruit()name="apple",price=12
                   
        ;
      
    

public class Fruit

    public string name  get; set; 
    public int price  get; set; 

【讨论】：

是的，我发现了我的错误。我在 NavigationView 的另一个滚动查看器中放置了我的框架。现在它起作用了。谢谢。