标签: ui-virtualization

我正在尝试为虚拟化列表创建一个Win8 Metro参考应用程序.在做一些(非常稀疏)的阅读时,我发现推荐的支持方式是通过ISupportIncrementalLoading界面.

我的参考应用程序出现问题,该LoadMoreItemsAsync方法被调用一次,但未被再次调用,即使我的HasmoreItems属性被硬编码为返回True.

下面的代码应该是加载40个项目,然后一次加载'x'数字.会发生的是它加载前40个项目,然后提示加载42个项目,然后再从未要求加载.

这是我的代码的相关部分:

XAML

<Grid Background="{StaticResource ApplicationPageBackgroundBrush}">
    <ListView ItemsSource="{Binding Items}" Width="800" HorizontalAlignment="Left" Margin="12">
        <ListView.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Title}" Foreground="White"/>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

</Grid>

ViewModel和支持类:

public class MainViewModel : ViewModelBase
{

    public MyIncrementalCollection Items { get; set; }

    public MainViewModel()
    {

        Items = new MyIncrementalCollection();



        for (int i = 0; i < 40; i++)
        {
            Items.Add(new MyData {Title = string.Format("Item: {0}", i)});
        }
    }
}

public class MyData
{
    public string Title { …

我偶然发现了著名的TabControl虚拟问题。我想TabControl用样式列表（以显示选项卡）和ContentControl（以显示选项卡的内容）替换 。但是，如果两个内容共享其类型，则似乎ContentControl具有相同的重用行为。DataTemplates

有没有办法强制为所有显示的项目ContentControl单独实例化DataTemplates？

编辑：示例

假设我们有以下 UserControl 充当文档视图模型的 DataTemplate：

文档控件.xaml：

<UserControl x:Class="ControlTemplateProblem.DocumentControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:ControlTemplateProblem"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800"
             Loaded="UserControl_Loaded"
             Unloaded="UserControl_Unloaded"
             x:Name="Main">
    <StackPanel Orientation="Vertical">
        <TextBlock Text="{Binding Index}" />
        <TextBlock Text="{Binding ElementName=Main, Path=StoredIndex}" />
    </StackPanel>
</UserControl>

文档控件.xaml.cs：

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes; …

我有一个带有行虚拟化的自定义数据网格。

当我通过拖动滚动条向下滚动时，滚动会在呈现新“页面”之前中断。

你知道为什么会发生这种情况吗？

<div class="sg-container" style="height:200px">
    <div class="simple-grid" style="grid-template-columns: 3em minmax(5em, auto); ">
        <Virtualize Items="_products" 
                    ItemSize="32">
            <ItemContent>
                <div class="sg-row sg-row ">
                    <div class="sg-cell ">@context.Id</div>
                    <div class="sg-cell ">@context.Name</div>
                </div>
            </ItemContent>
        </Virtualize>

    </div>
</div>

演示 (REPL) 在这里：https : //blazorrepl.com/repl/mvkBuHuB22FVBxY258

我正在尝试从附加属性更改ListViewItem的背景。在将ListViewItem滚动出显示的ListView之前，以下代码将一直起作用。错误是计时器在已断开连接的ListViewItem上触发。

{System.Windows.Controls.ListViewItem：{DisconnectedItem}} System.Windows.Controls.ListViewItem

如何在Visual Studio 2010中测试断开连接的项目？

TIA

namespace Stargate_V
{
    // Using singleton pattern to create one time to be shared among all ListViewItem instances.
    public static class ListTimer
    {
        // Reasons for using a DispatcherTimer opposed to a System.Timers.Timer are that the DispatcherTimer runs on the same thread as the 
        // Dispatcher and a DispatcherPriority can be set on the DispatcherTimer. Timer runs in its own thread.
        private static readonly Timer listTimer;

        static ListTimer()
        {
            listTimer = new Timer …

我在一个项目中使用Material-UI的Autocomplete 组件。由于我有很多渲染选项，虚拟化将非常有益。所以我从文档中的虚拟化示例开始react-window。一切都很好，但该项目已经依赖于react-virtualized，我想避免添加一个解决类似问题的新项目。因此，基于react-window示例，我尝试使用Listfrom重新实现它react-virtualized。

代码示例

https://codesandbox.io/s/sleepy-hypatia-igog8?fontsize=14&hidenavigation=1&module=%2Fsrc%2FVirtualizedAutocomplete.js&theme=dark

问题

如上面的沙箱所示，它有点工作。什么不工作是键盘导航。您可以使用键盘导航，但是Listbox当您导航到可见元素之外时， 不会滚动到突出显示的值。

我试过的：

• 重写onKeyDown的Autocomplete组件。然而，这完全覆盖了 keydown 功能，需要我重新实现它。
• 使用onKeyUp保持onKeyDown功能，并与发现的元素data-focus的属性，然后使用scrollToIndex所述上List部件。这适用于某些情况，但如果用户按住键一段时间并最终出现在过扫描渲染项目之外的索引上，它就会中断。

有没有人有好的方法react-virtualized来虚拟化 Material-UI Autoselect 组件中的选项？我应该使用其他东西List吗？

我最后的办法是使用useAutocomplete钩子并重新实现渲染逻辑，但由于我只是在虚拟化之后，我想尽可能避免这种情况。

在我的应用程序中,我将一个Canvas包装在ScrollViewer中(Canvas比屏幕大小更大).在这个画布上,我放置了其他控件.画布上的一个元素包含一个虚拟化的DataGrid(有2000多行......所以也需要滚动).现在我有一个函数,它根据行元素的某些值(自动触发)在DataGrid中选择一行.当选择行时,我打电话

uxDataGrid.ScrollIntoView(uxDataGrid.SelectedItems[0]);

什么工作得很好.事实上,它正在努力实现.我想要的是,选择DataGrid中的元素,然后DataGrid应滚动到正确的位置.但是我的Canvas滚动浏览器也以某种方式接收了这个请求并且也在那里滚动.

我已经尝试拦截ScrollChangedEvent并设置处理标志.但它没有用.

Qustions:

1)如何限制ScrollIntoView调用对本地用户控件的影响.

2)如果不可能,我怎么能自己滚动？我需要计算scrollviewer的垂直偏移量,但由于它是虚拟化的,我不知道如何找出行高？

有什么建议？

我添加了一个快速示例来演示主要设置.当按下其中一个按钮时,我只想要滚动DataGrid,而不是滚动浏览器的ScrollViewer.

<Window x:Class="ScrollTest.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
<DockPanel>
    <StackPanel DockPanel.Dock="Bottom" Orientation="Horizontal">
        <Button Click="Button1_Click">Scroll to 1</Button>
        <Button Click="Button100_Click">Scroll to 100</Button>
        <Button Click="Button200_Click">Scroll to 200</Button>
    </StackPanel>
    <ScrollViewer>
        <Canvas Width="5000" Height="5000">
            <DataGrid Name="uxDataGrid" ItemsSource="{Binding TestItems}" Width="500" Height="500"></DataGrid>
        </Canvas>
    </ScrollViewer>
</DockPanel>

public class TestItem
{
    public TestItem(int id)
    {
        Property1 = id.ToString();
        Property2 = "B";
    }
    public string Property1 { get; set; }
    public string Property2 { get; set; }
}
/// <summary>
/// Interaktionslogik …

我有一个 DataGrid，它有一个 CollectionViewSource 绑定到它的 ItemSource 属性：

<DataGrid Grid.Row="0" RowBackground="#10808080" AlternatingRowBackground="Transparent"
          HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
          ItemsSource="{Binding Source={StaticResource bookingsViewSource}}"
          RowHeight="27"
          VirtualizingPanel.IsVirtualizingWhenGrouping="True"
          VirtualizingPanel.IsContainerVirtualizable="True"
          VirtualizingPanel.ScrollUnit="Item"
          AutoGenerateColumns="False">

    <DataGrid.Columns>
        <DataGridTextColumn Binding="{Binding date, StringFormat=dd.MM.yyyy}" Header="date"/>
        <DataGridTextColumn Binding="{Binding Path=customers.name}" Header="customer"/>
        <DataGridTextColumn Binding="{Binding Path=customers.street}" Header="adress"/>
    </DataGrid.Columns>

    <DataGrid.GroupStyle>
        <GroupStyle>
            <GroupStyle.ContainerStyle>
                <Style TargetType="{x:Type GroupItem}">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate>
                                <Expander Header="{Binding Path=Name}" IsExpanded="True">
                                    <ItemsPresenter />
                                </Expander>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </GroupStyle.ContainerStyle>
        </GroupStyle>
    </DataGrid.GroupStyle>
</DataGrid>

bookingsViewSource 被定义为

<CollectionViewSource x:Key="bookingsViewSource"
                      d:DesignSource="{d:DesignInstance {x:Type Database:bookings}}">
    <CollectionViewSource.GroupDescriptions>
        <PropertyGroupDescription PropertyName="providerID"/>
    </CollectionViewSource.GroupDescriptions>
</CollectionViewSource>

并在后面部分填写代码。一切都做得很好，快速而流畅，没有分组。但是当我添加分组时<PropertyGroupDescription PropertyName="providerID"/>，DataGrid 需要大约一分钟才能加载。

在 .NET 4.5 …

我正在尝试实现自己的 VirtualFlow，但遇到了一些性能问题，并且我不明白瓶颈可能在哪里以及我可以采取哪些措施来改进它。
这是一个包含两个列表的展示，一个包含简单单元格，另一个也包含复选框，两者都有 100_000 个项目（抱歉 gif 质量）：

正如您所看到的，我在滚动浏览仅带有标签的简单单元格时没有任何问题，但带有复选框的列表在开始时可能会相当滞后。

为了达到这样的性能（否则会更糟），我记住了我的细胞工厂功能，以便在需要时所有单元都在内存中准备就绪，我想知道是否还有其他方法可以使其更快/更平滑。

我用来显示单元格的代码是：

long start = System.currentTimeMillis();
builtNodes.clear();
for (int i = from; i <= to; i++) {
    C cell = cellForIndex.apply(i);
    Node node = cell.getNode();
    builtNodes.add(node);
}
manager.virtualFlow.container.getChildren().setAll(builtNodes);
long elapsed = System.currentTimeMillis() - start;
System.out.println("Show elapsed: " + elapsed);

我什至添加了这个小日志，最重要的部分似乎是当我打电话时getChildren().setAll(...)，单元建筑和布局几乎是立即的

哦，关于from和to参数的另一个注释。当我滚动时，我获取滚动条的值并计算第一个和最后一个可见索引，如下所示：

public int firstVisible() {
    return (int) Math.floor(scrolled / cellHeight);
}

public int lastVisible() {
    return (int) Math.ceil((scrolled + virtualFlow.getHeight()) / cellHeight - 1);
}

编辑回答一些问题： …