解決策 - 分割ペインから境界線を削除する方法
境界線を表示したくない場合は、-fx-box-border の色定義をオーバーライドします。
split.setStyle("-fx-box-border: transparent;");
境界線が削除された分割ペイン
サンプルコード
import javafx.application.Application;
import javafx.scene.*;
import javafx.scene.control.SplitPane;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
public class SplitPaneBorderRemover extends Application {
public static void main(String[] args) throws Exception { launch(args); }
@Override public void start(final Stage stage) throws Exception {
StackPane r1 = new StackPane();
r1.setPrefSize(200, 150);
r1.setStyle("-fx-background-color: palegreen;");
StackPane r2 = new StackPane();
r2.setPrefSize(200, 150);
r2.setStyle("-fx-background-color: coral;");
SplitPane split = new SplitPane();
split.getItems().setAll(
r1, r2
);
split.setStyle("-fx-box-border: transparent;");
StackPane layout = new StackPane();
layout.getChildren().setAll(split);
layout.setStyle("-fx-padding: 20px; -fx-background-color: cornsilk");
stage.setScene(new Scene(layout));
stage.show();
}
}
追加の質問への回答
赤い矢印でマークした境界線はどこから来るのですか?
これは、デフォルトの css スタイルシート ( JavaFX 2.2 の場合は caspian.css、Java 8 の場合は modena.css)の背景スタイルです。
-fx-border-style を none に設定すると、-fx-border-color が無視されるのに、-fx-border-width には見た目への影響 (パディングなど) があるのはなぜですか?
分割ペインの境界は、境界定義ではなく背景定義を使用して表示されるためです。すべてのデフォルト JavaFX コントロール css スタイルはこのように機能します。明示的な境界属性を設定するのではなく、複数のオーバーレイ背景を設定して、境界技術を実現します。
答えの仕組みを理解する
この答えは実際には単純な 1 つのライナーにすぎませんが、ここでそれが機能する理由を説明するのに少し時間がかかります。この説明が答えを膨らませている場合は申し訳ありません。この情報をすでに知っている人は、回答のこの部分を無視できます。
コンセプトがいまいち理解できない
少し時間をかけて JavaFX css リファレンス ガイドを読んでください。私は知っていますが、JavaFX css スタイリングを理解したい場合は不可欠です。
css に関する公式の Oracle チュートリアルもありますが、css リファレンスを読んだり、以前にリンクしたデフォルトのスタイル シートを調べたりするほどのことは教えてくれません。
css リファレンスから関連するステートメントを抽出し、ここに引用しました。
JavaFX には、色の派生、プロパティの検索、単一ノードの複数の背景色と境界線などの機能をサポートする、CSS に対する豊富な拡張セットがあります。これらの機能は、開発者と設計者に重要な新しい機能を追加します。詳細については、このドキュメントで説明します。
境界線を削除するために透明に設定されている -fx-box-border は、実際には境界線ではなく、分割ペインの複数の背景の 1 つに適用されたルックアップ カラーです。
ルックアップされた色を使用すると、現在のノードまたはその親に設定されている他の色プロパティを参照できます。これは非常に強力な機能です。シーンで指定された汎用カラー パレットをアプリケーション全体で使用できるからです。これらのパレット カラーの 1 つを変更したい場合は、シーン ツリーの任意のレベルで行うことができ、そのノードとそのすべての子孫に影響します。ルックアップされた色は、適用されるまでルックアップされないため、ライブであり、実行時にパレットの色をノードの「スタイル」プロパティに置き換えるなど、発生する可能性のあるスタイルの変更に反応します。
次の例では、すべてのボタンのすべての背景色で、検索された色「abc」が使用されています。
.root { abc: #f00 }
.button { -fx-background-color: abc }
Java 8 modena.css スタイルの -fx-box-border のデフォルト定義は次のとおりです。
/* A little darker than -fx-color and used to draw boxes around objects such
* as progress bars, scroll bars, scroll panes, trees, tables, and lists.
*/
-fx-box-border: ladder(
-fx-color,
black 20%,
derive(-fx-color,-15%) 30%
);
分割ペインのデフォルトのスタイリングは、「Box Like Thing」です。
/* ==== BOX LIKE THINGS ================================================= */
.scroll-pane,
.split-pane,
.list-view,
.tree-view,
.table-view,
.tree-table-view,
.html-editor {
-fx-background-color: -fx-box-border, -fx-control-inner-background;
-fx-background-insets: 0, 1;
-fx-padding: 1;
}
. . .
/* ones with grey -fx-background not lighter -fx-control-inner-background */
.scroll-pane,
.split-pane {
-fx-background-color: -fx-box-border, -fx-background;
}
そのため、css を分析すると、焦点が合っていない分割ペインの場合、2 つの背景が定義されていることがわかります (.split-pane の -fx-background-color の最新または最も具体的な定義が css の奇妙なアプリケーション ルールに勝つため)。内側の背景は -fx-background として色付けされ、1 ピクセルはめ込まれます。外側の背景は -fx-box-border として色付けされ、挿入されません。分割ペインのパディングは 1 ピクセルに設定されます。これにより、分割されたペインのコンテンツが周囲の 1 ピクセルの境界線を上書きするのを防ぎます。
この回答の解決策は、 setStyle メソッドを使用して、特定の分割ペイン インスタンス専用のコードでルックアップ カラー定義をオーバーライドすることで機能します。-fx-box-border を透明に設定することにより (おそらく null も同様に使用でき、より効率的である可能性があります)、境界線は表示されないように設定されます (境界線がまだ存在し、そのパディングが残っている場合でも)。 css で 1 ピクセル)。
css をさらに変更すると (独自のユーザー スタイルシートを適用してデフォルトの分割ペイン スタイル クラスをオーバーライドすることにより)、必要に応じてこの 1 ピクセルのパディングを削除できます。
.split-pane {
-fx-background-color: -fx-control-inner-background;
-fx-background-insets: 0;
-fx-padding: 0;
}
これで、境界線の痕跡はすべてなくなり、コンテンツは、境界線があった 1 ピクセル領域を含む分割ペインの領域全体を自由に埋めることができます。-fx-box-border を透明に設定するだけの最小限の変更を好みますが、ユーザースタイルの定義が小さく、デフォルトのスタイルから多くの詳細が得られないためです。
たとえば、-fx-box-border: red; を設定します。分割ペインの周りに 1px の赤い境界線が表示されます。
そうです、それは -fx-box-border 色が着色しているデフォルトの背景領域が 1 ピクセル幅しかなく、ピクセルの色を明示的に赤に設定したからです。
パディングコンポーネントのボックスボーダーだと思います。
いいえ、上記の理由は、背景 -fx-box-border が領域の端から 0 ピクセルのインセットであり、内側の背景 -fx-background-color が領域の端から 1 ピクセルのインセットであるためです。 -fx-box-border で色付けされた 1 ピクセル幅を残します。このインスタンスで -fx-padding が行っているのは、分割ペインのコンテンツが分割ペインの 1 ピクセルの外側の背景の上に描画されないようにすることだけです。
次に、-fx-padding: 5; を設定します。スプリットで。赤いボックスの境界線が消え、別の灰色の境界線が表示されます。
「灰色の境界線」は常にそこにありました。これは、分割ペイン css スタイル (-fx-background のもの) で定義された 2 番目の内側の背景です。デフォルトの -fx-background カラーはグレーです。-fx-padding を 5 に設定すると、分割ペイン領域の外側の端から 5 ピクセルの位置に分割ペインのコンテンツを挿入することになります。これにより、デフォルトの背景が透けて見えるようになります。
コンテンツにいくつかの透明な領域があり、分割ペインの使用可能な領域全体を埋めていない場合、この灰色の -fx-background-color 色がそれらの透明な領域に透けて見えることもあるでしょう。
-fx-box-border color でコンテンツの周囲に 5 ピクセルの境界線を作成したい場合は、パディングと境界線のインセットの両方を調整する必要があります。次に例を示します。
.split-pane {
-fx-background-color: -fx-box-border, -fx-control-inner-background;
-fx-background-insets: 0, 5;
-fx-padding: 5;
}
大規模なアプリケーションのパディング、バックグラウンド インセット、CSS スタイル派生ルールなどを手動で分析するのは大変だと思われる場合は、シーン グラフ構造と CSS アプリケーションの両方を理解するのに役立つツール サポートがあることを知っておいてください。使用するツールは、設計時の css 分析用の SceneBuilder の css アナライザーと、実行時のシーングラフおよび css 分析用のScenicViewです。
