Step by Step: Diagram Viewer

Template of the application displaying Diagram Viewer. 

Step 1

Create a new project in Microsoft Visual Studio. Select New\Project from the main menu.

Select Windows Forms Application, set name of the project – “DiagramViewer” and set
directory to save the project to.

Step 2

Add and set up SharpShooter Diagrams component. It’s necessary to add SharpShooter
Diagrams component to the Silverlight application to add the diagrams viewer.
In order to do that, you should add references to the following assemblies:

Aphalina.Core.dll

Aphalina.Diagrams.Components.dll

Aphalina.Diagrams.DesignTime.dll

Aphalina.Diagrams.DesignTime.UI.dll

Aphalina.Diagrams.dll

Aphalina.Diagrams.FlowCharts.DesignTime.dll

Aphalina.Diagrams.FlowCharts.dll

Aphalina.Diagrams.UI.Controls.dll

Aphalina.Diagrams.UI.Models.dll

Aphalina.Diagrams.UI.Ribbon.dll

Aphalina.Drawing.Connections.DesignTime.dll

Aphalina.Drawing.Connections.dll

Aphalina.Drawing.Core.dll

Aphalina.Drawing.dll

Aphalina.Drawing.UI.Controls.dll

Aphalina.Drawing.UI.Models.dll

Aphalina.Drawing.UI.Ribbon.dll

Aphalina.Framework.dll

In order to do it, right-click References of the DiagramViewer in the "Solution Explorer"
and select “Add Reference” item in the popup menu.

You should also add references to the following assemblies:

System.Windows.Controls.dll

System.Windows.Controls.Input.dll

System.Windows.Controls.Layout.Toolkit.dll

System.Windows.Controls.Toolkit.dll

Your References should look like this:

Step 3

In order to view already created diagrams we need to add DiagramComponent control to MainPage.xaml. Open it in the designer. Right-click MainPage.xaml and select View Designer in the popup menu.

Add xml namespace for the diagrams. Then add DiagramComponent. After these steps Main.Page.xaml code should look like this:

<UserControl x:Class="DiagramViewer.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    xmlns:diagrams="http://schemas.aphalina.com/diagrams"

    mc:Ignorable="d"

    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White" Loaded="LayoutRoot_Loaded">

        <diagrams:DiagramComponent x:Name="diagramComponent"/>

    </Grid>

</UserControl>

Please, take a look at the following line:

<Grid x:Name="LayoutRoot" Background="White" Loaded="LayoutRoot_Loaded">

        <diagrams:DiagramComponent x:Name="diagramComponent"/>

 //in this line we add the Component and define layout for our component

Step 4

You need to add ready diagrams in your project. In order to do this right-click on DiagramViewer,
select Add, then select New Folder and name it Diagrams.

It should look like this:

Then right-click on this folder, select Add -> Existing Item…

Then select .grl files, that you’ve created earlier or .grl files from the samples. Then click on Add.

Your Solution Explorer should look like this:

Then open Properties of added diagrams. 

Select BuildAction, then Resource.

Repeat these steps with other added diagrams.

Step 5

Open the MainPage.xaml.cs source code and add the following code.

public partial class MainPage : UserControl

  {

   public MainPage()

   {

    InitializeComponent();

   }

  private void LayoutRoot_Loaded(object sender, RoutedEventArgs e)

        {

using (var stream = ResourceHelper.LoadStream(Assembly.GetExecutingAssembly(), "Diagrams/Factorial.grl"))

   {

 diagramComponent.OpenDiagram(stream, "Factorial algorithm", true);

   }

using (var stream = ResourceHelper.LoadStream(Assembly.GetExecutingAssembly(), "Diagrams/FlowChart.grl"))

            {

                diagramComponent.OpenDiagram(stream, "Flow Chart", true);

            }

        }

       }

Please, take a look at the following lines:

using (var stream = ResourceHelper.LoadStream(Assembly.GetExecutingAssembly(), "Diagrams/Factorial.grl"))

            {

                diagramComponent.OpenDiagram(stream, "Factorial algorithm", true);

            }

 //in this lines we load the file from the resources to stream, and then open it

Step 6

Launch application by clicking the “Start Debugging”   button on the main Visual Studio toolbar. 

The application will open in the browser. In this viewer you can view any already created diagrams.