Darkmode compatible IconButton

  1. 7 months ago

    Dave S

    16 Dec 2018 San Diego, California USA
    Edited 7 months ago

    my Tadpole application used dozens of BevelButtons with Icons for various activities... Well as we all know by now, these are not native controls, and therefore not compatible with the new Mojave Darkmode. So as part of my effort to make Tadpole Darkmode compatible, I needed a replacement button type.

    Here is what I came up with. An Icon Button, that can take a Caption, an Icon or Both. The icon can be positioned to the Left, Right, Center, Above or Below the Caption. If Above or Below is specified, but either the Icon or Caption is not supplied, it reverts to Center.

    Background and Textcolors can be defined for Light Mode, Dark Mode, or Disabled mode, as well as a specific Icon for each (for any icon to appear, the Light version must be supplied)

    icon sizes are : 16x16, 24x24, 32x32 and 48x48... whatever image you supply is expanded/reduced to those sizes

    Control is based on a CANVAS, so it shows only as a Rectangle at design time


    Source code is available for $10 (email me at rdavids3@cox.net for details if interested)

  2. scott b

    16 Dec 2018 Pre-Release Testers, Xojo Pro local coffee shop

    @Dave S do you a have a screenshot of the IconButtons in action?


  3. Dave S

    16 Dec 2018 San Diego, California USA

    what do you mean "in action"?
    they get clicked, your app responds :)
    not sure what you are asking

  4. Debugmode ... running.

  5. Jürg O

    16 Dec 2018 Pre-Release Testers, Xojo Pro

    @Dave S what do you mean "in action"?

    Probably: What do they look like if you click on them (just MouseDown, not Up). What happens if you click on it, then move the Mouse out (and have a MouseUp outside of the Button). How do they look like in these states in LightMode and DarkMode. How do they look like on other Platforms (e.g.: Linux - do they have rounded corners), ...

  6. Dave S

    16 Dec 2018 San Diego, California USA

    They are not animated
    They respond to MouseDown (calls a defined Event "Action"), there are no other defined Events (except PAINT)
    They are Canvas so they don't have rounded corners
    They look like the picture I posted, with the ability to choose any colors you wish for Light/Dark Mode
    They automatically respond to any transition from light->dark->light mode
    The last Win10 update destroyed my Win test machine, so I can't test it on Windows, but no reason it shouldn't work

    MouseDown is one line of code

    If mousedown(x,y)=False Then action

    The rest for the most part is in the Paint Event and the properties

  7. Jürg O

    17 Dec 2018 Pre-Release Testers, Xojo Pro
    Edited 7 months ago

    @Dave S They respond to MouseDown (calls a defined Event "Action"),

    I don't expect an "Action fired" on MouseDown in a Button... only in MouseUp ;)
    So that I can move the Mouse out of the Button (should I accidentally have clicked on one) - and not get the Action fired.

    MouseDown should probably just adjust the BackgroundColor to get a visual indication that the button is in a "pushed down state".
    MouseUp should fire the Action-Event.

  8. Dave S

    17 Dec 2018 San Diego, California USA
    Edited 7 months ago

    Ok... I have taken your comments to heart ... :) and "improved" this control.

    It now is animated, as in it highlights (lowlight?) when mouse is down
    Action only occurs on MouseUp and the mouse is INSIDE the button still

    Here is a macOS only demo

    macOS 64bit IconButton Demo


    For this demo I just used one icon... but in normal use you can supply a different icon for both dark and light mode

    The "Comparison" button is a Square Pushbutton (not a bevel button) that I used to make sure colors etc were correct.

    for those curious.. the Icon is my Basset Hound - Abby

or Sign Up to reply!