Customize Slider control

6 posts, 0 answers
  1. Jennifer
    Jennifer avatar
    9 posts
    Member since:
    Oct 2011

    Posted 26 Oct 2011 Link to this post

    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




     
  2. Kiril Stanoev
    Admin
    Kiril Stanoev avatar
    1512 posts

    Posted 28 Oct 2011 Link to this post

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

  3. DevCraft banner
  4. Jennifer
    Jennifer avatar
    9 posts
    Member since:
    Oct 2011

    Posted 29 Oct 2011 Link to this post

    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
  5. Jennifer
    Jennifer avatar
    9 posts
    Member since:
    Oct 2011

    Posted 30 Oct 2011 Link to this post

    .
  6. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 01 Nov 2011 Link to this post

    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.
  7. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 02 Nov 2011 Link to this post

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

Back to Top
DevCraft banner