Flickering in WPF ItemsControl? No way!

Remember WinForms GDI+ days, when we have to enable DoubleBuffering to prevent flickering of fast changing elements in the application screen? Do you think, that we already after it with WPF? Not exactly. Today, I'll explain how you can force 100% hardware rendered stuff to flicker in your WPF application and how to prevent it.

Let's start. I want to draw fast large amount of primitives in the screen. Let's say Rectangles. My source is underlying collection of Rect and I have one ItemsControl, bounded to the collection to visualize them.

<ItemsControl ItemsSource="{Binding}" Name="control">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <Canvas/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.Background>
                    <SolidColorBrush Color="Gray"/>
                </ItemsControl.Background>
  </ItemsControl>

I also created DataTemplate, that uses TranslateTransform to set the rectangle positions (remember my Dev Academy performance session?)

<DataTemplate x:Key="theirTemplate">
            <Rectangle Fill="Red" Width="{Binding Path=Width}" Height="{Binding Path=Height}">
                <Rectangle.RenderTransform>
                    <TranslateTransform X="{Binding Path=X}" Y="{Binding Path=Y}"/>
                </Rectangle.RenderTransform>
            </Rectangle>
        </DataTemplate>

Now I'll add method to fill the ObservableCollection and force my ItemsControl to show them

ObjectDataProvider obp = Resources["boo"] as ObjectDataProvider;
           Boo b = (Boo)obp.Data;
           b.Clear();
           for (int i = 0; i < 100; i++)
           {
               Rect r = new Rect();
               r.Width = this.Width / 5;
               r.Height = this.Width / 5;
               r.X = (double)rnd.Next((int)this.Width);
               r.Y = (double)rnd.Next((int)this.Height);

               b.Add(r);
           }

So far, so good. Running this stuff, you'll notice red ghost rectangle in the left top corner of items control. It appears and disappears. What's the hell is it?

This is rendering order. First it creates visual, then draws it and only after it uses transformation to move it. Should not it be before rendering? Probably it is, how it is not working this way today.

So how to solve this problem? Just create your own rectangle, that works as required.

It is FrameworkElement (the simplest class, that can be used within DataTemplate).

public class myRectange : FrameworkElement
    {}

How, let's create brushes and pens (do not forget to freeze them to increase performance)

Pen p;
        SolidColorBrush b;

void rebuildBrushes()
        {
            b = new SolidColorBrush(this.Fill);
            p = new Pen(b,2);
            b.Freeze();
            p.Freeze();
        }

Draw Rectangle on Render event

protected override void OnRender(DrawingContext drawingContext)
        {
            drawingContext.DrawRectangle(b, p, new Rect(0,0,Width,Height));
        }

And change transformations and color, before rendering

protected override void OnPropertyChanged(DependencyPropertyChangedEventArgs e)
        {
            base.OnPropertyChanged(e);
            if (e.Property == XProperty | e.Property == YProperty)
            {
                RenderTransform = new TranslateTransform(X, Y);
            }
            else if (e.Property == FillProperty)
            {
                rebuildBrushes();
                InvalidateVisual();
            }
        }

We done. Now, our "ghost rectangle" disappears. Don't forget to change DataTemplate

<DataTemplate x:Key="myTemplate">
            <l:myRectange Width="{Binding Path=Width}" Height="{Binding Path=Height}" X="{Binding Path=X}" Y="{Binding Path=Y}" Fill="Red"/>
        </DataTemplate>

Have a nice day.

Source code for this article.