JavaFX的窗格：製作一個1像素邊框

Question

我掙扎，無疑將有買一說明書，瞭解JavaFX的CSS，或JavaFX CSS Reference Guide ...

但我想要做的是做一個1個像素圍繞我的一些節點（如一側的TableView或ScrollPane）和另一側的GridPane或ScrollPane與我正在處理的Scene相鄰。我說「或」，因爲我會選擇其中一個。哈哈！ （並且不管它是否充滿了控件） 乾杯。

Answer 1

下面是一些demoing方式，使邊界在CSS測試樣品：

import javafx.application.Application; 
import javafx.geometry.Insets; 
import javafx.scene.Scene; 
import javafx.scene.control.ScrollPane; 
import javafx.scene.control.TableColumn; 
import javafx.scene.control.TableView; 
import javafx.scene.layout.GridPane; 
import javafx.scene.layout.HBox; 
import javafx.stage.Stage; 

public class TableViewBorderTest extends Application { 

    @Override 
    public void start(Stage primaryStage) { 

     HBox root = new HBox(5); 
     TableView<String> table = new TableView<>(); 
     table.getColumns().add(new TableColumn<String, String>("Data")); 

     ScrollPane scroller = new ScrollPane(); 
     scroller.setMinWidth(200); 

     GridPane grid = new GridPane(); 
     grid.setMinWidth(200); 
     grid.getStyleClass().add("grid"); 

     root.getChildren().addAll(table, scroller, grid); 
     // padding so we can easily see borders: 
     root.setPadding(new Insets(10)); 

     Scene scene = new Scene(root); 
     scene.getStylesheets().add("border-table.css"); 
     primaryStage.setScene(scene); 
     primaryStage.show(); 

     // remove focus from tables 
     root.requestFocus(); 

    } 

    public static void main(String[] args) { 
     launch(args); 
    } 
} 

你可以只是一個空文件border-table.css運行此。首先要注意的事情是，表視圖和滾動面板已經具有中等灰色（而不是默認的背景稍暗）1像素的邊界：

這個邊界被定義（見以後怎麼）在默認樣式表modena.css中設置爲"looked-up color"，名爲-fx-box-border。只是爲了演示的目的，使之更容易看到邊框，您可以重新分配這個顏色與border-table.css如下：

.root { 
    -fx-box-border: red ; 
} 

這給

注意到表格標題和列標題使用與邊框相同的顏色。如果與第一張圖像進行比較，您可能也會更清楚地看到邊框。

要替換表視圖和滾動窗格中的邊框，可以在css文件中定義邊框。最簡單但不一定是最好的方法是定義一個-fx-border-color。用以下替換border-table.css：

.table-view, .scroll-pane { 
    -fx-border-color: green ; 
} 

的-fx-border-width的默認值是1，所以這給出了一個像素的綠色邊框：

對於GridPane，注意它有沒有默認邊框，也沒有樣式類（see CSS docs）。剛剛加入這個樣式類選擇

grid.getStyleClass().add("grid"); 

因此我們可以添加相同的邊框：

.table-view, .scroll-pane, .grid { 
    -fx-border-color: green ; 
} 

它在Java代碼中，我定義了它的樣式類有趣的是，默認樣式表modena.css根本不使用-fx-border-...屬性。相反，它通過創建兩個（或更多）「嵌套背景」來創建邊界。例如，它具有：

.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; 
} 

這定義，對於TableView，ScrollPane，以及其他類似的控制，兩個背景色。第一個（如此繪製的第一個，即下面）是查找顏色-fx-box-border中的固體背景填充，第二個（繪製在上面）是填充查找顏色-fx-control-inner-background的純色背景填充。第一個背景填充有0個插圖，第二個背景填充爲1像素，這意味着底部背景填充對於控件邊緣周圍的1個像素寬度將是可見的。 （填充確保沒有任何東西放置在這個有效的1像素邊框上。）

我還沒有測試過這一點，但它聲稱嵌套背景方法比繪製邊框更有效率（我猜本機圖形是快速在矩形背景填充）。

所以，你可以使用相同的方法，並與

.table-view, .scroll-pane { 
    -fx-background-color: blue, -fx-control-inner-background ; 
    -fx-background-insets: 0, 1 ; 
} 

.grid { 
    -fx-background-color: blue, -fx-background ; 
    -fx-background-insets: 0, 1 ; 
    -fx-padding : 1 ; 
} 

取代border-table.css你甚至可以引入一個查到的顏色，使其更容易修改應用程序的風格：

.root { 
    -my-border: blue ; 
} 

.table-view, .scroll-pane { 
    -fx-background-color: -my-border, -fx-control-inner-background ; 
    -fx-background-insets: 0, 1 ; 
} 

.grid { 
    -fx-background-color: -my-border, -fx-background ; 
    -fx-background-insets: 0, 1 ; 
    -fx-padding : 1 ; 
} 

（這和前面的效果完全一樣，但是隻有一個地方可以改變顏色定義）兩個廣告）。

請注意，最後兩個版本會覆蓋默認的焦點邊框，默認的焦點邊框是在默認樣式表中通過定義不同的背景顏色集合來實現的。你可以恢復這些：

.root { 
    -my-border: blue ; 
} 

.table-view, .scroll-pane { 
    -fx-background-color: -my-border, -fx-control-inner-background ; 
    -fx-background-insets: 0, 1 ; 
} 

.table-view:focused, .scroll-pane:focused { 
    -fx-background-color: -fx-faint-focus-color, -fx-focus-color, -fx-control-inner-background; 
    -fx-background-insets: -1.4, -0.3, 1; 
    -fx-background-radius: 2, 0, 0; 
} 

.grid { 
    -fx-background-color: -my-border, -fx-background ; 
    -fx-background-insets: 0, 1 ; 
    -fx-padding : 1 ; 
} 

它引用兩個查到的顏色，-fx-faint-focus-color和-fx-focus-color（第一隻是一個第二的部分透明版）;當然如果你選擇的話，你可以重新定義這些爲你自己的焦點顏色。