JavaFX TableView background transparent machen

[lam_tr]

Hallo zusammen,

wie kann ich die Tabelle eigentlich transparent mit css stylen?
Ich habe der Tabelle mit -fx-background-Color: transparent; gemacht, leider klappt es nicht.

Habt ihr da Ideen für mich?

Grüße
lam

 

[domjos1994]

Hallo,
was willst du denn genau an der Tabelle transparent haben?

Wenn du die Reihen transparent haben willst:

.table-row-cell {
    -fx-background-color: transparent;
}

Wenn du den Hintergrund transparent haben willst:

.table-view {
    -fx-base: transparent;
    -fx-background-color: transparent;
}

Ein Stück hilft auch die gute, alte CSS-Referenz: https://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html

LG Dominic

 

[dzim]

Die aktuelle CSS-Referenz ist hier: https://docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/cssref.html
Und in dem Gist hier gibt es eine (nicht mehr ganz aktuelle Version) der modena.css aus der jfxrt.jar des JDKs: https://gist.github.com/maxd/63691840fc372f22f470
Ich würde dir speziell letztes empfehlen, zu studieren. Damit solltest du alles finden. Sichtworde, wie @domjos1994 es schon sagte: .table-view, .table-row-cell, .table-cell, ....

 

[MattElg]

@dzim
@domjos1994
Hallo ich stehe vor einem ähnlichen Problem. Ich will die Tabelle transparent haben, insgesamt. Bei dem unteren Teil der Tabelle klappt dies, also bei den Reihen. Bei der Überschrift klappt es nicht. Die ist weiter grau. Versuche ich es mit
.table-view {
-fx-base: transparent;
-fx-background-color: transparent;
}
Habe ich eine schwarze Tabellenüberschrift. Diese soll aber auch transparent sein.

 

[dzim]

Schau mal ab hier:
https://gist.github.com/maxd/63691840fc372f22f470#file-modena-css-L2358
Speziell der Style .table-view .column-header-background dürfte für dich interessant sein.
Ansonsten habe ich mal den Code einer Anwendung studiert und bin dann auf folgende Lösung gekommen, wie ich meine Tabelle Stylen konnte (nur also Idee, bitte nicht einfach übernehmen, ich habe Custom-Farbdefinitionnen drin)

/*
 * Es gibt noch ein paar mehr, die aber nur disable und focus beschreiben
 */

/*
 * List-, Tree, (Tree)TableView
 */

.table-view,
.tree-table-view {
    -fx-background-color: transparent;
    /* Constants used throughout the tableview. */
    -fx-table-header-border-color: -fx-box-border;
    -fx-table-cell-border-color: derive(-fx-color,5%);
}
.table-view:focused,
.tree-table-view:focused {
    -fx-background-color: transparent;
}

/***** ROW CELLS **************************************************************/
/* Each row in the table is a table-row-cell. Inside a table-row-cell is any
   number of table-cell. */
.table-row-cell {
    -fx-background: -fx-control-inner-background;
    -fx-background-color: -fx-table-cell-border-color, -fx-background;
    -fx-background-insets: 0, 0 0 1 0;
    -fx-padding: 0;
    -fx-text-fill: -fx-text-background-color;
}
.table-row-cell:odd {
    -fx-background: -fx-control-inner-background-alt;
}
/***** INDIVIDUAL CELLS ********************************************************/
.table-cell {
    -fx-padding: 0.166667em; /* 2px, plus border adds 1px */
    -fx-background-color: null;
    -fx-border-color: transparent -fx-table-cell-border-color transparent transparent;
    -fx-cell-size: 2.0em; /* 24 */
    -fx-text-fill: -fx-text-background-color;
}
.table-view > .virtual-flow > .clipped-container > .sheet > .table-row-cell .table-cell:selected,
.tree-table-view > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell .tree-table-cell:selected {
    -fx-background-color: -fx-table-cell-border-color, -fx-background;
    -fx-background-insets: 0, 0 0 1 0;
}
/* When in constrained resize mode, the right-most visible cell should not have
   a right-border, as it is not possible to get this cleanly out of view without
   introducing horizontal scrollbars (see RT-14886). */
.table-view:constrained-resize > .virtual-flow > .clipped-container > .sheet > .table-row-cell > .table-cell:last-visible,
.tree-table-view:constrained-resize > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell > .tree-table-cell:last-visible {
    -fx-border-color: transparent;
}
/***** HEADER **********************************************************************/
/* The column-resize-line is shown when the user is attempting to resize a column. */
.table-view .column-resize-line,
.tree-table-view .column-resize-line {
    -fx-background: -fx-accent;
    -fx-background-color: -fx-background;
    -fx-padding: 0.0em 0.0416667em 0.0em 0.0416667em; /* 0 0.571429 0 0.571429 */
}
/* This is the area behind the column headers. An ideal place to specify background
   and border colors for the whole area (not individual column-header's). */
.table-view .column-header-background,
.tree-table-view > .column-header-background {
    -fx-background-color: -fx-inner-border, -fx-body-color;
    -fx-background-insets: 0, 1;
}
/* The column header row is made up of a number of column-header, one for each
   TableColumn, and a 'filler' area that extends from the right-most column
   to the edge of the tableview, or up to the 'column control' button. */
.table-view .column-header,
.tree-table-view .column-header,
.table-view .filler,
.tree-table-view .filler,
.table-view > .column-header-background > .show-hide-columns-button,
.tree-table-view > .column-header-background > .show-hide-columns-button,
.table-view:constrained-resize .filler,
.tree-table-view:constrained-resize .filler {
    -fx-background-color: -fx-box-border, -fx-inner-border, -fx-body-color;
    -fx-background-insets: 0, 0 1 1 0, 1 2 2 1;
    -fx-font-weight: bold;
    -fx-size: 2em;
    -fx-text-fill: -fx-selection-bar-text;
    -fx-padding: 0.166667em;
}
.table-view .column-header .context-menu,
.tree-table-view .column-header .context-menu,
.table-view > .column-header-background > .show-hide-columns-button .context-menu,
.tree-table-view > .column-header-background > .show-hide-columns-button .context-menu {
    -fx-font-weight: null;
}
.table-view .filler,
.tree-table-view .filler,
.table-view:constrained-resize .filler,
.tree-table-view:constrained-resize .filler {
    -fx-background-insets: 0, 0 0 1 0, 1 1 2 1;
}
.table-view > .column-header-background > .show-hide-columns-button,
.tree-table-view > .column-header-background > .show-hide-columns-button {
    -fx-background-insets: 0, 0 0 1 1, 1 1 2 2;
}
.table-view .column-header .sort-order-dots-container,
.tree-table-view .column-header .sort-order-dots-container{
    -fx-padding: 2 0 2 0;
}
.table-view .column-header .sort-order,
.tree-table-view .column-header .sort-order{
    -fx-font-size: 0.916667em; /* 11pt - 1 less than the default font */
}
.table-view .column-header .sort-order-dot,
.tree-table-view .column-header .sort-order-dot {
    -fx-background-color: -fx-mark-color;
    -fx-padding: 0.115em;
    -fx-background-radius: 0.115em;
}
.table-view .column-header .label,
.tree-table-view .column-header .label {
    -fx-alignment: center;
}

/* Plus Symbol */
.table-view .show-hide-column-image,
.tree-table-view .show-hide-column-image {
    -fx-background-color: -fx-mark-color;
    -fx-padding: 0.25em; /* 3px */
    -fx-shape: "M398.902,298.045c0.667,0,1.333,0,2,0c0,0.667,0,1.333,0,2c0.667,0,1.333,0,2,0c0,0.667,0,1.333,0,2c-0.667,0-1.333,0-2,0c0,0.666,0,1.332,0,1.999c-0.667,0-1.333,0-2,0c0-0.667,0-1.333,0-1.999c-0.666,0-1.333,0-1.999,0c0-0.667,0-1.334,0-2c0.666,0,1.333,0,1.999,0C398.902,299.378,398.902,298.711,398.902,298.045z";
}
/* When a column is being 'dragged' to be placed in a different position, there
   is a region that follows along the column header area to indicate where the
   column will be dropped. This region can be styled using the .column-drag-header
   name. */
.table-view .column-drag-header,
.tree-table-view .column-drag-header {
    -fx-background: -fx-accent;
    -fx-background-color: -fx-selection-bar;
    -fx-border-color: transparent;
    -fx-opacity: 0.6;
}
/* Semi-transparent overlay to indicate the column that is currently being moved */
.table-view .column-overlay,
.tree-table-view .column-overlay {
    -fx-background-color: darkgray;
    -fx-opacity: 0.3;
}
/* Header Sort Arrows */
.table-view /*> column-header-background > nested-column-header >*/ .arrow,
.tree-table-view /*> column-header-background > nested-column-header >*/ .arrow {
    -fx-background-color: -fx-mark-color;
    -fx-padding: 0.25em 0.3125em 0.25em 0.3125em; /* 3 3.75 3 3.75 */
    -fx-shape: "M 0 0 h 7 l -3.5 4 z";
}
/* This is shown when the table has no rows and/or no columns. */
.table-view .empty-table,
.tree-table-view .empty-table {
    -fx-background-color: transparent;
    -fx-font-size: 1.166667em; /* 14pt - 2 more than the default font */
}

/*
 * TableView style
 * above: Defaults
 * below: Customization
 */
.table-view,
.table-view .column-header-background,
.table-view .column-header,
.table-view .filler {
    -fx-background-color: transparent;
}

.table-view .column-header,
.table-view .filler {
    -fx-border-color: -brand-secondary;
    -fx-border-width: 0 0 1 0;
}

.table-view {
    -fx-border-color: -brand-secondary;
    -fx-border-width: 0px 0px 0px 0px;
}

.table-row-cell:empty .table-cell {
    -fx-border-width: 0px;
    -fx-background-color: transparent;
}

.table-row-cell,
.table-row-cell:odd {
    -fx-background-color: transparent;
}

.table-row-cell .text,
.table-row-cell:odd .text,
.table-row-cell:hover .text{
    -fx-fill: black;
}

.table-row-cell:selected,
.table-row-cell:odd:selected,
.table-row-cell:even:selected {
    -fx-background-color: -brand-secondary;
}

.table-row-cell:selected .text,
.table-row-cell:odd:selected .text,
.table-row-cell:even:selected .text {
    -fx-fill: white;
}

.table-row-cell:hover,
.table-row-cell:odd:hover,
.table-row-cell:even:hover {
    -fx-background-color: -brand-tertiary;
}
.table-row-cell:empty:hover {
    -fx-background-color: transparent;
}

.table-row-cell:hover .text,
.table-row-cell:odd:hover .text,
.table-row-cell:even:hover .text {
    -fx-fill: white;
}

.table-cell {
    -fx-padding: 0.166667em; /* 2px, plus border adds 1px */
    -fx-background-color: null;
    -fx-border-color: transparent -brand-secondary transparent transparent;
    -fx-border-width: 0px 1px 0px 0px;
    -fx-cell-size: 2.0em; /* 24 */
    -fx-text-fill: -fx-text-background-color;
}
.table-cell:selected {
    -fx-background-color: -fx-table-cell-border-color, -fx-background;
    -fx-background-insets: 0, 0 0 1 0;
}
.table-cell:last-visible {
    -fx-border-color: transparent;
}

Speziell der untere Teil dürfte interessant sein...

 

[MattElg]

Das Problem lag an anderer Stelle. Es gibt in Java für CSS kein "transparent" als Farbe. Egal was man probiert, es gibt einen scharzen Hintergrund oder eine Fehlermeldung(ClassCastException) bzw. Warnung. Eine CSS half mir nicht weiter, da ich als Usereinstellung auch die Farbauswahl habe. Letztlich habe ich es folgend gelöst.
TableView tableX = new TableView();
TableColumn Col = new TableColumn("Kierunek");
TableColumn Col2 = new TableColumn();
String textTableColumn = "Hallo";
Col2.setText(textTableColumn);
tableX.getColumns().addAll(Col, Col2);
tableX.setStyle("-fx-background-color: transparent; "
+ "-fx-base: rgba(56, 176, 209, 0); ");
Und Java schluckt es ohne Fehlermeldung.
Und ich habe eine Tabelle, wo nur die Schrift zu sehen ist, die zudem durchsichtig ist, also genau was ich wollte.
Man kann dies noch mit:
+ "-fx-background-insets: " + shadowSize + "; "
ergänzen um die bei anderen Farbeinstellungen auch die Durchsichtigkeit zu haben.

 

[dzim]

@lam_tr das ist falsch: Es gibt sehr wohl transparent im CSS! Und es funktioniert auch korrekt, wenn man es richtig einsetzt, bzw. die Node-Hierarchy korrekt anpasst. Auch kannst du im CSS die Funktion rgb(r, g, b, alpha) verwenden, um einer Farbe einen Transparenz-Effekt zu verleihen (eben den Alpha-Kanal anpassen). Auch sind statt der üblichen 3er-Hex-Blöcke, solche mit einem vierten Block möglich (wieder Alpha-Kanal).
Am wahrscheinlichsten ist, dass du irgendwo noch einen Node im Scene Graph hattest, der dir die Transparenz "kaputt" gemacht hat (passiert schnell mal). Ich würde dir empfehlen, mal das Tool Scenic View zu verwenden, und deinen Scene Graphen zu inspizieren.

Btw: Wenn etwas mit dem CSS nicht stimmt, wird es auf der Konsole ausgegeben. Davon abgesehen ist die Verwendung von setStyle mit Vorsicht zu geniessen: Speziell bei verschachtelten UIs (ja, TableViews gehören zu den etwas komplizierteren und verschachtelten) passiert es schnell, dass der Stil quasi auf dem falschen Node angewendet wird - IMHO ist setStyle dort mitunter zwar verlockend, aber auch schnell irreführend.

 

[MattElg]

Danke Dir.