Zoomable Background Image

[Sarper]

Hello, 

  I want to set a zoomable background image to the diagram surface, made some research and found that topic on Telerik forums.

http://www.telerik.com/community/forums/silverlight/diagram/background-image.aspx#2181742

According to this, we can edit the default template of diagram surface so it will provide us a zoomable background.

Buti it didn't work.

Here's my custom diagram style code,

...

<Grid x:Name="TouchablePanel" Background="Transparent">
        <Grid x:Name="MainPanel" RenderTransformOrigin="0.5,0.5">
               <telerik:DiagramSurface x:Name="ItemsHost">
                     <telerik:DiagramSurface.Background>
                             <ImageBrush ImageSource="Desert.jpg" Stretch="UniformToFill" />
                      </telerik:DiagramSurface.Background>
                </telerik:DiagramSurface>

...

Can you please help me to find out the issue?

[Pavel R. Pavlov]

Hello Sarper,

Let me make quick clarification. We assume that the surface of the RadDiagram is infinite. In that surface we need to show/visualize a frame with fixed size. This frame is the viewport in your particular case. Basically, the frame is as large as your screen. Please have in mind that the image that you apply as Background is also with fixed size. Can you please clarify what you expect to happen in the following border cases:

• Lets say that your current viewport is with size 300x300 px and the image applied is with the same size. Now you zoom out and the viewport visualizes 600x600 pixels but the image is still 300x300. What should the image do in this case?
• After start up, the viewport (and the image) starts from 0,0 of your screen now you pan so the viewport starts from 100,100. Where do you expect the image to be positioned?

Please define the expected behavior in these scenarios and we will try to provide you with an approach.

Regards,
Pavel R. Pavlov
Telerik

[Sarper]

Hello Pavel,

Firstly, thanks for the clarification. These things were on my mind too. Looks like we need to make the image follow the viewport and do whatever it does. 

On the first case, image should have already been resized to the size of the viewport but we need to think that if it needs to be resized or not? I have an image that we need it the place some diagram elements and containers but at the same time, we shouldn't zoom out of the image so we won't need to resize the image and use infinite area.

The second case is the same as i said at the first case so i will clarify what kind of scenario i need to have.

We need constraints for the viewport so,

•  it shouldn't pan out of the image size(that we can determine)
• Diagram shouldn't zoom out of the range that we can determine for the image but it can be zoomed in 

Again, thanks for the reply and i am looking forward for the solution.

Regards,
Sarper

[Pavel R. Pavlov]

Hello Sarper,

You can restrict the Zoom operation of the RadDiagram by subscribing to the PreviewZoom event and mark it as handled if the TargetZoom is greater than the initial zoom. You can use the following snippet:

private void diagram_PreviewZoom(object sender, Telerik.Windows.Controls.Diagrams.DiagramZoomEventArgs e)
{
    if (e.TargetZoom < 1)
    {
        e.Handled = true;
    }
}

Regarding the restriction of the Pan operation, we have already logged a feature request to allow users easily to customize the operation. You can follow it and vote for it here. With the current implementation of the RadDiagram there is no straightforward way to achieve your requirement.

Please accept our apology for any inconvenience caused.

Regards,
Pavel R. Pavlov
Telerik

[Ivan]

Hello,

I have a similar requirement as the original poster. Similar but not exactly the same. The application in my case is to provide the user with a tool to define zones on a scanned document that need to be OCRed. So, I want to be able to:

1. Set the scanned document as the diagram background.
2. Place zones (custom shape - just a rectangular border - in my case) on the diagram and by extension the image. It should not be possible to place the shape beyond the document boundary.
3. Zoom in and out of the document. Zones' should size proportionally with the zoom (ideally keeping the zones border width fixed, i.e. it should not get thicker when zoomed).

In the last post Pavel stated that a feature request has been submitted that would allow us to limit panning outside of the image boundary. the link provided does not take one to the specific request.

I would appreciate guidance on how to implement my requirements.

Thank you.

[Zarko]

Hi Ivan,
We think that the best way to implement this functionality is:
1) If you want the background to be zoomed in and out you could use a custom shape and set the image as its background. If you don't want your document to be scaled you could directly set the image as a diagram background:

<telerik:RadDiagram.Background>
    <ImageBrush ImageSource="document.png" />
</telerik:RadDiagram.Background>

2) Again use custom shapes (or ordinary RadDiagramShape with transparent background) and a custom dragging service so that you won't be able to drag a shape outside the document.
3) The zones should size correctly out of the box but unfortunately you can't keep the border thickness fixed because we're using scale transformation on zoom.
4) To restrict the panning will be a little bit harder because it's coupled with the zoom logic. With the latest release we introduced a way to customize the diagram's tools and this will allow you to customize the panning operation itself but to limit the pan when you zoom out you'll also have to handle the ViewportChanged event and BringIntoView the correct viewport manually.
I've attached a sample project showing those things so could you please examine it and if you have more questions feel free to ask.

Regards,
Zarko
Telerik