Resizing UI elements in UWP Canvas with ScrollViewer

Question

I have a Canvas contained in a scrollveiwer so that it can be zoomed and panned. However, I am also trying to make it so that user input elements (textboxes, images, etc.) can be resized with pinch functionality. Here is my XAML code for the basis of the interface:

<Grid>
    <RelativePanel>
        <Button ... />
        <Button ... />
        <Button />

        <ScrollViewer
         VerticalScrollMode="Auto"
         HorizontalScrollMode="Auto"
         HorizontalScrollBarVisibility="Visible"
         VerticalScrollBarVisibility="Visible"
         ZoomMode="Enabled"
         MinZoomFactor="1"
         MaxZoomFactor="5"
         HorizontalAlignment="Left"
         VerticalAlignment="Top"
         RelativePanel.Below="AddTextButton">

            <Canvas Name="parentCanvas" Height="10000" Width="10000" >

                <InkCanvas Name="inkCanvas" Height="10000" Width="10000"
                        Visibility="Visible"   />

            </Canvas>

        </ScrollViewer>
    </RelativePanel>
</Grid>

I also have this C# code to add a textbox and handle the manipulation events (drag/resize):

public void AddTextButton_Click(object sender, RoutedEventArgs e)
    {
        TextBox MyTextBox = new TextBox();
        MyTextBox.Background = new SolidColorBrush(Colors.White);

        MyTextBox.PlaceholderText = "Text";
        MyTextBox.Width = 250;
        MyTextBox.Height = 100;

        ManipulationMode = ManipulationModes.All;
        MyTextBox.RenderTransform = textBoxTransforms;
        AddHandler(ManipulationDeltaEvent, new ManipulationDeltaEventHandler(TextBox_ManipulationDelta), true);
        parentCanvas.Children.Add(MyTextBox);        
    }

    void TextBox_ManipulationDelta(object sender,
        ManipulationDeltaRoutedEventArgs e)
    {
        // Move the TextBox. 

        dragTextBox.X += e.Delta.Translation.X;
        dragTextBox.Y += e.Delta.Translation.Y;

        resizeTextBox.ScaleX *= e.Delta.Scale;
        resizeTextBox.ScaleY *= e.Delta.Scale;
    }

This C# code works when the canvas is not contained in a scrollviewer. Any suggestions on how to make resizing (with touch/pinch functionality) work in a scrollviewer?

Thanks!

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

Unfortunately, there is no good solution for your TextBox manipulation in a ScrollViewer.

See the blog from @Rob Where did all my gestures go?

ScrollViewer takes over the pointer handling to run its scrolling. Once the ScrollViewer is in charge it handles all of the pointer and manipulation events without the app having its own chance at them

...

Unfortunately there is no good solution if the app needs both scrolling and gestures (for example, to detect CrossSlides against the scrolling). In this case the only option to get the Pointer messages everywhere is to disable Direct Manipulation everywhere, but that disables scrolling as well. To get that back the app will need to detect the scrolling gestures itself and then navigate the ScrollViewer to the new location with ScrollToHorizontalOffset or ScrollToVerticalOffset or by updating the SelectedIndex. This is tricky and will be noticeably slower than letting the ScrollViewer do its thing. It should be avoided if at all possible.

Resizing UI elements in UWP Canvas with ScrollViewer

1 Answers1