0

I'm creating a Solitaire game using JavaFX. The fxml contains the layout for the game. I am using imageviews in buttons to display playing cards, such that my fxml code is the following:

<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="720.0" prefWidth="1280.0" xmlns="http://javafx.com/javafx/19" xmlns:fx="http://javafx.com/fxml/1" fx:controller="application.KlondikeController">
   <children>
      <ImageView fitHeight="720.0" fitWidth="1280.0">
         <image>
            <Image url="@../images/KlondikeBackground.png" />
         </image>
      </ImageView>
      <Button fx:id="TestButton" layoutX="100.0" layoutY="100.0" mnemonicParsing="false" onAction="#TestClicked" prefHeight="50.0" prefWidth="30.0" contentDisplay="CENTER">
          <graphic>
              <ImageView fx:id="buttonImage" fitHeight="200.0" fitWidth="150.0">
                  <Image url="@../images/10c.png"/>
              </ImageView>
          </graphic>
      </Button>
   </children>
</AnchorPane>

Unfortunately, when a card displays in the UI, there's a border around the card image (see picture). Could anybody tell me how to get rid of it?

enter image description here

jewelsea
  • 150,031
  • 14
  • 366
  • 406
DrVonSamuel
  • 41
  • 1
  • 5
  • 3
    That blue outline is the selection border, do you also want to get rid of that? Also, the button background color will change based on the button state (e.g. pressed) is it OK if you don't have that? What should the UI feedback visual be for the button pressed (armed) and released (actioned)? Do you really want a button, or do you prefer a clickable image? – jewelsea Nov 17 '22 at 00:02
  • 2
    Perhaps a duplicate of [How do I remove the default border glow of a JavaFX button (when selected)?](https://stackoverflow.com/questions/6092500/how-do-i-remove-the-default-border-glow-of-a-javafx-button-when-selected) – jewelsea Nov 17 '22 at 00:03
  • It's not the blue outline I want to get rid of, it's the thin grey margins that are between the blue outline and the playing card's edge. – DrVonSamuel Nov 17 '22 at 00:50
  • Well, jewelsea, you were right: a clickable image does the same thing without all the hassle of nesting an ImageView inside a button, leaving those annoying borders. Thank you for the suggestion. – DrVonSamuel Nov 17 '22 at 01:42
  • While you are taking suggestions, I think it would be better if you use some type of card object and loaded the cards in code instead of using `FXML`. I am fairly new to game-type stuff, but here is an example of what I am talking about. https://github.com/sedj601/CardMatchingFX/blob/master/src/cardmatchingfx/CardTile.java – SedJ601 Nov 17 '22 at 02:29
  • 2
    set the button's background color to transparent - unrelated: stick to java naming conventions, please – kleopatra Nov 17 '22 at 12:43

0 Answers0