locked
Slider customization RRS feed

  • Question

  • I would like customize slider in WPF.Following is what i want to do.

    i want to move the slider from right to left continuously till maximum

    and place a button or label on the track of slider when a timer elapsed .

    On forward button click move to 2 tick points thumb(slider pointer)

    on backward button click move 2 ticks to backward.

    On pause button pause slider point where it is.

    On play button start from moving slider from where it is .

    It must be a reusable one like a control.

    Should i go for a custom control or user control.

    Please provide any code snippet or link to solve it

    Thanks in Advance

    Ravi

    Thursday, March 17, 2011 4:29 AM

Answers

All replies

  • Hi

    Please check the following post. it explains the customization of slider step by step. I think it will help you in your coding.

    http://codingsense.wordpress.com/2010/02/01/customize-a-slider-in-wpf-step-by-step-tutorial

    http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/fb653519-f4ed-4053-8e4c-bea68d7ec1e3/


    Please remember to click “Mark as Answer” on the post that helps you, and to click “Unmark as Answer” if a marked post does not actually answer your question. This will help other members to find the solution easily.
    • Marked as answer by RAVI KUMAR G Thursday, March 17, 2011 6:14 AM
    • Unmarked as answer by RAVI KUMAR G Thursday, March 17, 2011 6:14 AM
    • Proposed as answer by Yves.Z Wednesday, March 23, 2011 5:08 AM
    • Marked as answer by Yves.Z Thursday, March 24, 2011 3:36 PM
    Thursday, March 17, 2011 5:16 AM
  • Hi,

    I would like to control the slider point, if i go for the user control i could not update the Value(Slider's property) where if i use Dispatcher.Invoke method to update the value of slider,value is changing but not reflecting in UI.

    Thanks in Advance

    Ravi

     

    Thursday, March 17, 2011 6:18 AM
  • Hi Ravi,

    I recommend you to use Dispatcher.BeginInvoke instead of Dispatcher.Invoke.

    Is it possible for you to send your code or upload sample solution? It will be easy for me to simulate the issue.


    Please remember to click “Mark as Answer” on the post that helps you, and to click “Unmark as Answer” if a marked post does not actually answer your question. This will help other members to find the solution easily.
    Thursday, March 17, 2011 6:39 AM
  • I created a user control,on top of it i placed a slider,below is user control XAML code.

    <

     

     

     

    UserControl x:Class="CustomSlidebar.Slidebar" 

    xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation

    xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml 

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    mc:Ignorable="d"

    d:DesignHeight="81" d:DesignWidth="366" Name="SlideBar" MouseMove="SlideBar_MouseMove">

    <Grid Height="104" Width="383">

    <Slider Height="26" HorizontalAlignment="Left" Margin="20,39,0,0" Name="slider" VerticalAlignment="Top" Width="346" 

    IsMoveToPointEnabled="True" AllowDrop="True" Thumb.DragDelta="slider_DragDelta" ValueChanged="slider_ValueChanged" BorderBrush="Black" Ticks="1, 2, 3, 4, 5, 6, 7, 8, 9, 10"

    Value="1" Delay="100" Interval="5" TickPlacement="BottomRight" AutoToolTipPlacement="BottomRight" Thumb.DragStarted="slider_DragStarted" Thumb.DragCompleted="slider_DragCompleted" Maximum="50" />

    <Label Content="Label" Height="21" Margin="41,12,280,0" Name="label1" VerticalAlignment="Top" /> 

    </Grid>

    </UserControl>

    On main window timer elapsed event i am updating the slider value as below.

    void

     

     

    timer_Elapsed(object sender, ElapsedEventArgs e)

    {

     

    sgeSlidebar.slider.Dispatcher.Invoke(System.Windows.Threading.

     

    DispatcherPriority.Send,

     

     

    new Action(

     

     

    delegate()

    {

    sgeSlidebar.slider.Value += 10;

    }));

    }

    Thursday, March 17, 2011 9:28 AM
  • Hi Ravi,

    I have created a usercontrol by copy and pasting your code also created dummy event handlers in the code behind.

    I placed the this user control on a window. In the constructor, I have triggered a Timer event by using DispatchTimer.

    in the timer event, I have used the same code which you have given.

    While running the sample, timer event trigger every 5 seconds, so i am able to see that slider is moving in the UI (Slider value is increasing).

    Please let me know whether my setup is correct.

     


    Please remember to click “Mark as Answer” on the post that helps you, and to click “Unmark as Answer” if a marked post does not actually answer your question. This will help other members to find the solution easily.
    Thursday, March 17, 2011 10:43 AM
  • Hi Vimal,

    I think your set up is correct.Timer you are using is different from the one i use.

    Can you share the code sample, you wrote.

    Thursday, March 17, 2011 12:00 PM
  • Hi Ravi,

    In the constructor of Window i have written the following code. Remaining codes are same as yours. I could not copy and paste my code, so I have written the code manually. so please correct if any spelling mistake.


    public Window6

    {
     InitializeComponent();
     DispatcherTimer _timer = new DispatcherTimer();
     _timer.Interval = new TimeSpan(0,0,0,5);
     _timer.Tick += new EventHandler(timer_Elapsed);
     _timer.Start();

    }

    void timer_Elapsed(object sender, EventArgs e)
    {
    sgeSlidebar.slider.Dispatcher.Invoke(System.Windows.Threading.DispatcherPriority.Send, new Action( delegate()

    {

    sgeSlidebar.slider.Value += 10;

    }));


    }

    One more info: as you increasing the slider value by 10. keep the Ticks value also 10+.

    <Slider Height="26" HorizontalAlignment="Left" Margin="20,39,0,0" Name="slider" VerticalAlignment="Top" Width="346" 

    IsMoveToPointEnabled="True" AllowDrop="True" Thumb.DragDelta="slider_DragDelta" ValueChanged="slider_ValueChanged" BorderBrush="Black" Ticks="10, 20, 30, 40, 50, 60, 70, 80, 90, 100"

    Value="1" Delay="100" Interval="5" TickPlacement="BottomRight" AutoToolTipPlacement="BottomRight" Thumb.DragStarted="slider_DragStarted" Thumb.DragCompleted="slider_DragCompleted" Maximum="50" />

     

     


    Please remember to click “Mark as Answer” on the post that helps you, and to click “Unmark as Answer” if a marked post does not actually answer your question. This will help other members to find the solution easily.
    Thursday, March 17, 2011 12:15 PM
  • I couldnot see slider thumb moving in UI,wheras the value of slider is increasing.
    Friday, March 18, 2011 3:43 AM
  • Hi Ravi,

    I can see slider moving in the UI. I don't why you are not able to see.

    Is it possible for you to upload a simple sample reproducing your problem?


    Please remember to click “Mark as Answer” on the post that helps you, and to click “Unmark as Answer” if a marked post does not actually answer your question. This will help other members to find the solution easily.
    Friday, March 18, 2011 4:20 AM
  • Hi RAVI KUMAR G,

    Thanks ksvimal for the valuable help!

    I think this demo should work. Have you checked with the UserControl name and the slider inside?

    I compose the code up and you could find it here

     http://cid-e52a44742984b88f.office.live.com/self.aspx/.Documents/Slider%20demo.zip

    Let me know if you still have any further concern.

    Best regards


    Yves Zhang [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Wednesday, March 23, 2011 5:07 AM