Export (0) Print
Expand All

MultiScaleImage.ViewportOrigin Property

Silverlight

Gets or sets the top-left corner of the area of the image to be displayed.

Namespace:  System.Windows.Controls
Assembly:  System.Windows (in System.Windows.dll)

public Point ViewportOrigin { get; set; }
<MultiScaleImage ViewportOrigin="x,y"/>
-or-
<MultiScaleImage ViewportOrigin="x y"/>

XAML Values

x

The X value of the Point that specifies the x-coordinate of the viewport.

y

The Y value of the Point that specifies the y-coordinate of the viewport.

The XAML syntax for ViewportOrigin specifies a new Point as a string. The delimiter between the x and y values of the point can be either a comma or a space. Note that the comma usage has potential to clash with the usage of comma as the decimal point in some UI cultures. For more information, see the "XAML Attribute Syntax" section of Point.

Property Value

Type: System.Windows.Point
The top-left corner of the rectangular area of the image to be displayed.

Dependency property identifier field: ViewportOriginProperty

It is important to note that the ViewportOrigin and ViewportWidth properties are used together to specify the viewport. The ViewportWidth value sets how wide the viewport window is relative to the entire image.

  • ViewportWidth = 1: Displays the entire image (default).

  • ViewportWidth < 1: Zooms in on the image. You zoom in deeper into the image the closer you get to zero. Zero is completely zoomed in and the user cannot see the image at all. The fraction of the width of the image that is visible is the viewport width.

  • ViewportWidth > 1: Zooms out from the image. The number of times the viewport is larger than the image is the viewport width.

The width of the viewport specifies how much in or out to zoom on the image, but it does not specify where on the image the viewport is viewing. To specify the viewport position, use the ViewportOrigin. The top-left corner of the viewed image (not the MultiScaleImage, the container panel, or the canvas in which this image renders) is always (0,0).

The following illustration demonstrates different values for ViewportOrigin and ViewportWidth:

Different ViewportOrigin and ViewportWidth values.Different ViewportOrigin and ViewportWidth values.

For ViewportOrigin, the value specifies where the corner of the viewport should be relative to the corner of the image. This means that if you want some blank space between the edge of the image and the viewport, you need to move the viewport to a negative location off the image. If you want the viewport to show just a portion of the image, then it will get moved to a positive location within the full image.

Note that in the previous illustrations, the coordinate numbers conveniently place the image or area of the image within a square of the conceptual grid. This is only for demonstration purposes since you can specify any numbers (see the following illustration). However, numbers outside the appropriate range (too high or too low) for either ViewportOrigin or ViewportWidth will render nothing of the image.

ViewportOrigin and ViewportWidth diagram.

Dependency property identifier field: ViewportOriginProperty

Silverlight

Supported in: 5, 4, 3

Silverlight for Windows Phone

Supported in: Windows Phone OS 7.1, Windows Phone OS 7.0

For a list of the operating systems and browsers that are supported by Silverlight, see Supported Operating Systems and Browsers.

Community Additions

ADD
Show:
© 2014 Microsoft