Drew's Blog

The Joys of Technology Explored

Avalon Styles Overlooked

 
Sam laments Chris' use of individual Background attributes on each Border element and proposes a CSS-based alternative.
 
Either ChrisAn or Rob have already written on why we don't use CSS syntax. However, we can achieve the exact same effect using XAML/Avalon resources.

[Don Box's Spoutlet]

Yes, styles are certainly an overlooked aspect of Avalon at this point. Probably because they're tough to wrap your head around if you're used to the world of HTML + CSS. I'm writing an entire article on Avalon right now, but I haven't even gotten to styles yet. 

Styles in Avalon can be scoped by a specific parent element in the visual tree. For those who are familiar with CSS, in Avalon one can style all instances of an element type at a specific scope (think element selector) or only those elements that specify a specific style name (think class selector). Even more powerful is the ability to completely override the visual tree for more complex controls such as the Button while still maintaining 100% of the behavior of the control. As I understand it though, the visual tree can only be overriden for elements which derive from ContentControl. Perhaps Chris can confirm or deny that though. Yet even more powerful is the ability to define “visual triggers” in styling syntax that basically setup property monitors in the Avalon runtime and automagically swap the current style of the element (in CSS, think about things like the hover psudeo-element, but for any custom property a control might ever define).

Also, I realize it's only an example, but I wanted to point out that a Table element exists. GridPanel is intended for very rudimentary tabular layout where as Table provides about the same level of support for complexity as an HTML table element.

Posted: Dec 01 2003, 08:43 PM by drub0y | with 4 comment(s)
Filed under:

Comments

Ian Griffiths said:

I see you point out that Table is more powerful than GridPanel. I read that in the documentation too. I've yet to find anything you can do with a Table that you can't do with a GridPanel. Do you have any examples to back up the docs' claim that Table is more powerful?
# December 2, 2003 6:57 AM

Alex said:

I was under impression that in the case when you change the VisualTree you loose the "native" visual tree, hence "native" Visual Trigger(s). Hence, for example,after changes made to button shape (make it to ellipse), button will loose the cool Jell effect. Am I wrong or your comment that
"ability to completely override the visual tree for more complex controls such as the Button while still maintaining 100% of the behavior" is not correct?

Thank you
# December 8, 2003 5:24 AM

Drew Marsh said:

Alex,

You are correct that all *visual behavior* is replaced as soon as you override the visual tree, but the behavior of clicking, for example, and how the Button class specifically responds to that is still provided. It is this ability to replace the entire visual behavior of a control enables that the UI designer can generically design an Avalon form, the developer code against against that generic design and then the artist can come along and make it look and visually behave like ten completely different designs using styles.

The example given during the PDC was this sort of login screen which was tailored to three diff. types of users: a business user, a casual user and a child. The appearance of the UI was completely changed based on who the system thought you were, yet the fundamental underlying concepts of logging in remained. We were told this example required only one set of logical coding and the designer was responsible for the three diff. visual flavors. Pretty neat.
# December 8, 2003 10:15 AM

Drew Marsh said:

Ian,

Check this[1] article in the SDK out for all the juicy details. Basically, grid just arranges whatever content is in it where as Table enables you to section and style'ize the data in more granular ways (rows, cells, body, header, footer, etc.).

[1] http://longhorn.msdn.microsoft.com/lhsdk/layout/overviews/tablevsgridpanel_ovw.aspx#tablevsgridpanel_rendering_differences
# December 8, 2003 2:06 PM
Leave a Comment

(required) 

(required) 

(optional)

(required)