Background Zoom (and Pan)

11 posts, 0 answers
  1. Travis
    Travis avatar
    4 posts
    Member since:
    Jun 2008

    Posted 17 Feb 2012 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?

    Thanks.  Keep up the good work!
  2. Francois Vanderseypen
    Francois Vanderseypen avatar
    46 posts
    Member since:
    Oct 2009

    Posted 20 Feb 2012 Link to this post

    Hi Travis, your best option at this point is to

    • make the RadDiagram background transparent
    • put your image or custom background underneath the transparent diagram surface
    • hook to the MouseWheel event and alter therein the scale (RenderTransform>ScaleTranform) of the custom background proportionally to the Zoom factor

    The next release of RadDiagram will enable you to do this through a property but until then I'd hope the recipe outlined above works for you.

    All the best, Fr.

  3. UI for WPF is Visual Studio 2017 Ready
  4. Travis
    Travis avatar
    4 posts
    Member since:
    Jun 2008

    Posted 20 Feb 2012 Link to this post

    Hi Francois,

    After I posted this, I thought of something similar to your solution, but it didn't quite work.  I'll give your solution a try.

    Much thanks.

    And by the way, I love this control.  It's actually perfect (almost) for a project I'm working on.
  5. Travis
    Travis avatar
    4 posts
    Member since:
    Jun 2008

    Posted 25 Oct 2012 Link to this post

    Hello.

    It's been a while since I looked at this, but has there been any progress on this issue?  I haven't noticed the property you spoke of that would enable this functionality.  Perhaps I just missed it.

    Anyway, I tried the solution you suggested and I got mixed results.  If being able to tie the zoom/pan of the background to the zoom/pan of the shapes is a built in feature that would be much better.

    Again, thanks as always.
  6. Hristo
    Admin
    Hristo avatar
    352 posts

    Posted 30 Oct 2012 Link to this post

    Hi Travis,

    Due to more pressing tasks we could not managed to include that feature in the last release. We are getting increasing demand for that feature and we are going to do our best to include it into the next release.

    I'm sorry for the caused inconvenience but could you please elaborate a bit more on your solution?

    If you would like to have a image as the background there are to possible approaches. One is that the image is not moved when the diagram pans. Thus it will be a bit unnatural to zoom the image but not pan it. The second approach is that the image moves along with the shapes, i.e. it pans when the diagram pans. Personally, I don't imagine how this will work when the edge of the image is reached.

    If you would like to have some gradient-like or grid-like background, such as the default background grid of the diagram, there are again two approaches. First one is the current diagram behavior where the background is static. The second is when the background reacts to pan and zoom and is like the ruler above the diagram (ruler example: http://demos.telerik.com/silverlight/#Diagrams/DesignToolbox).

    If the last scenario is the one you want to employ, I could try making a sample for you to substitute the missing feature till we release it.

    Hope this helps. Looking forward to your post.

    Greetings,
    Hristo
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  7. Travis
    Travis avatar
    4 posts
    Member since:
    Jun 2008

    Posted 30 Oct 2012 Link to this post

    Here is the basic idea...

    I'm developing an application that has a toolbox and a workspace area.  The client will be able to import an image as a background for the workspace area.  This image will most likely be a floorplan of some type.  Then the client can drag tool(s) over to the workspace area and place those tools relative to rooms/walls/doors etc. 

    The issue I need to address is when this workspace area is zoomed or panned.  The shapes (tools) zoom as needed, but the background image remains static.  Obviously this means that the tools are no longer in position relative to the spot where they were originally placed.  Being able to zoom/pan the background along with the shapes should solve this issue.

    I took a look at the ruler example and it does seem to be very similar to what I need, but since there is no background image I can't be sure.  Either way, any code you can share would be greatly appreciated.

    Thanks for all your help!
  8. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 02 Nov 2012 Link to this post

    Hi Travis,
    The easiest way to include the RadDiagram's backgound in the zoom operation is to edit the default template and set the background templateBinding to the "MainPanel" grid. The problem in this case comes from the panning, because the image panned with the shapes and when you reach it's edge the white background is shown behind it. Could you please examine the attached project and tell us what exactly do you expect to happen to the image when you pan the diagram?
    We're looking forward to hearing from you.

    All the best,
    Zarko
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  9. Davide
    Davide avatar
    17 posts
    Member since:
    Mar 2013

    Posted 23 Apr 2013 Link to this post

    Hi Zarko,

    I'm interested in this feature too. Have you got any information regarding the release of this functionality?
    I've watched the example you posted (WpfTest.zip) and I have a question: when I try to re-size the window the relative position of the elements added on the RadDiagram change.
    I've also tried to use tried to use a RadDiagramShaper with an Image as background and setting the "IsDraggingEnabled" to false, but this creates me some problems when I try to select multiple objects on it.

    Thanks in advance 
    Davide
  10. Hristo
    Admin
    Hristo avatar
    352 posts

    Posted 26 Apr 2013 Link to this post

    Hello Davide,

    Could you please elaborate a bit more on your case? I will be glad if you share with us, what would you need as a behavior from the diagram after resize, pan or zoom (i.e. what should happen to the shapes and the background image)?
    Also, I am not quite sure what do you mean by "when resizing position of the elements change". I have used the sample project attached in this thread and resized the window. As a result, the shape was on the same offset from the top left corner as before the resizing operation.

    I am looking forward to hearing from you.

    Kind regards,
    Hristo
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  11. Davide
    Davide avatar
    17 posts
    Member since:
    Mar 2013

    Posted 29 Apr 2013 Link to this post

    Hi Hristo, 

    I'm developing an application where the user is able to import an image and set it as background image. This image will be a floor-plant of a building. The user will be able to drag on the map some elements.

    The problem i found in the example that has been posted is regarding the re-sizing of the windows. I'm attaching you two images 
    that can explain my problem. As you can see from the two images when the window size changes the relative position of the object "A" is kept while the relative positions
    of the object towards the background aren't. (in one image the "A" is on the bed while in the second image is in another position). 
    I would like that re-sizing the window the background would not re-size or that the relative position were kept.

    I hope I explained what I was asking....

    Thx in advance

    Davide 

  12. Hristo
    Admin
    Hristo avatar
    352 posts

    Posted 30 Apr 2013 Link to this post

    Hello Davide,

     
    Thank you for the additional info. If I understand your case correctly, you actually do not need to resize the background. The best way would be to set transparent diagram background and place an image below the diagram with stretch set to none. This way the diagram could be stretched to fill the whole window and the image will be in its original size.

    The second option, you mentioned (move the shape while resizing the diagram so it is above the resized bed) is a bit more tricky. But you could wire an event handler to SizeChanged Diagram event and re-position all shapes manually.

    Hope this helps. Please let us know if you need more info.

    Greetings,
    Hristo
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top
UI for WPF is Visual Studio 2017 Ready