locked
Loading an image to it's original size RRS feed

  • Question

  •  

    Hello,

     

    I would like to know how to display a picture at it's orinal size.

     

    I was thinking to add an ImageBrush to a canvas background and to put the canvas in a viewbox.

     

    (I need the canvas because I would like to add UIElement above the image later on)

     

    I would like the cavas to be exactly of the same size as the image and that the viewbox provides the scroll bars to scroll the image.

     

    Do I have to load the image first and then to set the canvas height and width? or is there a way to bind the image size to canvas size? or is there an other way?

     

    Thank you by advance

    Thursday, April 24, 2008 12:17 PM

Answers

  • here's a simple example that achieves a similar result, but somewhat simpler.
    Code Snippet
    <ScrollViewer VerticalScrollBarVisibility="Auto"
                    HorizontalScrollBarVisibility="Auto">
        <Grid>
          <Image Source="C:\Users\Esus\Pictures\foto´s\kristel\100_0026.JPG"
                  Stretch="None"
                  HorizontalAlignment="Left"
                  VerticalAlignment="Top"/>
          <Canvas>
            <Rectangle Width="30" Height="30" Fill="Red"
             Canvas.Left="30"
             Canvas.Top="40"/>
          </Canvas>
        </Grid>
      </ScrollViewer>


    Thursday, April 24, 2008 1:57 PM
  • 1. The image keeps it's original size because of 'Stretch=None'

    2. The grid is used so you can easely put a canvas over the image without having to create a bunch of bindings to keep the sizing ok.

    3. If you replace the grid with a canvas, the ScrollViewer no longer knows how big it's content really is (due to the way Canvas implements the ArrangeOverride and MeasureOverride).

     

    I get the impression you really want to use the canvas without the grid, is there any reason for this?

    Thursday, April 24, 2008 3:25 PM
  • Hello,

     

    Well yes there are two reasons Smile

     

    1) I like to understand and learn!

    Thanks to your answers I m better now than I was this morning Smile

     

    2) In fact I would like to display a list of movable selectable items on top of an image and being able to save that in a jpeg.

    So my idea is to change the layout of a list box and set a Canvas as item host. Then I paint the background of the canvas with the image and the lisboxitems will be on the canvas!

     

    But your trick seems good. I can switch the Canvas in your sample by a listbox and set the background to null and it will do the job I guess.

    Thursday, April 24, 2008 3:34 PM

All replies

  • here's a simple example that achieves a similar result, but somewhat simpler.
    Code Snippet
    <ScrollViewer VerticalScrollBarVisibility="Auto"
                    HorizontalScrollBarVisibility="Auto">
        <Grid>
          <Image Source="C:\Users\Esus\Pictures\foto´s\kristel\100_0026.JPG"
                  Stretch="None"
                  HorizontalAlignment="Left"
                  VerticalAlignment="Top"/>
          <Canvas>
            <Rectangle Width="30" Height="30" Fill="Red"
             Canvas.Left="30"
             Canvas.Top="40"/>
          </Canvas>
        </Grid>
      </ScrollViewer>


    Thursday, April 24, 2008 1:57 PM
  • Hello thank you for the answer!

     

    puting the image in a grid will cause the image to be at it's original size and the scrollbars displayed

     

    if I replace the grid by a canvas I get no scrollbars.

     

    Does someone know why?

    Thursday, April 24, 2008 2:37 PM
  • 1. The image keeps it's original size because of 'Stretch=None'

    2. The grid is used so you can easely put a canvas over the image without having to create a bunch of bindings to keep the sizing ok.

    3. If you replace the grid with a canvas, the ScrollViewer no longer knows how big it's content really is (due to the way Canvas implements the ArrangeOverride and MeasureOverride).

     

    I get the impression you really want to use the canvas without the grid, is there any reason for this?

    Thursday, April 24, 2008 3:25 PM
  • Hello,

     

    Well yes there are two reasons Smile

     

    1) I like to understand and learn!

    Thanks to your answers I m better now than I was this morning Smile

     

    2) In fact I would like to display a list of movable selectable items on top of an image and being able to save that in a jpeg.

    So my idea is to change the layout of a list box and set a Canvas as item host. Then I paint the background of the canvas with the image and the lisboxitems will be on the canvas!

     

    But your trick seems good. I can switch the Canvas in your sample by a listbox and set the background to null and it will do the job I guess.

    Thursday, April 24, 2008 3:34 PM