Compartilhar via

Why don't you Slide-r?

  • Artigo

In this post, I hope to give an introduction to the Silverlight Slider that is part of the Silverlight 2 Beta 1 SDK and share with you some interesting usage scenarios that demonstrate how to use the Slider API's and change its default look and feel.

Anatomy of the Slider

The Silverlight Slider owes most of its design to the WPF Slider and we have tried to ensure that it is a subset of the WPF Slider both in terms of the API's and behavior. It consumes/builds on top of the following classes, all of which map back to WPF.

  • RangeBase: The Silverlight RangeBase class mimics the behavior and API's of the WPF RangeBase class. Although, Silverlight does not support built-in value coercion, the RangeBase class fulfils all the WPF RangeBase coercion rules.
  • RepeatButton: The RepeatButton class as in WPF fires click events at specified intervals until the mouse is released.
  • Thumb: Thumb supports drag and drop events and enables the user to increase and decrease the value of the Slider by SmallChange.

Slider Template

Slider is made of 5 core visual elements:

  1. The RootElement which serves as a container to all the rest of the elements.
  2. The FocusVisualElement whose visibility is toggled when the Slider loses or gains focus.
  3. The LargeChangeIncreaseRepeatButtonElement which is overlaid on the Slider's root and when clicked, causes the value of the Slider to be increased by LargeChange.
  4. The LargeChangeDecreaseRepeatButtonElement which is overlaid on the Slider's root and when clicked, causes the value of the Slider to be decreased by LargeChange.
  5. The Thumb element which can be dragged around and causes the value of the Slider to be increased or decreased depending on the direction in which it is being dragged and the IsDirectionReversed property set on the Slider.

Some Template Tips:

Optional Horizontal and Vertical Template parts: The actual number default template parts of the Slider, however, exceeds 5. This is because the last three are duplicated for both Horizontal and Vertical Orientation of the Slider. If the users of your template would like to use the Orientation property, then you may want to provide both the Horizontal and Vertical parts If you do not specify the vertical template, create a Slider that consumes that template and set the Orientation to be Vertical then the Slider will not show up. The Horizontal usage will continue to work as expected.

Grid layout requirement: We require that the Slider's Vertical and Horizontal template elements be grids with three rows or three columns respectively containing the arrangement RepeatButton - Thumb - RepeatButton. Here is the XAML from the template that defines the Horizontal Template layout. The default template also demonstrates which one should have star-sizing and which ones should be Auto. This restriction has been put into place to respect the IsDirectionReversed property.

<!-- Horizontal Template -->
<Grid x:Name="HorizontalTemplateElement">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

<!-- rest of the template -->

</Grid>

Slider examples

I have put together some examples that demonstrate simple customization of the Slider. You can download the zip to get the source code. I have used the bare minimum parts required to achieve my scenario, so you will see that I do not specify the Vertical template or the FocusVisualElement. Both the examples below do not use the Thumb. That was not a deliberate attempt to undermine the importance of the Thumb. I should have more Thumb examples coming up.

Slider to modify the Opacity of an Element

This Slider changes the opacity of an Image but shows no Thumb. To achieve that, I have changed the Width of the Thumb in the Template to be 0 to meet the layout requirement I mention above.

<Thumb Width="0" x:Name="HorizontalThumbElement" Grid.Column="1"></Thumb>

image

Slider behaving like a Progress Bar

This is a read-only Slider whose value is changed in response to a timer tick. The read-only feature comes from setting the IsEnabled property on the Slider to be false. That disallows any user input. The Slider value is still changeable programmatically. I have also updated the default disabled state of the Slider to not change the Opacity and hence it still looks like an active Slider. If you click on it or attempt to change its values using the arrow keys it does not respond.

<Slider x:Name="ProgressBar"
IsEnabled="False"
Margin="10, 10, 10, 10"
Minimum="0" Maximum="100"
Style='{StaticResource ProgressBarSliderStyle}'>
</Slider>

image

I hope to post more control customization examples in the near future. Please try it out the Silverlight controls and let us know what you like and don't like. What controls you really want to see coming from Microsoft?

We are listening!

SliderNoThumbSamples.zip

Comments

  • Anonymous
    March 07, 2008
    In this post, I hope to give an introduction to the Silverlight Slider that is part of the Silverlight

  • Anonymous
    March 30, 2008
    "What controls you really want to see coming from Microsoft?" More AJAX Control Toolkit controls.

  • Anonymous
    April 06, 2008
    Hello, It looks great but I tried the ProgressBarSlider into my application and it doesn't work... i get a gray bar like you (http://blogs.msdn.com/blogfiles/kirti/WindowsLiveWriter/WhydontyouSlider_11431/image_8.png) but there are no green event when the value is set to 50% of the max... Here is a sample of code <Slider Style='{StaticResource ProgressBarSliderStyle}' Name="Progression" Maximum="100" Minimum="0" Value="50" Margin="2,3,140,3"/> Did I miss something ?

  • Anonymous
    April 06, 2008
    Hi AB - we have some users who would like to contribute new controls to the Toolkit. We have Daniel Crenna who is actively working on a MultiHandleSlider: http://www.codeplex.com/DimebrainExtenders to be incorporated into the Toolkit. There are others who are still working on setting up the CodePlex project so that we can evaluate their projects. Hi Djo - I just tried what you suggested and it worked fine for me. I just changed the margins and the value in the attached project and it showed me the gray bar and the green value. Is there something I am missing? Could you please clarify "green event"?

  • Anonymous
    April 06, 2008
    Hi, Thanks for reply ! In fact I can't open the solution given in the attached projects so I open the file "Page.xaml". In the Grid.Resources I just copy the slider style and paste it into my project (In the Application.Resources). I tried it as I say and the value seems to be not binded into the slider, the slider does not react... I tried again with other margin values but there is the same reaction... Thanks for the time you'll take to answer. Djo

  • Anonymous
    April 07, 2008
    You should be able to open all projects in the solution if you have the tools installed. Do you have all the Silverlight tools from here: http://www.microsoft.com/downloads/details.aspx?FamilyId=E0BAE58E-9C0B-4090-A1DB-F134D9F095FD&displaylang=en?

  • Anonymous
    April 07, 2008
    I don't want to use it in the Silverlight context, I'd like to use it in a WPF application, is it possible?

  • Anonymous
    April 08, 2008
    The comment has been removed

  • Anonymous
    April 08, 2008
    There is a standart Slider in the WPF framework and it works pretty good, I found a style for it and it doesn't looks like yours, all parts are styled separately. I can send the code if you want.

  • Anonymous
    May 27, 2008
    In my previous blog post I talked about how easily you could achieve a spinning/rotator functionality