Layout Space Adornment in Cider

I have recently been redesigning the architecture used to specify adorner placement within Cider.  This is a good time for us to get to a common understanding of the coordinate systems that affect our adorners in WPF and how they can affect the designer surface.

First, I suggest thinking of render space as a child of layout space. Then the layout moves, the render space moves accordingly.

Next note that render space can move in relation to layout space. This movement can be in any direction and can even place the rendered control outside of the layout space entirely. Render space can also be used to scale and element to be larger or smaller than the layout size of the element.

Consider the following example, the button has been scaled down in size using a RenderTransform with scale dimensions less than 1.0.

Layout properties in WPF such as Margin, Grid.Row, Grid.Column, Width, Height affect the layout space of the element and are relative to the render space of the parent element. So when we talk about the layout space of an element this maps to the render space of the element’s parent.

Any adorners which interact with these layout properties must also be placed in the layout space. Grab handles or resize adorners for instance are in layout space since they are directly displaying and affecting the layout. In the example given, the grab handles appear some distance away from the edge of the button because they are not affected by the render transform causing the button to be smaller than the space given to it by the layout properties.

The adorner space is used to define dimensions of the adorner that do not change in size when the designer surface is zoomed.  (Yes, Cider generally supports zooming.  The Cider team has not yet had the time to design the UI and verification tests in order to insure zooming is a high quality experience.)

Most commonly adorner developers are adorning content displayed witin the render space of a control.  Layout space adornments will be needed if you are implmenting a layout tool or custom panel adorners. 

This new design allows adorners to be easily created in the layout space as well as the render space, or the designer view space as before.  Feature designers should consider which space they expect to adorn.  If in doubt, I’d suggest applying a render transform as I did above.  And design your adorners with this distinct difference between the layout space and render space. 

In a later post I will discuss the properties used to position adorners. 

Advertisements
Posted in Uncategorized | Leave a comment

XNA GSE – Free Game Development Tools

If you have a machine still running Windows XP SP2 and you’d like to play with some fun simple game development code, check out XNA Game Studio Express. 

http://msdn.microsoft.com/directx/xna/gse/

This install requires Visual C# Express to first be installed.  Visual C# Express can co-exist with the full versions of Visual Studio and does not share any settings, so will not interfere in any way. Visual C# Express Download Page

What is GSE?

GSE is a game development environment for Visual Studio.  GSE is provided to the community to stimulate a healthy hobbyist and student game development ecosystem.  By having a common (and free) platform people can develop, learn and share games and code libraries.

Where can GSE created games run?

Currently on Windows computers.  Next they will be able to run on Xbox 360 systems.  Beyond that, the imagination is the limit.  Keeping in mind that basic graphics services and 3D rendering are needed.

What’s the best way to get started?

Install Visual C# Express.  Then install GSE.  Open Visual C# Express and Create New Project.  Choose "Space Wars Project"

Space Wars

Space Wars is a sample project that implements a simple game.  This game watches user input, loads and renders graphics, plays sounds, ad simulates some simple physics.  There is plenty here to explore.

Read more about the history of Spacewar!

In my next post I will give a bit of a tour of the Space Wars sample.

Posted in Uncategorized | 23 Comments

WPF Rendering – #1

WPF offers distinctly different techniques for rendering graphical elements. The top level is adding shape elements such as Rectangle, Ellipse, and Path to a Panel element. This is what we see in the multitude of XAML based samples. Below I explore another technique involving implementing OnRender on a class derived from UIElement.

Rendering within UIElement::OnRender()

Implementing within UIElement is accomplished by implementing OnRender. OnRender is provide with DrawingContext. This context offers methods for drawing text and geometry.

class UIElmentOnRenderDemo : UIElement {
    protected override void OnRender(DrawingContext drawingContext)   { … }
}

When the parent of the UIElement detects that the size has changed, OnRender is called. Within OnRender we can generate render geometries and make calls to the drawing context to render them.

Rect rect = new Rect(new Point(5, 10), new Size(100, 20)));

Geometry outline = new RectangleGeometry(rect);

drawingContext.DrawGeometry( brush, pen, outline);

Note that the rectangle was intended to be rendered with a single pixel line and is showed at thicker with sfoter edges. The is result of "anti-aliasing" in order to soften the images on eh screen. Here is a close-up.

RenderOptions.SetEdgeMode can be used to turn off antialiasing for all non-text render output within the UIElement. Setting Edge mode for individual geometry has no effect. EdgeMode has no effect on text rendering.

RenderOptions.SetEdgeMode(this, EdgeMode.Aliased);

With EdeMode set on UIElement the rectangle is rendered crisply. 

Note: I’ll be invesigating rendering in more depth in upcoming blog entries.  Problems arise when rendering on 120 DPI displays.  I’ll also delve into more complex geometries and the use of guidelines.

Posted in Uncategorized | 4 Comments

Nikola Is Blogging!

Nikola is one of the QA members of the Cider Team.  He is now blogging at http://blogs.msdn.com/nikola/. Be sure to check it out and encourage him to blog more.
Posted in Uncategorized | Leave a comment

Back from Vacation

Well, I’ve survived yet another vacation.  After 1900 miles, 5 states, 8 tanks of gas, 5 hotels, 2 horseback rides I return home with 8 gigabytes of photos, aches, pains, more bug bites than I can count, and fine new pair of cowboy boots, and ready get working on Cider again!

Posted in Uncategorized | Leave a comment

NetFx3.com – Developer community for the .NET Framework 3.0

 .Net Framework 3.0 has been announced.  It includes Windows Workflow Foundation, Windows Communication Foundation, Windows Presentation Foundation, and Windows CardSpace.  A new community site has been launched to support this, NetFx3.com

 

Check it out, sign up, and contribute!

Posted in Uncategorized | Leave a comment

Cider Grid Layout Experience

For the May CTP we have improved the reliability of the Grid layout in Cider.  I’d like to hear your thoughts on how you like the features.  Particularly resizing the columns using the triangular handles verses the thin line of the column results in a different adjustment of the margins of controls within the grid. 

 

Currently we do not modify MinSize for grid children.  When resizing a grid with buttons in it, the buttons will begin to clip when the space of the column span minus the left and right margins is less than the MinWidth of the button (which defaults to 75 pixels).

 

 How to you think Cider should deal with MinWidth and MinHeight?  In order to avoid clipping, we either need reduce the MinWidth or reduce margins and perhaps increase the ColumnSpan.  This problem is complicated when multiple controls (grid children) are affected at once.

Posted in Uncategorized | 2 Comments