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.

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?

Answer 1

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.

Answer 2

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.