xsharp.eu • WPF - containers, Content controls, and children ...
Page 1 of 1

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

Posted: Tue Apr 04, 2017 11:44 am
by 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
Containers_31.jpg (49.31 KiB) Viewed 408 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
Containers_32.jpg (71.02 KiB) Viewed 408 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
Containers_33.jpg (81.6 KiB) Viewed 408 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
Containers_34.jpg (31.37 KiB) Viewed 408 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
Containers_35.jpg (75.96 KiB) Viewed 408 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
Containers_36.jpg (97.23 KiB) Viewed 408 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.

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

Posted: Tue Apr 04, 2017 12:13 pm
by 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
ImageText.png (6.67 KiB) Viewed 408 times
and this control is built from this code
ImageTextSource.png
ImageTextSource.png (13.05 KiB) Viewed 408 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
ImageTreeView.png (5.45 KiB) Viewed 408 times
These show only a small fraction what with WPFs controls is possible.

Wolfgang

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

Posted: Tue Apr 04, 2017 1:22 pm
by 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
CC_nogo_01.jpg (20.83 KiB) Viewed 408 times
CC_nogo_02.jpg
CC_nogo_02.jpg (37.72 KiB) Viewed 408 times
CC_nogo_03.jpg
CC_nogo_03.jpg (18.3 KiB) Viewed 408 times
CC_nogo_04.jpg
CC_nogo_04.jpg (39.31 KiB) Viewed 408 times
Hope this helps clear things up!

Regards,
Phil.

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

Posted: Wed Apr 05, 2017 4:09 am
by 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

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

Posted: Wed Apr 05, 2017 1:03 pm
by 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
ContentItems_01.jpg (9.98 KiB) Viewed 408 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
ContentItems_02.jpg (34.21 KiB) Viewed 408 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
ContentItems_03.jpg (27.66 KiB) Viewed 408 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
ContentItems_04.jpg (6.59 KiB) Viewed 408 times
And here is some accompanying X# code which adds a further item to the 'Items collection' of the ComboBox object :-
ContentItems_05.jpg
ContentItems_05.jpg (42.56 KiB) Viewed 408 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
ContentItems_06.jpg (33.7 KiB) Viewed 408 times
Okay then guys, lets try a 'ListBox' in a similar way to what was done above :-
ContentItems_07.jpg
ContentItems_07.jpg (49.69 KiB) Viewed 408 times
And finally the code with which to add to the items list :-
ContentItems_08.jpg
ContentItems_08.jpg (44.09 KiB) Viewed 408 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.