How to auto scale an image for all resolutions?

0
votes

There are two images in a page of my app, one is a fixed frame and the other will change time to time.

enter image description here

I want the page to be auto scaled for all resolutions (WVGA,WXGA, 720p). So according to the documentation I should not set numbers but use "Auto" or "*" to be auto scaled for all resolutions. Ok this is good for frame, but what about the inner picture? how can I set it to be in a distance of the edges to be exactly inside the frame?

<Image Name="Frame" Source="/MyApplication;component/Assets/Frame.png" HorizontalAlignment="Left" Height="auto" VerticalAlignment="Top" Width="auto"/>
<Image Name="InnerImage" Source="/MyApplication;component/Assets/Pages/10.png" HorizontalAlignment="Left" Height="Auto" VerticalAlignment="Top" Width="Auto" Margin="33,40,33,40"/>
1
c#xamlwindows-phone-8windows-phonescreen-resolution
Why dont you use 'Stretch' property of image? Set it to 'Fill'. – Amit Singh

1 Answers

1
votes

Regardless of the resolution your app still sees logical pixels of 800x480 (or 853 for 16:9), so your image size will not change. That article only talks about providing higher resolution images so that the images, when viewed on a higher res screen (which is often larger in size) is of better quality. In terms of layout and size though they will remain the same regardless of screen resolution.

To test this add an image to your app and run it across multiple emulators with different sizes and you'll see that it stays the same relative size regardless of screen resolution.