Monday, March 28, 2011

WPF Content Controls

For today’s WPF Tutorial we will be talking about Content Controls in WPF!

Transcript from the Video:
What is a content control?
Well, it is a control that contains content... phhh duh! No, you may seriously be asking, well isn’t that the same thing the Layout Containers did for us? Well not really, Layout containers like the DockPanel and StackPanel are used to organize elements in the window are not technically controls anyway because users can’t directly interact with them.

For example a button is a content control, because we can actually put content
inside of it and interact with it. So, here’s a question:

Is the TextBlock a content control just because it can contain text? Well no, not really, because the user can’t interact with it.

What about the Label control? Yes! That is a content control. Because the user can interact with it if there a hot keys assigned to it AND it can contain content!!!

For those of you that remember the Layout Container, we can put any number of elements in there because all of the panels expose a children collection, well with Content Controls we can actually only put one element. But we can actually get around that one element limitation because the one element could actually be a Layout Container of multiple elements.

*Good time for button example?*
(maybe red square and some text...)

So, here we have a Button with content in it. That content being a StackPanel of a Red Rectangle and a TextBlock. It’s not a ground-breaking example and you may have seen this done before. But I just need you to know that it can be done, and WPF doesn’t limit you in anyway to a boring plain text description, get creative with your content controls!

ok, so here is a diagram that I drew up in Paint.NET. Hopefully this will help us understand what is going on with the ContentControls a little bit better. So here we have the ContentControl, this derives from the Control class, which derives from the FrameworkElement along with two other classes the Shape and the Panel, and then finally the FrameworkElement derives from UIElement.

So, let’s say we have a Button for our ContentControl, if the Content property of our button gets
set to something that derives from the UIElement then the OnRender method will be called and drawn to the button accordingly as in our previous example.

However if the Content Property gets set to something that doesn’t derive from the UIElement, say DateTime.Now for instance which return an object of type Date. Well, in this situation the toString() function will be called on that object and the string “3/25/2011” will be set as the Content.

Aligning Content
HorizontalContentAlignment - so as you can see the content in the contentcontrols also need to be aligned somehow, so for that we are going to use the HorizontalContentAlignment and VerticalContentAlignment properties. So we may want our red box and text aligned to the left, or the right, or even stretched.

In closing...
Thinking behind Content Model
So the benefit of being able to have this content property actually being an element instead of just plain old text really shines right here...WPF allowing us to actually put any kind of element inside of ContentControls allows for us to create a Rich UX that is flexible and fairly simple.


  1. Hi Josh,

    just wanted to thank you for your effort. I watched this video and you presented it's content in a nice and understandable way.

    Hope you will continue with your blog (last entry is from may.

    Keep care!

  2. Good Post!!!
    I have a doubt, that you have mentioned label is a content control and user can interact with that with some hot keys..Could you please explain that with a small code snippet and a bit clear in that part.


  3. Nice article, helped me understand ContentControl better