3

I am referencing external image urls for the source property of an image element in my app.

I have 3 versions of the image at 100, 140 and 180 scales e.g.

myimage.scale-100.jpg
myimage.scale-140.jpg
myimage.scale-180.jpg

If the images lived in the app you would normally put the source like the following and Windows works out which image to load based on the resolution scale of the device:

ms-appx:///Assets/Images/myimage.jpg

However as my 3 images live externally I am having to work out the resolution scale and then build up the correct source string so that the correct image is loaded e.g:

http://www.mywebsite.com/myimage.scale-180.jpg

This works, however, windows is taking my image e.g. the 180 scale one myimage.scale-180.jpg, and then scaling it up by a further 180%, it doesn't know that I have loaded an image at the correct 180% scale already and that it doesn't need to scale it up!

Is there a way of telling it not to scale up specific image elements?

Update (added code):

The xaml image element:

<Image Source="{Binding Image, Converter={StaticResource ImageToExternalImagePathConverter}}" HorizontalAlignment="Left" VerticalAlignment="Top" Stretch="None" />

The converter used on the image element to determine the external image path (it works out the scale and uses the binding to build up the correct string).

public object Convert(object value, Type targetType, object parameter, string language)
        {
            ResolutionScale resolutionScale = Windows.Graphics.Display.DisplayInformation.GetForCurrentView().ResolutionScale;
            string ImageScale = ".scale-100";
            switch (resolutionScale)
            {
                case ResolutionScale.Scale140Percent:
                    ImageScale = ".scale-140";
                    break;
                case ResolutionScale.Scale180Percent:
                    ImageScale = ".scale-180";
                    break;
            }

            //builds up the correct string e.g. http://www.mywebsite.com/myimage.scale-180.jpg
            string externalPath = "http://www.mywebsite.com/" + (string)value + ImageScale + ".jpg";

            return externalPath;
        }

Update(added reference):

To further explain what I am currently doing see this link: http://msdn.microsoft.com/en-us/library/windows/apps/hh465362.aspx

Manually load images based upon scale percentage at runtime If your app is loading images at runtime using code, for example if you use DirectX directly, not XAML or HTML to create your UI, use the DisplayProperties.ResolutionScale property to determine the scale and manually load images based upon scale percentage.

So that's what I am doing, but the problem is that Windows is scaling up the UI as it should to 140% or 180%, and that includes my manually loaded image. So if I manually load in an image that is already sized at 140%, it gets scaled up by Windows anyway and it DOES get physically bigger. If the images lived in the app package this problem wouldnt exist because Windows recognises the filename identifiers and doesnt scale them up (see below)

Use resource loading for bitmap images in the app package For bitmap images stored in the app package, provide a separate image for each scaling factor(100%, 140%, and 180%), and name your image files using the "scale" naming convention described below. Windows loads the right image for the current scale automatically.

How can I replicate the same behavior from Windows for images that live in the app package but for images that are external to the app and are loaded manually? Logically at the point at which I load the image in (code), I want to say to Windows, this image is already scaled correctly, don't upscale it by the resolution factor.

Dave Haigh
  • 4,369
  • 5
  • 34
  • 56
  • If you are using automatically-sized images, they will scale based on their `Stretch` property, so make sure you have that set. Otherwise, it shouldn't be making the images 'physically' bigger on the screen. It generally just recognizes when they are being drawn bigger (such as via Ease of Access) and uses the higher-resolution images. – Nate Diamond Mar 06 '14 at 18:05
  • If you would be fine adding an additional image, you could add `myimage.noscale.jpg`, then reference it directly. – Nate Diamond Mar 07 '14 at 20:16
  • @NateDiamond could you elaborate why and how this will solve my problem please? – Dave Haigh Mar 11 '14 at 08:43
  • Why not you get screen resolution and place required image according to resolution. – Muhammad Umar Mar 11 '14 at 09:00
  • @MuhammadUmar I do do that. But then Windows scales it up further - they are externally hosted images, they don't live in the app. – Dave Haigh Mar 11 '14 at 10:47
  • Set `Stretch` property to none then may be window does not scales it up. – Muhammad Umar Mar 11 '14 at 12:07
  • @MuhammadUmar added some code as requested. The image is not being stretched to fit, it is actually being scaled up as my question explains. The code shows how I am pointing to the correctly scaled external images. – Dave Haigh Mar 11 '14 at 12:32
  • Have you debug the code ? What happened when you change resolution ? How you notify your view to change image now ? Is this part of code execute according to resolution. Debug it. – Muhammad Umar Mar 12 '14 at 05:11
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/49537/discussion-between-dave-haigh-and-muhammad-umar) – Dave Haigh Mar 12 '14 at 08:56
  • Can you not just throw it in a `ViewBox` and be done with it? – Chris W. Mar 12 '14 at 14:14
  • @ChrisW. can you explain how that will solve it? – Dave Haigh Mar 12 '14 at 14:34
  • Let the ViewBox handle the scaling for you, instead of separate files and allowing windows to try and scale it. It would retain your image resolution and seemingly be more flexible all around. – Chris W. Mar 12 '14 at 14:51

1 Answers1

0

Try sizing grip property to false