Telerik blogs

Volume Mixer with the new shiny RadSlider for Silverlight and WPF

by Miroslav Miroslavov
Last Updated: May 27, 2021 Published: April 15, 2011 3 min read Desktop, WPF 0 Comments

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.

Get Microsoft Silverlight

Just play with the Sliders - note that the most left one is the Master that can "control in a way" the others.

Styling

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.

  • ThumbStyle - this will allow you to change the look of the little Thumb that you drag.
  • TrackStyle - this will allow you to change the thick line behind the Thumb.
  • TickBarStyle - the Style used for the bar standing behind the ticks.
  • HandleStyle - you may change the look of the Repeat Buttons at the both ends of the Slider (in case you use them).
  • TickTemplate - of course you can change the ticks template.
  • And much more

MVVM

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.

The View

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...

The ViewModel

In this nice demo I'm using two ViewModels that are doing the actual calculations and control the Sliders. The first one is only representing a single Slider with it's Value and Title property. The second ViewModel is doing the actual calculations, when a Value of some slider has changed.
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;
        }
    }
}

Share your feedback

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. 

Download and play with the new bits.

MVVM, Styling
About the Author

Miroslav Miroslavov

is XAML enthusiast. You can follow him on Twitter at @mmiroslavov.

 

Comments

Comments are disabled in preview mode.