Jan CTP and product feedback.

It doesn't take too long messing around with Cider to realize two things - we've gotten a bunch of stuff working and some of this stuff seems slick but some of it is incomplete. That's where feedback comes in and the forum/wiki is one of the primary ways we'd like to get feedback. With each CTP we'll try to nominate product area(s) for specific focus and describe a handful of features we're ready for feedback on. Then after you give us feedback we will improve the feature from there. Sound reasonable? Here's the first installment.

Grid, the same but different. :)

You may have noticed grid looks (and acts) a bit different from previous ""CTPs"". We assert that grid layout is essential to producing modern ""UIs"" in Cider (Do you agree?). That's nothing new, we previously decided Grid (Avalon's answer to grid type layout) is so important that we're included one in the default application project's Window. For the Jan CTP we've made strides in carefully refining and building the visual and interactive interface around Grid. That experience will differ depending on task, and at this point we are designing at a task level within several end to end scenarios. So it follows that we present some grid tasks:

Task 1: Grid row and column creation and resize.

Creating new rows and columns in the grid is very simple and easy. You hover your mouse over the "rail" which frames the grid on the top and left to create a row or column respectively. You get feedback during positioning where the row or column border will be. When you click the row is created exactly where it was drawn, with a style persisted as number-star. Number-star is a weighted relational measurement that takes up a portion of the grid's remaining layout space. There are other column sizing styles, but edit support for that on the design surface is a ways off.

To resize a column or row, simple hover over the line or the gridline header triangle, mouse down and drag. You get feedback on the adjacent column widths in pixels. Margin values are respected for controls that are aligned to that gridline - in other words, controls move or resize with column resize.

Questions:

1. Should we provide a way to see all rows, columns and properties against those in one dialog?
2. Should resize retain the margin setting from aligned controls or adjust them? Show we have a toggle between the two modes?
3. Deleting a grid line is via dbl click today - we know that's a bad gesture, what's a good one?

Stuff that's broken or undone
* The column and row definition collections are not particularly editable (crash) with the collection editor.
* We don't currently enable columnstyle setting via the design surface; the 'lock' icon you see above each column is a stop gap feature that toggles between number and number-star column sizing, but is not the final UI.

Task 2: Align controls within grid area

To alter the alignment of controls from the inferred defaults, we provide T-shaped (I call 'em bird perches) icons aligned along the horizontal and vertical central axis of the control. When you click the T, you're toggling the axis you are on. At this point, we require that at least one T is enabled for each axis. If both are on you are "Stretched", if only one is one you are aligned to that end of the axis. We then persist a margin to back each alignment state. Try combinations of moving and resizing along with alignments and margins. Then to see how it behaves during resize, run the window.

Questions:

1. Should we infer an alignment based on position within the grid area?
2. Should we allow both alignment Ts off to achieve "Center"
3. Can you visually grok the alignment Ts translation to an alignment on that axis?
4. Should we enable direct margin adjustment or zeroing?

Stuff that's broken or undone:
* The click area of the Ts are small; and we don't have a mouse cursor to indicate its clickability.

Task 3: Move control w/in grid

Moving controls works very similarly to previous designers in terms of user gesture, but what's really different with Cider is the property persistence in XAML along with feedback you get during and after the move. During the move we provide x,y around the upper left of the control regardless of alignment and after drop we show, as part of the selection UI, an indication of alignment via the icons surrounding the control. In terms of persistence, when we move, we set alignment (inferred from position relative to grid area) and margin to achieve the positioning of the control. Phew, that's a lot of goop.

Questions:

1. What feedback do you need during move within the grid?
2. Should we (re)set alignment on every move?
3. Play around with alignments, margin, move and resize. Do actions feel natural and predictable?

Stuff that's broken or undone:
* Gridlines for columns and rows don't show during move (try ShowGridLines=true for now)


Well that's the tasks for Grid with regard to the Jan CTP.

If you have questions about the features, feedback on these tasks or feedback in general on the Grid design experience we'd love to hear it. Please post to the Cider MSDN forum