locked
Move a label across a canvas RRS feed

  • Question

  • I have a canvas with a label. I want the label move across the canvas. This works only if i move the label to a certain position then the Scrollbar must move to the left and the label must remain at the same position.

    Private Sub choice_02(ByVal sender As Object, ByVal e As MouseEventArgs)
    Dim sc As Object
    Dim dPerc As Double
    Dim pp As Point
    
    If bMouseDown Then
       sc = SC_User
    
       Dim dPosLeftCtr As Double = e.GetPosition(sender).X
       Dim dPosWithInCtr As Double = e.GetPosition ((sender).Parent).X - e.GetPosition(sender).X
       Dim dPosTotCtr As Double = e.GetPosition((sender).Parent).X
    
       pp = e.MouseDevice.GetPosition(SC_User)
       dPerc = pp.X / (Me.ActualWidth / 100)
    
       Debug.Print("Canvas")
       Debug.Print("Ctr to Canvas " & dPosLeftCtr)
       Debug.Print("Mouse to Ctr  " & dPosWithInCtr)
       Debug.Print("Mouse to Canvas   " & dPosTotCtr)
       Debug.Print("FirstXPos " & FirstXPos.ToString)
       Debug.Print("Perc  " & dPerc.ToString)
    
       sender.SetValue(Canvas.LeftProperty, dPosTotCtr - FirstXPos)
    
       If dPerc > 90 Then
    	SC_User.ScrollToHorizontalOffset(sc.HorizontalOffset + 20)
    	End If
    	If dPerc < 10 Then
    		SC_User.ScrollToHorizontalOffset(sc.HorizontalOffset - 20)
    	End If	
        End If
    
    End Sub	
    What is the problem, the scrollbar scrolls to the left. But because that the label also moves to to right I can't move the label a long way to to the right. I think that the label and mouse must stay at the same position and the scrollbar must move.

    • Edited by Quator Wednesday, November 6, 2013 1:46 PM
    Wednesday, November 6, 2013 1:44 PM

Answers

  • Hi,

    I've created a new sample, it used RenderTransform property to adjust Label's position in canvas, to prevent it move to the end of canvas, I used condition to fix the mouse position.

    XAML:

    <Window x:Class="Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="300" Width="525">
        <Grid>
            <StackPanel>
                <TextBlock Name="tb1" Text="1" />
                <TextBlock Name="tb2" Text="2" />
                <TextBlock Name="tb3" Text="3" />
            </StackPanel>
            <ScrollViewer Width="300" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Hidden" Name="SC_User" >
                <Canvas Width="400" Background="AliceBlue">
                    <Label Name="Samplelabel" BorderBrush="Red" BorderThickness="2"
                PreviewMouseDown="Samplelabel_PreviewMouseDown"
                PreviewMouseUp="Samplelabel_PreviewMouseUp"
                PreviewMouseMove="Samplelabel_PreviewMouseMove"
                Content="Moving" Width="100" Height="35"/>
                </Canvas>
            </ScrollViewer>
        </Grid>
    </Window>

    Codebehind:

    Private m_IsPressed As Boolean = False
    
    Private Sub Samplelabel_PreviewMouseDown(sender As Object, e As MouseButtonEventArgs)
            If e.ChangedButton = MouseButton.Left Then
                m_IsPressed = True
            Else
                m_IsPressed = False
            End If
    End Sub
    
    Private Sub Samplelabel_PreviewMouseUp(sender As Object, e As MouseButtonEventArgs)
            m_IsPressed = False
    End Sub
    
    Private Sub Samplelabel_PreviewMouseMove(sender As Object, e As MouseEventArgs)
            If m_IsPressed Then
    
                Dim temp As Point = Mouse.GetPosition(TryCast(TryCast(sender, Label).Parent, FrameworkElement))
                tb1.Text = temp.X
                tb2.Text = temp.Y
    
                Dim dPerc As Double = temp.X / (SC_User.ActualWidth / 100)
                tb3.Text = dPerc
    
                If dPerc > 55 Then
                    SC_User.ScrollToHorizontalOffset(SC_User.HorizontalOffset + 5)
                End If
                If dPerc < 40 Then
                    SC_User.ScrollToHorizontalOffset(SC_User.HorizontalOffset - 5)
                End If
    
                Dim transform As New TranslateTransform()
    
                If temp.X > (SC_User.Width - TryCast(sender, Label).ActualWidth + SC_User.HorizontalOffset + 5) Then
                    transform.X = (SC_User.Width - TryCast(sender, Label).ActualWidth + SC_User.HorizontalOffset + 5)
                Else
                    transform.X = temp.X
                End If
    
    
                If temp.Y > (SC_User.ActualHeight - TryCast(sender, Label).ActualHeight - 10) Then
                    transform.Y = (SC_User.ActualHeight - TryCast(sender, Label).ActualHeight - 10)
                Else
                    transform.Y = temp.Y
                End If
    
                transform.X -= 10
                transform.Y -= 10
    
                Me.Samplelabel.RenderTransform = transform
            End If
    End Sub

    New Sample Link:
    http://sdrv.ms/1flRHFr


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Thursday, November 7, 2013 12:39 PM

All replies

  • Hi,

    Based on your code, it seems like that your canvas was placed in a ScrollViewer.

    We can set Margin to move Label from left to right and set ScrollViewer's HorizontalOffset to auto scroll.

    Here is my sample:

    XAML:

    <ScrollViewer Width="300" HorizontalScrollBarVisibility="Visible" Name="SC_User" >
                <Canvas Name="canvas" Width="400" Background="AliceBlue" MouseDown="Canvas_MouseDown" >
                    <Label Name="label" BorderBrush="Red" BorderThickness="2" Content="HELLO" Height="30" Width="100">
                    </Label>
                </Canvas>
            </ScrollViewer>

    CodeBehind:

    Private Sub Canvas_MouseDown(sender As Object, e As MouseButtonEventArgs)
            SC_User.ScrollToHorizontalOffset(SC_User.HorizontalOffset + 120)
    
            label.Margin = New Thickness(canvas.ActualWidth - label.ActualWidth, 0, 0, 0)
    
        End Sub

    We can also use animation:

    Private Sub Canvas_MouseDown(sender As Object, e As MouseButtonEventArgs)
            SC_User.ScrollToHorizontalOffset(SC_User.HorizontalOffset + 120)
    
            Dim sb As New Storyboard()
            Dim da As New DoubleAnimation(0, canvas.ActualWidth - label.ActualWidth, New Duration(New TimeSpan(0, 0, 2)))
            Storyboard.SetTargetProperty(da, New PropertyPath("(Canvas.Left)"))
            sb.Children.Add(da)
            label.BeginStoryboard(sb)
    
        End Sub

     


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Thursday, November 7, 2013 5:15 AM
  • Thanks for your comment.

    With the code you sent I can solve other problems. But my problem persists, I want to move the label with the mouse movement. He must not move to the end of the canvas.

    When I move the label to a certain position, the label must remain at the place on the screen where it was but the scrollbar must move to the left or right and the mouse-pointer must stay on the label.

    Thursday, November 7, 2013 10:38 AM
  • Hi,

    I've created a new sample, it used RenderTransform property to adjust Label's position in canvas, to prevent it move to the end of canvas, I used condition to fix the mouse position.

    XAML:

    <Window x:Class="Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="300" Width="525">
        <Grid>
            <StackPanel>
                <TextBlock Name="tb1" Text="1" />
                <TextBlock Name="tb2" Text="2" />
                <TextBlock Name="tb3" Text="3" />
            </StackPanel>
            <ScrollViewer Width="300" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Hidden" Name="SC_User" >
                <Canvas Width="400" Background="AliceBlue">
                    <Label Name="Samplelabel" BorderBrush="Red" BorderThickness="2"
                PreviewMouseDown="Samplelabel_PreviewMouseDown"
                PreviewMouseUp="Samplelabel_PreviewMouseUp"
                PreviewMouseMove="Samplelabel_PreviewMouseMove"
                Content="Moving" Width="100" Height="35"/>
                </Canvas>
            </ScrollViewer>
        </Grid>
    </Window>

    Codebehind:

    Private m_IsPressed As Boolean = False
    
    Private Sub Samplelabel_PreviewMouseDown(sender As Object, e As MouseButtonEventArgs)
            If e.ChangedButton = MouseButton.Left Then
                m_IsPressed = True
            Else
                m_IsPressed = False
            End If
    End Sub
    
    Private Sub Samplelabel_PreviewMouseUp(sender As Object, e As MouseButtonEventArgs)
            m_IsPressed = False
    End Sub
    
    Private Sub Samplelabel_PreviewMouseMove(sender As Object, e As MouseEventArgs)
            If m_IsPressed Then
    
                Dim temp As Point = Mouse.GetPosition(TryCast(TryCast(sender, Label).Parent, FrameworkElement))
                tb1.Text = temp.X
                tb2.Text = temp.Y
    
                Dim dPerc As Double = temp.X / (SC_User.ActualWidth / 100)
                tb3.Text = dPerc
    
                If dPerc > 55 Then
                    SC_User.ScrollToHorizontalOffset(SC_User.HorizontalOffset + 5)
                End If
                If dPerc < 40 Then
                    SC_User.ScrollToHorizontalOffset(SC_User.HorizontalOffset - 5)
                End If
    
                Dim transform As New TranslateTransform()
    
                If temp.X > (SC_User.Width - TryCast(sender, Label).ActualWidth + SC_User.HorizontalOffset + 5) Then
                    transform.X = (SC_User.Width - TryCast(sender, Label).ActualWidth + SC_User.HorizontalOffset + 5)
                Else
                    transform.X = temp.X
                End If
    
    
                If temp.Y > (SC_User.ActualHeight - TryCast(sender, Label).ActualHeight - 10) Then
                    transform.Y = (SC_User.ActualHeight - TryCast(sender, Label).ActualHeight - 10)
                Else
                    transform.Y = temp.Y
                End If
    
                transform.X -= 10
                transform.Y -= 10
    
                Me.Samplelabel.RenderTransform = transform
            End If
    End Sub

    New Sample Link:
    http://sdrv.ms/1flRHFr


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Thursday, November 7, 2013 12:39 PM