Forum Stats

  • 3,853,793 Users
  • 2,264,272 Discussions
  • 7,905,448 Comments

Discussions

Using image resources instead of CSS for JavaFx checkbox state

dmv
dmv Member Posts: 32
edited Feb 14, 2013 5:02AM in JavaFX 2.0 and Later
Has anyone used a series of png image resources instead of CSS for the graphics in the JavaFX checkbox? I have a checkbox tree where I would like to colour certain checkboxes according to the tree contents.

Thanks in advance ...
Tagged:

Best Answer

  • David Grieve-Oracle
    David Grieve-Oracle Member Posts: 558
    Answer ✓
    You can use -fx-background-image to style the "mark" which is shown when the checkbox is selected. You can also style the "box" in which the "mark" is contained.
    The check mark itself is specified in caspian.css as a shape, so if you don't want the check mark, set it to null.
    .check-box > .box > .mark {
        -fx-shape: null;
    }
    
    .check-box:selected > .box > .mark {
        -fx-background-image: url("images/duke.png");
    }
    You can use multiple style classes to style the check box according to the tree content. You'd probably want to use a cell factory to set the style-class on the CheckBox (see TreeView#setCellFactory).
    .check-box.red > .box {
        -fx-color: red;
    }

Answers

  • David Grieve-Oracle
    David Grieve-Oracle Member Posts: 558
    Answer ✓
    You can use -fx-background-image to style the "mark" which is shown when the checkbox is selected. You can also style the "box" in which the "mark" is contained.
    The check mark itself is specified in caspian.css as a shape, so if you don't want the check mark, set it to null.
    .check-box > .box > .mark {
        -fx-shape: null;
    }
    
    .check-box:selected > .box > .mark {
        -fx-background-image: url("images/duke.png");
    }
    You can use multiple style classes to style the check box according to the tree content. You'd probably want to use a cell factory to set the style-class on the CheckBox (see TreeView#setCellFactory).
    .check-box.red > .box {
        -fx-color: red;
    }
  • dmv
    dmv Member Posts: 32
    Thank you so much for a very helpful reply and my apologies for a delayed reply. I had visions of doing tedious things with css but you have given me a way forward.
This discussion has been closed.