SharpShooter Diagrams Getting Started

Introduction
Product Prerequisite
Creating Sample Application
Step 1. Create a new Silverlight Application project named DiagramsSampleApplication
Step 2. Adding and setting up SharpShooter Diagrams component
Step 3. Managing toolboxes in the control for online diagrams designer
Step 4. Launching application
Conclusion

Introduction

The purpose of the user manual is to demonstrate main points of using SharpShooter Diagrams, provide necessary knowledge to get started with the component. You will get step by step recommendations on how to create a web application using SharpShooter Diagrams. You’ll see how to create a simple diagram.

Product Prerequisite
In order to get the sample working the following software should be installed on your computer:

  • MS Visual Studio 2010
  • Silverlight 4.0
  • Silverlight 4.0 SDK
  • Microsoft Silverlight 4 Toolkit
  • SharpShooter Diagrams


Creating Sample Application

Step 1. Create a new Silverlight Application project named DiagramsSampleApplication





 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. Adding and setting 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

*You also may need to add additional libraries. For example Aphalina.Diagrams.FloorPlans

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. Managing toolboxes in the control for online diagrams designer

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 create a control by changing 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>


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 4. Launching application

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


In this designer you can create any diagrams.


Conclusion
We have examined basic steps and got a simple and quite operable application. We didn’t have to write thousand lines of code – we only used ready-made implementation. It will be enough in the most cases.

Add Feedback