Feed on
Posts
Comments

This is really a simple little trick that I needed for a WPF application recently.   It’s so simple that I didn’t think about posting to WpfWonderland.    I showed it so someone yesterday and they asked why I didn’t write about it.  So here it is.  If you find it useful leave me a comment  and I’ll post more tips like this one.

The problem

Occasionally you might need a slider control that returns to a starting position after the user has finished dragging the thumb.  In this example I want the thumb to be positioned in the center of the slider when starting.  I want the thumb to return to the center when the user releases the mouse.  I don’t want the slider to snap back instantly to the center however so I’ll use an animation to return it gracefully.

The UI

The slider Minimum and Maximum values are set to -80 and 80. The Value property is set to 0.  This causes the thumb to start in the center of the slider.

XAML

 

<Window x:Class="AutoCenteringSlider.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="AutoCenteringSlider" Height="400" Width="500"
    >
  <StackPanel Margin="20,20,20,20">
    <StackPanel Orientation="Horizontal">
      <Label>Change Size:</Label>
      <Slider x:Name="CenteringSlider"        Minimum="-80" Maximum="80" Value="0"        Width="300"        LostMouseCapture="CenteringSlider_LostMouseCapture"        ValueChanged="CenteringSlider_ValueChanged" />

    </StackPanel>
    <StackPanel Margin="50,50,50,50">
      <Ellipse Name="PlumEllipse" Width="100" Height="100" Fill="Plum"></Ellipse>
    </StackPanel>
  </StackPanel>
</Window>

 

The Code

The first question to ask is what event should I use for the animation?   I want the animation to start after the user releases the mouse.  Your first instinct might be to use the MouseUp or LeftMouseButtonUp events.  On the Slider you’re better off using the LostMouseCapture event instead.  When you click on a Slider it captures your mouse.  When you start to drag,  you can drag outside the boundaries of the Slider and the thumb will still move.  In the screen shot below I’m dragging and my mouse is below the slider and the thumb is still moving.  When I release the mouse (whether over the Slider, or outside it’s boundaries) the LostMouseCapture event fires.

 

 

Here is the code.

 
        void CenteringSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            // change the size of the ellipse when slider value is change
            // for this example the slider max is 80
            // and the slider min is -80

            PlumEllipse.Width = PlumEllipse.Height = (100 + e.NewValue);
        }

        void CenteringSlider_LostMouseCapture(object sender, MouseEventArgs e)
        {
            // set a 500ms duration
            Duration returnToCenterDuration = new Duration(new TimeSpan( 0,0,0,0,500));
            CenteringSlider.BeginAnimation(Slider.ValueProperty,
                new DoubleAnimation(CenteringSlider.Value, 0, returnToCenterDuration, FillBehavior.Stop));

            // set the slider value to zero
           //  otherwise the slider will return to the last postion after the animation
            CenteringSlider.Value = 0;
        }

Viewing the sample

See XBAP here.

 

-Walt Ritscher

RSS Like this article? Subscribe to the RSS feed.

 

2 Responses to “Create an Auto-Centering Slider control with WPF”

  1. [...] Ritscher I managed to get the the webserver working correctly and the XBAP is deployed for the AutoCenter slider [...]

  2. Golan says:

    Hi Walt,
    I’m trying to make a WpfRangeSlider (a Slider which has 2 thumbs).
    Could you please advise me on how you would do that?
    Thanks,
    Golan.