Build Custom Class Designer with Diagram Editor

5 posts, 0 answers
  1. Ronald
    Ronald avatar
    3 posts
    Member since:
    Jul 2014

    Posted 10 Jul 2014 Link to this post

    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"

  2. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 15 Jul 2014 Link to this post

    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
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
  3. UI for WPF is Visual Studio 2017 Ready
  4. Ronald
    Ronald avatar
    3 posts
    Member since:
    Jul 2014

    Posted 22 Jul 2014 Link to this post

    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)?
  5. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 25 Jul 2014 Link to this post

    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
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
  6. Ronald
    Ronald avatar
    3 posts
    Member since:
    Jul 2014

    Posted 13 Aug 2014 in reply to Zarko Link to this post

    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
Back to Top
UI for WPF is Visual Studio 2017 Ready