Question

I have two Image controls on each other and I set the alpha channel of some pixels to zero, from the upper one(this is the colorful). But after I “zoom” (width the ScaleTransform), a “border” will be visible around the pixels that have set. Here is a screenshot:

Here is the code:

        <Grid Name="grdPhotos">
            <Image Stretch="None" Source="picture_grayscale.jpg" Name="photo1" HorizontalAlignment="Left" VerticalAlignment="Top" />
            <Image Stretch="None" Source="picture.jpg" Name="photo2" MouseLeftButtonDown="photo2_MouseLeftButtonDown" HorizontalAlignment="Left" VerticalAlignment="Top" />
        </Grid>

---

    private void photo2_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        var photo = photo2.Source as WriteableBitmap; // A WriteableBitmap is created before from the Source BitmapImage
        for (int x = 100; x < 200; x++)
        {
            for (int y = 100; y < 200; y++)
            {
                int index = Convert.ToInt32(photo.PixelWidth * y + x);
                if (index > 0 && index < photo.Pixels.Length)
                    SetPixelAlphaChannel(ref photo.Pixels[index], 0);
            }
        }

        var transform = new ScaleTransform { ScaleX = 2, ScaleY = 2 };
        photo1.RenderTransform = photo2.RenderTransform = transform;
    }

    public void SetPixelAlphaChannel(ref int pixel, byte value)
    {
        var color = ColorFromPixel(pixel);
        if (color.A == value)
            return;

        color.A = value;
        pixel = ColorToPixel(color);
    }

    private Color ColorFromPixel(int pixel)
    {
        var argbBytes = BitConverter.GetBytes(pixel);
        return new Color { A = argbBytes[3], R = argbBytes[2], G = argbBytes[1], B = argbBytes[0] };
    }
    private int ColorToPixel(Color color)
    {
        var argbBytes = new byte[] { color.B, color.G, color.R, color.A };
        return BitConverter.ToInt32(argbBytes, 0);
    }

Why is this? Or how can I implement a zoom functionality without this “border”? Thanks a lot.

Answer 1

When you zoom an image, the pixel values will be interpolated, this will result in pixels in the border are you are observing being the result of interpolating your transparent pixels with their non transparent neighbours. Unfortunately you cannot control the interpolation behaviour of render transforms. You are going to have to do this yourself, possibly via WriteableBitmap.