Search code examples
windows-runtimemicrosoft-metroexpression-blend

How are design time decorators/adorners (like the movable Grid column lines) in WinRT components implemented?


Certain controls (like the Grid control) in WinRT/Metro/WindowsStoreApps have design-time decorators when you place and use them.

For instance, the Grid control has lines you can drag around to define columns and rows.

How can I implement such custom design time graphics and interactions so that my custom controls are as full featured as the stock components in Blend or the Visual Studio 2012 designer?

I can tell that the grid lines are animated (they fade in) and obviously the grid control is trapping mouse clicks, so just having a canvas that I draw if I am in design mode is insufficient.

Is there a SDK or example anywhere? I haven't been able to find it yet and I have been looking for many weeks now.

I've tried decompiling the WinRT grid control, but because it is native code I've hit a blank wall there as well.


Solution

  • Adorners are accomplished in the blend and visual studio designer by creating a design time dll that is actually written in WPF.

    A good example of how to do this for a WPF component can be found here, and the WinRT process is similar.

    http://msdn.microsoft.com/en-us/library/bb907306(v=vs.90).aspx

    WinRT desinger metadata has some poorly documented differences, and it is a bit hard to set up a project to create and use it. The difficulties are around how to create a WPF product that consumes WinRT objects.

    A good start on how to set up a project to do this can be found here :

    http://blog.sailmadeline.com/2013/07/15/creating-a-design-time-adorner-layer-in-windows-rt/