PDA

View Full Version : Laying out Input Forms in Blend



Wavioli
September 1st, 2009, 07:04 AM
Just wondering if anyone has any pointers for best practices when laying out input forms in blend?

I've tried a grid and a flow document but neither of these seem particularily well suited to what I want (the inputs will be created dynamically)

Any pointers would be much appreciated!

kirupa
September 1st, 2009, 01:27 PM
When you are dealing with adding content programmatically, using Canvas is probably the easiest way because you can set exact X and Y positions.

If you are interested in having your app and its content reposition automatically, you can use a Grid, WrapPanel, etc.

Let me know what layout approach you are interested in, and I can provide some more pointers.

:)

Wavioli
September 1st, 2009, 01:48 PM
When you are dealing with adding content programmatically, using Canvas is probably the easiest way because you can set exact X and Y positions.

If you are interested in having your app and its content reposition automatically, you can use a Grid, WrapPanel, etc.

Let me know what layout approach you are interested in, and I can provide some more pointers.

:)

At the moment I'm using grid as it's a fluid layout - but maybe a canvas wrapped in a grid would be ok.

I'm just concerned that when we start adding the forms dynamically that the rigidity of grid may clip some of the content, as you can never be sure how many inputs are going to be in each row. If there was a way to make sure the row would expand to fit the content that would be ideal.

Thanks, Love the site! Best on the net for Flash stuff, and now that I'm designing in Blend the best for that too!

:hr:

kirupa
September 1st, 2009, 10:30 PM
In that case, you may want to look into using a WrapPanel. It is available by default in WPF and you have to install the Silverlight Toolkit for Silverlight, but here is a brief article I wrote about it: http://www.kirupa.com/blend_silverlight/wrapPanel_stackPanel.htm

You could keep sections of items you want in a grid and place them in a wrappanel so that when the UI does resize, you can easily move your entire row of items to a separate row. If you use the FluidMove behavior, you can even animate that transition as you are going from one row to another :)

Thanks for the nice comments. I'm glad you find both the Flash and Blend stuff on the site useful!

Cheers!
Kirupa