HomeNewsSupportVideos

Colors & Fonts

Color and font concepts.

All controls in Wisej have at least these three properties:

  • BackColor. Sets the background color of the control. Returns the control's background color or the inherited color.

  • ForeColor. Sets the text color of the control. Returns the control's text color or the inherited text color.

  • Font. Sets the font of the control. Returns the control's font or the inherited font.

Some controls may have additional color properties, the names always end with "Color", and may hide the base BackColor or ForeColor properties. Each control (its corresponding widget) renders these properties on the client.

For the colors, you can use any System.Drawing.SystemColors, any named color in System.Drawing.Color, or create a new color either by theme name or passing the RGBA values.

For the fonts, you can use the theme fonts by name, any System.Drawing.SystemFonts, or create new fonts.

The font you use must be installed on the server and it must be supported by the browser. If it's not a standard web font, then you need to add the font to the theme or a global CSS.

Examples of color and font assignments:

// browser's "green" color.
this.BackColor = Color.Green;
// theme's "activeCaption" color.
this.BackColor = SystemColors.ActiveCaption;
// theme's "activeCaptionText" color.
this.ForeColor = Color.FromKnownColor(KnownColor.ActiveCaptionText);
// theme's "buttonText" color.
this.ForeColor = Color.FromName("@buttonText");
// theme's "buttonText" color.
this.ForeColor = Application.Theme.GetColor("buttonText");
// theme's backgroundColor value under the "button" appearance.
this.BackColor = Application.Theme.GetColor("button", "backgroundColor");
// green color at 50% transparency.
this.BackColor = Color.FromArgb(255/2, 0, 255, 0);
// green color from HTML string.
this.BackColor = ColorTranslator.FromHtml("#00FF00");

// theme's "defaultBold" font, style and size are ignored (leading @)
this.Font = new Font("@defaultBold", FontStyle.Regular);
// theme's "defaultBold" font, style and size are overridden (no @)
this.Font = new Font("defaultBold", 15, FontStyle.Bold);

Ambient Properties

Some properties in Wisej are so-called "Ambient Properties". When the property is not set, it returns the parent's value:

  • BackColor

  • ForeColor

  • Font

  • Visible

  • Enabled

In some cases, this behavior may be confusing, especially if the application sets a property and then expects to read back the same value. For example, if you set the Visible property to true but the parent is false, reading it back will return false.

Custom Fonts

You can use any font you like with Wisej. However, if the font is not known by the browser you need to add it to your theme - either create a custom theme, or use a mixin, or add it to a global .css file.

When adding a font to the browser, also make sure that the same font is installed on the servers and development machines or Wisej will calculate the size of AutoSize controls incorrectly.

Designer

All Color properties support the built-in color picker dialog. It allows you to:

  • Pick any color from the color palette, or move the picker anywhere on the screen to sample the color directly from the display.

  • Select any standard web color.

  • Select any color defined by the current theme.

  • Select any system color from the SystemColors enumeration. These colors are also translated by the current theme.

All Font properties support the built-in font picker dialog. It allows you to:

  • Pick a known standard web font, change the style and the size. You can pick multiple fallback fonts.

  • Pick one of the fonts defined in the current theme. Once you pick a theme font, you can switch to the first tab to change the style and size.

HTML Colors

Use the System.Drawing.ColorTranslator class to convert HTML string to and from a Color object.

PreviousAccessibilityNextEmbedded Tools

Last updated