Come nascondere TabBar in TabPane?

Question

Sto cercando di creare una finestra Next/Previous usando TabPane. Ho deciso di utilizzare TabPane in quanto è facile da usare e progettato in SceneBuilder. All'inizio fo l'applicazione, ho usato questo per nascondere il TabBar per ora-

tabPane.setTabMinHeight(-10); 
tabPane.setTabMaxHeight(-10); 

L'aspetto del TabPane dopo questo-

Come si può vedere, c'è ancora rimane una piccola parte di TabBar (sotto la barra del titolo). Come posso nasconderlo completamente in modo che il mio TabPane assomigli a un normale Pane ma con tutte le sue funzionalità intatte?

Answer 1

Utilizzare un TabPane con le schede nascoste come un'interfaccia di tipo wizard è un'idea interessante, a cui non avevo pensato e penso di piacere.

È possibile nascondere le schede con il seguente in un file CSS esterno:

.tab-pane { 
    -fx-tab-max-height: 0 ; 
} 
.tab-pane .tab-header-area { 
    visibility: hidden ; 
} 

Ecco uno SSCCE. In questo ho dato la scheda CSS alla classe CSS wizard.

import javafx.application.Application; 
import javafx.beans.binding.Bindings; 
import javafx.geometry.Pos; 
import javafx.scene.Scene; 
import javafx.scene.control.Button; 
import javafx.scene.control.Label; 
import javafx.scene.control.Tab; 
import javafx.scene.control.TabPane; 
import javafx.scene.layout.BorderPane; 
import javafx.scene.layout.HBox; 
import javafx.stage.Stage; 

public class TabPaneAsWizard extends Application { 

    @Override 
    public void start(Stage primaryStage) { 
     TabPane tabPane = new TabPane(); 
     tabPane.getStyleClass().add("wizard"); 
     for (int i = 1; i<=10; i++) { 
      tabPane.getTabs().add(createTab(i)); 
     } 
     Button previous = new Button("Previous"); 
     previous.setOnAction(e -> 
      tabPane.getSelectionModel().select(tabPane.getSelectionModel().getSelectedIndex()-1)); 
     previous.disableProperty().bind(tabPane.getSelectionModel().selectedIndexProperty().lessThanOrEqualTo(0)); 
     Button next = new Button("Next"); 
     next.setOnAction(e -> 
      tabPane.getSelectionModel().select(tabPane.getSelectionModel().getSelectedIndex()+1)); 
     next.disableProperty().bind(
       tabPane.getSelectionModel().selectedIndexProperty().greaterThanOrEqualTo(
         Bindings.size(tabPane.getTabs()).subtract(1))); 

     HBox buttons = new HBox(20, previous, next); 
     buttons.setAlignment(Pos.CENTER); 

     BorderPane root = new BorderPane(tabPane, null, null, buttons, null); 
     Scene scene = new Scene(root, 600, 600); 
     scene.getStylesheets().add("tab-pane-as-wizard.css"); 
     primaryStage.setScene(scene); 
     primaryStage.show(); 
    } 

    private Tab createTab(int id) { 
     Tab tab = new Tab(); 
     Label label = new Label("This is step "+id); 
     tab.setContent(label); 
     return tab ; 
    } 

    public static void main(String[] args) { 
     launch(args); 
    } 
} 

scheda-pane-come-wizard.css:

.wizard { 
    -fx-tab-max-height: 0 ; 
} 
.wizard .tab-header-area { 
    visibility: hidden ; 
} 

Answer 2

Il modo più semplice di fare questo sta cambiando il colore per sincronizzarlo con sfondo

.tab-pane { 
    -fx-tab-max-height: 0; 

} 

.tab-pane .tab-header-area .tab-header-background { 
    -fx-background-color: #843487;//your background colour code 

} 
.tab-pane .tab 
{ 
    -fx-background-color: #843487;//your background colour code 

}