#1,063 – ViewBox Stretching Options

By default, content scaled by using a ViewBox will preserve its aspect ratio as it is being scaled.  Content is scaled until its size fills its container in one dimension.  White borders are added in the other dimension.

This default behavior corresponds to setting the Stretch property of the ViewBox to Uniform.  We can see this behavior below as we scale a Canvas.

1063-001

1063-002

If we set Stretch to Fill, the content always fills the available area and the aspect ratio is not preserved.  That is, content is stretched more in one direction than in another.

1063-003

Setting the Stretch property to UniformToFill preserves the aspect ratio, but content stretches until it fills the container in both dimensions.  If the aspect ratio of the container is different than that of the content, content is clipped.

1063-004

Finally, setting Stretch to None disables all scaling.

1063-005

 

About Sean
Software developer in the Twin Cities area, passionate about software development and sailing.

Leave a comment