RenderTransform flickering

Question

See the following code, After I clicked the button, the listbox render several times. How can I prevent Listbox flickering? Is it possible to tell a control stop update/render?

<UserControl x:Class="SilverlightApplication52.MainPage"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         mc:Ignorable="d"
         d:DesignHeight="300"
         d:DesignWidth="400">

<Grid x:Name="LayoutRoot"
      Background="Gray"
      HorizontalAlignment="Stretch"
      VerticalAlignment="Stretch">
    <ListBox x:Name="listbox"
             Background="White"
             Margin="100">
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas />
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.ItemContainerStyle>
            <Style TargetType="ListBoxItem">

            </Style>
        </ListBox.ItemContainerStyle>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Rectangle Width="{Binding Width}"
                           Height="{Binding Height}"
                           Fill="{Binding Background}"
                           RenderTransformOrigin="0.5,0.5">
                    <Rectangle.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform ScaleX="{Binding Scale}"
                                            ScaleY="{Binding Scale}" />
                            <RotateTransform Angle="{Binding Angle}" />
                            <TranslateTransform X="{Binding Left}"
                                                Y="{Binding Top}" />
                        </TransformGroup>
                    </Rectangle.RenderTransform>
                </Rectangle>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
    <Button Content="test"
            Width="50"
            Height="50"
            Click="Button_Click" />
</Grid>

public partial class MainPage : UserControl
{
    public class ItemInfo
    {
        public double Left { get; set; }
        public double Top { get; set; }
        public double Width { get; set; }
        public double Height { get; set; }
        public double Angle { get; set; }
        public double Scale { get; set; }
        public Brush Background { get; set; }
    }

    ObservableCollection<ItemInfo> _items = new ObservableCollection<ItemInfo>();
    public MainPage()
    {
        InitializeComponent();
        listbox.ItemsSource = _items;

    }

    Random random = new Random();
    private void Button_Click(object sender, RoutedEventArgs e)
    {
        _items.Clear();
        for (int i = 0; i < 2000; i++)
        {
            byte r = (byte)(random.NextDouble()*255);
            byte g = (byte)(random.NextDouble()*255);
            byte b = (byte)(random.NextDouble()*255);
            _items.Add(
                new ItemInfo
                {
                    Left = random.NextDouble() * 500,
                    Top = random.NextDouble() * 500,
                    Width = random.NextDouble() * 1000,
                    Height = random.NextDouble() * 1000,
                    Angle = random.NextDouble() * 359,
                    Scale = random.NextDouble() * 1,
                    Background = new SolidColorBrush(Color.FromArgb(255,r,g,b)),
                }
            );
        }
    }
}

Answer 1

Try adding to a separate ObservableCollection in that loop (that is not referenced/bound to the listbox). Then when the loop is done assign the listbox ItemsSource to the new observablecollection.