UWP 独立滚动视图答案

【问题标题】：UWP independent scrollviewsUWP 独立滚动视图
【发布时间】：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 有自己的滚动查看器我都试过了，不管有没有它我都不能只滚动左列。

标签： c# windows xaml uwp scrollviewer

【解决方案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 的另一个滚动查看器中放置了我的框架。现在它起作用了。谢谢。