Resize predefined shape geometry?

[Gijs]

I have a toolbox containing two types of shapes: circles and rectangles.
I create these shapes in code. My viewmodel contains a Geometry property.
The circle I create using the statement "ShapeFactory.GetShapeGeometry(FlowChartShapeType.StartShape)" which gives me a geometry.
This is working fine.

The StartShape geometry has a built in size of 74 by 111 pixels.
Now I find these shapes to big and want to make them smaller. 
It seems I'm not able to change the width and height of the generated Geometry.

I tried setting the width and height in the ControlTemplate but it doesn't give me the result I want because the shape is still to big while dragging the item from the toolbox.
I also tried setting my the Geometry to a new EllipseGeometry. But this gives me an error "Unexpected token 'System.Windows.Media.EllipseGeometry' encountered at position '0'."

Could you please tell me what's the easiest way to use these predefined basic geometries but in a different size?

[Gijs]

I forgot to mention these shapes shouldn't be user resizable. They should be fixed sized, I disabled the handles for this.

[Petar Mladenov]

Hello Gijs,

If you have custom toolbox control, I suppose you use the DragInitialized event handler like in our Drawing Demo.

private void OnDragInitialize(object sender, DragInitializeEventArgs args)
    {
        args.AllowedEffects = DragDropEffects.All;
        if (args.OriginalSource.GetType() == typeof(Telerik.Windows.Controls.RadListBoxItem))
        {
            var draggedShape = (args.OriginalSource as Telerik.Windows.Controls.RadListBoxItem).ChildrenOfType<RadDiagramShapeBase>().FirstOrDefault();
            if (draggedShape != null)
            {
                var shapeSize = new Size(draggedShape.ActualWidth, draggedShape.ActualHeight);
                if (shapeSize.Width > 0 && shapeSize.Height > 0)
                {
                    var dropInfo = new DiagramDropInfo(shapeSize, SerializationService.Default.SerializeItems(new List<IDiagramItem> {draggedShape}));
                    args.Data = dropInfo;
                    args.DragVisualOffset = new Point(args.RelativeStartPoint.X - (shapeSize.Width / 2), args.RelativeStartPoint.Y - (shapeSize.Height / 2));

                    var draggingImage = new System.Windows.Controls.Image
                    {
                        Source = new Telerik.Windows.Media.Imaging.RadBitmap(draggedShape).Bitmap,
                        Width = shapeSize.Width,
                        Height = shapeSize.Height
                    };
                    args.DragVisual = draggingImage;
                }
            }
        }
    }

On Drag, you are able to set the size of the drag visual object (draggingImage). Also, since you serialize the dragged item with:

var dropInfo = new DiagramDropInfo(shapeSize, SerializationService.Default.SerializeItems(new List<IDiagramItem> {draggedShape}));

the ShapeDeserialized event of the RadDiagram will be fired. In it  you are able to set the size of the Shape you have just dropped in the Diagram:

private void diagram_ShapeDeserialized(object sender, Telerik.Windows.Controls.Diagrams.ShapeSerializationRoutedEventArgs e)
     {
         e.Shape.Width = 200;
         e.Shape.Height = 100;
     }

Please let us know if you use other toolbox approach. Another option is to use geometry with different built-in size.


Regards,
Petar Mladenov
Telerik

 

 

[Gijs]

Once I found out Geometry had to be a PathGeometry it was easy to solve my issue.

var p = new PathGeometry();
var r = new EllipseGeometry(new Rect(new Point(0, 0), new Size(30,30)));
p.AddGeometry(r);
Geometry = p;

This works.

[Rahul]

Hello Support,

I have two shapes in RadDiagram and I want to save it into database but I am not able to get which Shape Type I have dragged(rectangle or terminator) . I just want to know that which shape I have dragged so that I can save accordingly. I want this in c# code. Please take a look into the attached screen-shot.

Thanks
Rahul

[Rahul]

Hello Support,

I have two shapes in RadDiagram and I want to save it into database but I am not able to get which Shape Type I have dragged(rectangle or terminator) . I just want to know that which shape I have dragged so that I can save accordingly. I want this in c# code. Please take a look into the attached screen-shot.

Thanks
Rahul

[Petar Mladenov]

Hi Rahul,

I suppose you use the DiagramToolBox in the standard way like described in the following help section.
Diagram ToolBox How To use the predefined HierarchicalGalleryItemsCollection

When you drag the shape from toolbox, the RadDiagram saves Shape's properties into dictionary and later loads these values when you drop the shape. You can subscribe into this process and extend the default serialization and deserialization like so:

public MainWindow()
       {
           InitializeComponent();
           this.toolBox.ItemsSource = new HierarchicalGalleryItemsCollection();
           SerializationService.Default.ItemSerializing += Default_ItemSerializing;
           this.diagram.ShapeDeserialized += diagram_ShapeDeserialized;
       }

       void diagram_ShapeDeserialized(object sender, ShapeSerializationRoutedEventArgs e)
       {
           var shapeName = e.SerializationInfo["ShapeType"];
           if (shapeName != null)
           {
               (e.Shape as RadDiagramShape).Content = shapeName.ToString();
           }
       }

       void Default_ItemSerializing(object sender, SerializationEventArgs<IDiagramItem> e)
       {
           var shape = e.Entity as RadDiagramShape;
           if (shape == null)
               return;

           var galleryItem = shape.DataContext as GalleryItem;

           if (galleryItem != null)
           {
               e.SerializationInfo["ShapeType"] = galleryItem.Header;
           }
       }

You can see in ShapeDeserialized we get the ShapeType and set it as Content of the Shape. However, you can also set into the Tag proeperty of the Shape or into ViewModel's proeprty. If your Diagram is databound, instead of ShapeDeserialized you can use the GraphSource.DeserializeNode method.

We hope this approach will move you n the right direction.

Regards,
Petar Mladenov
Telerik

 

 

[Rahul]

Hi Peter,

 

Thanks for the reply. It works for me. BTW I have 2 more questions in RadDiagram.

1. I want remove the sky blue color line from the Rad Diagram area.

2. I have placed the Rad Diagram inside the RadPane. Now I want to remove the (small tab showing upper left corner in attached snap-shot). I don't want to show that.

 

Thanks

Rahul

 

[Petar Mladenov]

Hello Rahul,

To make the background page grid invisible you can set:

<telerik:RadDiagram primitives:BackgroundPageGrid.IsGridVisible="False"

where *primitives* stands for:

xmlns:primitives="clr-namespace:Telerik.Windows.Controls.Diagrams.Primitives;assembly=Telerik.Windows.Controls.Diagrams"

If you need to hide the RadPane's Header you can take advantage of the PaneHeaderVisibility property:

<telerik:RadDocking>
          <telerik:RadSplitContainer>
              <telerik:RadPaneGroup >
                  <telerik:RadPane PaneHeaderVisibility="Collapsed">

Regards,
Petar Mladenov
Telerik

 

 

[Rahul]

Hi Peter,

 Thanks so much. My first issue has been resolved. Now the vertical line is not showing in the RadDiagram. But the second issue is still there. It is still showing the small tab at left-upper corner. 

I also want to remove the border of RadDiagram. There are so many line showing around the RadDiagram. Attached snap-shot is showing my xaml code and the output. Please have a look into the snap-shot and let me know the solution of my problem.

 Thanks

Rahul

[Masha]

Hi Rahul,

In order to remove RadPane tab inside RadDocumenHost you need to set Visibility property  to Collapsed instead of the PaneHeaderVisibility one. This way the tab will disappear and only the border will be visible.So to remove it you need to modify the ControlTemplate of DocumentHostTemplate inside RadPaneGroup style.

I've prepared a sample project with above approach where the border and pane are removed. The project uses implicit styles approach and NoXaml binaries.

Please let me know if this solution works for you.

Regards,
Masha
Telerik