Background Zoom (and Pan)

[Maite]

Hi.  I'm loving these new controls, but I have a question.  Is there a way to make the background of the RadDiagram Zoom and Pan along with the shapes?  Right now, the content of the diagram is working just fine, however my background remains at the same zoom level.  I'm assuming that is default behavior, but I would like to have the background image zoom as well.  Is that possible?

[Petar Mladenov]

Hello Maite,

Basically you have ZoomChanged and ViewPortChanged events of the RadDiagram and you can use them to mode / resize your background Image. This is demonstrated in the attached project. However, please have in mind that there are a lot of questions and border cases in such scenario. Is the Image Stretched ? Will there be empty spaces, do you need to limit the Pan, the zoom ? Will you need to update on resize etc.? 

Regards,
Petar Mladenov
Telerik

 

 

[Maite]

Hi!

First, I want to give thanks for your answer. It's of big help. And the example is perfect. 

I have other question about this. I need that the scroll becomes visibility when de image of canvas has got zoom applied, because the scroll is only visibility when telerik diagram needs the scroll because the shaps take up more place and they remain out of screen.

Thanks your. 

[Maite]

Ups! I'm sorry! I put "de image" but is "the image". Sorry for this mistake. 

[Petar Mladenov]

Hello Maite,

The ScrollViewers will appear if a DiagramShape goes outside the Diagram's Viewport. Instead of heavy custom code for the ScrollBars I would highly encourage you to add a dummy invisible shape in the RadDiagram like so:

<Canvas>
       <Image Source="Camp-Nou.jpg" Stretch="Fill"
              x:Name="image" Width="500" Height="300"/>
   </Canvas>

   <telerik:RadDiagram x:Name="diagram" ZoomChanged="diagram_ZoomChanged"
                       ViewportChanged="diagram_ViewportChanged"
                       ScrollViewer.HorizontalScrollBarVisibility="Visible"
                       ScrollViewer.VerticalScrollBarVisibility="Visible">
       <telerik:RadDiagramShape Width="500" Height="300" Background="Transparent"
                                IsManipulationAdornerVisible="False"
                                IsConnectorsManipulationEnabled="False"
                                Geometry="{x:Null}"/>
   </telerik:RadDiagram>

Let us know if this helps you proceed further.

Regards,
Petar Mladenov
Telerik

 

 

[Maite]

Thank you for the answer and the code! It was a big help :)