Background Zoom (and Pan)

6 posts, 2 answers
  1. Maite
    Maite avatar
    33 posts
    Member since:
    Mar 2014

    Posted 12 Jun 2014 Link to this post

    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?
  2. Answer
    Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 17 Jun 2014 Link to this post

    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.
     
  3. UI for WPF is Visual Studio 2017 Ready
  4. Maite
    Maite avatar
    33 posts
    Member since:
    Mar 2014

    Posted 18 Jun 2014 in reply to Petar Mladenov Link to this post

    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. 
  5. Maite
    Maite avatar
    33 posts
    Member since:
    Mar 2014

    Posted 18 Jun 2014 in reply to Maite Link to this post

    Ups! I'm sorry! I put "de image" but is "the image". Sorry for this mistake. 
  6. Answer
    Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 19 Jun 2014 Link to this post

    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.
     
  7. Maite
    Maite avatar
    33 posts
    Member since:
    Mar 2014

    Posted 19 Jun 2014 in reply to Petar Mladenov Link to this post

    Thank you for the answer and the code! It was a big help :)
Back to Top
UI for WPF is Visual Studio 2017 Ready