A prototype WPF/Silverlight layout designer


I’ve been thinking recently about how would I write a WPF UI designer that would specifically highlight the new WPF layout paradigm, and not try to mimic the old WinForms paradigm. The old VB6/WinForms designer was built around absolute positioning. It allowed for rapid WYSIWYG prototyping of interfaces, and the Dock/Anchor functionality provided a relatively cheap and easy support for scalable UI. The new WPF designer in Visual Studio is although very powerful, but some people find it difficult to quickly draft a scalable UI that produces clean XAML.

So I wrote a concept prototype of how I would like to design WPF UI:

http://layout.osenkov.com

It runs right in the browser and requires Silverlight 4 (because it needs to copy the output XAML to clipboard). It only focuses on the basics and doesn’t have a lot of features (it’s just a prototype), but I think it can nicely convey my ideas. Nothing of it is new, and both Blend and VS designers support complex layouts with panels and such, but I still decided to write a simple designer without a lot of complex details.

Let me know what you think!

image

Comments (14)

  1. Sergey Aldoukhov says:

    Man, you're a genius, did you know that?

  2. Nadav says:

    This is a great application!

    Would it be possible to get the source code to see how you did it?

    Thanks,

    Nadav

  3. Mikhail says:

    I suppose it has to do with your prevois post but I did not get your message. Do you mean that all absolute positioning stuff (margins) are defined as a style resource so that layout itself conforms MS Design Guidelines out of the box?

  4. Mikhail says:

    I suppose it has to do with your prevois post but I did not get your message. Do you mean that all absolute positioning stuff (margins) are defined as a style resource so that layout itself conforms MS Design Guidelines out of the box?

  5. Thomas Levesque says:

    That's pretty good stuff, thanks for making this ! It's actually much easier to use than Cider…

  6. banko says:

    What a great idea!

    I always start by typing my basic XAML layout by hand. Starting in the VS designer or Blend produces weird margins and alignments that you have to edit manually anyway. Up until now I never gave it much thought, but the fact is that we type our XAML because the existing designers don't do the right thing.  

  7. Leonardo says:

    This is great! I don't know why microsoft doesn't ship in .net framework hostable designer for wpf like that for windows forms (althought not well documented) or workflow foundation

  8. yiannis a says:

    Any chance to give source code

  9. Thanks everyone!

    I'm currently thinking about publishing the source code… if I can't find any better use for it, I'll publish and blog about it.

    Mikhail: that's the idea. Currently it's not implemented, but knowing the design guidelines, one could do a lot to auto-adjust spacing and margins to conform to them.

  10. yiannis a says:

    Great work

  11. аррр says:

    шпасибо тебе большое!

  12. yo says:

    Great Job !!!

    Is there a way to use it in wpf desktop application and not as silverlight ?

  13. ChinaMan says:

    哈哈   真的很不错啊!!!

Skip to main content