Background Image

[Mark Jakes]

Hi

I am trying to use the Diagram module to allow users to zoom in on an area based on a background image.

<telerik:RadDiagram Grid.Column="1" x:Name="diagram" Zoom="1" IsBackgroundSurfaceVisible="True" IsManipulationAdornerVisible="True" SnapValue="5" ActiveTool="PanTool">
            <telerik:RadDiagram.Background>
                <ImageBrush ImageSource="/SilverlightApplication90;component/floorplan.png"/>
            </telerik:RadDiagram.Background>
        </telerik:RadDiagram>

Can you explain how it is possible to allow the background image to be dynamic so that when the user 'zooms' in, the background image also becomes relative to the zoom.  For example in a floor plan, zooming into a 'room'.

In the above code, the background image remains static.  What I would like is that the background image is also part of the zoom, so when the user zooms towards an 'area' the background image is also zoomed.

Thanks in advance

Mark.

[Mark Jakes]

Hello All

Replying to my own thread, I created a custom shape and element bound it to the size of the diagram as in the code below.

This works well but is not quite the desired effect because the grid is not visibile on top of the background image  (unless I set the opacity which is not really viable)

Am I on the right track?  If not, is there a better way of doing this.

I am using the 'Customising Look and Feel' demo project found in /XAMLFlix to evaluate diagrams, however, the demo shows properties for the RadDiagram control for 'GridLineThickness' and 'GridColor' but I can't seem to find these in the Q2 release or in the documentation.  Depreciated? or am I missing a reference?   Please advise.

Many thanks

Mark.

Silverlight 5, VS2010, RadControls for Silverlight, v.2012.2.607.1050 (Trial)

<telerik:RadDiagram x:Name="diagram" Margin="9,0,0,0"
                            AllowCopy="True"
                            AllowPaste="True"
                            AllowDelete="True"
                            AllowCut="True" SnapX="5" SnapY="5"
                            GridLineThickness="02"   <!-- Not in Q2? -->
                            GridColor="Black"            <!-- Not in Q2? -->
                            >
            <local:BackgroundShape MinWidth="{Binding ElementName=diagram, Path=ActualWidth}" MinHeight="{Binding ElementName=diagram, Path=ActualHeight}" Opacity="0.5" IsEnabled="False">
                <local:BackgroundShape.Background>
                    <ImageBrush ImageSource="/TelerikRadDiagram;component/static_background.png" Stretch="UniformToFill" />
                </local:BackgroundShape.Background>
            </local:BackgroundShape>
            <telerik:RadDiagramShape Content="Diagram #1" Position="100, 200" />
        </telerik:RadDiagram>

[Miro Miroslavov]

Hello Mark,

 We put the background outside the zoomable region on purpose, because in most of the scenarios you'll it not to be zoomable. However it's possible to set a background that is zoomable - you'll need to change the diagram default template in order to achieve this. You can do this as follows:

<Grid x:Name="MainPanel" RenderTransformOrigin="0.5, 0.5">

                                <diagrams:DiagramSurface x:Name="ItemsHost" >
<ImageBrush ImageSource="/TelerikRadDiagram;component/static_background.png"Stretch="UniformToFill" /> 

</diagrams:DiagramSurface>
...

The "MainPanel" is the one that is zoomable so everything that is inside will be zoomed as well.
Regarding the 'GridLineThickness' and 'GridColor'  - these are attached properties that you can set to the diagram and this will affect the GraphPaper (grid) that is placed at the background of the diagram. 

<telerik:RadDiagram x:Name="diagram"
                            primitives:GraphPaper.CellSize="25"
                                                        primitives:GraphPaper.LineStroke="Blue" />

Hope this helps. 

All the best,
Miro Miroslavov
the Telerik team

[Mark Jakes]

Hello Miro

Perfect, and thanks for the speedy reply.

Best regards

Mark

[Rajinder]

Can you please share an example of adding Images to RadDiagramShape dynamically in c#

[Miro Miroslavov]

Hi Rajinder,

 It very much depends on your particular scenario. One option is to directly add an image to the Shape's Content by just setting the shape1.Content = new Image() {...};. Other possible option is to create Custom shape. The way you do it depends on your requirements - do you want to copy/paste, save/load these shapes and so on. You can also examine our Drawing sample and specifically the "Import image" functionality. 
Hope this helps. 

Greetings,
Miro Miroslavov
the Telerik team

[Matthias]

Trying out this accepted approach in 2017 gives me an error. Any advice on what might have changed or what I'm doing wrong, so that I can get the "zoomable background image" functionality working?

A value of type 'ImageBrush' cannot be added to a collection or dictionary of type 'UIElementCollection'.

[Martin Ivanov]

Hi Matthias,

You can try setting the Background of the DiagramAdorner instead of defining the image brush in its items. 

<telerik:DiagramSurface x:Name="ItemsHost">
    <telerik:DiagramSurface.Background>
                <ImageBrush ImageSource="/WpfApp6;component/1.jpg" Stretch="UniformToFill" />
    </telerik:DiagramSurface.Background>
</telerik:DiagramSurface>

Or you can add a dummy RadDiagramShape in the RadDiagramItems collection and define an Image element with the picture in its Content.

<telerik:RadDiagram>
    <telerik:RadDiagramShape Geometry="{x:Null}" >
        <Image Source="/WpfApp6;component/1.jpg" Stretch="UniformToFill" />
    </telerik:RadDiagramShape>
</telerik:RadDiagram>

Regards,
Martin
Telerik by Progress