title: Slowdown (Scrollbar or UI in general) in Silverlight when there are many controls
body: <p>I'm looking for some insight into the workings of Silverlight - at this time I suspect I need to know more about how UI event dispatching and control repainting are done to work out a solution or compromise for the following problem:</p>
  
  <p>I have a large number of elements (of which I am representing as controls) on screen. Numerically it's around <strong>300</strong>, though the exact number is dependent on the size of the browser window.</p>
  
  <p>Each element will eventually display information (TextBlocks, Images) and have some mouse interactions (ToolTips, mouse events for toggling and drag and drop). At first glance it might resemble a DataGrid, but unfortunately it's not (it's an infinitely scrollable non-rectangular surface). But at the moment each element is just a user control with nothing but a Rectangle inside it.</p>
  
  <pre><code>&lt;UserControl x:Class="MyElement" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  Width="49" Height="49"&gt;
      &lt;Grid&gt;
          &lt;Rectangle x:Name="Border" Stroke="Black" Fill="White" /&gt;
      &lt;/Grid&gt;
  &lt;/UserControl&gt;
  </code></pre>
  
  <p>&nbsp;</p>
  
  <pre><code>for (int i = 0; i &lt; elementsRequired; i++)
  {
      var item = new MyElement();
      // Set Canvas.LeftProperty and Canvas.TopProperty to a unique position
      ElementsArea.Children.Add(item);                    
  }
  </code></pre>
  
  <hr>
  
  <p>Creating 300 of these controls and dropping them onto a Canvas (or Grid) is slow - 4 seconds to complete. However since this operation is rarely done, I'm not as concerned about it as the next problem.</p>
  
  <p>Once the controls are placed CPU is normal (0%), but attempting to use an unrelated ScrollBar (a ScrollBar primative with no events) shows a lot of lag - the scrolbar thumb struggles to keep up with the mouse. If I increase/decrease the number of elements, the scrollbar lag changes accordingly.</p>
  
  <hr>
  
  <p>Under the assumption that the canvas element (which normally allows elements to overflow) is doing some clipping calculations I tried both defining a clipping rectangle for the canvas, moving the scrollbar entirely away the canvas (into a different layout tree), and changing from a canvas to a grid (with all 300 elements just sitting in the center overlapping). I also testing changing the elements Visiblity to Collasped, with no effect.</p>
  
  <p>I've also tried substituting the elements - creating just a rectangle or an image reduces the slowdown, but only to the degree I'd expect from there being fewer elements on the tree (MyElement being 3 controls, UserControl, Grid and Rectangle, instead of 1).</p>
  
  <p>Under the assumption that some Find method was having to transverse all 300 of my elements before getting to the scrollbar, I tried to change the order of declaration in the XAML file, with no luck.</p>
  
  <p>And finally I've tried setting IsHitTestVisible and IsEnabled to false on the elements and the entire Canvas, to no effect.</p>
  
  <hr>
  
  <p>So far as I can tell I have a large but entirely reasonable number of static controls, that are not using any CPU normally, yet when I try interacting with an unrelated ScrollBar, they create some kind of traffic jam in the UI or rendering pipeline.</p>
  
  <p>Any ideas where that is or how to solve it?</p>
  
  <p>EDIT: Initial cause has been found, see below. (Added themes tag)</p>