Create diagrams from code

Back to table of content

Step by Step: Create diagrams from code

Create from code allows a user to create diagrams from code without displaying designer for it.

Template of the application displaying created from code diagrams and the panel with “Generate new diagram” button.

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 – “CreateFromCode”, 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. 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 CreateFromCode 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 created from code diagrams or generate from code new diagram 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 DiagramComponent and the panel with “Generate new diagram” button. After these steps Main.Page.xaml code should look like this:

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

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="*"/>

                <ColumnDefinition Width="Auto"/>

            </Grid.ColumnDefinitions>

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

            <Grid Grid.Column="1" Background="White">

                <StackPanel Margin="5">

                    <Button Margin="5" Content="Generate new diagram" FontWeight="Bold" Click="Button_Click"/>

                </StackPanel>

            </Grid>

        </Grid>

    </Grid>

</UserControl>

Please, take a look at the following lines:

<Button Margin="5" Content="Generate new diagram" FontWeight="Bold" Click="Button_Click"/>

 //in this lines we add the Generate New Diagram button

Step 4

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

public partial class MainPage : UserControl

    {

        public MainPage()

        {

            InitializeComponent();

        }

        private void diagramComponent_Loaded(object sender, RoutedEventArgs e)

        {

            GenerateDiagram();

        }

        private void GenerateDiagram()

        {

            var text = new TextLabelBlock

            {

                Location = new Vector2D(10, 10),

                Size = new Vector2D(500, 60),

                Text = "Generated from code at:" + DateTime.Now.ToString(),

                Stroke = new SolidFill(Colors.Black),

                Fill = new SolidFill(Colors.White),

                TextFill = new SolidFill(Colors.Black)

            };

            var startFigure = new FlowChartTerminator

            {

                Location = new Vector2D(100, 100),

                Size = new Vector2D(160, 80),

                Text = "Start",

                Stroke = new SolidFill(Colors.Black),

                TextFill = new SolidFill(Colors.Black)

            };

            var helloFigure = new FlowChartProcess

            {

                Location = new Vector2D(100, 220),

                Size = new Vector2D(160, 80),

                Text = "Hello, world!",

                Stroke = new SolidFill(Colors.Black),

                TextFill = new SolidFill(Colors.Black)

            };

            var endFigure = new FlowChartTerminator

            {

                Location = new Vector2D(100, 340),

                Size = new Vector2D(160, 80),

                Text = "End",

                Stroke = new SolidFill(Colors.Black),

                TextFill = new SolidFill(Colors.Black)

            };

            var connection1 = new Connection

            {

                Stroke = new SolidFill(Colors.Black),

                EndCap = LineCap.Arrow2

            };

            var connection2 = new Connection

            {

                Stroke = new SolidFill(Colors.Black),

                EndCap = LineCap.Arrow2

            };

            ConnectionHelper.Connect(startFigure.BottomPort, connection1.StartPort);

            ConnectionHelper.Connect(helloFigure.TopPort, connection1.EndPort);

            ConnectionHelper.Connect(helloFigure.BottomPort, connection2.StartPort);

            ConnectionHelper.Connect(endFigure.TopPort, connection2.EndPort);

            var page = new Page() { Name = "Page 1" };

            page.Elements.Add(text);

            page.Elements.Add(startFigure);

            page.Elements.Add(helloFigure);

            page.Elements.Add(endFigure);

            page.Elements.Add(connection1);

            page.Elements.Add(connection2);

            var diagram = new Document();

            diagram.Pages.Add(page);

            diagramComponent.OpenDiagram(diagram, "Hello world!");

        }

        private void Button_Click(object sender, RoutedEventArgs e)

        {

            GenerateDiagram();

        }

    }

Please, take a look at the following lines:

var helloFigure = new FlowChartProcess //in this line we create the FlowChartProcess element

            {

                Location = new Vector2D(100, 220), //setting its location in the diagram

                Size = new Vector2D(160, 80), //setting the size of the element

                Text = "Hello, world!", //setting the text inside element

                Stroke = new SolidFill(Colors.Black), //setting the fill of stroke

                TextFill = new SolidFill(Colors.Black) //setting the fill of text

            };

var connection1 = new Connection //in this line we create the connection between elements

            {

                Stroke = new SolidFill(Colors.Black), //setting the fill of stroke

                EndCap = LineCap.Arrow2 //setting the EndCap

            };

ConnectionHelper.Connect(startFigure.BottomPort, connection1.StartPort); //specify the beginning of the connection

ConnectionHelper.Connect(helloFigure.TopPort, connection1.EndPort); //specify the ending of the connection

Step 5

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



The application will open in the browser.


You can create new diagram by clicking on “Generate new diagram” button.


Add Feedback