javafxtabsfxml

How to hide the TabBar in TabPane?


I am trying to build a Next/Previous windows using TabPane. I decided to use TabPane as it is easy to use and design in SceneBuilder. At the start fo the app, I used this to hide the TabBar for now-

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

The appearance of the TabPane after this-

enter image description here

As you can see, there still remains a small part of TabBar (below the titlebar). How can I hide it completely so that my TabPane will look like just a normal Pane but with all its functionality intact?


Solution

  • Using a TabPane with hidden tabs as a wizard-type interface is an interesting idea, which I hadn't thought of and think I like.

    You can hide the tabs with the following in an external CSS file:

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

    Here's a SSCCE. In this I gave the tab pane the CSS class 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);
        }
    }
    

    tab-pane-as-wizard.css:

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

    enter image description here