如何摆脱JavaFX中拆分窗格周围的边框？

Question

我正在使用JavaFX SceneBuilder，但由于它很短，我将粘贴下面的FXML。我有一个非常简单的窗口，在锚窗格中有一个分割窗格。这里是FXML：

<?xml version="1.0" encoding="UTF-8"?> 

<AnchorPane id="AnchorPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns:fx="http://javafx.com/fxml"> 
    <children> 
    <SplitPane id="main-split-pane" dividerPositions="0.25" focusTraversable="true" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" prefHeight="-1.0" prefWidth="-1.0" style="" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0"> 
     <items> 
     <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="100.0" style="" /> 
     <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="100.0" /> 
     </items> 
    </SplitPane> 
    </children> 
    <padding> 
    <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" /> 
    </padding> 
    <stylesheets> 
    <URL value="@main-view.css" /> 
    </stylesheets> 
</AnchorPane> 

我用下面的CSS：

#main-split-pane { 
    -fx-border-style: none; 
    -fx-border-color: blue; 
    -fx-border-width: 25; 
} 

它给了我一个窗口是这样的：

我周围玩CSS设置显示为here，但有几件事我很难理解：

1. 我用红色箭头标出的边界在哪里？
2. 为什么将-fx-border-style设置为none导致-fx-border-color被忽略，而-fx-border-width仍然对事物的外观有影响（如填充）？

Answer 1

解决方案 - 如何从一个拆分窗格

覆盖删除边框-fx盒，边框颜色定义，如果你不希望边框显示：

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样式表（caspian.css for JavaFX 2.2或modena.css for Java 8)）背景风格。

为什么将-fx-border-style设置为none会导致忽略-fx-border-color，而-fx-border-width仍然对事物的外观有效（如填充）？

因为拆分窗格的边框使用背景定义而不是边框​​定义显示。所有默认的JavaFX控件CSS样式都以这种方式工作。他们设置多个叠加背景来完成边框技术，而不是通过设置明确的边框属性。

了解答案如何运作

虽然这个答案其实只是一个简单的衬垫，我会花一些时间在这里解释为什么它的工作原理。对不起，如果这个解释膨胀了答案。那些已经知道这些信息的人可以忽略这部分答案。

我还在，如果你想了解JavaFX的CSS样式很难理解的概念

花一些时间阅读了JavaFX css reference guide，有点干，我知道，但必不可少的读物。

还有一个official Oracle tutorial for css，但它不会像阅读css参考资料和研究我之前链接的默认样式表那样。

我提取CSS参考有关报表，在这里引用它们：

JavaFX的有支持的功能，如颜色推导，财产查找，以及多个背景颜色和边框一组丰富的扩展CSS的为单个节点。这些功能为开发人员和设计人员增添了重要的新功能，并在本文档中进行了详细介绍。

被设置为透明删除边框的-fx箱边界，是不是一个真正的边界可言，这是已被应用到多个背景之一的分裂一抬头颜色窗格。

使用查找的颜色，可以引用在当前节点或其父节点上设置的任何其他颜色属性。这是一个非常强大的功能，因为它允许在场景中指定颜色的通用调色板，然后在应用程序中使用。如果您想要更改其中一种调色板颜色，您可以在场景树中的任何级别进行调整，并且会影响该节点及其所有后代。查找的颜色在应用之前不会查找，因此它们处于活动状态并对可能发生的任何样式更改作出反应，如在运行时用节点上的“style”属性替换调色板颜色。

在以下例子中，所有按钮中的所有背景颜色使用抬头颜色“ABC”。

.root { abc: #f00 }

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

为-fx箱边界为Java 8个modena.css风格的默认定义是：

/* 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 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，你可以看到，对于一个未聚焦的拆分窗格，定义了两个背景（作为.split-pane的-fx-background-color的最新或最具体的定义，可以赢得css的奇怪应用程序规则） 。内部背景被着色为-fx-背景并且嵌入一个像素。外部背景被着色为-fx-box-border并且不是嵌入。分割窗格的填充设置为一个像素。这可以防止拆分窗格内容覆盖它周围的一个像素边框。

此答案中的解决方案通过使用setStyle方法覆盖查找颜色定义的代码专门为给定的splitpane实例工作。通过将-fx-box-border设置为透明（尽管可能null也可以被同样使用并且效率可能更高），边框被设置为不可见（即使它仍然存在并且其填充仍然存在在1像素的CSS）。

的CSS（通过应用自己的用户样式表来覆盖默认的拆分窗格样式类）的进一步的修改可能如果需要删除此一个像素填充：

.split-pane { 
    -fx-background-color: -fx-control-inner-background; 
    -fx-background-insets: 0; 
    -fx-padding: 0; 
} 

现在边境的所有痕迹都消失并且您的内容可以自由填充拆分窗格的整个区域，包括曾经是边框的1个像素区域。我更喜欢只是将-fx-box-border设置为透明的最小改变，因为那时你的用户风格定义很小，并且没有详细说明很多默认风格。

例如，set -fx-box-border：red;并且您将在拆分窗格周围获得1px的红色边框。

是的，这是因为默认背景区-fx-box-border颜色着色只有1个像素宽，并且您刚刚明确地将像素颜色设置为红色。

我认为这是填充组件的框边框。

不，如上所述，原因是因为背景-fx-box-border从区域边缘和内部背景0像素的插入物和内部背景-fx-background-color插入1像素该区域的边缘留下1像素宽度，用-fx-box边框着色。所有-fx-padding在此实例中都在确保您的拆分窗格内容不会为拆分窗格绘制1像素外部背景。

然后设置-fx-padding：5;在分裂。红色边框消失，另一个灰色边框出现。

“灰色边框”总是存在 - 它是第二个在分割窗格css风格（-fx-background）中定义的内部背景。默认的-fx-背景颜色是灰色的。通过将-fx-padding设置为5，您正在说插入Splitpane区域外边缘5个像素的分割窗格的内容。这允许默认背景显示。

如果您的内容具有某些透明区域并且未填充拆分窗格的整个可用区域，那么您也会在这些透明区域中看到这种灰色-fx-背景色彩色。

如果你想要的是实现绕-fx箱，边框颜色你的内容有5像素的边框，那么你就需要调整两个填充和边框镶石，例如：

.split-pane { 
    -fx-background-color: -fx-box-border, -fx-control-inner-background; 
    -fx-background-insets: 0, 5; 
    -fx-padding: 5; 
} 

如果对大型应用程序的填充，背景插页，css样式派生规则等进行手动分析似乎会令人望而生畏，请了解有工具支持来帮助理解场景图结构和css应用程序。使用的工具是SceneBuilder's css analyzer用于设计时间CSS分析，ScenicView用于运行时场景图和CSS分析。