Resizing text and images

5 posts, 1 answers
  1. KKL
    KKL avatar
    15 posts
    Member since:
    Nov 2016

    Posted 13 Sep 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
    Admin
    Dess avatar
    2101 posts

    Posted 15 Sep 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
    15 posts
    Member since:
    Nov 2016

    Posted 15 Sep in reply to Dess 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
    15 posts
    Member since:
    Nov 2016

    Posted 15 Sep 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. Dess
    Admin
    Dess avatar
    2101 posts

    Posted 18 Sep 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.
Back to Top