Results 1 to 22 of 22

Thread: [RESOLVED] Custom Scroll Bar using Pictures

  1. #1

    Thread Starter
    Junior Member
    Join Date
    Jul 2016
    Posts
    28

    Resolved [RESOLVED] Custom Scroll Bar using Pictures

    I am trying to make a custom scroll bar similar to vb scroll bar but by using pictures (mouse events: click, move, up, down, leave) only and not by drawing, so that I can make changes to the scroll bar easily.

  2. #2
    Sinecure devotee
    Join Date
    Aug 2013
    Location
    Southern Tier NY
    Posts
    6,582

    Re: Custom Scroll Bar using Pictures

    Using the pictures how?

    Having one picture as the background of the scrollbar?
    Having another picture as the thumb of the scrollbar?
    Having a picture for the up arrow, and another for the down arrow?
    Reacting to the mouse events in each of those four pictures and doing the scrollbar action for each?

    Leave event is the only challenging one, I think, since VB6 itself doesn't have a Leave event for any of its controls.

    Since you don't want to do any drawing (and I view displaying a picture using bitblt or PaintPicture as drawing), then I would think you mean (assuming the questions above are all answered "yes"), that you would want a number of controls that hold the pictures that are composited together to act as a scrollbar.
    Last edited by passel; Dec 21st, 2016 at 08:16 AM.

  3. #3
    Hyperactive Member
    Join Date
    Oct 2016
    Posts
    369

    Re: Custom Scroll Bar using Pictures

    Why don't you just use pictureboxes for your scrollbar.

    Code:
      +-- PictureBox1
      |   +-- PictureBox2
      |   |            +-- PictureBox3          +-- PictureBox4
      |   |            |                        |
    +---+---+---------------------------------+---+
    | / |   |                                 | \ |
    | \ |   |                                 | / |
    +---+---+---------------------------------+---+
    Of course you would have to write your own scrollbar event code
    Last edited by I Love VB6; Dec 21st, 2016 at 03:39 PM.

  4. #4

    Thread Starter
    Junior Member
    Join Date
    Jul 2016
    Posts
    28

    Question Re: Custom Scroll Bar using Pictures

    I have started to make a custom scrollbar using pictures. There are many issues, please suggest and help!

    Main Issues:
    1) Dragging the slider.
    2) The Arrow/Slider image remains in hovered state after the mouse leaves.

    CustomScrollbar.zip

  5. #5
    Frenzied Member
    Join Date
    Apr 2012
    Posts
    1,253

    Re: Custom Scroll Bar using Pictures

    Funnily enough I wrote a custom scrollbar last weekend. But all my drawing is done with Cairo, via Olaf's RichClient5 dll. You can use it as is, if you don't mind having that dependency. If not, you could probably get a lot of ideas from the code.

    Let me know, and I'l post it to the CodeBank for you...
    If you don't know where you're going, any road will take you there...

    My VB6 love-children: Vee-Hive and Vee-Launcher

  6. #6
    The Idiot
    Join Date
    Dec 2014
    Posts
    2,721

    Re: Custom Scroll Bar using Pictures

    you need more calculations.
    the first time you "click" above the slider, you need to memorize the x-y position.
    when mousemove and button is down, you then move the slider together with the mouse x-y (adjusting with the memorized x-y position to place the slider in the right position)
    and when mouseup, you release it.

  7. #7

    Thread Starter
    Junior Member
    Join Date
    Jul 2016
    Posts
    28

    Re: Custom Scroll Bar using Pictures

    I would like to take a look at your code. Thanks!

  8. #8

    Thread Starter
    Junior Member
    Join Date
    Jul 2016
    Posts
    28

    Exclamation Re: Custom Scroll Bar using Pictures

    Hi baka,
    Thanks for your suggestions. I have tried to make some modifications to the code but still the slider is not moving properly, can you suggest any code modification. I have added the GetCursorPos API and used the Y co-ordinate to move the slider. I have also attached the modified code.

    CustomScrollbar (2).zip

  9. #9
    Frenzied Member
    Join Date
    Apr 2012
    Posts
    1,253

    Re: Custom Scroll Bar using Pictures

    If you don't know where you're going, any road will take you there...

    My VB6 love-children: Vee-Hive and Vee-Launcher

  10. #10

    Thread Starter
    Junior Member
    Join Date
    Jul 2016
    Posts
    28

    Re: Custom Scroll Bar using Pictures

    How can I program the properties small change and large change? I have seen that the scrollbar thumb/slider size changes on changing the height and the large change but how can I actually program the small change and large change?

  11. #11
    Frenzied Member
    Join Date
    Apr 2012
    Posts
    1,253

    Re: Custom Scroll Bar using Pictures

    What do you mean by 'program the small change and large change'?
    If you don't know where you're going, any road will take you there...

    My VB6 love-children: Vee-Hive and Vee-Launcher

  12. #12

    Thread Starter
    Junior Member
    Join Date
    Jul 2016
    Posts
    28

    Re: Custom Scroll Bar using Pictures

    Quote Originally Posted by ColinE66 View Post
    What do you mean by 'program the small change and large change'?
    I am trying to write the code for small change and large change for the custom scrollbar not the VB Scrollbar. I am attempting to write the properties of custom scrollbar and make it similar to the VB scrollbar.

  13. #13
    VB-aholic & Lovin' It LaVolpe's Avatar
    Join Date
    Oct 2007
    Location
    Beside Waldo
    Posts
    19,541

    Re: Custom Scroll Bar using Pictures

    To determine size of thumb, offset for each record referenced by the scrollbar, I'll try to explain this visually, using a vertical scrollbar as an example. I mention pixels as the drawing unit only because it is the smallest drawing unit that can be used. A thumb cannot be positioned in fractions of pixels as its position will be rounded up/down as needed to the nearest pixel. I also use the term 'record count' which can be considered as the scrollbar's max value

    1. Determine the pixel size of the scroll area (slider size) minus the up/down arrows.

    2. Divide it by the number of records. This value is used as an imaginary rectangle height. These rectangles are then stacked on the slider from the top. Each rectangle references a record. The bottom rectangle may be slightly larger than the rest if the record count is not evenly divisible by the slider size

    3. The thumb is the size of a rectangle, not smaller than its absolute minimal size.

    4. The top and bottom position of the thumb will always fall within one of the rectangles, not necessarily the same rectangle. And the thumb edge (top or bottom) indicates which record the thumb references, with exceptions noted below. When the up/down arrow is clicked, it moves 1 rectangle. When the large scroll is clicked, it moves n records/rectangles.

    5. The thumb must have a constant absolute smallest size. This is the major issue to be addressed. If the number of records is very large, the rectangles may be smaller than the absolute minimum thumb size. But the thumb can still be dragged from the top of the scrollbar to the bottom of the scrollbar and the thumb will still overlap the rectangles. Let's say the top of the thumb is used to determine the record. If the thumb is all the way to the bottom of the slider area, there may be more rectangles below the top of the thumb if the thumb is larger than a single rectangle. Decision time: Maybe use the top edge of the thumb to determine rectangle when the thumb is less than 1/2 way down the slider, otherwise use the bottom edge of the thumb. Thumb center can be used instead, but need to modify calcs if thumb is at very top/bottom of slider to address rectangles above/below the center point.

    Even in the scenario where the number of records far exceeds the the size of the slider in pixels, the above logic can work. However, in this scenario, it is possible that up/down clicks results in no change in the thumb position. Think of scenario where slider is 500 pixels and record count is 10x that amount. Each pixel represents 10 records. Clicking on the up/down arrow results in the scrollbar value changing, but not the thumb position until the scrollbar value results in a different group of 10 records.

    Understand? A simple example, pixel positions are offset from top of slider area:

    - Slider area is 500 pixels, record count is 10.
    - Each imaginary rectangle is 50 pixels (500/10)
    we'll call this value: ItemSize
    for large record counts, this value can be a fraction of a pixel
    - Thumb size is same as ItemSize or absolute minimal size, whichever is larger
    - If needing the thumb to be set to record #, if records start at 1 vs. 0
    If # < 50% of record count then thumb top: (ItemSize * (#-1))
    Else thumb top: ((ItemSize * #) - ThumbSize)
    Note: If ThumbSize = ItemSize then either calc above should return similar value
    Ex: record #1 has thumb top at pixel 0. Record #10 has thumb top at pixel 450
    - If thumb is dragged, use integer division to determine the record: (ThumbPixelPosition \ ItemSize)

    Edited: above provided as a possible plan of attack only. The calculations need to be checked and possibly updated for custom needs.
    Last edited by LaVolpe; Mar 18th, 2017 at 03:07 PM.
    Insomnia is just a byproduct of, "It can't be done"

    Classics Enthusiast? Here's my 1969 Mustang Mach I Fastback. Her sister '67 Coupe has been adopted

    Newbie? Novice? Bored? Spend a few minutes browsing the FAQ section of the forum.
    Read the HitchHiker's Guide to Getting Help on the Forums.
    Here is the list of TAGs you can use to format your posts
    Here are VB6 Help Files online


    {Alpha Image Control} {Memory Leak FAQ} {Unicode Open/Save Dialog} {Resource Image Viewer/Extractor}
    {VB and DPI Tutorial} {Manifest Creator} {UserControl Button Template} {stdPicture Render Usage}

  14. #14
    Frenzied Member
    Join Date
    Apr 2012
    Posts
    1,253

    Re: Custom Scroll Bar using Pictures

    Quote Originally Posted by software07 View Post
    I am trying to write the code for small change and large change for the custom scrollbar not the VB Scrollbar. I am attempting to write the properties of custom scrollbar and make it similar to the VB scrollbar.
    Do you mean my custom scrollbar (as provided in my CodeBank post) or one of your own? Try to be clear, please, when answering questions.

    If you are talking about the code I provided for you then those properties already exist so I don't quite understand what your problem is, to be honest.
    If you don't know where you're going, any road will take you there...

    My VB6 love-children: Vee-Hive and Vee-Launcher

  15. #15

    Thread Starter
    Junior Member
    Join Date
    Jul 2016
    Posts
    28

    Post Re: Custom Scroll Bar using Pictures

    @Lavolpe
    Thank you for your suggestions. I have attached my work you can have a look but it is lacking the features of the VB scroll bar. Please help me code the small change, large change and other related to scroll bar.

    @ColinE66
    I was actually talking about my code, so you can have a look at what I have made and help me add the missing features.

    CustomScrollbar (7).zip
    Last edited by software07; Apr 5th, 2017 at 08:30 AM. Reason: syntax error

  16. #16
    VB-aholic & Lovin' It LaVolpe's Avatar
    Join Date
    Oct 2007
    Location
    Beside Waldo
    Posts
    19,541

    Re: Custom Scroll Bar using Pictures

    Couple notes:

    1. Do NOT include compiled files in your zip: the .exe file

    2. I don't see where you've attempted to create your own code for those properties. Most here will not do the work for you, but would be happy to point you in a better direction or look over the code you wrote. In this case, there is no code to look over that pertains to your question/request.

    3. Do you know how to create read/write properties in a usercontrol? If not, suggest reading up on it; you'll want to use those. If not, for every read/write property, you will need two functions: one to set a value & one to get a value. Properties are rather simple and easy to code.

    Edited: Collin provided you his code, correct? I understand you may want to do this yourself vs using OPC (other people's code), but does no harm to look over his code as a guide; to learn from.
    Last edited by LaVolpe; Mar 19th, 2017 at 12:18 PM.
    Insomnia is just a byproduct of, "It can't be done"

    Classics Enthusiast? Here's my 1969 Mustang Mach I Fastback. Her sister '67 Coupe has been adopted

    Newbie? Novice? Bored? Spend a few minutes browsing the FAQ section of the forum.
    Read the HitchHiker's Guide to Getting Help on the Forums.
    Here is the list of TAGs you can use to format your posts
    Here are VB6 Help Files online


    {Alpha Image Control} {Memory Leak FAQ} {Unicode Open/Save Dialog} {Resource Image Viewer/Extractor}
    {VB and DPI Tutorial} {Manifest Creator} {UserControl Button Template} {stdPicture Render Usage}

  17. #17

    Thread Starter
    Junior Member
    Join Date
    Jul 2016
    Posts
    28

    Question Re: Custom Scroll Bar using Pictures

    I have written the Read/Write Properties, but have almost no or little knowledge about how all these properties actually work in the VB scrollbar. Will need some guidance to code it. Thanks!

    Properties:
    1) LargeChange
    2) SmallChange
    3) Max
    4) Min
    5) Value

    CustomScrollbar (11).zip

  18. #18
    Fanatic Member
    Join Date
    Apr 2017
    Posts
    554

    Re: Custom Scroll Bar using Pictures

    Why don't you just find an example in the Code Bank how to use a scroll bar even if it isn't one made out of picture boxes the logic will be the same

  19. #19
    PowerPoster
    Join Date
    Feb 2017
    Posts
    4,995

    Re: Custom Scroll Bar using Pictures


  20. #20

    Thread Starter
    Junior Member
    Join Date
    Jul 2016
    Posts
    28

    Lightbulb Re: Custom Scroll Bar using Pictures

    I have written the code for Value, SmallChange and LargeChange. These are not exactly same as the VB Scrollbar but similar to it. Now I am writing the code for Min and Max. Any ideas will be helpful to me. Thanks!

    CustomScrollbar (12).zip

  21. #21
    VB-aholic & Lovin' It LaVolpe's Avatar
    Join Date
    Oct 2007
    Location
    Beside Waldo
    Posts
    19,541

    Re: Custom Scroll Bar using Pictures

    Min/Max should be directly related to the number of "items" the scrollbar is referening. These properties should be user-defined. The word "items" is relative to whatever the scrollbar will be used for. Could be number of items in a list, number of pixels, number of text lines, etc, etc. A general-use scrollbar has no idea what it will be used for.

    Also SmallChange and LargeChange should also be user-defined. Typically, small change is a value of 1 "item". Large change would be x number of "items". Again, since the scrolbar doesn't know what it is being used for, these should be user-defined.

    You may just want to initialize a new scrollbar's Min, Max, SmallChange, LargeChange same as VB does when you place a new VB scrollbar on the form.
    Insomnia is just a byproduct of, "It can't be done"

    Classics Enthusiast? Here's my 1969 Mustang Mach I Fastback. Her sister '67 Coupe has been adopted

    Newbie? Novice? Bored? Spend a few minutes browsing the FAQ section of the forum.
    Read the HitchHiker's Guide to Getting Help on the Forums.
    Here is the list of TAGs you can use to format your posts
    Here are VB6 Help Files online


    {Alpha Image Control} {Memory Leak FAQ} {Unicode Open/Save Dialog} {Resource Image Viewer/Extractor}
    {VB and DPI Tutorial} {Manifest Creator} {UserControl Button Template} {stdPicture Render Usage}

  22. #22

    Thread Starter
    Junior Member
    Join Date
    Jul 2016
    Posts
    28

    Resolved Re: Custom Scroll Bar using Pictures

    Thank you everyone for the help! I have finally created the scrollbar but there are some bugs and algorithm errors. I will try to fix it. It is still far from complete but this can help you skin the scrollbar with much less effort. If you have any suggestion or correction you can post anytime out here.

    CustomScrollbar (16).zip
    Last edited by software07; May 10th, 2017 at 02:03 AM.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width