Click here to Skip to main content
Click here to Skip to main content
Search within:



 
Comments & Discussions (39)

Owner-drawn trackbar(slider)

By , 30 Jan 2007
 

Sample Image - ColorSlider.gif

Introduction

This article presents owner-drawn trackbar control. Component is written entirely from scratch. All painting events are done by code. It’s got cool, modern look. The best thing is, however, the capability of changing slider’s thumb shape. It is done simply by providing appropriate graphics path.

Background (optional)

I always wanted to have cool slider for my audio player application. The best I could find here was Guinness4Strength's article. Unfortunately, I didn’t find it pretty enough, so I decided to write my own trackbar. Hopefully you like it.

Properties

Appearance:

  • ThumbSize - Gets or sets the size of the thumb
  • ThumbCustomShape - Gets or sets the thumb custom shape. Use ThumbRect property to determine bounding rectangle.
  • ThumbRoundRectSize - Gets or sets the size of the thumb round rectangle edges.
  • BorderRoundRectSize - Gets or sets the size of the border round rect.

Values:

  • Orientation - Gets or sets the orientation of Slider.
  • Value - Gets or sets the value of Slider.
  • Minimum - Gets or sets the minimum value.
  • Maximum - Gets or sets the maximum value.
  • SmallChange - Gets or sets trackbar's small change. It affects how to behave when directional keys are pressed
  • LargeChange - Gets or sets trackbar's large change. It affects how to behave when PageUp/PageDown keys are pressed

Behavior:

  • DrawFocusRectangle - Gets or sets a value indicating whether to draw focus rectangle.
  • DrawSemitransparentThumb - Gets or sets a value indicating whether to draw semitransparent thumb.
  • MouseEffects - Gets or sets whether mouse entry and exit actions have impact on how control look.
  • MouseWheelBarPartitions - Gets or sets the mouse wheel bar partitions.

Colors:

  • ThumbOuterColor - Gets or sets the thumb outer color.
  • ThumbInnerColor - Gets or sets the inner color of the thumb.
  • ThumbPenColor - Gets or sets the color of the thumb pen.
  • BarOuterColor - Gets or sets the outer color of the bar.
  • BarInnerColor - Gets or sets the inner color of the bar.
  • BarPenColor - Gets or sets the color of the bar pen.
  • ElapsedOuterColor - Gets or sets the outer color of the elapsed.
  • ElapsedInnerColor - Gets or sets the inner color of the elapsed.

Points of Interest

This control will provide design-time support. Next version should contain custom properties editors.

History

  • 30.01.2007 - first version.

    • License

    This article, along with any associated source code and files, is licensed under The GNU Lesser General Public License (LGPLv3)

    About the Author

    		 Michal Brylka
    Architect Nokia Siemens Networks
    Poland Poland
    Member
    Michał is C# and whole .NET enthusiast. He graduated from computer science MSc studies at Wroclaw University of Technology, Poland.
     
    He is interested in photography and diving. He is member of PADI, currently with divemaster certificate.

    His favorite movies are Matrix, Amélie(Le Fabuleux Destin d'Amélie Poulain), Stargate SG-1 TV Serie and comedies of Mel Brooks.
     
    Michał lives in Wroclaw, Poland. To contact Michał, email him at michal.brylka[mail-'"at'"-sign]op.pl.

    Article Top
     
    Sign Up to vote   Poor Excellent
    Add a reason or comment to your vote: x
    Votes of 3 or less require a comment

    Comments and Discussions

     
    You must Sign In to use this message board.
    Search this forum  
        Spacing  Noise  Layout  Per page   
    FirstPrevNext
    GeneralMy vote of 5memberXmen W.K.16 Jul '10 - 15:48 
    Very nice, still some morons voted it 2 or 3.
     
    5 from me. Thanks for share.
    Sign In·View Thread·Permalink
    Generalgood controlmembersecurigy19 Jun '10 - 0:29 
    great performace. seems like what I needed, except I have no idea how to change the trackbar thumb to the image that I have stored in the .png file/project resources... for me it is a must, since it should indicate volume...any ideas? the code in the example seem drawing it by itself based on some math functions...
    Sign In·View Thread·Permalink
    GeneralVery cool, small addition I did for myselfmemberIssaharNoam22 Mar '09 - 0:38 
    Thanks for this good implementation.
    I did small change in order to allow fully hide the border. In following case in mouse over event, I found that transparent border appeared because was lightened.
     
    Here is my fix for myself
    public static Color[] LightenColors(params Color[] colorsToLighten)
        {
            Color[] colorsToReturn = new Color[colorsToLighten.Length];
            for (int i = 0; i < colorsToLighten.Length; i++)
            {
                if(colorsToLighten[i]==Color.FromKnownColor(KnownColor.Transparent))
                    colorsToReturn[i] = colorsToLighten[i];
                else
                    colorsToReturn[i] = ControlPaint.Light(colorsToLighten[i]);
            }
            return colorsToReturn;
        }
    Sign In·View Thread·Permalink
    GeneralRe: Very cool, small addition I did for myselfmemberXmen W.K.16 Jul '10 - 15:50  
     if(colorsToLighten[i] == Colors.Transparent))
     
    or
     
     if(colorsToLighten[i].A == 0))
     
    you don't need to make it complicated


    TVMU^P[[IGIOQHG^JSH`A#@`RFJ\c^JPL>;"[,*/|+&WLEZGc`AFXc!L
    %^]*IRXD#@GKCQ`R\^SF_WcHbORY87֦ʻ6ϣN8ȤBcRAV\Z^&SU~%CSWQ@#2
    W_AD`EPABIKRDFVS)EVLQK)JKQUFK[M`UKs*$GwU#QDXBER@CBN%
    R0~53%eYrd8mt^7Z6]iTF+(EWfJ9zaK-i’TV.C\y<pŠjxsg-b$f4ia>
    -----------------------------------------------
    128 bit encrypted signature, crack if you can
    Sign In·View Thread·Permalink
    Questionorientation slider value reversedmemberTVW036 Mar '09 - 12:11 
    when setting the orientation of the control to vertical, the max value is at the bottom instead of at the top. it's just 180() to what you would expect a normal slider control to be set to in a vertical environment. I am not a great C# coder so can you point me in the right direction to where i can fix this?
    thanks! and Awesome control by the way.
    Sign In·View Thread·Permalink
    AnswerRe: orientation slider value reversed [modified]membertgpfarm11027 Mar '09 - 14:30 
    yeah I need this also.
    Though a hack you can do is (100 - colorSlider.Value)
     
    modified on Saturday, March 7, 2009 9:09 PM
    Sign In·View Thread·Permalink
    AnswerRe: orientation slider value reversedmemberMichal Brylka8 Mar '09 - 8:57 
    At this point changing that would not be trivial. So it is best to hack it so that instead of using Value property you use (Maximum-Value)
     
    Michał Bryłka
     
    Theory is when you know something, but it doesn't work.
    Practice is when something works, but you don't know why.
    Programmers combine theory and practice: Nothing works and they don't know why.
    Sign In·View Thread·Permalink
    GeneralBrilliant implementation! Following slight change I did for myselfmemberIssaharNoam23 Feb '09 - 0:42 
    I added the HideOuterRegion property to extend the inner area for the whole control.
    In DrawColorSlider method, I check if this property is true and if yes, I don't inflate the barRect in every orientation.
     

     

    Thanks for great article!
    Issahar
    Sign In·View Thread·Permalink
    GeneralRe: Brilliant implementation! Following slight change I did for myselfmemberMichal Brylka8 Mar '09 - 8:42 
    you're welcome Smile | :)
     
    Michał Bryłka
     
    Theory is when you know something, but it doesn't work.
    Practice is when something works, but you don't know why.
    Programmers combine theory and practice: Nothing works and they don't know why.
    Sign In·View Thread·Permalink
    GeneralFantastic!member-Sean-20 Feb '09 - 11:38 
    Really great job! Love it, this is one control that really lacks in win forms!
     
    Cheers! Big Grin | :-D Thumbs Up | :thumbsup:
    Sign In·View Thread·Permalink
    Last Visit: 31 Dec '99 - 18:00     Last Update: 23 May '13 - 14:15Refresh« Prev1234 Next »

    General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

    About Article
    Implementing a Windows Forms owner-drawn trackbar (slider) control in C#.
    Type Article
    Licence LGPL3
    First Posted 29 Jan 2007
    Views 106,048
    Downloads 5,133
    Bookmarked 76 times

    , +
    Top News

    The Next Version of Android - Some of What's Coming

    Get the Insider News free each morning.
    Related Videos
    jQuery UI: Slider Widget
    Horizontal Slider
    Advanced TrackBar (Slider) Control with MAC Style (C# & VB.NET)
    Audio Mixing Console Fader/Slider Control
    Wifi scanner + custom MFC controls
    Implement a WinForms TrackBar Control in ASP.NET
    C# Video TimeLine Control for DirectShow & VLC Like Adobe AfterEffects
    MediaSlider - An Alternative to the Trackbar Control - v1.3
    gTrackBar - A Custom TrackBar UserControl (VB.NET)
    Navigation through records with a TrackBar (Slider)
    C# Wizard for Beginners
    Customizing the Appearance of CSliderCtrl Using Custom Draw
    GUI Library for Managed DirectX Applications
    Changing the Colors of a WTL Dialog (The Easy Way)
    PVS.AVPlayer
    ColorPicker - ColorPicker with a compact footprint (VB.NET)
    Usage of a TrackBar as a ToolStripMenuItem
    An animated progressbar control with many extras
    ColorBlender - Dynamic Gradient Color Blend Creation Control (VB.NET)
    Usage of a TrackBar as a ToolStripMenuItem
    Paging in Grid View using Slider Extender
    Skin based slider control Mark 2
    Permalink | Advertise | Privacy | Mobile
    Web04 | 2.6.130523.1 | Last Updated 30 Jan 2007
    Article Copyright 2007 by Michal Brylka
    Everything else Copyright © CodeProject, 1999-2013
    Terms of Use
    Layout: fixed | fluid