Silverlight - Creating a canvas with auto-alignment and scale

Question

Hello

How can i create a canvas of this kind - http://www.silverdiagram.net/Projects/SilverDiagram/SilverDiagram_Demo.aspx? I want to position the controls exactly aligned to each other. I want to help users to align it properly using auto-alignment (like visual studio) and by providing user the scale.

Answer 1

1. Download xap file: http://www.silverdiagram.net/Scripts/Silverdiagram/SD.Client.Main.xap
2. Rename xap as zip and open it.
3. Open ModuleCatalog.xaml and copy link to the canvas module: http://www.silverdiagram.net/Scripts/Silverdiagram/SD.Client.Modules.Canvas.xap
4. Open necessary dlls in .net reflector
5. ???????
6. PROFIT

Answer 2

The Canvas is the right container to use as you can position its child control by coordinates. Your problem is more about moving elements around, which is in fact drag & drop.

You'll have to handle mouse events: MouseDown to select an item, MouseMove to detect a drag and MouseUp to drop it. During the move or at the drop, you can change the element's coordinates to auto-align it on a grid or compared to surrounding elements.

I successfully made such a project in Silverlight and used Adorners to add resize handlers to the elements.

I solved the panning and zooming question by putting the Canvas into a Viewbox, which was in a ScrollViewer. If you want to let the user control the zoom factor, apply a LayoutTransform to the Canvas (available in the Toolkit).