Change just the thumbs in the DualSlider, not the ticks

In WPFElements 6, is there an easy way to change just the thumbs of the DualSlider, without changing the tickmarks? I saw the CustomDualSliderStyle example, but that's a whole lot of code. All I want to do is make the thumbs smaller (shorter and thinner), is there a quick way to do this?

Thanks!

Hello Leah

That sample is quite out of date. Place the following code in a resource dictionary that the page/window containing the dual slider will use:

  <ControlTemplate x:Key="HorizontalDualSliderTemplate" TargetType="{x:Type ms:DualSlider}">
    <StackPanel>
      <ItemsControl Name="PART_TopLeftLabelHost" Style="{StaticResource GridItemsControlStyle}" Margin="8,0,8,0"
                Visibility="{TemplateBinding ShowTopLeftLabels, Converter={StaticResource bvc}}" />
      <ItemsControl ItemsSource="{TemplateBinding TickPositions}" Visibility="{TemplateBinding ShowTopLeftTickMarks, Converter={StaticResource bvc}}"
                Style="{StaticResource GridItemsControlStyle}" Margin="8,0,8,0" ItemTemplate="{StaticResource HorizontalTickTemplate}" />
      <Grid>
        <Border Height="4" Background="{StaticResource SliderTrackBackground}"
            BorderThickness="1" BorderBrush="{StaticResource HorizontalSliderTrackBorder}" CornerRadius="2" Margin="8,0,8,0" />
        <RepeatButton Name="PART_LargeDecreaseButton" HorizontalAlignment="Left" Height="9" Template="{StaticResource InvisibleRepeatButton}" />
        <RepeatButton Name="PART_LargeIncreaseButton" HorizontalAlignment="Left" Height="9" Template="{StaticResource InvisibleRepeatButton}" />
        <Thumb Name="PART_RangeThumb" Style="{StaticResource SliderThumbStyle}" Height="6" HorizontalAlignment="Left" BorderThickness="0,1,0,1" />
        <Thumb Name="PART_StartThumb" Style="{StaticResource SliderThumbStyle}" HorizontalAlignment="Left" Width="3" Height="18" Margin="-3,0,3,0" />
        <Thumb Name="PART_EndThumb" Style="{StaticResource SliderThumbStyle}" HorizontalAlignment="Left" Width="3" Height="18" />
      </Grid>
      <ItemsControl ItemsSource="{TemplateBinding TickPositions}" Visibility="{TemplateBinding ShowBottomRightTickMarks, Converter={StaticResource bvc}}"
                Style="{StaticResource GridItemsControlStyle}" Margin="8,0,8,0" ItemTemplate="{StaticResource HorizontalTickTemplate}" />
      <ItemsControl Name="PART_BottomRightLabelHost" Style="{StaticResource GridItemsControlStyle}" Margin="8,0,8,0"
                Visibility="{TemplateBinding ShowBottomRightLabels, Converter={StaticResource bvc}}" />
    </StackPanel>
  </ControlTemplate>

  <ControlTemplate x:Key="VerticalDualSliderTemplate" TargetType="{x:Type ms:DualSlider}">
    <StackPanel Orientation="Horizontal">
      <ItemsControl Name="PART_TopLeftLabelHost" Style="{StaticResource GridItemsControlStyle}" Margin="0,8,0,8"
                Visibility="{TemplateBinding ShowTopLeftLabels, Converter={StaticResource bvc}}" />
      <ItemsControl ItemsSource="{TemplateBinding TickPositions}" Visibility="{TemplateBinding ShowTopLeftTickMarks, Converter={StaticResource bvc}}"
                Style="{StaticResource GridItemsControlStyle}" Margin="0,8,0,8" ItemTemplate="{StaticResource VerticalTickTemplate}" />
      <Grid>
        <Border Width="4" Background="{StaticResource SliderTrackBackground}"
            BorderThickness="1" BorderBrush="{StaticResource VerticalSliderTrackBorder}" CornerRadius="2" Margin="0,7,0,7" />
        <RepeatButton Name="PART_LargeDecreaseButton" VerticalAlignment="Bottom" Width="9" Template="{StaticResource InvisibleRepeatButton}" />
        <RepeatButton Name="PART_LargeIncreaseButton" VerticalAlignment="Bottom" Width="9" Template="{StaticResource InvisibleRepeatButton}" />
        <Thumb Name="PART_RangeThumb" Style="{StaticResource SliderThumbStyle}" Width="6" VerticalAlignment="Bottom" BorderThickness="1,0,1,0" />
        <Thumb Name="PART_StartThumb" Style="{StaticResource SliderThumbStyle}" VerticalAlignment="Bottom" Width="18" Height="3" Margin="0,3,0,-3" />
        <Thumb Name="PART_EndThumb" Style="{StaticResource SliderThumbStyle}" VerticalAlignment="Bottom" Width="18" Height="3" />
      </Grid>
      <ItemsControl ItemsSource="{TemplateBinding TickPositions}" Visibility="{TemplateBinding ShowBottomRightTickMarks, Converter={StaticResource bvc}}"
                Style="{StaticResource GridItemsControlStyle}" Margin="0,8,0,8" ItemTemplate="{StaticResource VerticalTickTemplate}" />
      <ItemsControl Name="PART_BottomRightLabelHost" Style="{StaticResource GridItemsControlStyle}" Margin="0,8,0,8"
                Visibility="{TemplateBinding ShowBottomRightLabels, Converter={StaticResource bvc}}" />
    </StackPanel>
  </ControlTemplate>

  <Style TargetType="{x:Type ms:DualSlider}">
    <Setter Property="SnapsToDevicePixels" Value="True" />
    <Setter Property="FocusVisualStyle" Value="{x:Null}" />
    <Setter Property="Template" Value="{StaticResource HorizontalDualSliderTemplate}" />
    <Style.Triggers>
      <Trigger Property="Orientation" Value="Vertical">
        <Setter Property="Template" Value="{StaticResource VerticalDualSliderTemplate}" />
      </Trigger>
    </Style.Triggers>
  </Style>

This code uses some resources from our office themes, so to get this code to work, set the merged dictionaries of the resource dictionary to include one of our office themes. Or copy the required resource from OfficeBlue.BuiltIn.xaml, and OfficeBlue.xaml (found in the Themes folder of the WPF Elements install directory).

This code already shrinks the size of the thumbs, but probably too much. Find all the occurrences of the number 3 (set in width, height and margin properties) and change this to what you want. If you only care about one of these orientations, you could even delete the ControlTemplate for the orientation that you don't need.

Let me know if you have any questions.

-Jason Fauchelle