The impressive thing about Java FX is how well developers can use CSS to style the look and feel of the user interface.

The ComboBox component by default has an arrow icon pointing downward. The requirement given to me was to have two arrows, one pointing up and the other pointing down (see image). I figure the easiest would be to use an image to change it.

javafx_updownarrow

However, if the height of the ComboBox changes, so will the image. But since the image I had was small, it would not look good when it is expanded.

The solution I came up with was to change using an SVG or what is known is scaled vector graphics. This is more convenient and advantageous because even if it gets scaled to a smaller or bigger size, the quality of the graphics will still be the same.

In the CSS file, I did it like this. 

 
Now all ComboBox components in your scene, will have the up and down arrow icon.

Related Posts Plugin for WordPress, Blogger...