Resizing text and images

[KKL]

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? 

[Dess | Tech Support Engineer, Principal]

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

[KKL]

Thank you very much. The font size jumps around wildly, but I'm sure I can tame it!

[KKL]

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?

[Dess | Tech Support Engineer, Principal]

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

[KKL]

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? 

[Dess | Tech Support Engineer, Principal]

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