Làm cách nào để loại bỏ đường viền xung quanh ngăn chia trong JavaFX?

Question

Tôi đang sử dụng JavaFX SceneBuilder, nhưng tôi sẽ dán FXML dưới đây vì nó ngắn. Tôi có một cửa sổ rất đơn giản với một ngăn ngăn cách bên trong một ngăn neo. Đây là 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> 

Tôi đang sử dụng CSS sau đây:

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

Nó mang lại cho tôi một cửa sổ như thế này:

Tôi đã chơi xung quanh với cài đặt CSS được hiển thị here, nhưng có một vài điều tôi không hiểu:

1. Đường viền ở đâu tôi đã đánh dấu bằng mũi tên màu đỏ đến từ đâu?
2. Tại sao đặt -fx-border-style thành none làm cho -fx-border-color bị bỏ qua trong khi -fx-border-width vẫn có tác dụng (như đệm) về cách mọi thứ trông như thế nào?

Answer 1

Solution - Làm thế nào để loại bỏ một biên giới từ một chia Pane

Override định nghĩa màu -fx hộp biên giới nếu bạn không muốn biên giới để hiển thị:

split.setStyle("-fx-box-border: transparent;"); 

Chia Pane với Border Removed

Mẫu Mã

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(); 
    } 
} 

Câu trả lời cho câu hỏi bổ sung

đâu biên giới Tôi đã đánh dấu bằng mũi tên màu đỏ đến từ đâu?

Đây là kiểu nền trong biểu định kiểu css mặc định (caspian.css for JavaFX 2.2 hoặc modena.css for Java 8)).

Tại sao thiết lập kiểu đường viền -fx thành không làm cho màu đường viền -fx bị bỏ qua trong khi chiều rộng -fx-border vẫn có tác dụng (như đệm) về cách mọi thứ trông như thế nào?

Do đường viền của ngăn chia được hiển thị bằng định nghĩa nền chứ không phải định nghĩa đường viền. Tất cả các kiểu css điều khiển JavaFX mặc định đều hoạt động theo cách này. Chúng đặt nhiều hình nền phủ lên để thực hiện các kỹ thuật biên giới thay vì đặt thuộc tính đường viền rõ ràng.

Hiểu như thế nào Trả lời Tác phẩm

Mặc dù câu trả lời này thực sự chỉ là một lót đơn giản, tôi sẽ mất một thời gian để giải thích ở đây tại sao nó hoạt động. Xin lỗi nếu giải thích này bloats câu trả lời. Những người đã biết thông tin này có thể bỏ qua phần này của câu trả lời.

tôi vẫn đang gặp rắc rối tìm hiểu các khái niệm

Dành một chút thời gian đọc JavaFX css reference guide, một chút khô tôi biết, nhưng đọc cần thiết nếu bạn muốn hiểu JavaFX phong cách css.

Ngoài ra còn có official Oracle tutorial for css, nhưng nó sẽ không dạy bạn nhiều như đọc tài liệu tham khảo css và nghiên cứu các kiểu trang mặc định mà tôi đã liên kết trước đó.

tôi trích báo cáo có liên quan từ các tài liệu tham khảo css và trích dẫn chúng ở đây:

JavaFX có một tập hợp phong phú các phần mở rộng để CSS hỗ trợ các tính năng như nguồn gốc màu sắc, tra cứu tài sản, và nhiều màu sắc nền và đường viền cho một nút duy nhất. Những tính năng này thêm sức mạnh mới đáng kể cho các nhà phát triển và nhà thiết kế và được mô tả chi tiết trong tài liệu này.

Đường viền -fx-box được đặt thành trong suốt để loại bỏ đường viền, không thực sự là đường viền, đó là màu đã được áp dụng cho một trong nhiều hình nền cho phần tách cửa sổ.

Với màu tra cứu, bạn có thể tham chiếu đến bất kỳ thuộc tính màu nào khác được đặt trên nút hiện tại hoặc bất kỳ cha mẹ nào. Đây là một tính năng rất mạnh mẽ, vì nó cho phép một bảng màu chung được chỉ định trên cảnh sau đó được sử dụng trong suốt ứng dụng. Nếu bạn muốn thay đổi một trong những màu bảng màu đó, bạn có thể làm như vậy ở bất kỳ mức nào trong cây cảnh và nó sẽ ảnh hưởng đến nút đó và tất cả các phần tử của nó. Các màu nhìn lên không được nhìn lên cho đến khi chúng được áp dụng, vì vậy chúng sống và phản ứng với bất kỳ thay đổi kiểu nào có thể xảy ra, chẳng hạn như thay thế màu bảng màu khi chạy với thuộc tính "kiểu" trên nút.

Trong ví dụ sau, tất cả màu nền của tất cả các nút đều sử dụng màu tra cứu "abc".

.root { abc: #f00 }

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

Định nghĩa mặc định cho -fx hộp biên giới cho Java phong cách 8 modena.css là:

/* 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% 
); 

Kiểu dáng mặc định cho một split- cửa sổ là một "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; 
} 

Vì vậy, khi phân tích css, bạn có thể thấy rằng, đối với một cửa sổ phân tách không tập trung có hai nền được định nghĩa (như định nghĩa mới nhất hoặc cụ thể nhất của màu nền -fx cho .split-pane thắng các quy tắc ứng dụng kỳ lạ của css) . Nền bên trong có màu nền -fx và được chèn một pixel. Các nền bên ngoài có màu như -fx-box-border và không phải là inset. Đệm cho ngăn chia được đặt thành một pixel.Điều này ngăn nội dung ngăn chia tách ghi đè đường viền một pixel xung quanh nó.

Giải pháp trong câu trả lời này hoạt động bằng cách ghi đè định nghĩa màu tìm kiếm trong mã cụ thể cho một cá thể phân tách đã cho bằng cách sử dụng phương thức setStyle. Bằng cách đặt đường viền -fx-box thành trong suốt (mặc dù có lẽ null có thể được sử dụng như nhau và có thể hiệu quả hơn), đường viền được đặt thành không hiển thị (mặc dù nó vẫn ở đó và phần đệm cho nó vẫn còn) trong css ở 1 pixel).

sửa đổi tiếp theo của css (bằng cách áp dụng kiểu sử dụng của riêng bạn để ghi đè lên lớp mặc định phong cách chia cửa sổ) có thể loại bỏ một pixel đệm này nếu muốn:

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

Bây giờ tất cả dấu vết của biên giới là biến mất và nội dung của bạn được tự do lấp đầy toàn bộ khu vực của ngăn chia bao gồm khu vực 1 pixel nơi đường viền được sử dụng. Tôi thích sự thay đổi tối thiểu chỉ cần thiết lập -fx-box-border thành transparent mặc dù vì các định nghĩa kiểu người dùng của bạn nhỏ và không chi tiết nhiều từ kiểu mặc định.

Ví dụ: set -fx-box-border: red; và bạn sẽ nhận được đường viền màu đỏ 1px xung quanh ngăn chia tách.

Đúng, đó là vì khu vực nền mặc định màu -fx-box-viền có màu chỉ rộng 1 pixel và bạn chỉ cần đặt màu pixel thành màu đỏ rõ ràng.

Tôi cho rằng đó là hộp viền trên thành phần đệm.

Không, như được mô tả ở trên là vì nền đường viền -fx-hộp một inset 0 pixel từ mép của khu vực và nền bên trong -fx-nền-màu được chèn 1 pixel từ cạnh của khu vực, để lại chiều rộng 1 pixel màu với đường viền -fx-box. Tất cả các -fx-padding đang làm trong trường hợp này là đảm bảo rằng nội dung ngăn chia của bạn không vẽ trên nền ngoài 1 pixel cho ngăn chia ngăn.

Sau đó đặt -fx-padding: 5; chia nhỏ. Đường viền hộp màu đỏ biến mất và một đường viền màu xám khác xuất hiện.

"Đường viền màu xám" luôn ở đó - đó là nền thứ hai, bên trong được xác định trong kiểu css ngăn ngăn kéo (hình nền -fx). Và màu nền -fx mặc định có màu xám. Bằng cách thiết lập -fx-padding thành 5 bạn đang nói để chèn nội dung của ngăn chia 5 pixel từ cạnh ngoài của vùng phân tách. Điều này cho phép nền mặc định hiển thị qua.

Nếu nội dung của bạn có một số khu vực trong suốt và không lấp đầy toàn bộ khu vực có sẵn của cửa sổ ngăn, thì bạn cũng sẽ thấy màu xám-nền màu này hiển thị trong các khu vực trong suốt đó.

Nếu những gì bạn muốn là để đạt được một biên giới 5 điểm ảnh xung quanh nội dung của bạn trong -fx-box-đường viền màu sau đó bạn sẽ cần phải điều chỉnh cả đệm và insets biên giới, ví dụ:

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

Nếu phân tích thủ công của padding, background insets, quy tắc derivation derivation, vv cho một ứng dụng lớn có vẻ như nó sẽ gây khó khăn, biết rằng có hỗ trợ công cụ để giúp hiểu cả cấu trúc đồ thị khung cảnh và ứng dụng css.Các công cụ để sử dụng là SceneBuilder's css analyzer để phân tích thời gian thiết kế css và ScenicView cho scenegraph thời gian chạy và phân tích css.