Moving Thumb and TextBlock together

Question

Hello,

I have TextBlock and Thumb placed on Canvas.
I want to code such effect:
If user moves Thumb, TextBlock is moved too.

How to code such behavior?

Answer 1

Hello,

Welcome to Microsoft Q&A!

If user moves Thumb, TextBlock is moved too.

Since your controls are all placed in a canvas, you could get the position changed value by handling the Thumb.DragDelta Event when you drag the Thumb. Then you could change the position of the Thumb and the TextBlock by changing its top and left.

I've made a simple demo which you could refer to.

MainPage.Xaml:

  <Canvas>  
  
        <Thumb x:Name="MyThumb" Width="100" Height="100" Canvas.Left="50" Canvas.Top="50" DragDelta="MyThumb_DragDelta">  
            <Thumb.Template>  
                <ControlTemplate>  
                    <Image Source="/Assets/StoreLogo.png" />  
                </ControlTemplate>  
            </Thumb.Template>  
        </Thumb>  
  
  
        <TextBlock x:Name="MyBlock" Text="123123"  Canvas.Left="50" Canvas.Top="200"/>  
    </Canvas>  

MainPage.cs

       public MainPage()  
        {  
            this.InitializeComponent();  
        }  
  
        private void MyThumb_DragDelta(object sender, DragDeltaEventArgs e)  
        {  
            double changedX = e.HorizontalChange;  
            double changedY = e.VerticalChange;  
  
            Canvas.SetLeft(MyThumb, Canvas.GetLeft(MyThumb)+ changedX);  
            Canvas.SetTop(MyThumb, Canvas.GetTop(MyThumb)+changedY);  
  
  
            Canvas.SetLeft(MyBlock, Canvas.GetLeft(MyBlock) + changedX);  
            Canvas.SetTop(MyBlock, Canvas.GetTop(MyBlock) + changedY);  
        }  

Thank you.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.