Images pixelate when resized in WinRT

Question

I have a WinRT app under development which uses a bunch of images. In part of the image I display the image thumbnails which have a larger version.

The image source for these thumbnails is the respective large image which is 1024x768. The re-sizing is done in C# dynamically for the thumbnail on the Image element. I have maintained the 4:3 aspect ratio as well.

Is this the only way WinRT resizes images or is there way to dynamically resize an image element more gracefully with less pixelation?

P.S: I cannot create a smaller version of the image as well, for one reason that the sizes of thumbnails are dynamic, depending on the number of thumbnails on screen and the screen resolution.

Here's my auto-resize code.

private void canvasObject()
    {
        for (int i = 1; i <= maxCards; i++)
        {
            objectList.Add(i); 
        }

        Double h,w, hp=0,wp=0,hm;
        w = ((objectCanvas.ActualWidth / 9));
        h = (w * (4 / 3));
        hm = ((objectCanvas.ActualHeight / 3)-h);
        int count = 0;

        for (int i = 0; i <= 3;i++)
        {
            wp = 0;
            for (int j = 0; j < 9 && count < maxCards; j++)
            {
                count++;
                Card c = new Card();
                ImageSource imgSrc1;
                Random rnd = new Random();
                int rNum = rnd.Next(1, objectList.Count);
                imgSrc1 = new BitmapImage(new Uri(@"ms-appx:/Assets/Images/Alphabets/Cards/" + (char)(objectList[rNum-1] + 96) + ".png", UriKind.Absolute));
                c.objectImg.Name = objectList[rNum-1].ToString();
                objectList.Remove(objectList[rNum-1]);
                c.objectImg.SetValue(Image.SourceProperty, imgSrc1);
                c.objectImg.Width = w;
                c.objectImg.Height = h;
                c.objectImg.Margin = new Thickness(10);
                c.objectImg.SetValue(Canvas.LeftProperty,wp);
                c.objectImg.SetValue(Canvas.TopProperty, hp);
                wp += w;
                c.objectImg.Tapped += objectImg_Tapped;
                objectCanvas.Children.Add(c.objectImg);
            }
            hp += h+hm;
        }
    }

Thought I do not feel this is a problem with the code, as some images in XAML also look pixelated even though they are stretched to Uniform. I even tried using smaller images to their exact size, but apparently small images on my app are getting pixelated as is. But when running on a 2560x1440 res the images look as expected.

Answer 1

I had the same problem but found a very neat solution for this. The keyword is DecodePixelHeight

<Image Width="100" Height="100" Stretch="UniformToFill">
   <Image.Source>
     <BitmapImage DecodePixelWidth="100" UriSource="{Binding ImagePath}" />
   </Image.Source>
</Image>

Credit goes to: http://www.geekchamp.com/forums/windows-8-development/resizing-an-image-without-losing-any-quality-in-windows-store-app#forum-post-386827

Answer 2

Did you try using ScaleTransform?

ScaleTransform st = new ScaleTransform();
st.Scale = 0.20f; 
c.objectImg.RenderTransform = st;

I find transforms the most useful when it comes to scaling and rotating images.