This is a migrated thread and some comments may be shown as answers.

Background Zoom (and Pan)

5 Answers 125 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Maite
Top achievements
Rank 1
Maite asked on 12 Jun 2014, 09:34 AM
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?

5 Answers, 1 is accepted

Sort by
0
Accepted
Petar Mladenov
Telerik team
answered on 17 Jun 2014, 08:32 AM
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
 
Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
 
0
Maite
Top achievements
Rank 1
answered on 18 Jun 2014, 08:41 AM
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. 
0
Maite
Top achievements
Rank 1
answered on 18 Jun 2014, 08:45 AM
Ups! I'm sorry! I put "de image" but is "the image". Sorry for this mistake. 
0
Accepted
Petar Mladenov
Telerik team
answered on 19 Jun 2014, 07:59 AM
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
 
Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
 
0
Maite
Top achievements
Rank 1
answered on 19 Jun 2014, 10:22 AM
Thank you for the answer and the code! It was a big help :)
Tags
Diagram
Asked by
Maite
Top achievements
Rank 1
Answers by
Petar Mladenov
Telerik team
Maite
Top achievements
Rank 1
Share this question
or