question

BitSmithy-4663 avatar image
0 Votes"
BitSmithy-4663 asked RichardZhang-MSFT answered

Moving Thumb x and y

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.

windows-uwp
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

RichardZhang-MSFT avatar image
0 Votes"
RichardZhang-MSFT answered

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.

5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.