do u have sample of overview plus details?

5 posts, 0 answers
  1. mike chang
    mike chang avatar
    4 posts
    Member since:
    Jan 2010

    Posted 05 Oct 2010 Link to this post

    i am working on styling radlider like http://demo.componentone.com/Silverlight/ControlExplorer/#Chart/Overview%20Plus%20Detail did,
    can u show me how to do with telerik,
    thank you
  2. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 07 Oct 2010 Link to this post

    Hello mike chang,

    I am afraid I don't see a Slider in the link you sent. Can you please send us a snapshot of the slider style you need to create? Thank you in advance.

    Regards,
    Tina Stancheva
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. DevCraft banner
  4. mike chang
    mike chang avatar
    4 posts
    Member since:
    Jan 2010

    Posted 07 Oct 2010 Link to this post

    thanks
  5. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 13 Oct 2010 Link to this post

    Hi mike chang,

    In order to modify the default style of the RadSlider you have to edit its ControlTemplate - read more.
    I prepared a sample project containing a custom RadSlider style that looks like the snapshot you sent. Take a look at it and let us know if we can further assist you.

    Also, bellow is the list of changes that I implemented in the default ControlTemplate of the RadSlider. I hope this information will help you. 
    1. Modify the "HorizontalRangeSelectionThumb" Template:
    • Modify "border" Border element by:
            -change BorderBrush to Black
            -remove Height property
            -set Margin to 3
    2. Modify the RadSlider ControlTemplate:
    • Modify "HorizontalRangeTemplate" Grid element:
            -Set the Height property accordingly to your needs ( I set it to 100)
    • Modify the "HorizontalRangeMiddleThumb" thumb element
            -Set VerticalAlignment  to Stretch
            -Set HorizontalAlignment to Stretch
    • Rearrange the Thumbs elements so that the "HorizontalRangeMiddleThumb" element spans through the whole range. In order to do so:
            -Set the "HorizontalRangeMiddleThumb" thumb element in Grid.Column=1 and Grid.ColumnSpan=3
            -Set the "HorizontalRangeStartThumb" thumb element HorizontalAlignment = Left
            -Set the "HorizontalRangeEndThumb" thumb element HorizontalAlignment = Right
    3. Also, change the following resources accordingly:
    • "SliderRangeMiddleThumb_Margin" Thickness controls the "HorizontalRangeMiddleThumb" element BorderTickness - set it to 1
    • "SliderRangeMiddleThumb_Background" LinearGradientBrush controls the "HorizontalRangeMiddleThumb" element Normal state background - replace it with a SolidColorBrush with Color="Transparent"
    •  "SliderRangeMiddleThumb_Background_State" LinearGradientBrush controls the "HorizontalRangeMiddleThumb" element MouseOver state background - replace it with a SolidColorBrush with Color="Transparent"

    Kind regards,
    Tina Stancheva
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  6. mike chang
    mike chang avatar
    4 posts
    Member since:
    Jan 2010

    Posted 13 Oct 2010 Link to this post

    that is what i want!, thank you!
Back to Top
DevCraft banner