In this video we’re taking a closer look at the XamDiagram control that you can use to bring an Office-inspired look to your WPF applications. Let’s get started!
[youtube] width="560" height="315" src="http://www.youtube.com/embed/mGpiIswbP-w" [/youtube]
What we have here is a WPF application. Let's create a grid with 2 columns. Next, let's open the toolbox and search for XamDiagram. We want to grab the XamDiagram and drag it to the 1st column, and reset the layout. Next, let's take the XamDiagram toolbox and drag it into the 2nd column. We also want to reset its layout too.
Now let's run the application. We already have a fully functional diagramming component. Simply drag a shape from the toolbox onto the design surface, and you can get started on creating various diagrams of your choice. You can easily create connections by dragging the pencil from one shape to another, or you can use the connector shapes provided in the toolbox.
Besides just adding shapes, you can also double-click a shape to add text. When you select a shape, you have the option to show a menu to the right side. This allows you to modify various properties of the shape at run time. In this case, I'm changing the current shape's fill color, but you're not limited to just the shapes. You can also change the various properties of the connectors.
For example, let's change this connector's color to green and change the end dash type to a filled circle. We also want to change the stroke of the line to orange. You can even zoom in and out by using my mouse wheel. You also have the ability to manipulate all shapes at once. You do this by selecting "all shapes," and in this case, I'm going to use the menu to change all the fill colors to green.
There are also a number of built in commands, such as undo, redo, cut, copy and paste. In this case, if I wanted to undo the changes I just made, I could simply type, "control z" on the keyboard, and I can keep doing that to revert all my changes. I can also select a shape, type "control c" and then paste it by typing "control v" multiple times within the surface.
Now let's take a look at some options that we have on the control itself. The XamDiagram also provides an overview pane. We can show this overview pane by setting the NavigationPane=Visible. We can also change the default mouse interaction with the diagram control. For example, when I click and drag, I can set the default interaction to “pan” by highlighting “DragPan”.
So now let's run the app. Now when I drag the shapes over, the overview pane shows you which shapes are within my design surface. You can zoom in or out, or use the buttons to zoom in or out. And I can now click the design surface, hold my mouse button down and drag to navigate the various shapes in the diagram control.
Adding shapes programmatically is just as easy. To add a shape, or what we refer to as a diagram node, to the XamDiagram control, simply create a new “diagram node control” within the opening and closing tags of the XamDiagram element. As you can see, a new shape has been added to the design surface in the top left corner of the XamDiagram control. Now we need to provide the diagram node a name to be used in the connection. We can also change various properties on the node, such as its type.
For example, let's use a chevron. Now let’s change its position. In this case, the top left position is 0,0. So let’s keep the left position 0, and move it down 75 points. Next let's add another diagram node control. Just for fun, let's change its nodes' type. Let's make it a circle, and set its position to 200 and 75.
Next, we need to create a connection between these 2 diagram nodes. All we need to do is define a diagram connection object and set its “start node name”. This is the node in which the connection will begin, in this case node 1, and then the end node name, which will be the node in which the connection ends, which is node 2.
As you can see on the design surface, we have created a connection between these 2 shapes, but we can also customize various properties of the connector line. For example, we can change the connection type to right angled or straight. Let’s just keep it straight here. We can also change the start cap type to let's say, a diamond, and the end cap type to a filled arrow.
Now let's run the application. The XamDiagram control now contains the 2 nodes that we created within Xaml and the connection between them. We can then grab other shapes from our toolbox, add them to our diagram component and begin to create connections between them.
And there you have it! The new XamDiagram control is a great feature that incorporates the look and feel of familiar Microsoft Office-inspired features to your own apps. Get it now as part of Infragistics Ultimate and start creating some amazing apps of your own today!
