Wie entferne ich den Rahmen um einen geteilten Bereich in JavaFX?

Lösung - So entfernen Sie einen Rahmen aus einem geteilten Bereich

Überschreiben Sie die Farbdefinition -fx-box-border, wenn der Rahmen nicht angezeigt werden soll:

Geteilter Bereich mit gelöschtem Rahmen

Beispielcode

Antworten auf zusätzliche Fragen

  

Wo ist die Grenze, die ich mit dem roten Pfeil markiert habe?

Es ist ein Hintergrundstil im Standard-CSS-Stylesheet ( caspian.css für JavaFX 2.2 oder modena.css für Java 8) ).

  

Warum wird die Einstellung -fx-border-style auf none gesetzt, weil die -fx-border-color ignoriert wird, während die -fx-border-width immer noch einen Effekt hat (wie padding), wie die Dinge aussehen?

Weil der Rahmen des geteilten Bereichs mit einer Hintergrunddefinition anstelle einer Rahmendefinition angezeigt wird. Alle standardmäßigen JavaFX-Steuer-CSS-Stile funktionieren auf diese Weise. Sie legen mehrere überlagerte Hintergründe fest, um Randtechniken zu erreichen, anstatt ein explizites Rahmenattribut festzulegen.

Verstehen, wie die Antwort funktioniert

Obwohl diese Antwort wirklich nur ein einfacher Liner ist, werde ich mir etwas Zeit nehmen, um hier zu erklären, warum das funktioniert. Entschuldigung, wenn diese Erklärung die Antwort aufbläht. Diejenigen, die diese Information bereits kennen, können diesen Teil der Antwort ignorieren.

  

Ich habe immer noch Probleme, das Konzept zu verstehen

Nehmen Sie sich Zeit, um den CSS-Referenzleitfaden von JavaFX zu lesen , ein bisschen trocken, ich weiß, aber essentiell zu lesen, wenn Sie JavaFX css Styling verstehen wollen.

Es gibt auch ein offizielles Oracle Tutorial für CSS , aber es wird nicht gehen lehre dich genauso wie das Lesen der CSS-Referenz und das Studieren der Standard-Stylesheets, die ich zuvor verlinkt habe.

Ich extrahierte relevante Aussagen aus der CSS-Referenz und zitierte sie hier:

  

JavaFX verfügt über umfangreiche CSS-Erweiterungen zur Unterstützung von Funktionen wie Farbableitung, Eigenschaftensuche und mehreren Hintergrundfarben und Rahmen für einen einzelnen Knoten. Diese Funktionen bieten Entwicklern und Designern eine erhebliche neue Leistungsfähigkeit und werden in diesem Dokument ausführlich beschrieben.

Der -fx-box-border, der auf Transparent gesetzt ist, um den Rahmen zu entfernen, ist eigentlich kein Rahmen, sondern eine nachgeschlagene Farbe, die auf einen von mehreren Hintergründen für den geteilten Bereich angewendet wurde / p>

  

Mit nachgeschlagenen Farben können Sie auf jede andere Farbeigenschaft verweisen, die auf dem aktuellen Knoten oder einem seiner Eltern festgelegt ist. Dies ist eine sehr mächtige Funktion, da es erlaubt, eine allgemeine Palette von Farben in der Szene festzulegen, die dann in der Anwendung verwendet wird. Wenn Sie eine dieser Palettenfarben ändern möchten, können Sie dies auf jeder Ebene im Szenenbaum tun, und dies wirkt sich auf diesen Knoten und alle seine Vorgänger aus. Nachgeschaltete Farben werden nicht nachgeschlagen, bis sie angewendet werden, sodass sie aktiv sind und auf alle möglichen Stiländerungen reagieren, z. B. das Ersetzen einer Palettenfarbe zur Laufzeit durch die Eigenschaft "style" auf einem Knoten.

     

Im folgenden Beispiel verwendet die Hintergrundfarbe aller Schaltflächen die nachgeschlagene Farbe "abc".

     

.root { abc: #f00 }

     

.button { -fx-background-color: abc }

Die Standarddefinition für -fx-box-border für den Java 8-Modus modena.css lautet:

Der Standard-Stil für ein Split-Fenster ist ein "Box Like Thing":

Wenn Sie also die CSS analysieren, können Sie sehen, dass für ein unfokussiertes Split-Fenster zwei Hintergründe definiert sind (die neueste oder spezifischste Definition von -fx-Hintergrundfarbe für .split-panel) gewinnt die seltsamen Anwendungsregeln von css ). Der innere Hintergrund ist als -fx-Hintergrund eingefärbt und wird mit einem Pixel eingefügt. Der äußere Hintergrund hat die Farbe -fx-box-border und ist nicht eingelassen. Die Auffüllung für das geteilte Fenster ist auf ein Pixel eingestellt. Dies verhindert, dass der Inhalt des geteilten Bereichs den einen Pixelrahmen um ihn herum überschreibt.

Die Lösung in dieser Antwort überschreibt die Look-Up-Farbdefinition im Code speziell für eine gegebene Splitpane-Instanz mit der setStyle-Methode. Wenn Sie den Parameter -fx-box-border auf transparent setzen (obwohl vielleicht auch null verwendet werden könnte und effizienter sein könnte), wird der Rahmen als nicht sichtbar festgelegt (obwohl er immer noch vorhanden ist und der Füllbereich für ihn bleibt) in der CSS bei 1 Pixel).

Eine weitere Modifikation der CSS (indem Sie Ihr eigenes Benutzer-Stylesheet anwenden, um die standardmäßige Split-Panel-Stilklasse zu überschreiben) könnte dieses eine Pixel-Padding entfernen, falls gewünscht:

Jetzt ist die gesamte Spur des Rahmens verschwunden und Ihr Inhalt ist frei, um den gesamten Bereich des geteilten Bereichs einschließlich des 1-Pixel-Bereichs, in dem sich die Grenze befand, zu füllen. Ich bevorzuge die minimale Änderung, indem ich nur den -fx-box-Rahmen auf transparent setze, weil dann die Definitionen für den Benutzer-Stil klein sind und nicht viel vom Standard-Stil unterscheiden.

  

Beispiel: -fx-box-border: red; und Sie erhalten einen 1px roten Rahmen um das geteilte Fenster.

Das liegt daran, dass der standardmäßige Hintergrundbereich, in dem die Farbe -fx-box-border eingefärbt wird, nur 1 Pixel breit ist und Sie gerade die Pixelfarbe explizit auf rot gesetzt haben.

  

Ich nehme an, es ist der Rahmen der Padding-Komponente.

Nein, wie oben beschrieben, liegt der Grund daran, dass der Hintergrund der -fx-Box-Grenze einen Einschub von 0 Pixeln von der Kante der Region und der innere Hintergrund -fx-Hintergrundfarbe von der Kante von 1 Pixel einfügt Die Region bleibt 1 Pixel breit und wird mit dem -fx-Box-Rand eingefärbt. Alles, was das -fx-Padding in diesem Fall tut, stellt sicher, dass Ihr geteilter Fensterinhalt nicht über den äußeren Hintergrund von 1 Pixel für das geteilte Fenster hinausragt.

  

Dann setze -fx-padding: 5; auf Spaltung. Der rote Rahmen verschwindet und ein weiterer grauer Rahmen erscheint.

Der "graue Rahmen" war immer da - es ist der zweite, innere Hintergrund, der im CSS-Stil des Split-Bereichs definiert wurde (der -fx-Hintergrund). Und die Standardfarbe -fx-background ist grau. Wenn Sie -fx-padding auf 5 setzen, sagen Sie, dass Sie den Inhalt des geteilten Bereichs 5 Pixel von der äußeren Kante der Splitpane-Region einfügen. Dadurch kann der Standardhintergrund angezeigt werden.

Wenn Ihr Inhalt einige transparente Bereiche hatte und nicht den gesamten verfügbaren Bereich des geteilten Bereichs ausfüllte, hätten Sie auch diese grau-fx-Hintergrundfarbe in diesen transparenten Bereichen durchscheinen sehen.

Wenn Sie einen 5-Pixel-Rahmen um Ihren Inhalt in der Farbe "-fx-box-border" erreichen wollten, müssten Sie sowohl die Auffüllung als auch die Rahmeneinsätze anpassen, zum Beispiel:

Wenn die manuelle Analyse von Padding, Hintergrundeinfügungen, CSS-Stil-Ableitungsregeln usw. für eine große Anwendung so abschreckend erscheint, wissen Sie, dass es Werkzeugunterstützung gibt, um sowohl die Szenegraphenstruktur als auch die CSS-Anwendung zu verstehen. Die zu verwendenden Tools sind Css-Analysator von SceneBuilder für die Analyse der Entwurfszeit und ScenicView für die Szenengrafik und CSS-Analyse.