JavaFX ChoiceDialog CSS

时间:2017-07-18 16:26:09

标签: css javafx-8

我的JavaFX应用程序中有一个ChoiceDialog,并且在我的生活中无法弄清楚改变它的外观和感觉所需的CSS元素。我的其他对话框似乎受到我的外部CSS文件的影响,所以我猜这是一个我不熟悉的元素。

此外,这将覆盖Modena css。

我试过了:

.dialog-pane {
-fx-background-color: black;
}

.dialog-pane .label {
-fx-text-fill: white;
}

.dialog-pane:header .header-panel {
-fx-background-color: black;
}

.dialog-pane:header .header-panel .label {
-fx-font-style: italic;
-fx-font-size: 2em;
}

我也尝试过:

.choice-dialog .dialog-pane {
-fx-background-color: black;
}

.choice-dialog .dialog-pane .label {
-fx-text-fill: white;
}

.choice-dialog .dialog-pane:header .header-panel {
-fx-background-color: black;
}

.choice-dialog .dialog-pane:header .header-panel .label {
-fx-font-style: italic;
-fx-font-size: 2em;
}

以及其他一些变体(.choice-dialog& .dialog-pane) 我尝试的另一件事(在查看modena.css文件之后)是通过执行以下操作来更改ChoiceDialog中显示的图标:

.choice-dialog.dialog-pane {
-fx-graphic: url("dialog-confirm.png");
}

.choice-dialog.dialog-pane {
-fx-graphic: url("dialog-warning.png");
}

虽然这也没有产生任何结果。

更新

我更新了我的自定义CSS文件,将其全部删除并重试上面提到的CSS。 CSS的第一个块只更改DialogPane,而不是ChoiceDialog。第二个和第三个什么都没做。

这是我用来创建ChoiceDialog

的代码
ChoiceDialog<String> dialog = new ChoiceDialog<>("district", choices);
dialog.setTitle("Object Selection");
dialog.setHeaderText("Which object should the file inherit from?");
dialog.setContentText("Default Object:");

Stage dialogStage = (Stage) dialog.getDialogPane().getScene().getWindow();
dialogStage.getIcons().add(icon);
dialogStage.initOwner(stage);

Optional<String> response = dialog.showAndWait();
response.ifPresent(chosen ->
{
    //It does something...
});

ChoiceDialog

Dialog<ObservableList<DataFilter>> dialog = new Dialog<>();
dialog.getDialogPane().setPrefSize(620, 430);
dialog.setTitle("Field Filter");
dialog.getDialogPane().getButtonTypes().addAll(save_bt, cancel_bt);
dialog.initOwner(stage);
dialog.setResultConverter((ButtonType b) ->
{
    if (b == save_bt)
    {
        return FXCollections.observableArrayList(dataFilters);
    }
    return null;
 });

 Stage stage = (Stage) dialog.getDialogPane().getScene().getWindow();
 stage.getIcons().add(icon);

DialogPane

1 个答案:

答案 0 :(得分:0)

花了我一个小时的实验。其他几个选择器都在modena.css下的#34; STYLES FOR THE DEFAULT LISTVIEW-based COMBOBOX&#34;

.dialog-pane{
-fx-background-color: #7160DC;
   }
 .dialog-pane > *.button-bar > *.container{
 -fx-background-color: #7160DC;
  }
  .dialog-pane > .content .label{
  -fx-font-size: 15px;
  -fx-font-weight: bold;
   -fx-text-fill: orange;
   }
  .dialog-pane:header .header-panel{
   -fx-background-color: #9589DF;
    }
    .dialog-pane:header .header-panel .label{
    -fx-font-size: 18px;
    -fx-font-style: italic;
     }

   .button{
    -fx-background-color:black;
    -fx-text-fill:white;
    }

  .button:hover{     
  -fx-background-color:orange;
   -fx-text-fill:black;
   -fx-font-weight:bold; 
   }

   /* styles background of cover choice*/
   .combo-box {
  -fx-background-color: black;
  -fx-font-weight: bold;
   }
  /* styles text of cover choice*/
  .combo-box > .list-cell {
  -fx-text-fill: yellow;
  }

 .combo-box-popup > .list-view {
-fx-background-color:black;
-fx-background-insets: 0, 1;
-fx-effect: dropshadow( gaussian , rgba(0,0,0,0.2) , 12, 0.0 , 0 , 8 );
 }

.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet >  .list-cell {
-fx-padding: 4 0 4 5;
-fx-background: black;
}

.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet   
> .list-cell:filled:hover {
-fx-background-color: orange;
 -fx-text-fill: black;
 }

 //add the above .css file as stylesheet

ChoiceDialog dialog = new ChoiceDialog();
    dialog.setTitle("Confirmation");
    dialog.setContentText("Some Text");
    DialogPane dp = dialog.getDialogPane();
    dp.getStylesheets().add(getClass().getResource("myCssFile.css")
    .toExternalForm());
    Optional<String> result = dialog.showAndWait();