This is a migrated thread and some comments may be shown as answers.

Resize predefined shape geometry?

10 Answers 321 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Gijs
Top achievements
Rank 1
Gijs asked on 23 Oct 2014, 09:02 AM
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?

10 Answers, 1 is accepted

Sort by
0
Gijs
Top achievements
Rank 1
answered on 23 Oct 2014, 09:05 AM
I forgot to mention these shapes shouldn't be user resizable. They should be fixed sized, I disabled the handles for this.
0
Petar Mladenov
Telerik team
answered on 24 Oct 2014, 09:28 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Gijs
Top achievements
Rank 1
answered on 28 Oct 2014, 01:49 PM
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.
0
Rahul
Top achievements
Rank 1
answered on 03 Apr 2015, 06:38 AM
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
0
Rahul
Top achievements
Rank 1
answered on 03 Apr 2015, 05:16 PM
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
0
Petar Mladenov
Telerik team
answered on 07 Apr 2015, 11:07 AM
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
 

See What's Next in App Development. Register for TelerikNEXT.

 
0
Rahul
Top achievements
Rank 1
answered on 14 Apr 2015, 06:13 PM

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

 

0
Petar Mladenov
Telerik team
answered on 17 Apr 2015, 10:46 AM
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
 

See What's Next in App Development. Register for TelerikNEXT.

 
0
Rahul
Top achievements
Rank 1
answered on 18 Apr 2015, 05:56 PM

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

0
Masha
Telerik team
answered on 20 Apr 2015, 10:17 AM
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
 

See What's Next in App Development. Register for TelerikNEXT.

 
Tags
Diagram
Asked by
Gijs
Top achievements
Rank 1
Answers by
Gijs
Top achievements
Rank 1
Petar Mladenov
Telerik team
Rahul
Top achievements
Rank 1
Masha
Telerik team
Share this question
or