2

I'm trying to display resizing adorners to an image inserted in a RichEditBox in a UWP application.

So far I can insert an image using the following code:

        private async void InsertImage()
        {
            var picker = new FileOpenPicker { SuggestedStartLocation = PickerLocationId.PicturesLibrary };
            picker.FileTypeFilter.Add(".jpg");
            picker.FileTypeFilter.Add(".png");
            var files = await picker.PickMultipleFilesAsync();

            if (files.All(file => file != null))
            {
                foreach (var file in files)
                {
                    using (var stream = await file.OpenAsync(FileAccessMode.Read))
                    {
                        var image = new BitmapImage();
                        await image.SetSourceAsync(stream);
                        textEditor.Document.Selection.InsertImage(image.PixelWidth / 2, image.PixelHeight / 2, 0, VerticalCharacterAlignment.Baseline, 
                                                                  file.DisplayName, stream);
                    }
                }
            }
        }

Once the image is inserted I can resize it, but when I click on the image the cursor doesn't change and the resizing adorners don't display at all, making the resizing task not very user friendly. In other words, what I want is shown in the image below:

resizing adorners

I initially tried to adapt a solution that I found for WPF in this question, but unfortunately UWP has no concept of adorners. Then, I tried to adapt a solution that I found for Winforms, but that relies on subclassing the RichTextBox control and override its WndProc method, and that also is not possible in UWP.

So, how can I acomplish what I described above in UWP?

Xam
  • 263
  • 2
  • 7
  • 19
  • This may not solve your issue, but it's worth a look: https://github.com/ysdy44/FanKit.Transformers-Nuget-UWP – Arlo Feb 06 '20 at 09:03
  • Or, the ImageCropper from the Windows Community Toolkit could be a good starting point: https://learn.microsoft.com/en-us/windows/communitytoolkit/controls/imagecropper – Arlo Feb 06 '20 at 09:03
  • 1
    I found that images with transparency do display the adorners: https://stackoverflow.com/a/76579911/709884. But it's really a pain to deal with, the user experience is frankly quite bad... – dgellow Jun 29 '23 at 09:50

1 Answers1

1

Display resizing adorners to an image inserted in a RichEditBox in a UWP application.

There is no api that can resize the image inserted in the RichEditBox in UWP, you need to customize a control and wrap the image inside it. By dragging the control to resize image. Or programming in wpf or winform and then use desktop bridge to convert it to UWP app.

Faywang - MSFT
  • 5,798
  • 1
  • 5
  • 8