Custom Panels in Silverlight/WPF: Introduction
One of the most important concepts in UI design is the ability to organize your UI however you want. The framework panels all have their uses, but don’t allow the type of customization that is sometimes required. In order to create your own panels there are a couple of relatively simple steps that must be taken.
I will spend the next couple of posts looking at what it takes to make a custom Silverlight WrapPanel that is both animated and virtualized. However, before I get into the details, there are a couple of introductory concepts to address.
Firstly, I will be writing this code in Silverlight. Why Silverlight you ask? Isn’t WPF more full-featured you ask? Well, the short answer (at least from where I sit), is Yes. And that is exactly why I am writing this in Silverlight. Because if you can write it in Silverlight, you can write it in WPF, while the opposite isn’t necessarily true.
The next piece of info is that our custom panel will inherit from the base Panel class. This gives us access to the UIElementCollection Children. We could manage a child element collection ourselves, but by using the built-in Children property we don’t have to worry about explicitly adding and removing the UIElements from the visual and logical trees.
It is also necessary to know the order of operations for a rendering panel. A Panel will call into it’s MeasureCore method to determine how much room it needs to render. MeasureCore is sealed and so we can’t touch it, but MeasureOverride is exposed, allowing us to indirectly override the functionality of the MeasureCore method. After measuring, the panel’s ArrangeCore method is called. Again, this method is sealed, but ArrangeOverride is exposed for us to override. This method will actually place all child elements in a location relative to the parent panel. After arranging, the panel executes OnRender to actually “paint” the screen.
We will examine MeasureOverride and ArrangeOverride in more detail in subsequent posts, but nothing I have worked on has required overriding OnRender, so I’ll leave that one alone. Also note: calling Measure will always then call Arrange, which will then always call Render, but there is no guarantee that when Render is called Arrange was called previously, and likewise no guarantee that when Arrange is called Measure was also called.
The final, and potentially most complex, piece of this puzzle is virtualization. Making a panel “virtualizing” essentially means that we are only going to create controls for the elements on screen, while destroying any controls not currently visible. This gives a huge performance boost when working with long lists of items. Again, more detail to come.
It may have already become obvious to some of you, but we will go through the process of creating a custom animating and virtualizing panel in four discrete pieces:
Part 1: MeasureOverride
Part 2: ArrangeOverride
Part 3: Animation
Part 4: Virtualization
Stay tuned…