Even after having been around for several years by now, the Windows Store Platform (and its WinRT and UWP programming frameworks) is still not as complete and comfortable to use as the WPF and Silverlight platforms. One of the numerous examples proving this is the handling of image scaling and stretching:
The WPF Image
control offers two seperate properties for this: Stretch
and StretchDirection
. Although they make most sense when used in combination, Microsoft decided to only port one of the two when creating the WinRT Image
.
Now when creating a full-screen image display in a Store App, we can specify the image shall stretch to fill the screen without loosing its aspect ration (although we don’t actually need to since Stretch="Uniform"
is the default anyway), but we’re not able to control image sizing at the same time: Even if the original image is smaller than the screen, it will always stretch to reach the screen’s full width or height. Of course, we could change the Strech
attribute to None
in order to not blow up the image beyong its original pixel size, but in this case images that are larger than the screen are not scaled down and the user does not see the full image, which is a no-go obviously.
Fortunately, correct scaling is still possible with a small trick and a little bit of additional code: The Viewbox
control can wrap virtually any other (native) WinRT / UWP control, and control how to scale its content. Among others, it (in contrast to the Image
control) has kept the StretchDirection
property! This means we can simply wrap all our images within a Viewbox
, set StretchDirection
to DownOnly
and omit the Strech
attribute, since it defaults to Uniform
anyway:
<Viewbox StretchDirection="DownOnly"> <Image Source="{Binding ImageSource}"/> </Viewbox>
Pingback: Image scaling in Windows Store Apps #2: The zoom dilemma – www.mobilemotion.eu