Can WinForms and XAML not benefit from the same logic as CSS?

Question

Can WinForms and XAML not benefit from the same logic as CSS?

---

It occured to me this morning, as i was browsing some of my unanswered questions on Stackoverflow:

If you're not using FlowLayoutPanel or a TableLayoutPanel, to layout controls on your WinForm, you'll be accused of not doing it right.

This is in contrast with the (religious) debate in html world about CSS vs Tables.

It seems to me that the maintainability problems of a UI laid out with a table has been ported to WinForms. And with XAML, which can be thought of of a form of HTML, has embraced table based layouts. You'll have a hard time doing anything in XAML without using tables.

Can WinForms and XAML not benefit from the same logic as CSS? Can the maintenance problems of tables not be done away with? i realize accessibility isn't a problem on a WinForm or WPF form laid out using tables: the reader will not "see" the layout panel - so that's a problem in CSS that doesn't exist in WinForms.

But can't WinForms/XML benefit from non-table based layouts? i know i certainly don't want to have to move that "OK" button 3 dialog units to the left in a table-based approach.

Answer 1

You say:

It seems to me that the maintainability problems of a UI laid out with a table has been ported to WinForms. And with XAML, which can be thought of of a form of HTML

but you've missed the point of CSS. CSS isn't about avoiding use of table layouts, it's about separation of content from layout.

In HTML, the HTML provides the 'content' (the actual text, and it's structure into logical paragraphs) and the CSS provides the information about how this content should be laid out, (ideally so that you can just switch CSS files for different display methods and the same content will be displayed appropriately)

XAML/WPF provides the same ability (and to a lesser extent so does WinForms). The XAML (or WinForms GUI code) provides the layout and the visual stuff. The code behind (preferably following some nice separation pattern like MVVM for WPF or MVC in WinForms) provides the content. Written properly you should be able to swap out the XAML (or WinForms GUI code) and provide an alternative layout/GUI for different circumstances.

There is nothing wrong with table based layouts, the problem with table based layouts using plain HTML tables is that it mixes content and layout code all in one big jumble. HTML tables should only be used when the content you are providing is tabular in nature, and then they should still be laid out and formatted with CSS rules. HTML tables should not be used for laying out and formatting non tabular content.

So WPF/XAML is already structured like HTML+CSS, it's just you have compared the wrong parts. The XAML provides the layout and is the equivalent of the CSS, and the code behind (or view model / model in mvvm) is the equivalent of the HTML as it provides the content.

Answer 2

I don't think you can compare HTML and XAML. The implementation of table based layout (Grids) in XAML is far superior to that of HTML tables. There are far easier to work with and don't come with the same baggage that HTML tables do (cross-browser querks).

Also I don't agree with your comment ...

You'll have a hard time doing anything in XAML without using tables.

There are so many layout options in XAML, that you could produce an entire application without using a grid once. Though it may be easier to use Grids, it doesn't mean that you'd have a hard time using other layout elements. In fact, I use Stackpanels and Canvases as much as I do grids.

It just becomes a question of using the correct element for each scenario. Having come from web applications and been writing HTML and CSS for years, I find that XAML is a wonderful markup, that makes laying out your interface a breeze ... not to mention everything else that comes with XAML.

So to answer your question ... can XAML benefit from CSS logic? Yes and it does, MS has taken great things from CSS, but has also produced a superior markup.

Answer 3

One of the key arguments against the use of tables for layout purposes in HTML is that of semantics and accessibility. A <table> tag is intended to contain tabular information, and for users with screen-readers and similar using them for layout purposes can cause real headaches. The layout containers in XAML, though, are meant to contain controls and position them on the user's screen, seperating them from neighbouring controls and grouping them appropriately.

Another issue is that of producing clean code. An HTML document, when marked up correctly, should just contain the document contents, with the styling kept in the seperate CSS file. A XAML file is more equivalent to the CSS, describing the layout of the UI, and isolating it from the actual program which is described by the source files of whatever language you are using.

Just because XAML & HTML are XML-ish doesn't mean they encapsulate the same sort of data. If CSS were an XML format, would you compare XAML to HTML or this (X)CSS?

Answer 4

The problem with the HTML/CSS scheme is that it was designed as a document language, not a user interface language. The whole separation of presentation from content really only benefits documents. It is madness having to develop user interfaces in HTML, which doesn't have grid layouts. Oh well, it keeps us employed.

The direction that HTML 5 is taking looks promising for reducing the pain. For now, though, I'll stick with RIAs like Flex and Silverlight.