In WPF (or silverlight or WP7), should a picture wall derive from ItemsControl or Panel?

Question

Assume that I need to create a class called PictureWall, which will be used to show pictures.

Now I find that Panel and ItemsControl can both be used to hold Children elements. So should the class PictureWall derive from Panel? or should it derive from ItemsControl.

Note: This is not a real requirement, it's just a hypothetical question. The real question is: when should I create a subclass of Control (or ItemsControl) and when should I create a subclass of Panel?

Note 2: This imagined picture wall control is not to be used in one application only. It may be used by other developers. If it derives from Panel or ItemsControl, it'll expose the property named Children to other developers. So in this case, deriving from Control is a better idea, right?

Note 3: This imagined picture wall control has its own default way of loading certain pictures (for example, pulling pictures from a server) and it does not want this way to be messed around. If this is the case, then we should not inherit ItemsControl, right?

Answer 1

Panel is a container that is used to arrange its children. For example: Grid with a title and one button on the bottom and an image on center - Grid is very flexible to help you move stuff and arrange them when you change the size of window etc.

ItemsControl is a control that helps you with a collection of items. Let's take a concrete example: Listbox. You can very easly show a list of items, applay template to all of them, so on and so forth.

Control class is basically a UI element that can have its own template.

Note that, it is a way much better to define own UserControl, edit template or style of your PictureWall, insted of subclassing (there are many advantages, for example you can use Blend to redefine the style).

Edit:

@ note2

If I were you I would make my own User Control to reuse existing controls to make what I want. If that won't be enough I would subclass Control.

[StyleTypedProperty(Property = "FooStyle", StyleTargetType = typeof(Control))]
public partial class MyDangControl: Control
{
 ...

@ note3

This is a bad idea to combine all in one. You should split the logic that fetch the data form yout Picture Wall. For instance, user presses thumbnail to download the image and whole UI hangs. Horrible UX.

To be crystal clear, let me quote Pro WPF in C# 2010

Control

This is the most common starting point when building a control from scratch. It’s the base class for all user-interactive widgets. The Control class adds properties for setting the background and foreground, as well as the font and alignment of content. The control class also places itself into the tab order (through the IsTabStop property) and introduces the notion of double-clicking (through the MouseDoubleClick and PreviewMouseDoubleClick events). But most important, the Control class defines the Template property that allows its appearance to be swapped out with a customized element tree for endless flexibility.

ContentControl

This is the base class for controls that can display a single piece of arbitrary content. That content can be an element or a custom object that’s used in conjunction with a template. (The content is set through the Content property, and an optional template can be provided in the ContentTemplate property.) Many controls wrap a specific, limited type of content (like a string of text in a text box). Because these controls don’t support all elements, they shouldn’t be defined as content controls.

ItemsControl

ItemsControl is the base class for controls that wrap a list of items but don’t support selection, while Selector is the more specialized base class for controls that do support selection. These classes aren’t often used to create custom controls, because the data templating features of the ListBox, ListView, and TreeView provide a great deal of flexibility.

Panel

This is the base class for controls with layout logic. A layout control can hold multiple children and arranges them according to specific layout semantics. Often, panels include attached properties that can be set on the children to configure how the children are arranged.

Answer 2

They both can be used to display elements, but really an ItemsControl offers much more functionality. In addition, an ItemsControl doesn't really display it's elements, it leverages a Panel to do that.

An ItemsControl can display a list of items, which may or may not be UIElements/Visuals. The items can be templated using a configurable DataTemplate, which ultimately determines how the item is displayed. In addition, then items can be bound to an observable collection so it will automatically update.

Neither of these features are supported by a Panel. DataTemplates can be used, but you have to manually create an associated ContentControl/ContentPresenter and add it to your panel.

Ultimately, their functions are different. A Panel is used to display UIElements/Visuals. An ItemsControl is used to display any type of data and apply templates as needed.