Change diagrams from code

Back to table of contants


Step by Step: Change diagrams from code

Change from code allows a user to create diagrams from code behind without displaying designer for it and change it.

Template of the application displaying created diagrams and the toolbox with “Generate new diagram” and “Randomize” buttons.

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 – “ChangeFromCode”, set directory to save the project.



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 ChangeFromCode 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 and change already created diagrams 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” and “Randomize” buttons. After these steps Main.Page.xaml code should look like this:

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

        <Grid>

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="*"/>

                <ColumnDefinition Width="Auto"/>

            </Grid.ColumnDefinitions>

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

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

                <StackPanel Margin="5">

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

                    <Button Margin="5" Content="Randomize" FontWeight="Bold" Click="Button_Click_1"/>

                </StackPanel>

            </Grid>

        </Grid>

    </Grid>

</UserControl>

Please, take a look at the following line:

<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 LayoutRoot_Loaded(object sender, RoutedEventArgs e)
        {
            CreateDiagram();
        }
 
        private void Button_Click(object sender, RoutedEventArgs e)
        {
            CreateDiagram();
        }
 
        private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            RandomizeDiagram();
        }
 
        private void CreateDiagram()
        {
            var page = new Page() { Name = "Page 1" };
            for (int i = 0; i < 10; i++)
            {
                var shape = new EllipseBlock
                {
                    Text = i.ToString(),
                    TextFill = new SolidFill(Colors.Black),
                    Stroke = new SolidFill(Colors.Black)
                };
                page.Elements.Add(shape);
            }
            Randomize(page);
            var diagram = new Document();
            diagram.Pages.Add(page);
            diagramComponent.OpenDiagram(diagram, "Random diagram");
        }
 
        private void RandomizeDiagram()
        {
            if (diagramComponent.DocumentModel != null)
            {
                diagramComponent.DocumentModel.ChangeTracker.BeginTransaction();
                Randomize(diagramComponent.DocumentModel.Page);
                diagramComponent.DocumentModel.ChangeTracker.CommitTransaction();
            }
        }
 
        private void Randomize(Page page)
        {
            Random rnd = new Random();
            foreach (var element in page.Elements)
            {
                var shape = element as EllipseBlock;
                if (shape != null)
                {
                    var x = rnd.NextDouble() * 400 + 50;
                    var y = rnd.NextDouble() * 600 + 50;
                    var d = rnd.NextDouble() * 60 + 30;
                    var color = Color.FromArgb(255, (byte)(127 + rnd.Next(127)), (byte)(127 + rnd.Next(127)), (byte)(127 + rnd.Next(127)));
                    shape.Location = new Vector2D(x, y);
                    shape.Size = new Vector2D(d, d);
                    shape.Fill = new SolidFill(color);
                }
            }
        }
    }
Please, take a look at the following lines:


private void CreateDiagram()
        {
            var page = new Page() { Name = "Page 1" };
            for (int i = 0; i < 10; i++)
            {
                var shape = new EllipseBlock
                {
                    Text = i.ToString(),
                    TextFill = new SolidFill(Colors.Black),
                    Stroke = new SolidFill(Colors.Black)
                };
                page.Elements.Add(shape);
            }
            Randomize(page);
            var diagram = new Document();
            diagram.Pages.Add(page);
            diagramComponent.OpenDiagram(diagram, "Random diagram");
        }
      }
 
//in these lines we create new diagram at the new Page with random location of the elements on the page
 
private void Randomize(Page page)
        {
            Random rnd = new Random();
            foreach (var element in page.Elements)
            {
                var shape = element as EllipseBlock;
                if (shape != null)
                {
                    var x = rnd.NextDouble() * 400 + 50;
                    var y = rnd.NextDouble() * 600 + 50;
                    var d = rnd.NextDouble() * 60 + 30;
                    var color = Color.FromArgb(255, (byte)(127 + rnd.Next(127)), (byte)(127 + rnd.Next(127)), (byte)(127 + rnd.Next(127)));
 
                    shape.Location = new Vector2D(x, y);
                    shape.Size = new Vector2D(d, d);
                    shape.Fill = new SolidFill(color);
                }
            }
        }
//in these lines we randomly change location and color of the elements on the page


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. You can change current diagram by clicking on “Randomize” button.



Add Feedback