Share on Facebook
Part III of Building the Diagram Maker Silverlight App
Part I is here: http://www.faxt.com/blog/post/Silverlight-Tools-for-eCommerce-Sites--Infloor-Heating-Diagram-Maker.aspx
Part II is here: http://www.faxt.com/blog/post/Infloor-heating-Diagram-Maker-Part-II.aspx
Use Blend to Create the Manifold control for the Diagram Maker
This article is an overview of one way to use Expression Blend to create a control. This particular control is used in a drawing tool, which is described in part one so I won't repeat myself. Here, I'm at the good part, which is customizing for my application. I need a specialized control, one which wouldn't make sense outside of the heating an plumbing industry, that is a Manifold for the Infloor Heating diagram. So, here's how I create my manifold control. And the Diagram Maker Silverlight application can be viewed here.
- Find a picture of a manifold in my catalog.
- Add it to my project so I can use it in Blend.
- In Visual Studio, create a new Silverlight Usercontrol. Call it ManifoldControl. Copy the contents of the Pen.xaml class into these new files (.xaml and .xaml.cs)
- Change all the PEN references to Manifold (within the xaml and the csharp code)
- Go to Workspace.cs and add the Manifold Drawing Tool Type.
public enum DrawingToolMode {
None,
Brush,
Select,
Pen,
Rectangle,
Manifold,
PexRun,
}
- That gives me my new drawing tool and plugs it into the framework (one more item I'll take care of later is adding the method that will take care of placing the manifold control.
- Move into Blend, and bring up the new .xaml file. It has a Pen in it for an image. This is what I'll change now.
- Add the manifold picture to my project so it's available to add to this .xaml in Blend. Add it to Manifold.xaml's canvas.
- Trace the picture using the pen tool. I divide this into several sections so I can sort of make it look like the picture when I'm done.
- There are two groups on the left in Blend, ManifoldOver and ManifoldNormal. I remove all the paths from ManifoldOver and drag the Paths just created when I was tracing my Manifold into ManifoldOver so that they become a part of it's definition.
- I color each section by applying and adjust a gradient with the colors picked from the photograph.
- I pull the photograph out to where I can see it enough to add the details of the photo on top.
- Here's the selected tool state
- And here's the unselected tool state:
- When that's all done, I can add it to my palette for selection as a drawing tool.
- Back in Visual Studio again, add a Manifold Tool Section to the DrawingSurface.cs (scribbler again) class.
private void HandleToolModeChanged (object sender, EventArgs e) {
if (this.currentTool != null) {
this.currentTool.Dispose ();
this.currentTool = null;
}
switch (this.Workspace.ToolMode) {
case DrawingToolMode.Brush:
this.currentTool = new DrawingPencilTool (this.Drawing, this);
break;
case DrawingToolMode.Select:
this.currentTool = new SelectionTool(this.Drawing, this);
break;
case DrawingToolMode.Pen:
this.currentTool = new PenTool(this.Drawing, this);
break;
case DrawingToolMode.Rectangle:
this.currentTool = new RectangleTool(this.Drawing, this);
break;
case DrawingToolMode.Manifold:
this.currentTool = new ManifoldTool(this.Drawing, this);
break;
case DrawingToolMode.PexRun:
this.currentTool = new PexRun(this.Drawing, this);
break;
}
}
- In the Page.Xaml.cs, add the Manifold Tool selection Option.
private void HandleToolModeChanged (object sender, EventArgs e)
{
Brush.setToggleMode(this.Workspace.ToolMode == DrawingToolMode.Brush);
Select.setToggleMode(this.Workspace.ToolMode == DrawingToolMode.Select);
Pen.setToggleMode(this.Workspace.ToolMode == DrawingToolMode.Pen);
RectangleTool.setToggleMode(this.Workspace.ToolMode == DrawingToolMode.Rectangle);
ManifoldTool.setToggleMode(this.Workspace.ToolMode == DrawingToolMode.Manifold);
Workspace.SelectionSet.Clear();
}
Subscribe