Moving Thumb x and y

Question

Hello,

When I set Thumb.ManipulationMode="TranslateX" - I can move it on Canvas X axis
When I set Thumb.ManipulationMode="TranslateY" - I can move it on Canvas Y axis

How to set Thumb.ManipulationMode to move it on Canvas X and Y axses.

Answer 1

Hello,​

Welcome to our Microsoft Q&A platform!

If you need to allow the control to move on the X axis and Y axis at the same time, you can set:

ManipulationMode="All"

This is a sample code that might show this process:

xaml

<Canvas Width="500" Height="500" Background="White">
    <Thumb ManipulationMode="All" Width="50" Height="50" Background="Red" ManipulationDelta="Thumb_ManipulationDelta">
        <Thumb.RenderTransform>
            <TranslateTransform x:Name="dragTranslation"></TranslateTransform>
        </Thumb.RenderTransform>
    </Thumb>
</Canvas>

xaml.cs

private void Thumb_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
    Thumb thumb = sender as Thumb;
    if (thumb == null)
    {
        return;
    }

    if (dragTranslation == null)
    {
        dragTranslation = new TranslateTransform();
    }

    thumb.RenderTransform = dragTranslation;

    dragTranslation.X += e.Delta.Translation.X;
    dragTranslation.Y += e.Delta.Translation.Y;
}

Thanks.