New Cider Adorner Placement API’s

In my last post I discussed the 3 adorner spaces in the new Cider adorner placement API’s.  In this post I will discuss these API’s  in a little more detail.  Note at the time of this writing, the spcific class and property names have not been finalized.  jnak will be asking for your input in his blog See Win App.  We’d like to know your thoughts on the names since we traditionally work with a single coordinate system in user interface developement, supporting 3 coordinate systems can be confusing. 

The driving goal of the last set of changes has been to support a concept of layout space.  I’ve also taken this opportunity to simplify the setting of adorner placement and open the adorner panel arrange so it can be extended by external developers.  I’ve tried to simplify this so developer can create designer features without dealing with the math am atricies associated with layout transforms, render transforms, right-to-left(RTL) language transforms, and zomming content in the designer view.  With you help we can take this next step at nameing and organizing these classes and properties to make them easiest to use.

Please visit jnak’s blog and give us your feedack See Win App.

In this example, the parent grid has a render transform X-skew of 5 degrees. Though this scenario is useful for demonstrating the affects of the different spaces.

Notice the selection frame and grab handles in the grid are unaffected by the skew of the grid render transform. These adorners are adorning the position the grid is within its parent. Since the grid’s parent is unaffected by the grid’s render transform, the grid layout space is also unaffected by this transform.

Notice that the button’s selection frame and grab handles ARE affected by the render transform of the grid. Since the layout position of the button is in the coordinate system of the rendered grid, the square layout slot of the button has been skewed by the transform.

 

Scenario: Top Grid Rail

Here is the code for placement of the top grid rail. This adorner is in the render space of the grid, is stretched from the left hand to the right hand side of the grid, is positioned outside the top grid edge, and has a height determined by the adorner XAML style. The height does not scale when the designer zooms in.

// start with empty placement
ContributionGroup placement = new ContributionGroup();
placement.Add(new SizeRelativeToAdornerDesiredHeight(this, 1.0, 0));
placement.Add(new SizeRelativeToContentRenderWidth(null, 1.0, 0));
placement.Add(new PositionRelativeToAdornerHeight(this, 0, -offsetY));
AdornerPanel.SetPlacement(this, placement);
AdornerPanel.SetHorizontalStretch(this, AdornerStretch.Stretch);
AdornerPanel.SetVerticalStretch(this, AdornerStretch.None);

Scenario: TopRightGrabHandle

This adorner is sized to the according to the XAML style. This adorner is positioned in the layout space of the adorned element and positions at the right hand side of the adorned element. The position is adjusted 3 pixels further right and upward by the height of the adorner plus 3 pixels in order to locate it outside of the top right edge fo the adorned element’s layout position.

ContributionGroup placement = new ContributionGroup();
placement.Add(new SizeRelativeToAdornerDesiredWidth(this, 1.0, 0));
placement.Add(new SizeRelativeToAdornerDesiredHeight(this, 1.0, 0));
placement.Add(new PositionAtContentLayoutSlot(null));
placement.Add(new PositionRelativeToContentLayoutWidth(null, 1.0, 0));
placement.Add(new PositionRelativeToAdornerWidth(this, 0, -3.0));
placement.Add(new PositionRelativeToAdornerHeight(this, -1.0, 3.0));
AdornerPanel.SetPlacement(this, placement);

Proposed Placement Classes

Contribution Group

This is a collection of class instances that declare adjustments to the adorner size and position.  This is a temporary name, other names we have tossed around are ArrangementGroup and PlacementGroup.

Please offer you suggestion at jnak’s blog.

Adorner Space

The adorner space properties allow you to adjust the size off the adorner based on the desired size determined by the style size of the adorner.  Adorner position can be adjusted relative to the final computed size fo the adorner.  Size and position can also be adjusted in pixels.  Adorner space does nto scale when the designer zooms in/out.

SizeRelativeToAdornerDesiredHeight(relativeTo, factor, offset)
SizeRelativeToAdornerDesiredWidth(relativeTo, factor, offset)
PositionRelativeToAdornerHeight(relativeTo, factor, offset)
PositionRelativeToAdornerWidth(relativeTo, factor, offset)

Render Space

The render space properties allow you to adjust the size or position of the adorner relative to the adorned element and by an offset measured in pixels in thatcoordinate system.  Render space size and positions adjustments are affected by and transform that affects the render size and shape of the adorned element.

SizeRelativeToContentRenderHeight(relativeTo, factor, offset)
SizeRelativeToContentRenderWidth(relativeTo, factor, offset)
PositionRelativeToContentRenderHeight(relativeTo, factor, offset)
PositionRelativeToContentRenderWidth(relativeTo, factor, offset)

LayoutSpace

The layout space properties allow you to adjust the size or position of the adorner relative to the layout slot fo the adorned element and an offset measured in pixels of that coordinate system.  Layout space size and positions are afected by transforms that affect the render space of the adorned element parent.

SizeRelativeToContentLayoutHeight(relativeTo, factor, offset)
SizeRelativeToContentLayoutWidth(relativeTo, factor, offset)
PositionAtContentLayoutSlot(relativeTo )
PositionRelativeToContentLayoutHeight(relativeTo, factor, offset)
PositionRelativeToContentLayoutWidth(relativeTo, factor, offset)

Advertisements
This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s