JavaFX SegmentedButton - Buttons full width

Question

I got a SegmentedButton which contains 3 "glyph only" ToggleButtons like this:

<SegmentedButton maxWidth="Infinity" prefWidth="Infinity">
    <buttons>
        <fx:define>
            <ToggleGroup fx:id="albumViewToggleGroup"/>
        </fx:define>
        <ToggleButton maxWidth="Infinity" fx:id="tagCloudToggle" mnemonicParsing="false" selected="true" toggleGroup="$albumViewToggleGroup">
            <graphic>
                <Glyph fontFamily="FontAwesome" icon="TAGS"></Glyph>
            </graphic>
        </ToggleButton>
        <ToggleButton maxWidth="Infinity" fx:id="gridFlowToggle" mnemonicParsing="false" toggleGroup="$albumViewToggleGroup" >
            <graphic>
                <Glyph fontFamily="FontAwesome" icon="TH"></Glyph>
            </graphic>
        </ToggleButton>
        <ToggleButton maxWidth="Infinity" fx:id="coverFlowToggle" mnemonicParsing="false" toggleGroup="$albumViewToggleGroup">
            <graphic>
                <Glyph fontFamily="FontAwesome" icon="ELLIPSIS_H"></Glyph>
            </graphic>
            <VBox.margin>
                <Insets top="10.0"/>
            </VBox.margin>
        </ToggleButton>
    </buttons>
</SegmentedButton>

The SegmenedtButton consumes the full width (represented by the red line), though the ToggleButtons are not. I checked this by setting a background color.

enter image description here

I would like that the ToggleButtons are stretched so that they are each 1/3 of the width of the SegmentedButton. How can i achive this?

score 3 · Accepted Answer · answered Dec 23 '16 at 08:23

According to the documentatiom mathematical operators can be used in fxml bindings.

So something like this can be used:

<SegmentedButton fx:id="segButton" maxWidth="1.7976931348623157E308" >
    <buttons>
        <ToggleButton fx:id="option1" maxWidth="1.7976931348623157E308" prefWidth="${segButton.width / 4}" text="K3" />
        <ToggleButton fx:id="option1" maxWidth="1.7976931348623157E308" prefWidth="${segButton.width / 4}" text="K2" />
        <ToggleButton fx:id="option1" maxWidth="1.7976931348623157E308" prefWidth="${segButton.width / 4}" text="K1" />
        <ToggleButton fx:id="option1" maxWidth="1.7976931348623157E308" prefWidth="${segButton.width / 4}" text="K1,1" />
    </buttons>
</SegmentedButton>

Probably no longer needed, but should hopefully be useful for anyone who winds up googling this.

score 1 · Answer 2 · answered Feb 26 '16 at 13:57

I doubt that you still need help with this problem, but for anyone like me, who googled the problem and got here, here's how I solved it:

button1.prefWidthProperty().bind(segmentedButtons.widthProperty().divide(2));
button2.prefWidthProperty().bind(segmentedButtons.widthProperty().divide(2));
segmentedButtons.getButtons().addAll(button1, button2);
segmentedButtons.setMaxWidth(Double.MAX_VALUE);

So basically, for every ToggleButton that you add to SegmentedButton you bind preferred width to the actual width of SegmentedButton divided by the number of buttons. Since it's binding, the width will adjust on resizing the window, so you need to do it only once on creation. And if you want, you can divide width in some other way to make some buttons bigger and some smaller.

i would have liked that i dont have to write actual java code to style my application ;) I know you can do everything with some lines of java code. Though the true concept behind the whole JavaFX imho should be the seperation of the style and using the fxml files for it. So "code behind" (as we call it in .NET) is not really the solution i was searching for. — JuHwon, Mar 09 '16 at 18:07

JavaFX SegmentedButton - Buttons full width

2 Answers2