Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

XAML Image Quality (interpolation) in a Metro-Style App

Given the following Image object (it's in the DataTemplate of a ListView object):

  <Image Source="{Binding ImgSource}" ImageOpened="img_ImageOpened" />

how am I supposed to get an high-quality bicubic-interpolated image? (on screen, the size of this Image is smaller than the source PNG, but the default resizing appears to be performed with the poor-quality "nearest neighbor" interpolation).

Since I would like to rely on data binding alone (whenever the ImgSource of the associated data item changes, the Image content should change), I've tried to set an ImageOpened handler and change the just-loaded image to a better-quality one.

Unfortunately, the code below seems not to work (I just get empty images):

    async void LoadImage(Image imgControl, string source)
    {
        try
        {
            StorageFile file = await StorageFile.GetFileFromPathAsync(source);

            IRandomAccessStream fileStream = await file.OpenAsync(FileAccessMode.Read);
            BitmapDecoder decoder = await BitmapDecoder.CreateAsync(fileStream);

            InMemoryRandomAccessStream ras = new InMemoryRandomAccessStream();
            BitmapEncoder enc = await BitmapEncoder.CreateForTranscodingAsync(ras, decoder);

            enc.BitmapTransform.InterpolationMode = BitmapInterpolationMode.Cubic;
            enc.BitmapTransform.ScaledHeight = Convert.ToUInt32(imgControl.ActualHeight);
            enc.BitmapTransform.ScaledWidth = Convert.ToUInt32(imgControl.ActualWidth);

            await enc.FlushAsync();

            Windows.UI.Xaml.Media.Imaging.BitmapImage bImg = new Windows.UI.Xaml.Media.Imaging.BitmapImage();
            bImg.SetSource(ras);
            imgControl.Source = bImg;
        }
        catch (Exception e)
        {
            return;
        }
    }

    void img_ImageOpened(object sender, RoutedEventArgs e)
    {
        Image imgControl = (Image)sender;
        LoadImage(imgControl, <path to PNG file>);
    }
like image 578
Takeo Sato Avatar asked Nov 14 '22 02:11

Takeo Sato


1 Answers

I faced the same image quality problem in my WinRT application, and tried to use RenderOptions.BitmapScalingMode but it is not present (and System.Windows.Media namespace as well) in .NET for Windows Store. So I tried your first solution and fixed it so that works. You were one small step from success, only need to add

ras.Seek(0);

to allow reading the stream from the beginning.

like image 69
Alex Yurov Avatar answered Dec 22 '22 11:12

Alex Yurov