Canvas in RadDiagramNavigationPane

[Maite]

Hi, 

I have a canvas with an image in background on a simple diagram, because I needed zoom in this image. This part is not problem. I need that the canvas shows in the RadDiagramNavigationPane because I only see the shapes of the diagram. 

Thanks for your help!

[Zarko]

Hi Maite,
Unfortunately only way to do this at the moment is to use custom RadDiagramShape which will hold the image.
I've attached a sample project demonstrating this so could you please examine it and if you have more questions feel free to ask.

Regards,
Zarko
Telerik

 

 

[Maite]

Thanks for this solution, but I have other problem: I have my control with Telerik in a dll. When I execute the exectuable whose has the control with Telerik referencied, the background image doesn't show. 

Can you help me, please?

Thanks!

[Zarko]

Hello Maite,
Could you please give us some more information and a sample project if possible so that we could investigate the issue on our side ?
As far as I tested (using my previous project after removing the redundant events - ViewportChanged and ZoomChanged).
We're looking forward to hearing from you.

Regards,
Zarko
Telerik

 

 

[Maite]

Hi Zarko, 

I have solved the problem of dll, but I found other problem with your code. Everything is perfect, except when I make the window bigger before load the background image.  The image doesn't show.

I want to say: I have a button to load de background image. If I don't maximize the window and I click the button, the image load correctly. But if I maximized the windows and I click the button, the background image doesn't load. The source of the image enters through binding.

Thanks in advance.

Maite.

[Zarko]

Hello Maite,
Unfortunately we weren't able to reproduce this issue so again I'd like to ask you for some more information and a sample project if possible.
I've attached my testing project so that you could examine it and tell us what you're doing differently.

Regards,
Zarko
Telerik

 

 

[Maite]

Hello, 

Thanks at your code, because I had a problem with binding. Only a thing: I need that the BakgroundShape and his image have the same size that the window (if window is 300*500, the image occupies all window (relative, not deformed)). How I can do? 

Thanks.

[Zarko]

Hi,
There a couple of ways to do this:
1) You could directly bind the BackgroundShape's size to the window's size:

<Window ...
    x:Name="root"
    ...>
    <Grid>
        <telerik:RadDiagram x:Name="diagram">
            <local:BackgroundShape Width="{Binding ActualWidth, ElementName=root}"
                                   Height="{Binding ActualHeight, ElementName=root}"
                                   x:Name="bgShape" Opacity="0.9" />
        </telerik:RadDiagram>
        ...
    </Grid>
</Window>

2) You could handle the window's sizeChanged event and do this manually there:

private void OnRootSizeChanged(object sender, SizeChangedEventArgs e)
{
    this.bgShape.Width = e.NewSize.Width;
    this.bgShape.Height = e.NewSize.Height;
}

I hope I was able to help you.

Regards,
Zarko
Telerik

 

 

[Maite]

Hello Zarko, 

Your solution doesn't work correctly in my case because the shapes don't change its position and size in relation of the Background. I tried to make a three relga, but it not works correctly. Can you help me?

[Pavel R. Pavlov]

Hello Maite,

I tested the approach suggested by Zarko and as far as I understand your requirements, it covers them. From the communication so far I can understand that you need to update the size of the custom BackgroundShape so that it stretches all over the available space of the diagraming surface. With the bindings suggested in Zarko's last reply I achieved the behavior that can be seen in this screencast. Could you please take a look at it and see if you receive the same behavior?

If you can reproduce the exact same behavior on your side, but it is not what you require, I will kindly ask you to provide us with more information about your requirements. We will need you to send over images demonstrating the required behavior.

For example you can make a picture showing the initially loaded diagram. Then you can explain in details what steps you perform and last you can make another picture showing the required sizing and positioning of the custom shape.

By doing so, together, we will ensure that we understand each other and that the communication continues on a positive path leading to resolving any issues that you encounter.

Thank you for your kind cooperation.

Regards,
Pavel R. Pavlov
Telerik