XPane is a simple panel that takes a contentNode and wraps it with a nice background and an optional title in a Caspian-friendly way (see the image below for several examples of the control). It handles resizing and clipping of content as it is resized so users don't have to worry about using it by itself or in a container. Usage is simple:

XPane {
 contentNode: Label { text: "Default Pane with a Label" }
}

The control's feature list is as follows:

• Designed to be easily stylable. It ties into Caspian to give it a nice default look. It also responds to the normal Caspian "base" style to change the title bar background. The content background is controlled by a simple "background" property. Set the background to a color and it generates a nice gradient for you (again using Caspian). Or you can set the background to a custom gradient.

• The title bar is optional and if present supports font resizing and a graphical node for an icon, image, or any node.

• Designed to work well with resizable content and inside of Containers.

• Supports optional clipping of its content.

• Supports padding for the content and the title text for ease of use, and of course, independently controlled rounded corners.

• Supports optionally dragging the panel by the title bar.

Examples

The following code shows how to create the XPane with the Shakespeare quote in the image above.

XPane {
    background: Color.LIGHTSALMON
    contentPadding: 10
    upperRightArc: 10
    lowerLeftArc: 10
    contentNode: Text {
        content: "\u201cWhat's in a name? That which we call a rose "
                      "By any other name would smell as sweet.\u201d"
        style: "font-size: 14pt; fill: maroon;"
        wrappingWidth: 320
    }
    effect: DropShadow { offsetX: 3 , offsetY: 6, radius: 6, color: Color.DARKGRAY }
}

Setting colors and adding a title are similarly easy.

XPane {
    title: "Styled Draggable Pane"
    style: "base: green; background: lemonchiffon"
    draggable: true
    closable: true
    upperLeftArc: 10
    upperRightArc: 10
    layoutInfo: nodeConstraints( "w 200, h 200" )
}

Notice that setting colors for the base and background colors will automatically generate a gradient based on those colors.

Also note the usage of the closable and draggable properties to enable those features of the XPane.

Styling

The following properties can be styled on an XPane.

• base The color of the title bar, if present.
• backbround The background color or gradient of the content area. If a color is specified, a gradient will be generated automatically.
• titlePadding The left and right padding for the title bar.
• contentPadding The left, right, top, and bottom padding for the content area.
• upperLeftArc The radius of the upper left corner of the XPane. Can be 0 for a square corner.
• upperRightArc The radius of the upper right corner of the XPane. Can be 0 for a square corner.
• lowerLeftArc The radius of the lower left corner of the XPane. Can be 0 for a square corner.
• lowerRightArc The radius of the lower right corner of the XPane. Can be 0 for a square corner.

Known Limitations

Due to a limitation in the styling engine of JavaFX, nodes placed inside of a control do not get style sheet styles applied to them. Therefore, the only way to style a contentNode is by using Node's style property.