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