How to display resizing adorner in an image inserted in a RichEditBox?

355 views Asked by At

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?

1

There are 1 answers

0
Faywang - MSFT On

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.