MultiScaleImage.ViewportWidth Property

Microsoft Silverlight will reach end of support after October 2021. Learn more.

Gets or sets the width of the area of the image displayed.

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


Public Property ViewportWidth As Double
public double ViewportWidth { get; set; }
<MultiScaleImage ViewportWidth="double"/>

Property Value

Type: System.Double
The width of the area of the image displayed.


Dependency property identifier field: ViewportWidthProperty

It is important to note that that 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 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: ViewportWidthProperty

Version Information


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.