WPF - containers, Content controls, and children ...

[Phil Hepburn]

Hi guys of the X# forum,

I would like to start a thread where we focus on the WPF controls, from the point of view of which are 'containers', meaning which controls can accept either one, or many other controls.

It may surprise you to find out that a 'Window' object can actually only contain a single object. So it has therefore to be a 'Content' control.

Check out what we see in the editor when we try and add two Grids to the Window :-

Containers_31.jpg (49.31 KiB) Viewed 384 times

Yes, we can have only one Grid at the root level of the visual tree. Yes, we can of cause then nest Grids, but that is then the property of the Grid, and not the Window.

Having seen this we may then guess that a 'UserControl' will be similar, and also have a 'Content' property taking a single object. Lets try it and see :-

Containers_32.jpg (71.02 KiB) Viewed 384 times

Yep! - we need only one main grid to hold all the other 'child' objects for the UC. Remember Grids have a collection of children (objects).

Now then, something I forgot to say in a previous thread - when it comes to the syntax of the 'Content' attribute in XAML script. The space between the opening and closing tags is in effect the 'Content', without actually specifying it as such.

To prove this lets see a XAML example which we then add to later with X# code. Check this out :-

Containers_33.jpg (81.6 KiB) Viewed 384 times

We have added a 'GroupBox' control using XAML script - note the <Grid> and </Grid> lines.

Before going to the X# code I will manually add a couple of things in the XAML - note the 'Names' :-

Containers_34.jpg (31.37 KiB) Viewed 384 times

Now what we are about to do is add a second 'GroupBox' which we can then experiment with - first the second GB :-

Containers_35.jpg (75.96 KiB) Viewed 384 times

Now finally, we can assign the 'Content' property of both the 'GroupBox' and a push Button control with suitable objects - check this out below :-

Containers_36.jpg (97.23 KiB) Viewed 384 times

So in code we would always see the 'Content' as a property name - BUT - in XAML script we often just enclose the object to be contained within suitable tags - no sight of the word 'Content'. At first this can be a little confusing to guys new to the Designer/Editor surface, wondering what is going on.

Enough for now I feel, I hope this post may have cleared up a few things for some guys wishing to know more about WPF, the design tools, and XAML script as well.

Cheers, and Best regards,
remember "Learning is fun",
Phil.
Wales, UK.

[wriedmann]

Hi Phil,

please don't forget the most important feature of WPF: every control can contain other controls.
So you can put a Grid on a PushButton, and inside this Grid you can put other controls.
This is very useful if you need something special like a button with bitmap and text:

ImageText.png (6.67 KiB) Viewed 384 times

and this control is built from this code

ImageTextSource.png (13.05 KiB) Viewed 384 times

I have omitted all the code that is needed to databind both the text and the image.

Or another sample: in a TreeViewItem I need columns with an image in front and the last column right centered. On resizing only the middle column should resize, the first and last column keep their width:

ImageTreeView.png (5.45 KiB) Viewed 384 times

These show only a small fraction what with WPFs controls is possible.

Wolfgang

[Phil Hepburn]

Hi Wolfgang and all,

Many WPF controls are indeed 'content' controls, that is they have an attribute named 'Content' which can be assigned another (any?) control.

However, it is NOT true to say that each and every WPF control is of type 'Content'.

Yes, Button is one which does accept other controls (I showed that) - BUT - here are just four I found very recently which don't. It seems that it is simply down to the fact that it does not make sense for some controls to have content, even though a lot do :-

CC_nogo_01.jpg (20.83 KiB) Viewed 384 times

CC_nogo_02.jpg (37.72 KiB) Viewed 384 times

CC_nogo_03.jpg (18.3 KiB) Viewed 384 times

CC_nogo_04.jpg (39.31 KiB) Viewed 384 times

Hope this helps clear things up!

Regards,
Phil.

[wriedmann]

Hi Phil,

I'm very sorry, you are right - I had to write: "most controls" and not "all controls".

I'm only very happy with the way WPF is designed. It makes some bread-and-butter applications harder, but I'm convinced that only a vector oriented platform like WPF is ready for the very different screen resolutions and sizes we are seen currently.
My application for example has to run on netbooks with 10" and 1280x800 in the 200 Euro range upto 27" monitors with 4k resolution (where the monitor alone costs much more), and has to support of course touch monitors.

Wolfgang

[Phil Hepburn]

Hi Wolfgang and all,

The best way to see if a particular control (or WPF tool) is a 'Content' control, is to look at the MSDN Class notes - here is the snippet from the Button class properties :-

ContentItems_01.jpg (9.98 KiB) Viewed 384 times

If this property is missing from the list then the control being checked-out is NOT a 'content control'.

So what is a control if not a Content control ? Well it is likely to be an 'Items control', or indeed neither. (Three possibilities.)

Three VERY common controls, which are NOT content controls, are ComboBox, ListBox, and DataGrid. These controls are 'Items controls' and have a property called 'Items' - basically because the take and hold lists.

Here is an image to show the missing 'Content' property for Combo/List 'Boxes' :-

ContentItems_02.jpg (34.21 KiB) Viewed 384 times

So whether it is 'Most' or 'Many' controls which are 'Content Controls' I can't say, but we can spend a short time looking into the 'Items controls'.

Now then, between the tags of a 'ComboBox' declaration in XAML we may see something like the following :-

ContentItems_03.jpg (27.66 KiB) Viewed 384 times

We see three lines of XAML script, each one being a 'ComboBoxItem' - lets see this code as well as the results to produces at runtime :-
[so the gap between the tags in now the 'Items' attribute and not the 'Content' attribute as previously shown for Button and Window, and 'UserControl'.]

ContentItems_04.jpg (6.59 KiB) Viewed 384 times

And here is some accompanying X# code which adds a further item to the 'Items collection' of the ComboBox object :-

ContentItems_05.jpg (42.56 KiB) Viewed 384 times

Notice that the above code adds the '69' integer item to the list.

Also note that to do things this way - script and code, we need to give the control a name as seen below :- (NOTE ... this is not the way I would normally do it, in these days of MVVM)

ContentItems_06.jpg (33.7 KiB) Viewed 384 times

Okay then guys, lets try a 'ListBox' in a similar way to what was done above :-

ContentItems_07.jpg (49.69 KiB) Viewed 384 times

And finally the code with which to add to the items list :-

ContentItems_08.jpg (44.09 KiB) Viewed 384 times

I will leave the 'DataGrid' for you to experiment with - but remember that the items in a DG control will need to be complex business objects to be a realistic test of things.

Enough for now except that your homework is to find out any WPF controls (or tools within the toolbox) which are not either Content controls or Items controls.

Good hunting ;-0)
Phil.
Wales, UK.