style sheets

Definition

Contains various properties, states, and subcontrols that make it possible to customize the look of control.

Classes
class	xtd::forms::style_sheets::background_image
	The image data allows you to specify the url or gradient mode. More...
class	xtd::forms::style_sheets::border_color
	The xtd::forms::style_sheets::border_color is used to set the color of the borders. More...
class	xtd::forms::style_sheets::border_radius
	The radius is used to add rounded borders to an element. More...
class	xtd::forms::style_sheets::border_style
	The style specifies what kind of borders to display. More...
class	xtd::forms::style_sheets::control
	The control selector allows you to specify the box and color of a control. More...
class	xtd::forms::style_sheets::ibox_model
	The box model allows you to specify the margin, borders, padding, background color, width and height of a box. More...
class	xtd::forms::style_sheets::iimage_model
	The image model allows you to specify the alignment of an image. More...
class	xtd::forms::style_sheets::itext_model
	The text model allows you to specify the alignment, color, decoration, transformation, and font of a text. More...
class	xtd::forms::style_sheets::length
	The xtd::forms::style_sheets::length specifies the legth and unit of many properties of the xtd::forms::style_sheets::ibox_model. More...
class	xtd::forms::style_sheets::lengths
	The length specifies the length of the borders. More...
class	xtd::forms::style_sheets::shadow
	The style specifies the shadow of text and elements. More...
class	xtd::forms::style_sheets::style_sheet
	The xtd::forms::style_sheets::style_sheet allows you to specify an xtd style sheet. More...
class	xtd::forms::style_sheets::system_colors
	The theme data allows you to specify the theme informations. More...
class	xtd::forms::style_sheets::theme
	The theme data allows you to specify the theme informations. More...

Typedefs
using	xtd::forms::style_sheets::border_width = xtd::forms::style_sheets::lengths
	The width specifies the width of the borders.
using	xtd::forms::style_sheets::button = xtd::forms::style_sheets::control
	The buttton data allows you to specify the box of a button control.
using	xtd::forms::style_sheets::form = xtd::forms::style_sheets::control
	The form data allows you to specify the box of a form control.
using	xtd::forms::style_sheets::label = xtd::forms::style_sheets::control
	The label data allows you to specify the box of a label control.
using	xtd::forms::style_sheets::link_label = xtd::forms::style_sheets::control
	The link label data allows you to specify the box of a link label control.
using	xtd::forms::style_sheets::margin = xtd::forms::style_sheets::lengths
	Margins are used to create space around elements, outside of any defined borders.
using	xtd::forms::style_sheets::outline_color = xtd::forms::style_sheets::border_color
	The xtd::forms::style_sheets::outline_color is used to set the color of the outlines.
using	xtd::forms::style_sheets::outline_offset = xtd::forms::style_sheets::lengths
	The width specifies the width of the borders.
using	xtd::forms::style_sheets::outline_radius = xtd::forms::style_sheets::border_radius
	The radius is used to add rounded outlines to an element.
using	xtd::forms::style_sheets::outline_style = xtd::forms::style_sheets::border_style
	The style specifies what kind of outlines to display.
using	xtd::forms::style_sheets::outline_width = xtd::forms::style_sheets::lengths
	The width specifies the width of the outlines.
using	xtd::forms::style_sheets::padding = xtd::forms::style_sheets::lengths
	Padding is used to create space around an element's content, inside of any defined borders.
using	xtd::forms::style_sheets::panel = xtd::forms::style_sheets::control
	The panel data allows you to specify the box of a panel control.
using	xtd::forms::style_sheets::status_bar = xtd::forms::style_sheets::control
	The status_bar data allows you to specify the box of a status_bar control.
using	xtd::forms::style_sheets::status_bar_panel = xtd::forms::style_sheets::control
	The buttton data allows you to specify the box of a status_bar_panel control.
using	xtd::forms::style_sheets::toggle_button = xtd::forms::style_sheets::control
	The buttton data allows you to specify the box of a toggle_button control.
using	xtd::forms::style_sheets::tool_bar = xtd::forms::style_sheets::control
	The tool_bar data allows you to specify the box of a tool_bar control.
using	xtd::forms::style_sheets::tool_bar_button = xtd::forms::style_sheets::control
	The buttton data allows you to specify the box of a tool_bar_button control.
using	xtd::forms::style_sheets::user_control = xtd::forms::style_sheets::control
	The user_control data allows you to specify the box of a user_control control.

Enumerations
enum class	xtd::forms::style_sheets::border_type {   xtd::forms::style_sheets::border_type::none ,   xtd::forms::style_sheets::border_type::hidden ,   xtd::forms::style_sheets::border_type::solid ,   xtd::forms::style_sheets::border_type::inset ,   xtd::forms::style_sheets::border_type::outset ,   xtd::forms::style_sheets::border_type::groove ,   xtd::forms::style_sheets::border_type::ridge ,   xtd::forms::style_sheets::border_type::theme ,   xtd::forms::style_sheets::border_type::dashed ,   xtd::forms::style_sheets::border_type::dot_dash ,   xtd::forms::style_sheets::border_type::dot_dot_dash ,   xtd::forms::style_sheets::border_type::dotted ,   xtd::forms::style_sheets::border_type::double_border }
	The border_type enum class specifies what kind of border to display. More...
enum class	xtd::forms::style_sheets::image_type {   xtd::forms::style_sheets::image_type::none ,   xtd::forms::style_sheets::image_type::url ,   xtd::forms::style_sheets::image_type::linear_gradient ,   xtd::forms::style_sheets::image_type::radial_gradient ,   xtd::forms::style_sheets::image_type::conic_gradient }
	The image_type enum class specifies what kind of image to display. More...
enum class	xtd::forms::style_sheets::length_unit {   xtd::forms::style_sheets::length_unit::centimeters ,   xtd::forms::style_sheets::length_unit::millimeters ,   xtd::forms::style_sheets::length_unit::inches ,   xtd::forms::style_sheets::length_unit::pixels ,   xtd::forms::style_sheets::length_unit::points ,   xtd::forms::style_sheets::length_unit::picas ,   xtd::forms::style_sheets::length_unit::element ,   xtd::forms::style_sheets::length_unit::element_x_height ,   xtd::forms::style_sheets::length_unit::chase ,   xtd::forms::style_sheets::length_unit::root_element ,   xtd::forms::style_sheets::length_unit::viewport_width ,   xtd::forms::style_sheets::length_unit::viewport_height ,   xtd::forms::style_sheets::length_unit::viewport_min ,   xtd::forms::style_sheets::length_unit::viewport_max ,   xtd::forms::style_sheets::length_unit::percent }
	The length_unit enum class specifies the units for xtd::forms::style_sheets::length. More...
enum class	xtd::forms::style_sheets::pseudo_state {   xtd::forms::style_sheets::pseudo_state::standard ,   xtd::forms::style_sheets::pseudo_state::hover ,   xtd::forms::style_sheets::pseudo_state::pressed ,   xtd::forms::style_sheets::pseudo_state::disabled ,   xtd::forms::style_sheets::pseudo_state::focused ,   xtd::forms::style_sheets::pseudo_state::default_state ,   xtd::forms::style_sheets::pseudo_state::unchecked ,   xtd::forms::style_sheets::pseudo_state::checked ,   xtd::forms::style_sheets::pseudo_state::mixed ,   xtd::forms::style_sheets::pseudo_state::link ,   xtd::forms::style_sheets::pseudo_state::visited ,   xtd::forms::style_sheets::pseudo_state::active }
	The pseudo_state enum class flag specifies the pseudo state of an element. More...
enum class	xtd::forms::style_sheets::text_decoration {   xtd::forms::style_sheets::text_decoration::none ,   xtd::forms::style_sheets::text_decoration::overline ,   xtd::forms::style_sheets::text_decoration::line_through ,   xtd::forms::style_sheets::text_decoration::underline }
	The xtd::forms::style_sheets::text_decoration enum class is used to set or remove decorations from text. More...
enum class	xtd::forms::style_sheets::text_transformation {   xtd::forms::style_sheets::text_transformation::none ,   xtd::forms::style_sheets::text_transformation::lowercase ,   xtd::forms::style_sheets::text_transformation::uppercase ,   xtd::forms::style_sheets::text_transformation::capitalize }
	The xtd::forms::style_sheets::text_transformation enum class is used to specify uppercase and lowercase letters in a text. More...
enum class	xtd::forms::style_sheets::white_space {   xtd::forms::style_sheets::white_space::normal ,   xtd::forms::style_sheets::white_space::no_wrap ,   xtd::forms::style_sheets::white_space::pre ,   xtd::forms::style_sheets::white_space::pre_line ,   xtd::forms::style_sheets::white_space::pre_wrap }
	The white_space enum class specifies how white-space inside an element is handled. More...

Typedef Documentation

border_width

using xtd::forms::style_sheets::border_width = typedef xtd::forms::style_sheets::lengths

#include <xtd.forms/include/xtd/forms/style_sheets/border_width.h>

The width specifies the width of the borders.

using border_width = xtd::forms::style_sheets::lengths

Header

#include <xtd/forms/style_sheets/border_width>

Namespace

xtd::forms::style_sheets

Library

xtd.forms

button

using xtd::forms::style_sheets::button = typedef xtd::forms::style_sheets::control

#include <xtd.forms/include/xtd/forms/style_sheets/button.h>

The buttton data allows you to specify the box of a button control.

Header

#include <xtd/forms/style_sheets/button>

Namespace

xtd::forms::style_sheets

Library

xtd.forms

Remarks

You need to know how the box model works.

For more information, see Box Model.

form

using xtd::forms::style_sheets::form = typedef xtd::forms::style_sheets::control

#include <xtd.forms/include/xtd/forms/style_sheets/form.h>

The form data allows you to specify the box of a form control.

Header

#include <xtd/forms/style_sheets/form>

Namespace

xtd::forms::style_sheets

Library

xtd.forms

label

using xtd::forms::style_sheets::label = typedef xtd::forms::style_sheets::control

#include <xtd.forms/include/xtd/forms/style_sheets/label.h>

The label data allows you to specify the box of a label control.

Header

#include <xtd/forms/style_sheets/label>

Namespace

xtd::forms::style_sheets

Library

xtd.forms

Remarks

You need to know how the box model works.

For more information, see Box Model.

link_label

using xtd::forms::style_sheets::link_label = typedef xtd::forms::style_sheets::control

#include <xtd.forms/include/xtd/forms/style_sheets/link_label.h>

The link label data allows you to specify the box of a link label control.

Header

#include <xtd/forms/style_sheets/link_label>

Namespace

xtd::forms::style_sheets

Library

xtd.forms

Remarks

You need to know how the box model works.

For more information, see Box Model.

margin

using xtd::forms::style_sheets::margin = typedef xtd::forms::style_sheets::lengths

#include <xtd.forms/include/xtd/forms/style_sheets/margin.h>

Margins are used to create space around elements, outside of any defined borders.

using margin = xtd::forms::style_sheets::lengths

Header

#include <xtd/forms/style_sheets/margin>

Namespace

xtd::forms::style_sheets

Library

xtd.forms

outline_color

using xtd::forms::style_sheets::outline_color = typedef xtd::forms::style_sheets::border_color

#include <xtd.forms/include/xtd/forms/style_sheets/outline_color.h>

The xtd::forms::style_sheets::outline_color is used to set the color of the outlines.

using outline_color = xtd::forms::style_sheets::border_color

Header

#include <xtd/forms/style_sheets/outline_color>

Namespace

xtd::forms::style_sheets

Library

xtd.forms

outline_offset

using xtd::forms::style_sheets::outline_offset = typedef xtd::forms::style_sheets::lengths

#include <xtd.forms/include/xtd/forms/style_sheets/outline_offset.h>

The width specifies the width of the borders.

using outline_offset = xtd::forms::style_sheets::lengths

Header

#include <xtd/forms/style_sheets/outline_offset>

Namespace

xtd::forms::style_sheets

Library

xtd.forms

outline_radius

using xtd::forms::style_sheets::outline_radius = typedef xtd::forms::style_sheets::border_radius

#include <xtd.forms/include/xtd/forms/style_sheets/outline_radius.h>

The radius is used to add rounded outlines to an element.

using outline_radius = xtd::forms::style_sheets::border_radius

Header

#include <xtd/forms/style_sheets/outline_radius>

Namespace

xtd::forms::style_sheets

Library

xtd.forms

outline_style

using xtd::forms::style_sheets::outline_style = typedef xtd::forms::style_sheets::border_style

#include <xtd.forms/include/xtd/forms/style_sheets/outline_style.h>

The style specifies what kind of outlines to display.

using outline_style = xtd::forms::style_sheets::border_style

Header

#include <xtd/forms/style_sheets/outline_style>

Namespace

xtd::forms::style_sheets

Library

xtd.forms

outline_width

using xtd::forms::style_sheets::outline_width = typedef xtd::forms::style_sheets::lengths

#include <xtd.forms/include/xtd/forms/style_sheets/outline_width.h>

The width specifies the width of the outlines.

using outline_width = xtd::forms::style_sheets::lengths

Header

#include <xtd/forms/style_sheets/outline_width>

Namespace

xtd::forms::style_sheets

Library

xtd.forms

padding

using xtd::forms::style_sheets::padding = typedef xtd::forms::style_sheets::lengths

#include <xtd.forms/include/xtd/forms/style_sheets/padding.h>

Padding is used to create space around an element's content, inside of any defined borders.

using padding = xtd::forms::style_sheets::lengths

Header

#include <xtd/forms/style_sheets/padding>

Namespace

xtd::forms::style_sheets

Library

xtd.forms

panel

using xtd::forms::style_sheets::panel = typedef xtd::forms::style_sheets::control

#include <xtd.forms/include/xtd/forms/style_sheets/panel.h>

The panel data allows you to specify the box of a panel control.

Header

#include <xtd/forms/style_sheets/panel>

Namespace

xtd::forms::style_sheets

Library

xtd.forms

Remarks

You need to know how the box model works.

For more information, see Box Model.

status_bar

using xtd::forms::style_sheets::status_bar = typedef xtd::forms::style_sheets::control

#include <xtd.forms/include/xtd/forms/style_sheets/status_bar.h>

The status_bar data allows you to specify the box of a status_bar control.

Header

#include <xtd/forms/style_sheets/status_bar>

Namespace

xtd::forms::style_sheets

Library

xtd.forms

Remarks

You need to know how the box model works.

For more information, see Box Model.

status_bar_panel

using xtd::forms::style_sheets::status_bar_panel = typedef xtd::forms::style_sheets::control

#include <xtd.forms/include/xtd/forms/style_sheets/status_bar_panel.h>

The buttton data allows you to specify the box of a status_bar_panel control.

Header

#include <xtd/forms/style_sheets/statsu_bar_panel>

Namespace

xtd::forms::style_sheets

Library

xtd.forms

Remarks

You need to know how the box model works.

For more information, see Box Model.

toggle_button

using xtd::forms::style_sheets::toggle_button = typedef xtd::forms::style_sheets::control

#include <xtd.forms/include/xtd/forms/style_sheets/toggle_button.h>

The buttton data allows you to specify the box of a toggle_button control.

Header

#include <xtd/forms/style_sheets/togle_button>

Namespace

xtd::forms::style_sheets

Library

xtd.forms

Remarks

You need to know how the box model works.

For more information, see Box Model.

tool_bar

using xtd::forms::style_sheets::tool_bar = typedef xtd::forms::style_sheets::control

#include <xtd.forms/include/xtd/forms/style_sheets/tool_bar.h>

The tool_bar data allows you to specify the box of a tool_bar control.

Header

#include <xtd/forms/style_sheets/tool_bar>

Namespace

xtd::forms::style_sheets

Library

xtd.forms

Remarks

You need to know how the box model works.

For more information, see Box Model.

tool_bar_button

using xtd::forms::style_sheets::tool_bar_button = typedef xtd::forms::style_sheets::control

#include <xtd.forms/include/xtd/forms/style_sheets/tool_bar_button.h>

The buttton data allows you to specify the box of a tool_bar_button control.

Header

#include <xtd/forms/style_sheets/tool_bar_button>

Namespace

xtd::forms::style_sheets

Library

xtd.forms

Remarks

You need to know how the box model works.

For more information, see Box Model.

user_control

using xtd::forms::style_sheets::user_control = typedef xtd::forms::style_sheets::control

#include <xtd.forms/include/xtd/forms/style_sheets/user_control.h>

The user_control data allows you to specify the box of a user_control control.

Header

#include <xtd/forms/style_sheets/user_control>

Namespace

xtd::forms::style_sheets

Library

xtd.forms

Remarks

You need to know how the box model works.

For more information, see Box Model.

Enumeration Type Documentation

border_type

enum class xtd::forms::style_sheets::border_type

strong

#include <xtd.forms/include/xtd/forms/style_sheets/border_type.h>

The border_type enum class specifies what kind of border to display.

Header

#include <xtd/forms/style_sheets/border_type>

Namespace

xtd::forms::style_sheets

Library

xtd.forms

Enumerator
none	Defines no border.
hidden	Defines a hidden border.
solid	Defines a solid border.
inset	Defines a 3D inset border. The effect depends on the border color value.
outset	Defines a 3D outset border. The effect depends on the border color value.
groove	Defines a 3D grooved border. The effect depends on the border color value.
ridge	Defines a 3D ridged border. The effect depends on the border color value.
theme	Defines a 3D themed border. The effect depends on the border color value.
dashed	Defines a dashed border.
dot_dash	Defines a dot dashed border.
dot_dot_dash	Defines a dot dot dashed border.
dotted	Defines a dotted border.
double_border	Defines a double border.

image_type

enum class xtd::forms::style_sheets::image_type

strong

#include <xtd.forms/include/xtd/forms/style_sheets/image_type.h>

The image_type enum class specifies what kind of image to display.

Header

#include <xtd/forms/style_sheets/image_type>

Namespace

xtd::forms::style_sheets

Library

xtd.forms

Enumerator
none	Defines no image.
url	Defines url image.
linear_gradient	Defines a linear_gradient image.
radial_gradient	Defines a radial_gradient image.
conic_gradient	Defines a conic_gradient image.

length_unit

enum class xtd::forms::style_sheets::length_unit

strong

#include <xtd.forms/include/xtd/forms/style_sheets/length_unit.h>

The length_unit enum class specifies the units for xtd::forms::style_sheets::length.

Header

#include <xtd/forms/style_sheets/length_unit>

Namespace

xtd::forms::style_sheets

Library

xtd.forms

Remarks

CSS has several different units for expressing a length.

Many CSS properties take "length" values, such as width, margin, padding, font-size, etc.

Length is a number followed by a length unit, such as 10px, 2em, etc.CSS has several different units for expressing a length.

Example

Set different length values, using px (pixels):

control {
  border-width: 3px;
}
 
button {
  border-width: 1px;
  border-radius: 5px;
}

Note

A whitespace cannot appear between the number and the unit. However, if the value is 0, the unit can be omitted.

Remarks

For some CSS properties, negative lengths are allowed.

There are two types of length units: absolute and relative.

Absolute lengths

The absolute length units are fixed and a length expressed in any of these will appear as exactly that size.

Enum class value	Css potfix	Description
centimeters	cm	centimeters
millimeters	mm	millimeters
inches	in	inches (1in = 96px = 2.54cm)
pixels	px	pixels (1px = 1/96th of 1in)
points	pt	points (1pt = 1/72 of 1in)
picas	pc	picas (1pc = 12 pt)

Relative lengths

Relative length units specify a length relative to another length property. Relative length units scales better between different rendering mediums.

Enum class value	Css potfix	Description
element	em	Relative to the font-size of the element (2em means 2 times the size of the current font)
element_x_height	ex	Relative to the x-height of the current font (rarely used)
chase	ch	Relative to width of the "0" (zero)
root_element	rem	Relative to font-size of the root element
viewport_width	vw	Relative to 1% of the width of the viewport(*)
viewport_height	vh	Relative to 1% of the height of the viewport(*)
viewport_min	vmin	Relative to 1% of viewport's* smaller dimension
viewport_max	vmax	Relative to 1% of viewport's* larger dimension
percent	%	Relative to the parent element

Note

The element(em) and root_element(rem) units are practical in creating perfectly scalable layout! (*) Viewport = the bounds of the element. If the viewport is 50cm wide, 1vw = 0.5cm.

Enumerator
centimeters	Defines a centimeters unit.
millimeters	Defines a millimeters unit.
inches	Defines a inches unit (1in = 96px = 2.54cm).
pixels	Defines pixels unit (1px = 1/96th of 1in).
points	Defines points unit (1pt = 1/72 of 1in).
picas	Defines a picas unit (1pc = 12 pt).
element	Defines a element unit. Relative to the font-size of the element (2em means 2 times the size of the current font).
element_x_height	Defines a element_x_height unit. Relative to the x-height of the current font (rarely used).
chase	Defines a chase unit. Relative to width of the "0" (zero).
root_element	Defines a root_element unit. Relative to font-size of the root elementRelative to font-size of the root element.
viewport_width	Defines a viewport_width unit. Relative to 1% of the width of the viewport.
viewport_height	Defines a viewport_height unit. Relative to 1% of the height of the viewport.
viewport_min	Defines a viewport_min unit. Relative to 1% of viewport's smaller dimension.
viewport_max	Defines a viewport_min unit. Relative to 1% of viewport's larger dimension.
percent	Defines a percent unit. Relative to the parent element.

pseudo_state

enum class xtd::forms::style_sheets::pseudo_state

strong

#include <xtd.forms/include/xtd/forms/style_sheets/pseudo_state.h>

The pseudo_state enum class flag specifies the pseudo state of an element.

Header

#include <xtd/forms/style_sheets/pseudo_state>

Namespace

xtd::forms::style_sheets

Library

xtd.forms

Enumerator
standard	The item is in standard state.
hover	The item is hover (mouse is on the item).
pressed	The irem is pressed, mouse is down on the item.
disabled	The irem is disabled, generally the item is grayed.
focused	The item is focused.
default_state	The item is the default (see ibutton_control).
unchecked	The item is unchecked.
checked	The item is checked.
mixed	The item is mixed. For the three-state ittem.
link	The item is link text. Remarks The link text color is the text color of an html link text.
visited	The item is visited text. Remarks The visited text color is the text color of an html visited link text.
active	The item is ative text. Remarks The active text color is the text color of an html link text when mouse down.

text_decoration

enum class xtd::forms::style_sheets::text_decoration

strong

#include <xtd.forms/include/xtd/forms/style_sheets/text_decoration.h>

The xtd::forms::style_sheets::text_decoration enum class is used to set or remove decorations from text.

Header

#include <xtd/forms/style_sheets/text_decoration>

Namespace

xtd::forms::style_sheets

Library

xtd.forms

Remarks

The value xtd::forms::style_sheets::text_decoration::none; is often used to remove underlines from links.

Note

It is not recommended to underline text that is not a link, as this often confuses the reader.

Enumerator
none	Defines none text decoration.
overline	Defines a overline text decoration.
line_through	Defines a line through text decoration.
underline	Defines a underline text decoration.

text_transformation

enum class xtd::forms::style_sheets::text_transformation

strong

#include <xtd.forms/include/xtd/forms/style_sheets/text_transformation.h>

The xtd::forms::style_sheets::text_transformation enum class is used to specify uppercase and lowercase letters in a text.

Header

#include <xtd/forms/style_sheets/text_transformation>

Namespace

xtd::forms::style_sheets

Library

xtd.forms

Remarks

It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word

Enumerator
none	Defines none text transformation.
lowercase	Defines a lowercase text transformation.
uppercase	Defines a uppercase text transformation.
capitalize	Defines a capitalize text transformation.

white_space

enum class xtd::forms::style_sheets::white_space

strong

#include <xtd.forms/include/xtd/forms/style_sheets/white_space.h>

The white_space enum class specifies how white-space inside an element is handled.

Header

#include <xtd/forms/style_sheets/white_space>

Namespace

xtd::forms::style_sheets

Library

xtd.forms

Enumerator
normal	Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary. This is default.
no_wrap	Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a tag is encountered.
pre	Whitespace is preserved by the browser. Text will only wrap on line breaks. Acts like the. tag in HTML
pre_line	Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks.
pre_wrap	Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks.