在javafx Listview中隐藏垂直滚动条

Question

I've tried for several hours now and can't seem to find the answer anywhere. I have 2 issues relating to the same listview, 1 more serious than the other.

I am trying to match a design provided to me in java. The list view should look like the below

This is from the design

Currently I have got as far as

My current endeavour

I have created a Custom ListCell to hold all of the views (not yet refactored so may look a little untidy)

import HolderClasses.MenuItem;
import javafx.scene.control.Label;
import javafx.scene.control.ListCell;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.VBox;

public class CustomListCell extends ListCell<MenuItem>{

    private Image mImage;
    private String mText;
    private AnchorPane background;
    private ImageView imageHolder;
    private VBox colourStrip;
    private Label mTextLabel;

    public CustomListCell(){

        background = new AnchorPane();
        imageHolder = new ImageView();
        mTextLabel = new Label();
        imageHolder.setFitHeight(40.0);
        imageHolder.setFitWidth(40.0);
        imageHolder.getStyleClass().add("listCellImage");
        mTextLabel.getStyleClass().add("listCellText");
        AnchorPane.setLeftAnchor(imageHolder, 10.0);
        AnchorPane.setTopAnchor(imageHolder, 10.0);
        AnchorPane.setBottomAnchor(imageHolder, 10.0);
        AnchorPane.setLeftAnchor(mTextLabel, 80.0);
        AnchorPane.setRightAnchor(mTextLabel, 1.0);
        AnchorPane.setTopAnchor(mTextLabel, 0.0);
        AnchorPane.setBottomAnchor(mTextLabel, 0.0);
        colourStrip = new VBox();
        colourStrip.setMinWidth(0.0);
        colourStrip.setMaxWidth(2.0);
        colourStrip.setPrefWidth(2.0);
        colourStrip.getStyleClass().add("listCellColourStrip");
        AnchorPane.setRightAnchor(colourStrip, 0.0);
        AnchorPane.setTopAnchor(colourStrip, 0.0);
        AnchorPane.setBottomAnchor(colourStrip, 0.0);

        background.getChildren().addAll(mTextLabel, imageHolder, colourStrip);        

    }

    @Override
    protected void updateItem(MenuItem item, boolean empty) {
        super.updateItem(item, empty);
        if (empty || item == null) {
            //remove all the views
            setText(null);
            setGraphic(null);
        } else {
            //set all the views
            imageHolder.setImage(item.getImage());
            mTextLabel.setText(item.getText());
            setText(null);  
            setGraphic(background);            
        }
    }

}

and my CSS is

.list-cell {

    -fx-background-color: #FCFCFC;
    -fx-background-insets: 0 0 1 0;
}

.list-cell:empty {
    -fx-background-color: #FCFCFC;
    -fx-background-insets: 0 ;
}

.list-cell:selected .listCellColourStrip{

    -fx-background-color: #CF000F;

}

.list-cell:selected {

    -fx-background-color: #FFFFFF;

}

.list-view .scroll-bar:vertical .increment-arrow,
.list-view .scroll-bar:vertical .decrement-arrow,
.list-view .scroll-bar:vertical .increment-button,
.list-view .scroll-bar:vertical .decrement-button {
    -fx-padding: 0px;
}

.list-view .scroll-bar:vertical {
    -fx-padding: 0px;
}

.listCellImage {    
    -fx-opacity: 0.4;    
}

.listCellText{    
    -fx-font-size: 1.5em;
    -fx-text-fill: #888;
    -fx-font-family: "Museo Sans 500";   
}

In a nutshell I have managed to remove the scrollbar but the space the scrollbar occupied still seems to be taken up after it has disappeared and I can't for the life of me get the red bar to show at the very end of the cell.

The original design had inspiration from an android listview where the scrollbar is placed on top of the content and the thumb is semi-opaque when scrolling and invisible when not. I would ideally like to achieve this as well although no scrollbar would be an acceptable compromise if the red line can be placed at the end.

I have explored using a ScrollPane and standard AnchorPane's instead of a ListView to no avail and decided to try again with the ListView. But i'm open to any solution that achieves the desired even if this means ripping up the ListView again.

Any help you could give would be appreciated.

sorry if my question is incorrectly formatted i'm a newbie :)

Thanks

Answer 1

Change

.list-view .scroll-bar:vertical {
   -fx-padding: 0px;
}

to

.list-view .scroll-bar:vertical {
    -fx-scale-x: 0;
}

And if you want disable move between items:

listview.setMouseTransparent( true );
listview.setFocusTraversable( false );