Xaml Layout Resources for a Web Guy

Question

Long story short: I've been layout out UI's with Html/CSS for about 8 years now. Recently I've been dipping into Xaml/Silverlight/Wpf and really struggling with designing a UI using Xaml. I understand the basics of the Silverlight Layout Model and feel smi comfortable with using StackPanel and Grids but I'm just not picking it up as fast as I'd like or maybe I'm just and old dog learning new tricks. ;)

Are there any resources available or add-ons/controls that help make Xaml UI development a bit easier to understand for a Html/CSS web guy?

Yes, Expression Blend has helped but I'm wary of being dependent on "wizards/design tools" when I'm not comfortable to do the same layout from scratch.

---

Please don't RTFM me. I'm looking for specific examples of resources or helpful advice that are written for people with a CSS/Box Model layout background.

For example I know certain dependency properties function similar too setting left: or width: values in CSS. I'm looking for more advice of that nature.

Answer 1

I would have a look at Adam Nathan's excellent Windows Presentation Foundation Unleashed book. I started from a web background as well (though that was a couple years ago), and after making it through the first bit of his book, laying things out with WPF just clicked. For me, it wasn't until I understood that there were different types of panels that laid things out differently, and that I could express what I wanted to accomplish in a number of different ways (e.g. a DockPanel with one child set to DockPanel.Dock="Bottom" usually has the same result as a two-row Grid with the first row's height set to * and the second row's height set to Auto) that I really felt comfortable laying things out in WPF.

Nathan's book is good because he explains in detail how each of the panels work on a very basic level. Once you've got the basics down pat, looking at samples and trying things out with Blend becomes pretty straightforward, and you'll soon start to see the layout patterns that more seasoned WPF/SL developers see every day... and want to apply to web content!

Answer 2

The WPF Unleashed book as Nicholas mentioned is indeed excellent, regardless of what background one arrives from. For specific resources, there are some things that may help out:

Kaxaml and XAMLPad will help you with constructing the layout in XAML, since they are both more lightweight then the VS designer or Blend while still providing instant UI feedback.

To learn more about about layout works in XAML, this article explains how the layout takes into effect different elements and the children of elements.
Here is an overview of Panel's and their derived elements, which are all the things you will be using to actually construct the layout of a page/app.
This article overviews how Alignment/Margins/Padding work in XAML. It should be pretty much what you expect and are already familiar with.
And here is some more advanced information, if you are concerned with the optimization of the layouts.