Step by Step: Diagram Viewer with external controls

Back to table of contents


Step by Step:

Diagram Viewer with external controls


External Controls allows a user to create your own controls on the panel.

Template of the application displaying the viewer and the ButtonPanel
with custom controls on the right.

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 – “ExternalControls”,
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 ExternalControls 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 by using external controls 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 right panel hosted custom controls binded to Diagram Model.
After these steps Main.Page.xaml code should look like this:


<UserControl x:Class="ExternalControls.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="447" d:DesignWidth="509">

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

        <Grid>

         <Grid.ColumnDefinitions>

                <ColumnDefinition Width="*"/>

                <ColumnDefinition Width="Auto"/>

         </Grid.ColumnDefinitions>

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

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

 <StackPanel Margin="5" DataContext="{Binding Model, ElementName=diagramComponent}">

 <TextBlock Margin="5" FontWeight="Bold">External controls:</TextBlock>

 <Border Margin="5" CornerRadius="6" Padding="6" Background="DarkOrange" BorderThickness="1" BorderBrush="Black">

 <TextBlock TextWrapping="Wrap" MaxWidth="250">
All this controls connected with diagram only by binding. No single line of code!
 </TextBlock>

                    </Border>

 <Button Margin="5" Command="{Binding Model.DocumentModel.Commands[Undo],
 ElementName=diagramComponent}" HorizontalAlignment="Left">Undo</Button>

 <Button Margin="5" Command="{Binding Model.DocumentModel.Commands[Redo],
 ElementName=diagramComponent}" HorizontalAlignment="Left">Redo</Button>

 <Button Margin="5" Command="{Binding Model.DocumentModel.Commands[Cut],
 ElementName=diagramComponent}" HorizontalAlignment="Left">Cut</Button>

 <Button Margin="5" Command="{Binding Model.DocumentModel.Commands[Copy],
 ElementName=diagramComponent}" HorizontalAlignment="Left">Copy</Button>

 <Button Margin="5" Command="{Binding Model.DocumentModel.Commands[Paste],
 ElementName=diagramComponent}" HorizontalAlignment="Left">Paste</Button>

 <Button Margin="5" Command="{Binding Model.DocumentModel.Commands[SelectAll],
 ElementName=diagramComponent}" HorizontalAlignment="Left">Select All</Button>

 <CheckBox Margin="5" IsChecked="{Binding Model.DocumentModel.Page.ShowGrid, Mode=TwoWay, ElementName=diagramComponent}"
 HorizontalAlignment="Left">Show grid</CheckBox>

 <ComboBox Margin="5" Width="145" Height="24"  ItemsSource="{Binding Fonts}"
IsEnabled
="{Binding DocumentModel.FontFamilyProperty.IsEnabled, FallbackValue=false}"
SelectedItem
="{Binding DocumentModel.FontFamilyProperty.Value, Mode=TwoWay}" HorizontalAlignment="Left"/>

 <ComboBox Margin="5" Width="45" Height="24" ItemsSource="{Binding FontSizes}"
SelectedItem
="{Binding DocumentModel.FontSizeInPointsProperty.Value, Mode=TwoWay}"
IsEnabled
="{Binding DocumentModel.FontSizeInPointsProperty.IsEnabled, FallbackValue=false}" HorizontalAlignment="Left"/>

                </StackPanel>

            </Grid>

        </Grid>

    </Grid>

</UserControl>

Please, take a look at the following lines:

<Button Margin="5" Command="{Binding Model.DocumentModel.Commands[Undo],
ElementName
=diagramComponent}" HorizontalAlignment="Left">Undo</Button>

<ComboBox Margin="5" Width="145" Height="24"  ItemsSource="{Binding Fonts}"
 IsEnabled="{Binding DocumentModel.FontFamilyProperty.IsEnabled, FallbackValue=false}"
SelectedItem
="{Binding DocumentModel.FontFamilyProperty.Value, Mode=TwoWay}" HorizontalAlignment="Left"/>

//in this lines we add ComboBox with different fonts and button “Undo”.
You can add other buttons the same way. Buttons related with DiagramComponent by using 
ElementName=diagramComponent

Step 4

You need to add ready diagrams in your project. In order to do this right-click
on ExternalControls, 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. We add FlowChart.grl in this example.


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/FlowChart.grl"))

      {

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

      }

    }

  }

Please, take a look at the following lines:

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

      {

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

      }

 //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.
Similarly, you can place controls everywhere inside the Silverlight application.


Add Feedback