As you may already know, we are working hard to improve the RadSlider in a broad way. We've fixed a lot of issues, but also added a lot of new cool features. Now it's so easy to customize and bind (in MVVM-ish way), that I've created this Windows 7 "Mixer" like example in less than an hour. I didn't change the Slider's ControlTemplate and don't have a single line of code behind.
(Please note that the new slider will be available with the beta of Q2.2011).
Download and play with the new bits.
Just play with the Sliders - note that the most left one is the Master that can "control in a way" the others.Silverlight controls are all about styling. They MUST be easy to style and easy to customize. That's why we've changed the old slider's style with new one, that is much easier to customize (due to the less code used). But also we've added a bunch of new Style type properties that will allow you to customize it without the need of changing the ControlTemplate.
MVVM is other Most important thing when we're talking about Silverlight. Each and every property must be "bindable". Here is how I've bound the Slider to the ViewModel properties.
I have one Master slider on the left and ItemsControl populated with Sliders on the right. They both are bound to ViewModel properties.
<
telerik:GroupBox
Header
=
"Devices"
Style
=
"{StaticResource BorderStyle}"
>
<
ContentControl
ContentTemplate
=
"{StaticResource SliderTemplate}"
Content
=
"{Binding MasterSlider}"
/>
</
telerik:GroupBox
>
<
telerik:GroupBox
Header
=
"Applications"
Style
=
"{StaticResource BorderStyle}"
Grid.Column
=
"1"
>
<
ItemsControl
ItemsSource
=
"{Binding Sliders}"
ItemTemplate
=
"{StaticResource SliderTemplate}"
>
<
ItemsControl.ItemsPanel
>
<
ItemsPanelTemplate
>
<
StackPanel
Orientation
=
"Horizontal"
/>
</
ItemsPanelTemplate
>
</
ItemsControl.ItemsPanel
>
</
ItemsControl
>
</
telerik:GroupBox
>
Placing the visuals.
<
Style
TargetType
=
"telerik:RadSlider"
x:Key
=
"sliderStyle"
>
<
Setter
Property
=
"HorizontalAlignment"
Value
=
"Center"
/>
<
Setter
Property
=
"VerticalAlignment"
Value
=
"Bottom"
/>
<
Setter
Property
=
"TickFrequency"
Value
=
"50"
/>
<
Setter
Property
=
"Minimum"
Value
=
"0"
/>
<
Setter
Property
=
"Maximum"
Value
=
"100"
/>
<
Setter
Property
=
"EnableSideTicks"
Value
=
"True"
/>
<
Setter
Property
=
"TickPlacement"
Value
=
"BottomRight"
/>
<
Setter
Property
=
"Orientation"
Value
=
"Vertical"
/>
<
Setter
Property
=
"TickBarStyle"
Value
=
"{StaticResource TickBarStyle}"
/>
<
Setter
Property
=
"TrackStyle"
Value
=
"{StaticResource TrackStyle}"
/>
<
Setter
Property
=
"ThumbStyle"
Value
=
"{StaticResource ThumbStyle}"
/>
<
Setter
Property
=
"TickTemplate"
>
<
Setter.Value
>
<
DataTemplate
>
<
Rectangle
Width
=
"1"
Height
=
"20"
Fill
=
"Gray"
/>
</
DataTemplate
>
</
Setter.Value
>
</
Setter
>
</
Style
>
Styling the Slider...
<
DataTemplate
x:Key
=
"SliderTemplate"
>
<
Border
Margin
=
"10 0"
Padding
=
"20 0"
>
<
Grid
>
<
Grid.RowDefinitions
>
<
RowDefinition
Height
=
"Auto"
/>
<
RowDefinition
Height
=
"*"
/>
</
Grid.RowDefinitions
>
<
TextBlock
Text
=
"{Binding Title}"
Margin
=
"0 10"
/>
<
telerik:RadSlider
Grid.Row
=
"1"
Style
=
"{StaticResource sliderStyle}"
Value
=
"{Binding Value, Mode=TwoWay}"
/>
</
Grid
>
</
Border
>
</
DataTemplate
>
And the slider template...
void
slider_ValueChanged(
object
sender, ValueChangedEventArgs e)
{
this
.minorChanging =
true
;
this
.masterSlider.Value = Math.Max(
this
.masterSlider.Value, ((SliderViewModel)sender).Value);
this
.minorChanging =
false
;
}
void
masterSlider_ValueChanged(
object
sender, ValueChangedEventArgs e)
{
var delta = e.New - e.Old;
this
.masterSlider.Value = e.New;
if
(!minorChanging)
{
foreach
(var slider
in
sliders)
{
slider.Value += delta;
}
}
}
Please let me know what do you think about the new version of the RadSlider. Also note that this is preview version and may have some issues in it.
Miro Miroslavov is XAML enthusiast. You can follow him on Twitter at @mmiroslavov.