渲染多个 DataGrid 时 Silverlight UI 冻结答案

【问题标题】：Silverlight UI Freezes When Rendering Multiple DataGrids渲染多个 DataGrid 时 Silverlight UI 冻结
【发布时间】：2011-11-22 04:09:36
【问题描述】：

我遇到了 Silverlight UI（实际上是浏览器）在数据绑定/呈现数据网格时冻结的问题。我已经能够使用下面使用 4 个网格的代码重现该问题。在实践中，我们将使用超过 4 个网格。

我发现如果我只有一个网格和更多行（例如 3000），一切都很好。

四个数据网格在尝试绑定/渲染时似乎存在争用，导致 UI 锁定。

这是 silverlight 的已知问题吗？有哪些变通方法？

重现问题的代码

数据对象：

public class DataObject
{
    public string Column0 { get; set; }
    public string Column1 { get; set; }
    public string Column2 { get; set; }
    ...
    public string Column30 { get; set; }

    public DataObject()
    {
        Random r = new Random(DateTime.Now.Millisecond);

        Column0 = r.Next(1000).ToString();
        Column1 = r.Next(1000).ToString();
        Column2 = r.Next(1000).ToString();
        ...
        Column30 = r.Next(1000).ToString();
    }
}

代码隐藏：

public partial class MainPage : UserControl
{
    private ObservableCollection<DataObject> _data = new ObservableCollection<DataObject>();

    public MainPage()
    {
        InitializeComponent();

        PopulateData();

        DataContext = _data;
    }

    private void PopulateData()
    {
        for (int i = 0; i < 300; i++)
        {
            _data.Add(new DataObject());
        }
    }

    public ObservableCollection<DataObject> Data
    {
        get { return _data; }
        set { _data = value; }

    }
}

XAML：

<UserControl x:Class="SilverlightGridTest.MainPage"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:sdk="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data">

<Grid x:Name="LayoutRoot" Background="White">
    <ScrollViewer>
        <StackPanel>
            <sdk:DataGrid Grid.Row="0"
                  HorizontalAlignment="Stretch"
                  VerticalAlignment="Stretch"
                  ItemsSource="{Binding}" 
                  Width="800"
                  Height="700"
                  AutoGenerateColumns="False">
                <sdk:DataGrid.Columns>

                    <sdk:DataGridTextColumn Binding="{Binding Column0, Mode=TwoWay}" IsReadOnly="True" />
                    <sdk:DataGridTextColumn Binding="{Binding Column1, Mode=TwoWay}" IsReadOnly="True" />
                    <sdk:DataGridTextColumn Binding="{Binding Column2, Mode=TwoWay}" IsReadOnly="True" />
                    ...
                    <sdk:DataGridTextColumn Binding="{Binding Column30, Mode=TwoWay}" IsReadOnly="True" />

                </sdk:DataGrid.Columns>
            </sdk:DataGrid>
            <sdk:DataGrid Grid.Row="0"
                  HorizontalAlignment="Stretch"
                  VerticalAlignment="Stretch"
                  ItemsSource="{Binding}" 
                  Width="800"
                  Height="700"
                  AutoGenerateColumns="False">
                <sdk:DataGrid.Columns>

                    <sdk:DataGridTextColumn Binding="{Binding Column0, Mode=TwoWay}" IsReadOnly="True" />
                    <sdk:DataGridTextColumn Binding="{Binding Column1, Mode=TwoWay}" IsReadOnly="True" />
                    <sdk:DataGridTextColumn Binding="{Binding Column2, Mode=TwoWay}" IsReadOnly="True" />
                    ...
                    <sdk:DataGridTextColumn Binding="{Binding Column30, Mode=TwoWay}" IsReadOnly="True" />

                </sdk:DataGrid.Columns>
            </sdk:DataGrid>
            <sdk:DataGrid Grid.Row="0"
                  HorizontalAlignment="Stretch"
                  VerticalAlignment="Stretch"
                  ItemsSource="{Binding}" 
                  Width="800"
                  Height="700"
                  AutoGenerateColumns="False">
                <sdk:DataGrid.Columns>
                <sdk:DataGrid.Columns>

                    <sdk:DataGridTextColumn Binding="{Binding Column0, Mode=TwoWay}" IsReadOnly="True" />
                    <sdk:DataGridTextColumn Binding="{Binding Column1, Mode=TwoWay}" IsReadOnly="True" />
                    <sdk:DataGridTextColumn Binding="{Binding Column2, Mode=TwoWay}" IsReadOnly="True" />
                    ...
                    <sdk:DataGridTextColumn Binding="{Binding Column30, Mode=TwoWay}" IsReadOnly="True" />

                </sdk:DataGrid.Columns>
            </sdk:DataGrid>
            <sdk:DataGrid Grid.Row="0"
                  HorizontalAlignment="Stretch"
                  VerticalAlignment="Stretch"
                  ItemsSource="{Binding}" 
                  Width="800"
                  Height="700"
                  AutoGenerateColumns="False">
                <sdk:DataGrid.Columns>
                <sdk:DataGrid.Columns>

                    <sdk:DataGridTextColumn Binding="{Binding Column0, Mode=TwoWay}" IsReadOnly="True" />
                    <sdk:DataGridTextColumn Binding="{Binding Column1, Mode=TwoWay}" IsReadOnly="True" />
                    <sdk:DataGridTextColumn Binding="{Binding Column2, Mode=TwoWay}" IsReadOnly="True" />
                    ...
                    <sdk:DataGridTextColumn Binding="{Binding Column30, Mode=TwoWay}" IsReadOnly="True" />

                </sdk:DataGrid.Columns>
            </sdk:DataGrid>
        </StackPanel>
    </ScrollViewer>
</Grid>

【问题讨论】：

似乎是一个非常人为的例子。您能否提供一个真实的用例，即您需要将四个数据网格绑定到同一页面上的相同数据？
我们绑定到现实世界中的不同数据集。您是否建议绑定到单个数据集是问题的一部分？
当我测试它时对我来说效果很好。有一点延迟，但不会冻结。我有所有完全相同的代码（甚至是你遗漏的所有列）。
您如何区分延迟和冻结？我发现将 autogeneratecolumns 设置为 true 会使列加倍（是的，它是人为的，但它说明了问题:)）使冻结更加明显。可以显示的列数有限制吗？在我正在开发的应用程序中，我们需要在单个页面上显示多种货币的数据，以及跨每种货币的风险测量等，因此我们在不同的网格中使用了很多列。
嗨，我遇到了与渲染 DataGrids 相关的类似问题。你已经解决了问题吗？您是否尝试过其他数据网格组件？

标签： silverlight performance user-interface datagrid

【解决方案1】：

您应该考虑使用数据分页器一次只显示一定数量的行。

【讨论】：

我很确定行数不是问题。我在我的问题中说过，我可以在单个网格中将行数增加到 3000，没有问题。
我用 3000 行 * 30 列尝试了您的代码。加载 4 个 DataGrids 大约需要加载单个数据网格的 4 倍。 DataGrid 使用虚拟化，这就是为什么加载一个很快，而加载其中 4 个并没有我刚才尝试的那么慢。
我今天做了一些进一步的测试，看起来加载数据网格的成本是固定的（在我们的环境中约为 2 秒）。我们的 UI 需要显示数十个数据表，因此我们正在研究一种不使用数据网格来显示数据的解决方案，而且速度要快得多。
一般来说DataGrid是为显示大量数据而设计的。如果加载仍然需要时间，何不试试 DataPager？