JavaFX SegmentedButton - Кнопки полная ширина

Question

Я получил SegmentedButton, который содержит 3 «глиф только» ToggleButtons так:

<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> 

SegmenedtButton потребляет всю ширину (в лице красной линии), хотя ToggleButtons не являются , Я проверил это, установив цвет фона.

Я хотел бы, что ToggleButtons растягиваются так, что каждый из них 1/3 от ширины SegmentedButton. Как я могу добиться этого?

Answer 1

В соответствии с documentatiom математические операторы могут использоваться в привязках fxml.

Так что можно использовать что-то вроде этого:

<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> 

Вероятно, больше не требуется, но следует надеяться, будет полезно для тех, кто вьется до этого прибегая к помощи.

Answer 2

Я сомневаюсь, что вы по-прежнему нужна помощь с этой проблемой, но для тех, кто, как я, который гугле эту проблему и получил здесь, вот как я ее решил:

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

Так в основном, для каждого ToggleButton, который вы добавляете в SegmentedButton, вы привязываете предпочтительную ширину к фактической ширине Сегментированной кнопки, деленной на количество кнопок. Поскольку это привязка, ширина будет корректироваться при изменении размера окна, поэтому вам нужно сделать это только один раз при создании. И если вы хотите, вы можете разделить ширину каким-то другим способом, чтобы сделать несколько кнопок больше и немного меньше.