locked
Creating circular SeekBar like android. RRS feed

  • Question

  • Hi All,

    Below is the image which contains the circular seek bar with red thumb.

    I want to create similar kind of control for my app.

    Please guide me how to do it?

    Thank You.

    Tuesday, October 22, 2013 8:11 AM

Answers

  • You can template a Slider control to do this. Round templates are a common demo in SPF or Silverlight. A search should find many examples to get you started, although the details will be a bit different. Windows Store apps don't have an Arc class so you'll need to draw that with a Path.

    In your template I'd use an Ellipse for the background circle (blue) and the marker circle, and a Path for the marker arc. The marker circle can use a rotation transform mapping the ProgressBar's Value to an angle. The tricky part will be writing a converter to map the ProgressBar's Value to an end point for your red/blue Path, but don't think the math should be too hard.

    See Quickstart: Control templates (Windows Store apps using C#/VB/C++ and XAML) for more info on templates.

    --Rob


    Tuesday, October 22, 2013 2:54 PM
    Moderator
  • I would use absolute positioning on a canvas to draw a circle and move the red dot around.  I don't have sample code.


    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Tuesday, October 22, 2013 11:31 AM
    Moderator

All replies

  • I would use absolute positioning on a canvas to draw a circle and move the red dot around.  I don't have sample code.


    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Tuesday, October 22, 2013 11:31 AM
    Moderator
  • You can template a Slider control to do this. Round templates are a common demo in SPF or Silverlight. A search should find many examples to get you started, although the details will be a bit different. Windows Store apps don't have an Arc class so you'll need to draw that with a Path.

    In your template I'd use an Ellipse for the background circle (blue) and the marker circle, and a Path for the marker arc. The marker circle can use a rotation transform mapping the ProgressBar's Value to an angle. The tricky part will be writing a converter to map the ProgressBar's Value to an end point for your red/blue Path, but don't think the math should be too hard.

    See Quickstart: Control templates (Windows Store apps using C#/VB/C++ and XAML) for more info on templates.

    --Rob


    Tuesday, October 22, 2013 2:54 PM
    Moderator