Resizing text and images

7 posts, 2 answers
  1. KKL
    KKL avatar
    17 posts
    Member since:
    Nov 2016

    Posted 13 Sep 2017 Link to this post

    Hi, I have a RadDiagramShape that contains .Text and a DiagramShapeElement.Image. When the shape is resized, only the bounds of the RadDiagramShape change: Both the image and the text stay the same size. What is the best approach for both the image and the text to increase and decrease in size with the shape bounds? 
  2. Answer
    Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3891 posts

    Posted 15 Sep 2017 Link to this post

    Hello Kevin, 

    Thank you for writing.  

    In order to resize the image when resizing the shape, it is necessary to set the DiagramShapeElement.ImageLayout to Zoom. Thus, the image will be stretched according to the shape's size. As to the text, you can detect when the shape is resized and change the font size in order to increase the text. Here is a sample code snippet which result is illustrated in the attached gif file:
    public RadForm1()
    {
        InitializeComponent();
        RadDiagramShape shape = this.radDiagram1.Shapes[0] as RadDiagramShape;
     
        shape.Text = "Shape";
        shape.DiagramShapeElement.Image = Properties.Resources.Clock_Alarm;
        shape.DiagramShapeElement.ImageLayout = ImageLayout.Zoom;
        shape.PropertyChanged += shape_PropertyChanged;
    }
     
    Size lastSize = Size.Empty;
     
    void shape_PropertyChanged(object sender, Telerik.Windows.Diagrams.Core.PropertyEventArgs e)
    {
        if (e.PropertyName == "Bounds")
        {
            RadDiagramShape shape = sender as RadDiagramShape;
            if (lastSize != Size.Empty)
            {
                if (lastSize.Height < shape.Size.Height || lastSize.Width < shape.Size.Width)
                {
                    shape.Font = new Font(shape.Font.FontFamily.Name, shape.Font.Size + 2);
                }
                else  if (lastSize.Height > shape.Size.Height || lastSize.Width > shape.Size.Width)
                {
                    shape.Font = new Font(shape.Font.FontFamily.Name,Math.Max(2, shape.Font.Size - 2));
                }
            }
            lastSize = shape.Size;
        }
    }

    I hope this information helps. Should you have further questions I would be glad to help.

    Regards,
    Dess
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. KKL
    KKL avatar
    17 posts
    Member since:
    Nov 2016

    Posted 15 Sep 2017 in reply to Dess | Tech Support Engineer, Sr. Link to this post

    Thank you very much. The font size jumps around wildly, but I'm sure I can tame it!
  4. KKL
    KKL avatar
    17 posts
    Member since:
    Nov 2016

    Posted 15 Sep 2017 Link to this post

    I have a related query. I have a RadDiagramShape that I want to be ignored by the mouse. Specifically, I want canvas panning to work when click-dragging on the RadDiagramShape. I have set IsFocusable and IsHitTestVisible to false, but panning will not work unless outside the shape. What should I do?
  5. Answer
    Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3891 posts

    Posted 18 Sep 2017 Link to this post

    Hello Kevin, 

    Thank you for writing back. 

    In order to make a specific shape unselectable, you can handle the SelectionChanged event and set the RadDiagramShape.IsSelected property to false. Thus, the shape won't be selected. However, if you move the mouse while it is being pressed over a shape and the Ctrl key is pressed, RadDiagram won't enable a pan operation. Currently, RadDiagram doesn't introduce API for panning programmatically. That is why I have logged it in our feedback portal. You can track its progress, subscribe for status changes and add your comments on the following link - feedback item.

    I have also updated your Telerik points.

    I hope this information helps. If you have any additional questions, please let me know. 

     Regards,
    Dess
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  6. KKL
    KKL avatar
    17 posts
    Member since:
    Nov 2016

    Posted 21 Jan 2018 in reply to Dess | Tech Support Engineer, Sr. Link to this post

    I note that the recently released R1 2018 version includes a PanToPosition method. Is there an example of how to use this, specifically to allow the diagram to be panned whilst clicking and dragging within a non-interactive RadDiagramShape? 
  7. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3891 posts

    Posted 22 Jan 2018 Link to this post

    Hello, Kevin,  

    Thank you for writing back. 

    The PanToPosition accepts a Telerik.Windows.Diagrams.Core.Point as an argument. While working on this case I encountered  a problem in the PanToPosition method and I have logged it in our feedback portal. You can track its progress, subscribe for status changes and add your comments on the following link - feedback item.

    I have also updated your Telerik points.

    Currently, the possible solution that I can suggest in order to avoid the error is to subscribe to the Pan event even though the event handler is empty: 

    this.radDiagram1.Pan += radDiagram1_Pan;
     
            void radDiagram1_Pan(object sender, Telerik.WinControls.UI.Diagrams.PositionChangedRoutedEventArgs e)
            {
            }

    I hope this information helps. If you have any additional questions, please let me know. 

     Regards,
    Dess
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top