DataPackageView Bitmap looses transparency

Question

When copying a transparent image from a web browser and saving it to a file using a UWP application, the transparency of the image is lost. Below is a code snippet illustrating the approach to save the clipboard's DataPackageView bitmap to a file, which leads to this issue:

// Retrieve the bitmap from the clipboard's DataPackageView
var rasr = await dataPackageView.GetBitmapAsync();
// Open the bitmap as a read-only stream
using var randomAccessStreamWithContentType = await rasr.OpenReadAsync();
// Initialize a FolderPicker to select a folder for saving the file
FolderPicker picker = new FolderPicker
{
    SuggestedStartLocation = PickerLocationId.Downloads
};
picker.FileTypeFilter.Add("*");
// Let the user pick a folder
StorageFolder folder = await picker.PickSingleFolderAsync();
if (folder == null)
{
    return null; // Exit if no folder is selected
}
// Create a new file in the selected folder
StorageFile file = await folder.CreateFileAsync("Hello1.png", CreationCollisionOption.ReplaceExisting);
// Write the bitmap stream to the file
using var fileStream = await file.OpenAsync(FileAccessMode.ReadWrite);
await randomAccessStreamWithContentType.AsStreamForRead().CopyToAsync(fileStream.AsStreamForWrite());

This issue might be related to the one described here: DataPackageView bitmap loses transparency.

Could someone please advise if this is a UWP bug and whether there is any workaround to preserve transparency?

Accepted Answer

Hello @TTran ,

Welcome to Microsoft Q&A!

This is by design, the classic desktop clipboard CF_BITMAP format doesn't support alpha.

User's image

You can press Windows logo key + V to see the image in clipboard, it already loss the transparency.

If you want to get the image with transparency from website, you can drop the file instead of the bitmap. This will depend on the drop source putting the PNG on the clipboard, but most will do so. Both Edge and Chrome do so.

The docs at https://zcusa.951200.xyz/en-us/windows/apps/design/input/drag-and-drop#enable-dropping demonstrate accepting a file drag and setting the dropped file as an Image.

private async void Grid_Drop(object sender, DragEventArgs e)
{
    if (e.DataView.Contains(StandardDataFormats.StorageItems))
    {
        var items = await e.DataView.GetStorageItemsAsync();
        if (items.Count > 0)
        {
            var storageFile = items[0] as StorageFile;
            var bitmapImage = new BitmapImage();
            bitmapImage.SetSource(await storageFile.OpenAsync(FileAccessMode.Read));
            // Set the image on the main page to the dropped image
            Image.Source = bitmapImage;
        }
    }
}

Thank you.

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Share via

DataPackageView Bitmap looses transparency

0 additional answers

Your answer