How do I change the style of Autocomplete TextField (ControlFX)?

岁酱吖の 提交于 2019-12-30 10:09:07

问题


I have an Autocomplete TextField from controlsFX and I want to change the size and the color of each item.

This is my part of code :

TextFields.bindAutoCompletion(txt_numberOfCard_GENERAL, cardNumber);


回答1:


Edit :

Autocomplete from ControlFX is a Popup window contains ListView ,the default css style of AutoComplete is :

/**
 * Style based on Modena.css combo-box-popup style
 */

.auto-complete-popup > .list-view {
    -fx-background-color:
        linear-gradient(to bottom,
        derive(-fx-color,-17%),
        derive(-fx-color,-30%)
        ),
        -fx-control-inner;
    -fx-background-insets: -1 -2 -1 -1, 0 -1 0 0;
    -fx-effect: dropshadow( gaussian , rgba(0,0,0,0.2) , 12, 0.0 , 0 , 8 );
}
.auto-complete-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell {
    -fx-padding: 4 0 4 5;
    /* No alternate highlighting */
    -fx-background: -fx-control-inner-background;
}
.auto-complete-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected {
    -fx-background:  -fx-selection-bar-non-focused;
    -fx-background-color:  -fx-background;
}
.auto-complete-popup  > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:hover,
.auto-complete-popup  > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected:hover {
    -fx-background: -fx-accent;
    -fx-background-color: -fx-selection-bar;
}
.auto-complete-popup > .list-view > .placeholder > .label {
    -fx-text-fill: derive(-fx-control-inner-background,-30%);
}

So you need to override this class in your Stylesheet file,or by changing the style from your java code like this :

        AutoCompletePopup<String> autoCompletePopup = new AutoCompletePopup<>();
        autoCompletePopup.getSuggestions().addAll("Fruit", "Fruits", "Frites", "Cheese!");
        autoCompletePopup.setStyle("-fx-control-inner-background:WHITE;"
                + "-fx-accent: #E8EAF6;"
                + "-fx-selection-bar-non-focused:red;"
                + "-fx-font:18px 'Arial'");
            autoCompletePopup.show(textField);


来源:https://stackoverflow.com/questions/42734595/how-do-i-change-the-style-of-autocomplete-textfield-controlfx

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!