Background Image

8 posts, 0 answers
  1. Mark Jakes
    Mark Jakes avatar
    27 posts
    Member since:
    Feb 2010

    Posted 09 Jul 2012 Link to this post


    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">
                    <ImageBrush ImageSource="/SilverlightApplication90;component/floorplan.png"/>

    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

  2. Mark Jakes
    Mark Jakes avatar
    27 posts
    Member since:
    Feb 2010

    Posted 10 Jul 2012 Link to this post

    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


    Silverlight 5, VS2010, RadControls for Silverlight, v.2012.2.607.1050 (Trial)
    <telerik:RadDiagram x:Name="diagram" Margin="9,0,0,0"
                                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">
                        <ImageBrush ImageSource="/TelerikRadDiagram;component/static_background.png" Stretch="UniformToFill" />
                <telerik:RadDiagramShape Content="Diagram #1" Position="100, 200" />

  3. Miro Miroslavov
    Miro Miroslavov avatar
    588 posts

    Posted 11 Jul 2012 Link to this post

    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" /> 

    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.LineStroke="Blue" />

    Hope this helps. 

    All the best,
    Miro Miroslavov
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  4. Mark Jakes
    Mark Jakes avatar
    27 posts
    Member since:
    Feb 2010

    Posted 11 Jul 2012 Link to this post

    Hello Miro

    Perfect, and thanks for the speedy reply.

    Best regards

  5. Rajinder
    Rajinder avatar
    2 posts
    Member since:
    Oct 2012

    Posted 07 Dec 2012 Link to this post

    Can you please share an example of adding Images to RadDiagramShape dynamically in c#
  6. Miro Miroslavov
    Miro Miroslavov avatar
    588 posts

    Posted 12 Dec 2012 Link to this post

    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. 

    Miro Miroslavov
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  7. Matthias
    Matthias avatar
    15 posts
    Member since:
    Apr 2017

    Posted 20 Apr in reply to Miro Miroslavov Link to this post

    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'.
  8. Martin Ivanov
    Martin Ivanov avatar
    1451 posts

    Posted 25 Apr Link to this post

    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">
                    <ImageBrush ImageSource="/WpfApp6;component/1.jpg" Stretch="UniformToFill" />
    Or you can add a dummy RadDiagramShape in the RadDiagramItems collection and define an Image element with the picture in its Content.
        <telerik:RadDiagramShape Geometry="{x:Null}" >
            <Image Source="/WpfApp6;component/1.jpg" Stretch="UniformToFill" />

    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top