Metro style DatePicker for Java (JMetro)

This time the DatePicker gets the jmetro treatment. Another control that is not part of the windows framework (XAML UI Framework) at least not in the form JavaFX presents it.

Here are the screen captures:

DatePicker - light theme

DatePicker – light theme 


DatePicker - dark theme

DatePicker – dark theme

As always you can get this at:

Metro style spinner for java (JMetro)

It’s been a while since I’ve worked on JMetro.

This time a control that’s not part of the windows framework: the spinner.
I opted to style the control in its STYLE_CLASS_SPLIT_ARROWS_HORIZONTAL style, that is horizontal arrows split between left and right sides. To style the control you need to add the style you want to the StyleClass observable list:


the other possible styles are:


And here are the controls in their light and dark theme:

spinner - light theme 2

Spinner – light theme

spinner - dark theme 2

Spinner – dark theme

As always you can get this at jfxtras.

Metro style Slider for java (JMetro)

One thing that’s missing from java 8 javafx slider is the fill that comes from the beginning of the slider to the thumb. You can see this in windows 8 as well as several other operating systems: ios 6 and 7, android, etc.

So by using only CSS, it is not possible to style the fill of the slider, to accomplish this you’d have to create your own skin to use with the slider. And that’s exactly what I did by creating the “FilledSliderSkin”.

With this skin set on the slider you can style its fill color, like so:

.slider .fill {
 -fx-background-color: #00828b;
 -fx-padding: 0.333333em; 
.slider .fill:hover {
 -fx-background-color: #219297;

You can use this skin to achieve the styles of ios 6, 7 and android sliders.

And here are the screenshots of the slider with a metro style:

Slider - Dark Theme

Slider – Dark Theme

Slider - Light Theme

Slider – Light Theme

Metro style ProgressBar for java (JMetro)

It’s been a while since my last post..

I’ve been doing some tweaks here and there but nothing too significant for a blog post. Unfortunately haven’t had much time to spend on side projects, hopefully I’ll have time to style a new control every other week or so..

So, this time it’s the ProgressBar (also some other tweaks to the existing styles). Enjoy!

ProgressBar (dark theme)

ProgressBar – Dark Theme

ProgressBar (light theme)

ProgressBar – Light Theme