Controlsfx PopOverのスタイルとフォーカス

Question

私はPopoverを使っています。Popoverは、テキストフィールドのツールヒントヘルプディスプレイとして使用されています。 内容としてLabelとTextAreaが含まれており、ユーザーがテキストフィールドを入力すると作成されます。

（FocusPropery.addListener経由）私が使用してスタイルを適用します。

popOver.getRoot().getStylesheets().add(...) 

（ドキュメントdocumentationに見られるような）

これはTextAreaのが、唯一のpartialyラベルのために動作します。

*{ 
    -tb-dark-grey: rgb(32,38,44); 
} 

.root { 
    -fx-base: -tb-dark-grey; 
    -fx-background: -tb-dark-grey; 
    -fx-control-inner-background: -tb-dark-grey; 
} 

これは私のメインウィンドウには非常に良い作品：

私のスタイルは、このようになります。すべてのラベルとテキスト領域を含む。すべてが白いテキストで暗い青色の背景を取得します。 Popoverのラベルでは、テキストの色のみを白に変更しますが、背景は通常の明るいグレーのままです。

回避策としてTextAreaを使用してみました。これはスタイルのために働く。しかし、それは常にテキストフィールドからフォーカスを盗みます。これは何かを入力することが不可能になります。 TextAreaを無効にすると動作しますが、TextAreaのスタイルが変更されます。

私はすでにthis other questionにあるようなスタイルのリンゴを試してみました。 私はまた、フォーカスを取り戻そうとしましたが、これもうまくいきませんでした。

popup.Show(this.inputField) 
this.inputField.requestFocus(); // also tried this with Platform.runLater 

Answer 1

あなたの問題はLabelは、あなたの.rootスタイルクラスで上書きされている色のいずれかを使用していないということでなければなりません。 JavaFX CSS reference guideによれば、fx-background-colorを使用してLabelの背景をスタイルすることができます。

：あなたは異なったラベルのスタイルにしたい場合は、カスタムスタイルクラスを作成することにより、各ラベルごとに個別にスタイルを適用することができます

.label { 
    -fx-background-color: -tb-dark-grey; 
} 

：トリックを行う必要があり、あなたのスタイルシートに次の行を追加し

CSS：

.custom-label { 
    -fx-background-color: -tb-dark-grey; 
} 

そして、特定のラベルに適用する：

Label label = new Label("I am a label"); 
label.getStyleClass().add("custom-label"); 

編集：TextAreaには、スタイルシートで定義した正確な色が表示されないことにご注意ください。あなたがJavaFXのデフォルトのテーマとスタイルであるModenaスタイルシートをチェックした場合（その見つけ方はhereと記載されています）。あなたが見ることができるように

.text-area .content { 
    /*the is 1px less top and bottom than TextInput because of scrollpane border */ 
    -fx-padding: 0.25em 0.583em 0.25em 0.583em; /* 3 7 3 7 */ 
    -fx-cursor: text; 
    -fx-background-color: 
     linear-gradient(from 0px 0px to 0px 4px, derive(-fx-control-inner-background, -8%), -fx-control-inner-background); 
    -fx-background-radius: 2; 
} 

：あなたはTextArea内容については、以下のCSSを見つけます。 TextAreaのコンテンツの背景色は、スタイルシートで定義した-fx-control-inner-backgroundではありませんが、-fx-control-inner-backgroundから派生した色から希望の色になる直線グラデーションになります。これはあなたにとって目立つことさえないかもしれませんが、知っておくと良いかもしれません。

それは正確にあなたの色は次のように行うことができることであるので、TextArea背景の色を設定：

.text-area .content { 
    -fx-background-color: tb-dark-grey; 
}