Sunday, October 23, 2016

Templates to show controls on a form, with triggers.

There is a LOT of information on using XAML style and datatemplates and triggers on the internet, which is quite easy to find. Figuring out how to use them to display some controls on a window if a condition is met turned out to be a little harder. In this post i describe how to use both of them together to display some information, only when required.


So i just spent the entire afternoon reading, tinkering, and pulling my hairs out! There is a TON of information on XAML data templates, triggers, and conditional formatting on the internet. However what i wanted was to solve a problem to which i did not find an easy answer: to conditionally add some controls to my window.
This required me to put various pieces together, and try things out to learn about them, which was neither quick nor easy. I figured out early on how to hide existing controls, so i could just have put the information on the window and concealed it. That would be the quick, dirty method:
And here is the result:


Of course, I would never settle for such cheap trickery (well most of the time anyway.) I wanted to do something that turned out to be a little more difficult, and a LOT more time-consuming. I did not want to just conceal controls, I did not want anything to be there until it was needed. After trying and failing several times, I worked out a solution that gave me what i wanted, HOW i wanted:

1- In the Resources section of your window, add some DataTemplates which contain the controls.
2 -In the window, place and position a ContentControl object. This will be the parent control to your templates.
3 - In the content control, we define a style which uses the DataTemplates from step 1 as a static resource.

In XAML we add the following:


You could put these resources in  your control as well. Here they are at the top of the window. Now on to the ContentControl that will display the two templates above.
As you can see, it is inside a grid to position it in the desired location. It also has a minimum height, so it can be selected even when there is nothing inside. Without the minimum height, it would resize to suit its contents (nothing) and collapse: I try to never use the height property of a control if I can help it, but always set alignment to stretch or center, as needed. That way if someone else has a different resolution or fontsize on their monitor, the controls will simply stretch or shrink to correctly show their contents.


And there you go: two nice rectangles with information directing the users attention to the next step they need to take, if one of the two conditions is satisfied. If  not, neither of the templates is shown.


And since i have spent WAY too much time behind the computer today, I'm going to wish you a nice day and turn it off.

p.s. If you want to save yourself a bunch of time, make sure you check the visibility property on the CORRECT control....


No comments:

Post a Comment