JavaFX - 在 TableView 中拖动 TableColumn 时更改蓝线的颜色
JavaFX - Change color of blue line when dragging TableColumn in a TableView
每次我拖动一列时,我都会在整列中看到一条蓝线。 我知道我可以通过设置 -fx-background-insets: 0;
来删除它,但我不知道该把它放在哪里。 这条线只拖的时候出现,不拖也没事
我目前的CSS
如下:
.table-view .column-header,
.table-view .filler,
.table-view .column-header-background .show-hide-columns-button {
-fx-background-color: white;
}
.table-view .column-header {
-fx-border-color: grey;
-fx-border-width: 0 1 0 0;
}
.table-view .column-header-background {
-fx-border-color: grey;
-fx-border-width: 0 0 1 0;
}
.table-view .show-hide-column-image {
-fx-background-color: black;
}
.table-view .column-drag-header,
.table-view .column-overlay {
-fx-background-color: green;
}
.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled:selected,
.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell .table-cell:selected {
-fx-background-color: darkgrey;
-fx-table-cell-border-color: grey;
}
.table-cell {
-fx-border-color: grey;
-fx-border-width: 0 1 0 0;
-fx-text-fill: black;
}
.table-row-cell:focused {
-fx-background-insets: 0;
}
.table-row-cell:selected .table-cell {
-fx-text-fill: black;
}
我在 modena.css
中看到的关于此 "drag-event" 的唯一信息是:
/* When a column is being 'dragged' to be placed in a different position, there
is a region that follows along the column header area to indicate where the
column will be dropped. This region can be styled using the .column-drag-header
name. */
.table-view .column-drag-header,
.tree-table-view .column-drag-header {
-fx-background: -fx-accent;
-fx-background-color: -fx-selection-bar;
-fx-border-color: transparent;
-fx-opacity: 0.6;
}
/* Semi-transparent overlay to indicate the column that is currently being moved */
.table-view .column-overlay,
.tree-table-view .column-overlay {
-fx-background-color: darkgray;
-fx-opacity: 0.3;
}
我试着把它放在两个地方,像这样:
.table-view .column-drag-header,
.table-view .column-overlay {
-fx-background-insets:0;
}
但是没有效果。
我想也许这个 "region" 是有插图的,正是因为它才出现蓝线,但我找不到它在哪里,或者至少找不到它在 CSS
.
编辑: 将问题更改为 "changing the color" 而不是删除它,因为这似乎是更好的方法。 kleopatra 在评论中提供了更改颜色的解决方案。
.table-view .column-resize-line {
-fx-background-color: red;
}
从 Modena.css 开始,CSS class .column-resize-line
可用于 TableView
和 TreeTableView
:
/* The column-resize-line is shown when the user is attempting to resize a column. */
.table-view .column-resize-line,
.tree-table-view .column-resize-line {
-fx-background: -fx-accent;
-fx-background-color: -fx-background;
-fx-padding: 0.0em 0.0416667em 0.0em 0.0416667em; /* 0 0.571429 0 0.571429 */
}
每次我拖动一列时,我都会在整列中看到一条蓝线。 我知道我可以通过设置 这条线只拖的时候出现,不拖也没事-fx-background-insets: 0;
来删除它,但我不知道该把它放在哪里。
我目前的CSS
如下:
.table-view .column-header,
.table-view .filler,
.table-view .column-header-background .show-hide-columns-button {
-fx-background-color: white;
}
.table-view .column-header {
-fx-border-color: grey;
-fx-border-width: 0 1 0 0;
}
.table-view .column-header-background {
-fx-border-color: grey;
-fx-border-width: 0 0 1 0;
}
.table-view .show-hide-column-image {
-fx-background-color: black;
}
.table-view .column-drag-header,
.table-view .column-overlay {
-fx-background-color: green;
}
.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled:selected,
.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell .table-cell:selected {
-fx-background-color: darkgrey;
-fx-table-cell-border-color: grey;
}
.table-cell {
-fx-border-color: grey;
-fx-border-width: 0 1 0 0;
-fx-text-fill: black;
}
.table-row-cell:focused {
-fx-background-insets: 0;
}
.table-row-cell:selected .table-cell {
-fx-text-fill: black;
}
我在 modena.css
中看到的关于此 "drag-event" 的唯一信息是:
/* When a column is being 'dragged' to be placed in a different position, there
is a region that follows along the column header area to indicate where the
column will be dropped. This region can be styled using the .column-drag-header
name. */
.table-view .column-drag-header,
.tree-table-view .column-drag-header {
-fx-background: -fx-accent;
-fx-background-color: -fx-selection-bar;
-fx-border-color: transparent;
-fx-opacity: 0.6;
}
/* Semi-transparent overlay to indicate the column that is currently being moved */
.table-view .column-overlay,
.tree-table-view .column-overlay {
-fx-background-color: darkgray;
-fx-opacity: 0.3;
}
我试着把它放在两个地方,像这样:
.table-view .column-drag-header,
.table-view .column-overlay {
-fx-background-insets:0;
}
但是没有效果。
我想也许这个 "region" 是有插图的,正是因为它才出现蓝线,但我找不到它在哪里,或者至少找不到它在 CSS
.
编辑: 将问题更改为 "changing the color" 而不是删除它,因为这似乎是更好的方法。 kleopatra 在评论中提供了更改颜色的解决方案。
.table-view .column-resize-line {
-fx-background-color: red;
}
从 Modena.css 开始,CSS class .column-resize-line
可用于 TableView
和 TreeTableView
:
/* The column-resize-line is shown when the user is attempting to resize a column. */
.table-view .column-resize-line,
.tree-table-view .column-resize-line {
-fx-background: -fx-accent;
-fx-background-color: -fx-background;
-fx-padding: 0.0em 0.0416667em 0.0em 0.0416667em; /* 0 0.571429 0 0.571429 */
}