Build Custom Class Designer with Diagram Editor

[Ronald]

Dear Telerik-Team!

Basically I came to your site because I want to create an enhanced Class Diagram Designer for my application - and I was amazed by your Diagram editor's capabilities. I saw that you have a basic screenshot for designing entities at http://www.telerik.com/products/wpf/diagrams.aspx.

But unfortunately none of your forum posts, tutorials or examples mentioned that use case.

So I try to lay out what I would like to achive. I'm aiming to create a class designer similar to - but richer than - the Microsoft Visual Studio Class Designer.

The following constraints I have
- Layout/looks should be adaptable (this works with your control from what I have seen)
- workflow as described should be possible to achieve

The workflows are the following:

Scenario one

01CreateClass.png - I would like to create a class
02CreateProperty.png - Add a property to it. Notice that it should be grouped to a region called "Properties"
03NameProperty.png - Specify the name of the property
04NamePropertyEnd.png - Picture shows how it should look like in the end.

Scenario two

05PropertyForEnum.png - Let's add another property called "BookStat"
06EnumCreate.png - Now we create an Enum for that - this should have a different look/shape than a class shape
07AddEnumValue.png - Let's add a value to the Enum
08MakePropertyTypeEnum.png - Now drag a connector from the "BookStat" property to the enum to make it of that type
09PropertyTypeIsEnum.png - A connector should be close to the "BookStat" property connecting to the shape "BookStatus"

Scenario three

10PropertyNoBackReference.png - Create two entities
11PropertyNoBackReferenceAction.png - Drag a connection from the property "Library" of class "Book" to just the class Library.
12PropertyNoBackEnd.png - That means there is no back reference from Library to book. So the connection is put on the shape of "Library" itself

Scenario four

13ReferenceReaderBookStart.png - Create two entities
14ReferenceReaderBookAction.png - Draw the connection from property "Books" of entity "Reader" to property "Reader" of entitiy "Book"
15ReferenceReaderBookEnd.png - This time we have a back reference, so the two properties are converted to a relationship and moved to another region called "Relationships"

[Zarko]

Hello Ronald,
From your explanations it seems that you need something between our TableShape and ClassDiagram examples. For the layouts - you should taka a look at our Layout SDK example (you could use our SDK Browser for this) and for the other questions:
Scenario 1) I think that the easies approach for this will be to use a custom RadDiagramContainerShape for the Class shape and custom shapes for the rows (similar to the TableShape example). For the Property, Field and etc. collapsible areas you could also use custom containers.
Scenario 2) For this you can again use a custom container shape with custom connectors.
Scenario 3) You should be able to do this out-of-the-box.
Scenario 4) For this you could use the ConnectionManipulationCompleted event and manually move the two items to the Relationships collection:

private void OnConnectionManipulationCompleted(object sender, Telerik.Windows.Controls.Diagrams.ManipulationRoutedEventArgs e)
{
    if (e.ManipulationStatus == ManipulationStatus.Attaching)
    {
        var source = e.Connection.Source;
        var target = e.Shape;
        // Move source and target to Relationships
    }
}

I've also attached a sample project that should help you get started with your application.
I hope I was able to help you.

Regards,
Zarko
Telerik

 

 

[Ronald]

Dear Zarko,

This is one great example of yours. Your diagram control seems powerful.

Taking your example I wanted to see if I could extend it to put my classes in namespaces. Your ContainerShape would be suited for that out of the box, I have seen.

So I added a shape for a Namespace:

using Telerik.Windows.Controls;

namespace ClassDiagram
{
    public class NamespaceShape : RadDiagramContainerShape
    {
        public NamespaceShape()
        {
        }
    }
}

And then I styled it (for a test the style content is irrelevant I guess):

<Style TargetType="local:NamespaceShape">
   <Setter Property="IsResizingEnabled" Value="False" />
   <Setter Property="MinHeight" Value="100" />
   <Setter Property="MinWidth" Value="100" />
   <Setter Property="Padding" Value="15 5" />
   <Setter Property="Width" Value="150" />
   <Setter Property="Height" Value="Auto" />
   <Setter Property="HorizontalContentAlignment" Value="Left" />
   <Setter Property="Template">
      <Setter.Value>
         <ControlTemplate TargetType="local:NamespaceShape">
         [...]
         </ControlTemplate>
      </Setter.Value>
   </Setter>
</Style>

And then I got the following error

"Error: The name "NamespaceShape" does not exist in the namespace "clr-namespace:ClassDiagram".

Is it possible to add two different container shapes? Do I need something similar to "ShapeStyleSelector"...like "ContainerStyleSelector" to tell the controls how to render classes and how to render namespaces? Is there an easy way to have two different containers on the canvas (one resembling the class and another type of container to put several classes in)?

[Zarko]

Hello Ronald,
This is very strange - what you've done should be enough and everything should be working. I tested your code in my sample project and it was fine so I'd like to ask you to make sure that you've cleared and rebuilt your application. 
I'm attaching me test project with the new Namespace shape so that you could examine it.
I hope I was able to help you.

Regards,
Zarko
Telerik

 

 

[Ronald]

Dear Zarko,

I can confirm your statement now. It really works as I described and as you showed in the example. Must have been a compilation issue on my machine.

Thank you for your kind help.


Best regards

[Sami]

Hi,

I'm looking at the ClassDiagram example which seems to be working quite nicely. However I would like to add the ClassShape to RadDiagramToolbox so that user could drag the ClassShape to the RadDiagram. My current RadDiagramToolbox implementation is based on the example so it just shows the Geometries. How do I bind the ClassShape to the RadDiagramToolbox?

[Martin Ivanov]

Hello Sami,

Can you take a look to the following articles and let me know if they help?

• How to Populate RadDiagramToolbox with Custom Data Items
• Drag Items from a Custom Databound DiagramToolbox

Regards,
Martin Ivanov
Progress Telerik

[Sami]

Hi,

 

I'm using the data model from the example "How to Populate RadDiagramToolbox with Custom Data Items". The diagram part is from the ClassDiagram example above. However in this example the shape is defined in the XAML (see below). I understand that the toolbox wants Geometry objects and I was wondering if there is any possibility to get the geometry definition from the XAML? 

 

<Application.Resources>
<Style TargetType="local:ClassShape">
<Setter Property="IsCollapsible" Value="True" />
<Setter Property="IsResizingEnabled" Value="False" />
<Setter Property="MinHeight" Value="100" />
<Setter Property="MinWidth" Value="100" />
<Setter Property="Padding" Value="15 5" />
<Setter Property="Width" Value="150" />
<Setter Property="Height" Value="Auto" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:ClassShape">
<Grid x:Name="RootPanel">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="MouseStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver" />
</VisualStateGroup>
<VisualStateGroup x:Name="CollapsedStates">
<VisualState x:Name="Expanded" />
<VisualState x:Name="Collapsed" />
</VisualStateGroup>
<VisualStateGroup x:Name="ActiveConectionStates">
<VisualState x:Name="NormalActiveConnectionState" />
<VisualState x:Name="ActiveConnectionInsideShape">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0"
                               Storyboard.TargetName="ActiveSelectedBorder"
                               Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ConnectorsAdornerVisibilityStates">
<VisualState x:Name="ConnectorsAdornerCollapsed" />
<VisualState x:Name="ConnectorsAdornerVisible">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0"
                               Storyboard.TargetName="ConnectorsControl"
                               Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Selected" />
<VisualState x:Name="SelectedInGroup" />
<VisualState x:Name="Unselected" />
<VisualState x:Name="SelectedAsGroup" />
</VisualStateGroup>
<VisualStateGroup x:Name="EditMode">
<VisualState x:Name="NormalMode" />
<VisualState x:Name="NormalEditMode">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0"
                               Storyboard.TargetName="TextContent"
                               Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0"
                               Storyboard.TargetName="EditContent"
                               Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="TextBoxEditMode">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0"
                               Storyboard.TargetName="TextContent"
                               Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0"
                               Storyboard.TargetName="EditTextBox"
                               Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="DropStates">
<VisualState x:Name="DropNormal" />
<VisualState x:Name="DropComplete" />
<VisualState x:Name="DragOver" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Border x:Name="ContainerBorder"
        Grid.RowSpan="3"
        Background="{TemplateBinding Background}"
        BorderBrush="{TemplateBinding BorderBrush}"
        BorderThickness="{TemplateBinding BorderThickness}"
        CornerRadius="8" />
<Grid x:Name="NormalContent" MinHeight="50">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Border Grid.ColumnSpan="2"
        BorderBrush="{TemplateBinding BorderBrush}"
        BorderThickness="1 1 1 0"
        CornerRadius="8 8 0 0">
<Border.Background>
<LinearGradientBrush StartPoint="0, 0.5" EndPoint="1, 0.5">
<LinearGradientBrush.GradientStops>
<GradientStop Color="#FFD4DDEF" />
<GradientStop Offset="1" Color="#FFFFFFFF" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.Background>
</Border>
<StackPanel x:Name="TextContent"
            Margin="{TemplateBinding Padding}"
            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
            VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<TextBlock FontSize="12"
           FontWeight="Bold"
           Text="{TemplateBinding Content}" />
<TextBlock Grid.Row="1"
           Margin="5 0 0 0"
           FontSize="9"
           Text="Class" />
</StackPanel>
<Grid x:Name="PART_RotationalPart">
<ContentPresenter x:Name="EditContent"
                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                  Content="{TemplateBinding Content}"
                  ContentTemplate="{TemplateBinding EditTemplate}"
                  Visibility="Collapsed" />
<TextBox x:Name="EditTextBox" Visibility="Collapsed">
<TextBox.Style>
<Style TargetType="{x:Type TextBox}">
<Setter Property="TextWrapping" Value="Wrap" />
<Setter Property="TextAlignment" Value="Center" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Margin" Value="4" />
<Setter Property="FontSize" Value="11" />
<Setter Property="FontFamily" Value="Segoe UI" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="Padding" Value="2" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Grid x:Name="RootElement" UseLayoutRounding="True">
<Rectangle Fill="White"
           Stroke="#FF767676"
           StrokeDashArray="3 3" />
<ScrollViewer x:Name="PART_ContentHost"
              HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
              VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
              Background="Transparent"
              BorderThickness="0"
              Foreground="{TemplateBinding Foreground}"
              Padding="{TemplateBinding Padding}">
<telerik:StyleManager.Theme>
<telerik:Office_BlackTheme />
</telerik:StyleManager.Theme>
</ScrollViewer>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TextBox.Style>
</TextBox>
</Grid>
<telerik:RadToggleButton x:Name="ToggleCollapseButton"
                         Grid.Column="1"
                         Width="18"
                         MinHeight="18"
                         Margin="3"
                         VerticalAlignment="Center"
                         Focusable="False"
                         InnerCornerRadius="0"
                         IsBackgroundVisible="False"
                         IsTabStop="False"
                         Padding="3">
<Primitives:ToggleButtonExtensions.CheckedContent>
<Path Data="M0,0L1,0 4,3 7,0 8,0 4,4z" Fill="Black" />
</Primitives:ToggleButtonExtensions.CheckedContent>
<Primitives:ToggleButtonExtensions.UncheckedContent>
<Path Data="M4,0L8,4 7,4 4,1 1,4 0,4z" Fill="Black" />
</Primitives:ToggleButtonExtensions.UncheckedContent>
<telerik:RadToggleButton.Visibility>
<Binding Path="IsCollapsible" RelativeSource="{RelativeSource TemplatedParent}">
<Binding.Converter>
<telerik:BooleanToVisibilityConverter />
</Binding.Converter>
</Binding>
</telerik:RadToggleButton.Visibility>
<Path Data="M4,0L8,4 7,4 4,1 1,4 0,4z" Fill="Black" />
</telerik:RadToggleButton>
</Grid>
<ContentControl x:Name="CollapsedContent"
                Grid.Row="1"
                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                Content="{TemplateBinding CollapsedContent}"
                ContentTemplate="{TemplateBinding CollapsedContentTemplate}"
                Foreground="{TemplateBinding Foreground}">
<ContentControl.Visibility>
<Binding Path="IsCollapsed" RelativeSource="{RelativeSource TemplatedParent}">
<Binding.Converter>
<telerik:BooleanToVisibilityConverter />
</Binding.Converter>
</Binding>
</ContentControl.Visibility>
</ContentControl>
<Border x:Name="ActiveSelectedBorder"
        BorderBrush="#7FC92931"
        BorderThickness="2"
Grid.RowSpan="2"
Margin="-2"
        CornerRadius="8"
        Visibility="Collapsed" />
<Primitives:ConnectorsControl x:Name="ConnectorsControl"
                              Grid.RowSpan="3"
                              ItemContainerStyle="{TemplateBinding ConnectorStyle}"
                              ItemsSource="{TemplateBinding Connectors}"
                              Visibility="Collapsed" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

<Style TargetType="local:PropertyContainer">
<Setter Property="IsCollapsible" Value="True" />
<Setter Property="MinHeight" Value="24" />
<Setter Property="UseDefaultConnectors" Value="False" />
<Setter Property="Width" Value="Auto" />
<Setter Property="Height" Value="Auto" />
<Setter Property="MinWidth" Value="100" />
<Setter Property="IsResizingEnabled" Value="False" />
<Setter Property="IsRotationEnabled" Value="False" />
<Setter Property="IsDraggingEnabled" Value="False" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:PropertyContainer">
<Grid x:Name="RootPanel" Margin="1 0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="MouseStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver" />
</VisualStateGroup>
<VisualStateGroup x:Name="CollapsedStates">
<VisualState x:Name="Expanded" />
<VisualState x:Name="Collapsed" />
</VisualStateGroup>
<VisualStateGroup x:Name="ActiveConectionStates">
<VisualState x:Name="NormalActiveConnectionState" />
<VisualState x:Name="ActiveConnectionInsideShape" />
</VisualStateGroup>
<VisualStateGroup x:Name="ConnectorsAdornerVisibilityStates">
<VisualState x:Name="ConnectorsAdornerCollapsed" />
<VisualState x:Name="ConnectorsAdornerVisible" />
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Selected" />
<VisualState x:Name="SelectedInGroup" />
<VisualState x:Name="Unselected" />
<VisualState x:Name="SelectedAsGroup" />
</VisualStateGroup>
<VisualStateGroup x:Name="EditMode">
<VisualState x:Name="NormalMode" />
<VisualState x:Name="NormalEditMode" />
<VisualState x:Name="TextBoxEditMode" />
</VisualStateGroup>
<VisualStateGroup x:Name="DropStates">
<VisualState x:Name="DropNormal" />
<VisualState x:Name="DropComplete" />
<VisualState x:Name="DragOver" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="NormalContent"
      Height="{x:Static local:Constants.RowHeight}"
      Background="LightGray">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<telerik:RadToggleButton x:Name="ToggleCollapseButton"
                         Width="18"
                         MinHeight="18"
                         Margin="3"
                         VerticalAlignment="Center"
                         Focusable="False"
                         InnerCornerRadius="0"
                         IsBackgroundVisible="False"
                         IsTabStop="False"
                         Padding="3">
<Primitives:ToggleButtonExtensions.CheckedContent>
<Path Data="M0,0L1,0 4,3 7,0 8,0 4,4z" Fill="Black" />
</Primitives:ToggleButtonExtensions.CheckedContent>
<Primitives:ToggleButtonExtensions.UncheckedContent>
<Path Data="M4,0L8,4 7,4 4,1 1,4 0,4z" Fill="Black" />
</Primitives:ToggleButtonExtensions.UncheckedContent>
<telerik:RadToggleButton.Visibility>
<Binding Path="IsCollapsible" RelativeSource="{RelativeSource TemplatedParent}">
<Binding.Converter>
<telerik:BooleanToVisibilityConverter />
</Binding.Converter>
</Binding>
</telerik:RadToggleButton.Visibility>
<Path Data="M4,0L8,4 7,4 4,1 1,4 0,4z" Fill="Black" />
</telerik:RadToggleButton>
<TextBlock Grid.Column="1"
           Margin="{TemplateBinding Padding}"
           HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
           VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
           FontSize="12"
           FontWeight="Bold"
           Text="{TemplateBinding Content}" />
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

<Style TargetType="local:PropertyShape">
<Setter Property="Height" Value="{x:Static local:Constants.RowHeight}" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="IsEditable" Value="True" />
<Setter Property="IsInEditMode" Value="True" />
<Setter Property="MinWidth" Value="100" />
<Setter Property="IsDraggingEnabled" Value="False" />
<Setter Property="Width" Value="Auto" />
<Setter Property="IsSelected" Value="True" />
<Setter Property="Padding" Value="10 0" />
<Setter Property="IsResizingEnabled" Value="False" />
<Setter Property="IsRotationEnabled" Value="False" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:PropertyShape">
<Grid Margin="1 0" Background="White">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="MouseStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver" />
</VisualStateGroup>
<VisualStateGroup x:Name="ActiveConectionStates">
<VisualState x:Name="NormalActiveConnectionState" />
<VisualState x:Name="ActiveConnectionInsideShape">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0"
                               Storyboard.TargetName="ActiveSelectedBorder"
                               Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ConnectorsAdornerVisibilityStates">
<VisualState x:Name="ConnectorsAdornerCollapsed" />
<VisualState x:Name="ConnectorsAdornerVisible">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0"
                               Storyboard.TargetName="ConnectorsControl"
                               Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Selected" />
<VisualState x:Name="SelectedInGroup" />
<VisualState x:Name="Unselected" />
<VisualState x:Name="SelectedAsGroup" />
</VisualStateGroup>
<VisualStateGroup x:Name="EditMode">
<VisualState x:Name="NormalMode" />
<VisualState x:Name="NormalEditMode" />
<VisualState x:Name="TextBoxEditMode">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0"
                               Storyboard.TargetName="NormalContent"
                               Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0"
                               Storyboard.TargetName="EditTextBox"
                               Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
<Border x:Name="ActiveSelectedBorder"
        BorderBrush="#7FC92931"
        BorderThickness="2"
        Visibility="Collapsed" />
<TextBlock x:Name="NormalContent"
           Margin="{TemplateBinding Padding}"
           HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
           VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
           Text="{TemplateBinding Content}" />
<Primitives:ConnectorsControl x:Name="ConnectorsControl"
                              ItemContainerStyle="{TemplateBinding ConnectorStyle}"
                              ItemsSource="{TemplateBinding Connectors}"
                              Visibility="Collapsed" />
</Grid>
<Grid x:Name="PART_RotationalPart">
<TextBox x:Name="EditTextBox"
         Margin="{TemplateBinding Padding}"
         VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
         Visibility="Collapsed" />
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

</Application.Resources>

[Martin Ivanov]

Hello Sami,

I will prepare a project based on your requirement and send it over a bit later today.

Regards,
Martin Ivanov
Progress Telerik

[Martin Ivanov]

Hello Sami,

I attached an example based on the ClassDiagram demo that shows how to add the class shape in the toolbox. However, keep in mind that this is not that straightforward because the example is not designer with this scenario taken into account. To achieve this you will need to use the ShapeDeserialized event and the CreateNode method of the graph source. You can see that shown in the demo. I hope that helps.

As a side note, the original ClassDiagram example implements a custom solution explorer control that lists the available classes. You can drag elements from the explorer and drop them on the diagram.  This will create a shape corresponding to the dragged one.

Regards,
Martin Ivanov
Progress Telerik

[Sami]

Hi Martin,

 

Thanks. I'm having trouble in running the example. I get following error:

Error GenericArguments[1], 'Telerik.Windows.Diagrams.Core.ILink', on 'Telerik.Windows.Controls.Diagrams.Extensions.ViewModels.GraphSourceBase`2[TNode,TLink]' violates the constraint of type parameter 'TLink'. WpfApp1 D:\Ohjelmointi\Telerik Examples\Wpf1App\MainWindow.xaml 11

 

This relates to setting the MainViewModel as Datacontext. 

[Martin Ivanov]

Hello Sami,

Can you elaborate a bit more on this error? Is this reproducible on start up of the project? Or when you do something additional (code or interaction with the diagram), and if so, what it is? 

Regards,
Martin Ivanov
Progress Telerik

[Sami]

Hi Martin,

 

When I load the project, VS is flagging that it cannot find the references: Core_WPF, Diagram_WPF, Extensions_WPF, Telerik.Windows.Themes.Material.  I change these manually to the correct ones (Telerik.Windows.Controls.Diagram etc.).

 

Then when I open the MainWindow.XAML, VS is flagging that "name "MainViewModel" does not exist in the namespace "clr-namespace:WpfApp1".WpfApp1D:\Ohjelmointi\Telerik Examples\ClassDiagramOrig\MainWindow.xaml11".

 

I didn't see the custom solution explorer control in the original ClassDiagram example. How do I get that visible? I could perhaps use that as a starting point.

 

[Martin Ivanov]

Hello Roland,

Thank you for the additional information.

The missing references should be replaced with the following dlls. Please excuse me for this.

• Telerik.Windows.Diagrams.Core.dll
• Telerik.Windows.Controls.Diagrams.dll
• Telerik.Windows.Controls.Diagrams.Extensions.dll
  
  

The Telerik.Windows.Themes.Material.dll can be found in your UI for WPF installation folder. It is part of the implicit styles theming mechanism. You can read more about this in the Xaml vs. NoXaml and Setting a Theme help articles. Note that all examples from the demos application are designed for NoXaml dlls. If you reference the other dlls type something in the visual or functional aspect of the example could get broken.

The missing references are the core to the MainViewModel XAML issue, so this should be resolved when you replace the dlls.

About the solution explorer, if you open the ClassDiagram example in demo application the explorer is shown by default. If you can't see it try pressing the "solution explorer" button (see the attached image). Keep in mind that I removed this from my project and I've left only the toolbox.

Regards,
Martin Ivanov
Progress Telerik

[Sami]

Thanks, 

I still have the same issue even though I put the DLLs in place. However, I think that the original ClassDiagram example with its own explorer is much closer to what I'm looking for. The explorer looks pretty good.