Background Image

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

    Posted 09 Jul 2012 Link to this post


    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.
  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

    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>



  3. DevCraft banner
  4. Miro Miroslavov
    Admin
    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" /> 

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

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

  5. 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

    Mark
  6. 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#
  7. Miro Miroslavov
    Admin
    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. 

    Greetings,
    Miro Miroslavov
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top
DevCraft banner