Creating a new Silverlight Application using Microsoft Visual Studio 2008
 You need the following components: |
|---|
• Silverlight version 2. |
- Select File -> New -> Project from the Visual Studio menu.
- In the New Project dialog box, expand the Visual C# or the Visual Basic node and select Silverlight.
- In the Templates pane, select Silverlight Application template.
- Fill in the Name of the application (for example 'SilverlightApplication1'), the Location path, the Solution Name, and click OK. The Add Silverlight Application dialog box appears.
- Select the option for hosting the Silverlight application. For a testing project, you can select 'Automatically generate a test page to host Silverlight at build time'. Click OK. Visual Studio will create a solution:
There are App.xaml and Page.xaml files in the Solution Explorer. In App.xaml, you can specify resources and code that applies to the entire application. Page.xaml defines a page, similar to a page in a Web site.
- Expand the Page.xaml node.
Page.xaml.vb or Page.xaml.cs is the code-behind file for your managed code.
Add the DiagramLite control to the Visual Studio Toolbox
- Click the right mouse button within the Toolbox area
- From the context menu, select Choose items
- Select the Silverlight Components tab
- Click the Browse button
- Navigate to the DiagramLite installation folder
- Select MindFusion.Diagramming.Silverlight.dll, the assembly file that contains the DiagramLite control and click 'Open'.
Now you can see the newly installed Diagram icon in the toolbox.
Add references to the required assembly to your project
The next steps are optional, but recommended:- Open the Solution Explorer
- Right-click the References section and choose Add Reference
- Navigate to the DiagramLite installation folder
- Select MindFusion.Diagramming.Silverlight.dll and MindFusion.Graphs.Silverlight.dll and click the Ok button
Add the Diagram control to the Silverlight application
- In the Visual Studio Solution Explorer, right-click on Page.xaml file within your project to display the shortcut menu.
- Select View Designer.
- From the ToolBox, drag the Diagram control to just bevor the </Grid> end tag in the XAML view.
Markup is added to XAML view
 Copy Code
|
|---|
<my:Diagram></my:Diagram> |
- In the <my:Diagram> start tag, add the following Behavior property: Behavior="LinkShapes"
Create an instance of the Diagram control
- To create an instance of the Diagram control in XAML, fill in a desired name in the x:Name attribute.
| Page.xaml
Copy Code
|
|---|
| <my:Diagram AlignToGrid="True" Behavior="LinkShapes" AllowInplaceEdit="True" LinkBrush="Green" ShapeBrush="LightSkyBlue" x:Name="DiagramLite"></my:Diagram> |
You can reference the control in XAML later in the code-behind file through the name specified by the x:Name attribute in the XAML declaration.
In the Solution Explorer, right-click the project and select View in Browser.
You can draw nodes and links to create a diagram by using the default values.
Set the properties of the DiagramLite control
In the Page.xaml file, set the properties of your diagram as desired.
| Note |
|---|
In the Visual Studio main menu, select Tools > Options > Text Editor > XAML. Check the 'Word wrap" setting. |
Set the AlignToGrid property to true, AllowInplaceEdit to true. For more information, see Diagram properties
- Press F5 or click Start Debugging to run the application.
Now you can draw a diagram in a Silverlight application in the browser.
