Adding Custom Icons to JFXtras Window Control (VFXWindows)

Adding custom Icons:

The window control comes with some predefined icons. But it is also possible to provide custom icons.

To add a custom icon just add it via either getRightIcons().add(myIcon) or getLeftIcons().add(myIcon). The action of an icon can be defined by defining an EventHandler via setOnAction(..).

Example:

    WindowIcon customIcon = new WindowIcon();
    customIcon.setOnAction(new EventHandler<ActionEvent>() {
        @Override
        public void handle(ActionEvent t) {
            // we add a nice scale transition
            // (it doesn't do anything useful but it is cool!)
            ScaleTransition st = new ScaleTransition(Duration.seconds(2), w);
            st.setFromX(w.getScaleX());
            st.setFromY(w.getScaleY());
            st.setToX(0.1);
            st.setToY(0.1);
            st.setAutoReverse(true);
            st.setCycleCount(2);
            st.play();
        }
    });

    // now we add our custom icon
    w.getRightIcons().add(customIcon);

The result will look like this:

Window Control: Custom Icon

Tip:

It is recommended to use CSS to style the icon. The best way to do this is by specifying an SVG path in the style. To do so use -fx-shape and paste the path there. Here is an example how it is done for the CloseIcon:

First, define the style class:

 customIcon.getStyleClass().setAll("window-close-icon");

And here’s the corresponding entry in the CSS file:

.window-close-icon {
  -fx-skin: "jfxtras.labs.internal.scene.control.skin.window.DefaultWindowIconSkin";
  -fx-border-color: rgb(255,255,255);
  -fx-shape: "m 81.451435,47.885404 -39.71427,39.714277 m 0,-39.714277 39.71427,39.714277 m 27.285725,-19.85714 c 0,26.03628 -21.106585,47.142859 -47.142865,47.142859 -26.03628,0 -47.14285,-21.106579 -47.14285,-47.142859 0,-26.036277 21.10657,-47.142853 47.14285,-47.142853 26.03628,0 47.142865,21.106576 47.142865,47.142853 z";
  -fx-border-width: 2;
  -fx-border-insets: 1;
}

Conclusion

As you have seen it is not complicated to add custom icons to the window control. The behavior of the icons is fully customizable.

Fedback

If you have further questions or if you found a bug feel free to contact me! You are also welcome to contribute to the project via GitHub.

Stay tuned and follow me on Twitter