Resize predefined shape geometry?

11 posts, 0 answers
  1. Gijs
    Gijs avatar
    4 posts
    Member since:
    Sep 2014

    Posted 23 Oct 2014 Link to this post

    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?
  2. Gijs
    Gijs avatar
    4 posts
    Member since:
    Sep 2014

    Posted 23 Oct 2014 Link to this post

    I forgot to mention these shapes shouldn't be user resizable. They should be fixed sized, I disabled the handles for this.
  3. UI for WPF is Visual Studio 2017 Ready
  4. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 24 Oct 2014 Link to this post

    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.

     
  5. Gijs
    Gijs avatar
    4 posts
    Member since:
    Sep 2014

    Posted 28 Oct 2014 in reply to Petar Mladenov Link to this post

    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.
  6. Rahul
    Rahul avatar
    9 posts
    Member since:
    Aug 2014

    Posted 03 Apr 2015 in reply to Gijs Link to this post

    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
  7. Rahul
    Rahul avatar
    9 posts
    Member since:
    Aug 2014

    Posted 03 Apr 2015 in reply to Petar Mladenov Link to this post

    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
  8. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 07 Apr 2015 Link to this post

    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.

     
  9. Rahul
    Rahul avatar
    9 posts
    Member since:
    Aug 2014

    Posted 14 Apr 2015 in reply to Petar Mladenov Link to this post

    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

     

  10. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 17 Apr 2015 Link to this post

    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.

     
  11. Rahul
    Rahul avatar
    9 posts
    Member since:
    Aug 2014

    Posted 18 Apr 2015 in reply to Petar Mladenov Link to this post

    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

  12. Masha
    Admin
    Masha avatar
    355 posts

    Posted 20 Apr 2015 Link to this post

    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.

     
Back to Top
UI for WPF is Visual Studio 2017 Ready