Step by Step: Diagrams Designer

Back to table of contents

Step by Step: Diagram Designer

Template of the application displaying Diagram designer.

Step 1

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

Select Silverlight Application, set name of the project – “DiagramsSampleApplication”, set directory to save the project to.

While creation of the project uncheck option “Host the Silverlight application in a new Web site”.

After that Visual Studio will create a new solution containing one project.

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 designer. 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 DiagramsSampleApplication 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 manage toolboxes in the designer for the creation of flow charts, org charts, other diagram types and specialized graphics we need to add DiagramComponent control to the 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 Ribbon, Component and Toolbox panels. After these steps Main.Page.xaml code should look like this:

<UserControl x:Class="SampleApplication.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">

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto"/>

            <RowDefinition/>

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition/>

            <ColumnDefinition Width="200"/>

        </Grid.ColumnDefinitions>

        <diagrams:DiagramRibbon DiagramComponent="{Binding ElementName=diagramComponent}" Grid.ColumnSpan="2"/>

        <diagrams:DiagramComponent Grid.Column="0" x:Name="diagramComponent" Grid.Row="1"/>

        <diagrams:DiagramToolbox x:Name="diagramToolBox" Grid.Column="1" DiagramComponent="{Binding ElementName=diagramComponent}" Grid.Row="1">

        </diagrams:DiagramToolbox>

    </Grid>

</UserControl>

Please, take a look at the following lines:

<diagrams:DiagramRibbon DiagramComponent="{Binding ElementName=diagramComponent}" Grid.ColumnSpan="2"/>  

<diagrams:DiagramComponent Grid.Column="0" x:Name="diagramComponent" Grid.Row="1"/>

<diagrams:DiagramToolbox x:Name="diagramToolBox" Grid.Column="1" DiagramComponent="{Binding ElementName=diagramComponent}" Grid.Row="1">

        </diagrams:DiagramToolbox>

//in this lines we add the DiagramComponent, Ribbon and ToolBox. They are related with DiagramComponent by using Binding ElementName=diagramComponent

Step 4

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

public partial class MainPage : UserControl

    {

        public MainPage()

        {

            InitializeComponent();

            Loaded += new RoutedEventHandler(MainPage_Loaded);

        }

        void MainPage_Loaded(object sender, RoutedEventArgs e)

        {

            diagramComponent.CreateNewDiagram("NewDiagram");

        }

    }

Step 5

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

The application will open in the browser.

In this designer you can create any diagrams.





Add Feedback