{"id":65,"date":"2010-12-19T14:35:49","date_gmt":"2010-12-19T09:05:49","guid":{"rendered":"http:\/\/techtwaddle.net\/?p=65"},"modified":"2011-01-26T14:43:05","modified_gmt":"2011-01-26T09:13:05","slug":"windows-phone-7-dragging-and-flicking-ui-controls","status":"publish","type":"post","link":"https:\/\/techtwaddle.co.in\/blog\/2010\/12\/19\/windows-phone-7-dragging-and-flicking-ui-controls\/","title":{"rendered":"Windows Phone 7 : Dragging and flicking UI controls"},"content":{"rendered":"

Who would want to flick and drag UI controls!? There might not be many use cases but I think some concepts here are worthy of a post.<\/p>\n

So we will create a simple silverlight application for windows phone 7, containing a canvas element on which we\u2019ll place a button control and an image and then, as the title says, drag and flick the controls. Here\u2019s Mainpage.xaml,<\/p>\n

\n
\n
    \n
  1. <Grid x:Name=”LayoutRoot” Background=”Transparent”><\/li>\n
  2. <Grid.RowDefinitions><\/li>\n
  3. <RowDefinition Height=”Auto”\/><\/li>\n
  4. <RowDefinition Height=”*”\/><\/li>\n
  5. <\/Grid.RowDefinitions><\/li>\n
  6. <\/li>\n
  7. <!–TitlePanel contains the name of the application and page title–><\/li>\n
  8. <StackPanel x:Name=”TitlePanel” Grid.Row=”0″ Margin=”12,17,0,28″><\/li>\n
  9. <TextBlock x:Name=”ApplicationTitle” Text=”KINETICS” Style=”{StaticResource PhoneTextNormalStyle}”\/><\/li>\n
  10. <TextBlock x:Name=”PageTitle” Text=”drag and flick” Margin=”9,-7,0,0″ Style=”{StaticResource PhoneTextTitle1Style}”\/><\/li>\n
  11. <\/StackPanel><\/li>\n
  12. <\/li>\n
  13. <!–ContentPanel – place additional content here–><\/li>\n
  14. <Grid x:Name=”ContentPanel” Grid.Row=”1″ ><\/li>\n
  15. <Canvas x:Name=”MainCanvas” HorizontalAlignment=”Stretch” VerticalAlignment=”Stretch”><\/li>\n
  16. <Canvas.Background><\/li>\n
  17. <LinearGradientBrush StartPoint=”0 0″ EndPoint=”0 1″><\/li>\n
  18. <GradientStop Offset=”0″ Color=”Black”\/><\/li>\n
  19. <GradientStop Offset=”1.5″ Color=”BlanchedAlmond”\/><\/li>\n
  20. <\/LinearGradientBrush><\/li>\n
  21. <\/Canvas.Background><\/li>\n
  22. <\/Canvas><\/li>\n
  23. <\/Grid><\/li>\n
  24. <\/Grid><\/li>\n<\/ol>\n<\/div>\n<\/div>\n

    the second row in the main grid contains a canvas element, MainCanvas<\/span>, with its horizontal and vertical alignment set to stretch so that it occupies the entire grid. The canvas background is a linear gradient brush starting with Black and ending with BlanchedAlmond. We\u2019ll add the button and image control to this canvas at run time.<\/p>\n

    Moving to Mainpage.xaml.cs the Mainpage<\/span> class contains the following members,<\/p>\n

    \n
    \n
      \n
    1. public partial class MainPage : PhoneApplicationPage<\/li>\n
    2. {<\/li>\n
    3. Button FlickButton;<\/li>\n
    4. Image FlickImage;<\/li>\n
    5. <\/li>\n
    6. FrameworkElement ElemToMove = null;<\/li>\n
    7. double ElemVelX, ElemVelY;<\/li>\n
    8. <\/li>\n
    9. const double SPEED_FACTOR = 60;<\/li>\n
    10. <\/li>\n
    11. DispatcherTimer timer;<\/li>\n<\/ol>\n<\/div>\n<\/div>\n

      FlickButton<\/span> and FlickImage<\/span> are the controls that we\u2019ll add to the canvas. ElemToMove<\/span>, ElemVelX<\/span> and ElemVelY<\/span> will be used by the timer callback to move the ui control. SPEED_FACTOR<\/span> is used to scale the velocities of ui controls.<\/p>\n

      Here\u2019s the Mainpage<\/span> constructor,<\/p>\n

      \n
      \n
        \n
      1. \/\/ Constructor<\/li>\n
      2. public MainPage()<\/li>\n
      3. {<\/li>\n
      4. InitializeComponent();<\/li>\n
      5. <\/li>\n
      6. AddButtonToCanvas();<\/li>\n
      7. <\/li>\n
      8. AddImageToCanvas();<\/li>\n
      9. <\/li>\n
      10. timer = new DispatcherTimer();<\/li>\n
      11. timer.Interval = TimeSpan.FromMilliseconds(35);<\/li>\n
      12. timer.Tick += new EventHandler(OnTimerTick);<\/li>\n
      13. }<\/li>\n<\/ol>\n<\/div>\n<\/div>\n

        We\u2019ll look at those AddButton<\/span> and AddImage<\/span> functions in a moment. The constructor initializes a timer which fires every 35 milliseconds, this timer will be started after the flick gesture completes with some inertia.<\/p>\n

        Back to AddButton<\/span> and AddImage<\/span> functions,<\/p>\n

        \n
        \n
          \n
        1. void AddButtonToCanvas()<\/li>\n
        2. {<\/li>\n
        3. LinearGradientBrush brush;<\/li>\n
        4. GradientStop stop1, stop2;<\/li>\n
        5. <\/li>\n
        6. Random rand = new Random(DateTime.Now.Millisecond);<\/li>\n
        7. <\/li>\n
        8. FlickButton = new Button();<\/li>\n
        9. FlickButton.Content = “”;<\/li>\n
        10. FlickButton.Width = 100;<\/li>\n
        11. FlickButton.Height = 100;<\/li>\n
        12. <\/li>\n
        13. brush = new LinearGradientBrush();<\/li>\n
        14. brush.StartPoint = new Point(0, 0);<\/li>\n
        15. brush.EndPoint = new Point(0, 1);<\/li>\n
        16. <\/li>\n
        17. stop1 = new GradientStop();<\/li>\n
        18. stop1.Offset = 0;<\/li>\n
        19. stop1.Color = Colors.White;<\/li>\n
        20. <\/li>\n
        21. stop2 = new GradientStop();<\/li>\n
        22. stop2.Offset = 1;<\/li>\n
        23. stop2.Color = (Application.Current.Resources[“PhoneAccentBrush”] as SolidColorBrush).Color;<\/li>\n
        24. <\/li>\n
        25. brush.GradientStops.Add(stop1);<\/li>\n
        26. brush.GradientStops.Add(stop2);<\/li>\n
        27. <\/li>\n
        28. FlickButton.Background = brush;<\/li>\n
        29. <\/li>\n
        30. Canvas.SetTop(FlickButton, rand.Next(0, 400));<\/li>\n
        31. Canvas.SetLeft(FlickButton, rand.Next(0, 200));<\/li>\n
        32. <\/li>\n
        33. MainCanvas.Children.Add(FlickButton);<\/li>\n
        34. <\/li>\n
        35. \/\/subscribe to events<\/li>\n
        36. FlickButton.ManipulationDelta += new EventHandler<ManipulationDeltaEventArgs>(OnManipulationDelta);<\/li>\n
        37. FlickButton.ManipulationCompleted += new EventHandler<ManipulationCompletedEventArgs>(OnManipulationCompleted);<\/li>\n
        38. }<\/li>\n<\/ol>\n<\/div>\n<\/div>\n

          this function is basically glorifying a simple task. After creating the button and setting its height and width, its background is set to a linear gradient brush. The direction of the gradient is from top towards bottom and notice that the second stop color is the PhoneAccentColor<\/em><\/span>, which changes along with the theme of the device. The line,<\/p>\n

          stop2.Color = (Application.Current.Resources[“PhoneAccentBrush”] as SolidColorBrush).Color;<\/p>\n

          does the magic of extracting the PhoneAccentBrush<\/span> from application\u2019s resources, getting its color and assigning it to the gradient stop.<\/p>\n

          AddImage<\/span> function is straight forward in comparison,<\/p>\n

          \n
          \n
            \n
          1. void AddImageToCanvas()<\/li>\n
          2. {<\/li>\n
          3. Random rand = new Random(DateTime.Now.Millisecond);<\/li>\n
          4. <\/li>\n
          5. FlickImage = new Image();<\/li>\n
          6. FlickImage.Source = new BitmapImage(new Uri(“\/images\/Marble.png”, UriKind.Relative));<\/li>\n
          7. <\/li>\n
          8. Canvas.SetTop(FlickImage, rand.Next(0, 400));<\/li>\n
          9. Canvas.SetLeft(FlickImage, rand.Next(0, 200));<\/li>\n
          10. <\/li>\n
          11. MainCanvas.Children.Add(FlickImage);<\/li>\n
          12. <\/li>\n
          13. \/\/subscribe to events<\/li>\n
          14. FlickImage.ManipulationDelta += new EventHandler<ManipulationDeltaEventArgs>(OnManipulationDelta);<\/li>\n
          15. FlickImage.ManipulationCompleted += new EventHandler<ManipulationCompletedEventArgs>(OnManipulationCompleted);<\/li>\n
          16. }<\/li>\n<\/ol>\n<\/div>\n<\/div>\n

            The ManipulationDelta<\/span> and ManipulationCompleted<\/span> handlers are same for both the button and the image.<\/p>\n

            OnManipulationDelta()<\/span> should look familiar, a similar implementation was used in the previous post<\/a>,<\/p>\n

            \n
            \n
              \n
            1. void OnManipulationDelta(object sender, ManipulationDeltaEventArgs args)<\/li>\n
            2. {<\/li>\n
            3. FrameworkElement Elem = sender as FrameworkElement;<\/li>\n
            4. <\/li>\n
            5. double Left = Canvas.GetLeft(Elem);<\/li>\n
            6. double Top = Canvas.GetTop(Elem);<\/li>\n
            7. <\/li>\n
            8. Left += args.DeltaManipulation.Translation.X;<\/li>\n
            9. Top += args.DeltaManipulation.Translation.Y;<\/li>\n
            10. <\/li>\n
            11. \/\/check for bounds<\/li>\n
            12. if (Left < 0)<\/li>\n
            13. {<\/li>\n
            14. Left = 0;<\/li>\n
            15. }<\/li>\n
            16. else if (Left > (MainCanvas.ActualWidth – Elem.ActualWidth))<\/li>\n
            17. {<\/li>\n
            18. Left = MainCanvas.ActualWidth – Elem.ActualWidth;<\/li>\n
            19. }<\/li>\n
            20. <\/li>\n
            21. if (Top < 0)<\/li>\n
            22. {<\/li>\n
            23. Top = 0;<\/li>\n
            24. }<\/li>\n
            25. else if (Top > (MainCanvas.ActualHeight – Elem.ActualHeight))<\/li>\n
            26. {<\/li>\n
            27. Top = MainCanvas.ActualHeight – Elem.ActualHeight;<\/li>\n
            28. }<\/li>\n
            29. <\/li>\n
            30. Canvas.SetLeft(Elem, Left);<\/li>\n
            31. Canvas.SetTop(Elem, Top);<\/li>\n
            32. }<\/li>\n<\/ol>\n<\/div>\n<\/div>\n

              all it does is calculate the control\u2019s position, check for bounds and then set the top and left of the control.<\/p>\n

              OnManipulationCompleted()<\/span> is more interesting because here we need to check if the gesture completed with any inertia and if it did, start the timer and continue to move the ui control until it comes to a halt slowly,<\/p>\n

              \n
              \n
                \n
              1. void OnManipulationCompleted(object sender, ManipulationCompletedEventArgs args)<\/li>\n
              2. {<\/li>\n
              3. FrameworkElement Elem = sender as FrameworkElement;<\/li>\n
              4. <\/li>\n
              5. if (args.IsInertial)<\/li>\n
              6. {<\/li>\n
              7. ElemToMove = Elem;<\/li>\n
              8. <\/li>\n
              9. Debug.WriteLine(“Linear VelX:{0:0.00}\u00a0 VelY:{1:0.00}”, args.FinalVelocities.LinearVelocity.X,<\/li>\n
              10. args.FinalVelocities.LinearVelocity.Y);<\/li>\n
              11. <\/li>\n
              12. ElemVelX = args.FinalVelocities.LinearVelocity.X \/ SPEED_FACTOR;<\/li>\n
              13. ElemVelY = args.FinalVelocities.LinearVelocity.Y \/ SPEED_FACTOR;<\/li>\n
              14. <\/li>\n
              15. timer.Start();<\/li>\n
              16. }<\/li>\n
              17. }<\/li>\n<\/ol>\n<\/div>\n<\/div>\n

                ManipulationCompletedEventArgs<\/span> contains a member, IsInertial<\/span>, which is set to true if the manipulation was completed with some inertia. args.FinalVelocities.LinearVelocity.X<\/span> and .Y<\/span> will contain the velocities along the X and Y axis. We need to scale down these values so they can be used to increment the ui control\u2019s position sensibly. A reference to the ui control is stored in ElemToMove<\/span> and the velocities are stored as well, these will be used in the timer callback to access the ui control. And finally, we start the timer.<\/p>\n

                The timer callback function is as follows,<\/p>\n

                \n
                \n
                  \n
                1. void OnTimerTick(object sender, EventArgs e)<\/li>\n
                2. {<\/li>\n
                3. if (null != ElemToMove)<\/li>\n
                4. {<\/li>\n
                5. double Left, Top;<\/li>\n
                6. Left = Canvas.GetLeft(ElemToMove);<\/li>\n
                7. Top = Canvas.GetTop(ElemToMove);<\/li>\n
                8. <\/li>\n
                9. Left += ElemVelX;<\/li>\n
                10. Top += ElemVelY;<\/li>\n
                11. <\/li>\n
                12. \/\/check for bounds<\/li>\n
                13. if (Left < 0)<\/li>\n
                14. {<\/li>\n
                15. Left = 0;<\/li>\n
                16. ElemVelX *= -1;<\/li>\n
                17. }<\/li>\n
                18. else if (Left > (MainCanvas.ActualWidth – ElemToMove.ActualWidth))<\/li>\n
                19. {<\/li>\n
                20. Left = MainCanvas.ActualWidth – ElemToMove.ActualWidth;<\/li>\n
                21. ElemVelX *= -1;<\/li>\n
                22. }<\/li>\n
                23. <\/li>\n
                24. if (Top < 0)<\/li>\n
                25. {<\/li>\n
                26. Top = 0;<\/li>\n
                27. ElemVelY *= -1;<\/li>\n
                28. }<\/li>\n
                29. else if (Top > (MainCanvas.ActualHeight – ElemToMove.ActualHeight))<\/li>\n
                30. {<\/li>\n
                31. Top = MainCanvas.ActualHeight – ElemToMove.ActualHeight;<\/li>\n
                32. ElemVelY *= -1;<\/li>\n
                33. }<\/li>\n
                34. <\/li>\n
                35. Canvas.SetLeft(ElemToMove, Left);<\/li>\n
                36. Canvas.SetTop(ElemToMove, Top);<\/li>\n
                37. <\/li>\n
                38. \/\/reduce x,y velocities gradually<\/li>\n
                39. ElemVelX *= 0.9;<\/li>\n
                40. ElemVelY *= 0.9;<\/li>\n
                41. <\/li>\n
                42. \/\/when velocities become too low, break<\/li>\n
                43. if (Math.Abs(ElemVelX) < 1.0 && Math.Abs(ElemVelY) < 1.0)<\/li>\n
                44. {<\/li>\n
                45. timer.Stop();<\/li>\n
                46. ElemToMove = null;<\/li>\n
                47. }<\/li>\n
                48. }<\/li>\n
                49. }<\/li>\n<\/ol>\n<\/div>\n<\/div>\n

                  if ElemToMove<\/span> is not null, we get the top and left values of the control and increment the values with their X and Y velocities. Check for bounds, and if the control goes out of bounds we reverse its velocity. Towards the end, the velocities are reduced by 10% every time the timer callback is called, and if the velocities reach too low values the timer is stopped and ElemToMove<\/span> is made null.<\/p>\n

                  Here\u2019s a short video of the program, the video is a little dodgy because my display driver refuses to run the animations smoothly<\/a>. The flicks aren\u2019t always recognised but the program should run well on an actual device (or a pc with better configuration),<\/p>\n

                  <\/object><\/p>\n

                  You can download the source code from here: ButtonDragAndFlick.zip<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

                  Who would want to flick and drag UI controls!? There might not be many use cases but I think some concepts here are worthy of a post. So we will create a simple silverlight application for windows phone 7, containing a canvas element on which we\u2019ll place a button control and an image and then, … Continue reading Windows Phone 7 : Dragging and flicking UI controls<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[1],"tags":[],"jetpack_featured_media_url":"","jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p1ktFF-13","_links":{"self":[{"href":"https:\/\/techtwaddle.co.in\/blog\/wp-json\/wp\/v2\/posts\/65"}],"collection":[{"href":"https:\/\/techtwaddle.co.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/techtwaddle.co.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/techtwaddle.co.in\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/techtwaddle.co.in\/blog\/wp-json\/wp\/v2\/comments?post=65"}],"version-history":[{"count":3,"href":"https:\/\/techtwaddle.co.in\/blog\/wp-json\/wp\/v2\/posts\/65\/revisions"}],"predecessor-version":[{"id":72,"href":"https:\/\/techtwaddle.co.in\/blog\/wp-json\/wp\/v2\/posts\/65\/revisions\/72"}],"wp:attachment":[{"href":"https:\/\/techtwaddle.co.in\/blog\/wp-json\/wp\/v2\/media?parent=65"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/techtwaddle.co.in\/blog\/wp-json\/wp\/v2\/categories?post=65"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/techtwaddle.co.in\/blog\/wp-json\/wp\/v2\/tags?post=65"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}