Keep aspect ratio while resizing DiagramShape/DiagramItem

7 posts, 0 answers
  1. Boris Rogge
    Boris Rogge avatar
    30 posts
    Member since:
    Mar 2006

    Posted 11 Oct 2012 Link to this post

    Hello Telerik,


    How could I make the resizing of the diagram shapes keep the aspect ratio?

    Thanks in advance,
    Metanous
  2. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 15 Oct 2012 Link to this post

    Hello Boris,
    Unfortunately at the moment there's no way to achieve this. We're working on a way to allow customization of the dragging, resizing, rotation etc. but this feature will be ready for our next Q (Q1 2013).
    For now there's a possible workaround but I'm not sure if it'll be helpful to you - you could handle the PreviewResize and Resize events and manually change the shapes' size after the resizing:
    private Dictionary<object, double> ratios;
    private void OnDiagramResize(object sender, ResizeRoutedEventArgs e)
    {
        foreach (var item in e.Items)
        {
            var container = this.diagram.ContainerGenerator.ContainerFromItem(item);
            if (container != null)
                container.Height = container.Width / ratios[container];
        }
    }
     
    private void OnDiagramPreviewResize(object sender, ResizeRoutedEventArgs e)
    {
        this.ratios = new Dictionary<object, double>();
        foreach (var item in e.Items)
        {
            var container = this.diagram.ContainerGenerator.ContainerFromItem(item);
            if (container != null)
                ratios[container] = Math.Round(container.Width / container.Height, 2);
        }
    }
    If you have further questions please feel free to ask.

    Regards,
    Zarko
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. UI for WPF is Visual Studio 2017 Ready
  4. Davide
    Davide avatar
    17 posts
    Member since:
    Mar 2013

    Posted 16 May 2013 Link to this post

    Hi Boris, 
    regarding the possibility of sizing a raddiagramshape is there the possibility to resize it as it happens in Office when the SHIFT key is pressed?   The problem is that i have a raddiagramshape with a circle in it. When I change its size the circle continues to be a circle but my adorner assumes a rectangle (i've attached an image of what i mean). Is there any way to limit the adorner size in order to be a square?


    Thanks in advance

    Davide
  5. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 17 May 2013 Link to this post

    Hello Davide,
    You can easily achieve this with a custom resizing service. You can read about this here, and you can also examine the sample project that I've attached - in it the resizing adorner is always square.
    I hope I was able to help you and if you have further questions feel free to ask.

    All the best,
    Zarko
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  6. Davide
    Davide avatar
    17 posts
    Member since:
    Mar 2013

    Posted 21 May 2013 Link to this post

    Thanks Zarko
    that was what i was looking for.
    I've noticed that if you have two shapes in the panel and you select them both the area of each selected item is no more square but what is kept constant is the ratio of the selection. Is there a way to avoid this problem?

    Thanks in advance

    Davide
  7. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 23 May 2013 Link to this post

    Hello Davide,
    If you want to keep the size ratio on multi resize you'll have to add some more custom logic to the resizing service:
    public class MyResizing : ResizingService
    {
        private Rect adornerBounds;
        private double sizeRatio;
     
        public MyResizing(RadDiagram graph)
            : base(graph)
        { }
     
        public override void InitializeResize(IEnumerable<IDiagramItem> newSelectedItems, double adornerAngle, Rect adornerBounds, ResizeDirection resisingDirection, Point startPoint)
        {
            base.InitializeResize(newSelectedItems, adornerAngle, adornerBounds, resisingDirection, startPoint);
            this.adornerBounds = adornerBounds;
            this.sizeRatio = this.adornerBounds.Width / this.adornerBounds.Height;
        }
     
        protected override System.Windows.Point CalculateNewDelta(System.Windows.Point newPoint)
        {
            var newDelta = base.CalculateNewDelta(newPoint);
            double newOffset = Math.Max(newDelta.X, newDelta.Y);
     
            double newXDelta = this.sizeRatio > 1 ? newOffset * this.sizeRatio : newOffset;
            double newYDelta = this.sizeRatio > 1 ? newOffset : newOffset / this.sizeRatio;
     
            if (newOffset < 0)
            {
                newXDelta = Math.Max(-this.adornerBounds.Width, newXDelta);
                newYDelta = Math.Max(-this.adornerBounds.Height, newYDelta);
            }
     
            return new Point(newXDelta, newYDelta);
        }
    }
    With this code the multi resize should work as you want it to so could you please try it out and if you need more help feel free to ask.

    Regards,
    Zarko
    Telerik

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  8. Davide
    Davide avatar
    17 posts
    Member since:
    Mar 2013

    Posted 23 May 2013 Link to this post

    Thanks Zarko ... 

    it's just what I was looking for ....

    Thx again

    Davide
Back to Top
UI for WPF is Visual Studio 2017 Ready