如何擺脫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分析。