Silverlight UI Freezes When Rendering Multiple DataGrids

I'm experiencing issues with the Silverlight UI (and indeed the browser) freezing when databinding/rendering datagrids. I have been able to reproduce the issue with the code below which uses 4 grids. In practice we will be using more than 4 grids.

I've found that if I only have a single grid and many more rows (e.g. 3000) everything is fine.

It looks like there there is contention between the four datagrids when they are trying to bind/render which is causing the UI to lockup.

Is this a known issue with silverlight? What work arounds are there?

Code to reproduce problem

Data object:

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();
    }
}

Codebehind:

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,开发者_StackOverflow社区 Mode=TwoWay}" IsReadOnly="True" />

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

You should consider using a data pager to only show a certain amount of rows at one time.