Home / Community & Support / Developer Productivity Tools Forums / Silverlight > Slider > Customize Slider control

• Jennifer

  Posted on Oct 26, 2011 (permalink)

  Hi,
  I want to customize the slider control to achieve the following
  
   1.   need to increase the width of tracker
   2.   custom triangle shapes for the handler
  
  am using the following versions
   1.TeleriK       :2010.3.1314.1040
   2.silver light  : 4
   
  I have tried   like
              <Setter Property="IncreaseHandleStyle" Value="{StaticResource IncreaseHandleStyle}" />
              <Setter Property="DecreaseHandleStyle" Value="{StaticResource DecreaseHandleStyle}" />
  
  as mentioned in this link "http://demos.telerik.com/silverlight/#Slider/ColorPicker".But it didn't work for me.
  
  I am looking for an immediate reply.Please help me to solve this
  
  Thanks
  Jennifer
  
  
  
  
   
  

  Attached files

  • Sample.jpg

  Reply

• Kiril Stanoev Kiril Stanoev

  Posted on Oct 28, 2011 (permalink)

  Hello Jennifer,

   Please take a look at the attached project and let me know if it helps. It demonstrates the usage of IncreaseHandleStyle, DecreaseHandleStyle and TrackStyle.

  Best wishes,
  Kiril Stanoev
  the Telerik team

  Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  Attached files

  • ID-477113.zip

  Reply

• Jennifer

  Posted on Oct 29, 2011 (permalink)

  Hi Kiril,
  
  Thanks for the reply. Please let me know how to change the track color.
  
  Here is the screenshot:
  
  PS: Only consider the img (slidernew)
  
  Thanks

  Attached files

  • slider.png
  • slider.png
  • slider.png
  • slidernew.png

  Reply

• Jennifer

  Posted on Oct 30, 2011 (permalink)

  .

  Reply

• Princy MVP

  Posted on Nov 1, 2011 (permalink)

  Hello Jennifer,
  
  Try the following style to achieve your scenario.
  XAML:
  

  <UserControl.Resources>

          <Style x:Key="SelectionMiddleThumbStyle1" TargetType="Thumb">

              <Setter Property="Template">

                  <Setter.Value>

                      <ControlTemplate TargetType="Thumb">

                          <Grid/>

                      </ControlTemplate>

                  </Setter.Value>

              </Setter>

          </Style>

  . . . . . . .

   

  <telerik:RadSlider  SelectionMiddleThumbStyle="{StaticResource SelectionMiddleThumbStyle1}"  >        

  </telerik:RadSlider>

  
  Thanks,
  Princy.

  Reply

• Petar Mladenov Petar Mladenov

  Posted on Nov 2, 2011 (permalink)

  Hi Princy and Jenny,

   Yes, you can use this Style like so:

      <Style x:Key="SelectionMiddleThumbStyle1" TargetType="Thumb">

          <Setter Property="Template">

              <Setter.Value>

                  <ControlTemplate TargetType="Thumb">

                      <Grid Height="25" Background="Black" />

                  </ControlTemplate>

              </Setter.Value>

          </Setter>

      </Style>

  </UserControl.Resources>

  <Grid x:Name="LayoutRoot">

      <telerik:RadSlider VerticalAlignment="Center"

                         DecreaseHandleStyle="{StaticResource RepeatButtonStyle2}"

                         HandlesVisibility="Visible"

                         IncreaseHandleStyle="{StaticResource RepeatButtonStyle1}"

                         IsSelectionRangeEnabled="True"

                         SelectionMiddleThumbStyle="{StaticResource SelectionMiddleThumbStyle1}"

                         TrackStyle="{StaticResource ContentControlStyle1}" />

  in the project from Kiril and you will achieve the result in the attached picture. Please let us know if this is what you need. Kind regards,
  Petar Mladenov
  the Telerik team

  Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  Attached files

  • BlackMiddleRangeSlider.png

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / Silverlight > Slider > Customize Slider control