Class

WebStyle


Description

A WebStyle is a collection of methods and properties that manage the look of a user interface elements in your web app.

Methods

Name

Parameters

Returns

Shared

AddTransition

CSSPropertyName As String, Duration As Double, SpeedPattern As WebStyle, Delay As Double = 0

Clone

Deep As Boolean

WebStyle

CSSValue

Selector As String

String

HasCSSProperty

Name As String

Boolean

Remove

Key As String

RemoveTransition

CSSPropertyName As String

SubClass

WebStyle

Value

CSSPropertyName As String

String

CSSPropertyName As String, Assigns value As String

Enumerations

WebStyle.Cursors

Cursors

All cursors available that can appear when the user hovers over the object.

Enum

CrossHair

Default

Help

Inherit

Move

NoDrop

None

NotAllowed

Pointer

Progress

ResizeColumn

ResizeEast

ResizeNorth

ResizeNorthEast

ResizeNorthWest

ResizeRow

ResizeSouth

ResizeSouthEast

ResizeSouthWest

ResizeWest

Text

VerticalText

Wait

WebStyle.SpeedPatterns

SpeedPatterns

All available speeds at which a transition can occur that can be applies to CSS properties.

Enum

Description

Ease

The pace is constant throughout the transition and is slower than Linear.

EaseIn

The pace begins slow then speeds up.

EaseInOut

The pace begins slow then speeds up and then slows back down again at the end.

EaseOut

The pace slows at the end.

Linear

The pace is constant throughout the transition and is faster than Ease.

Property descriptions


WebStyle.BackgroundColor

BackgroundColor As Color

The color used to draw the background of the object to which the WebStyle is assigned.


WebStyle.Bold

Bold As Boolean

If True and the object to which the WebStyle is assigned has text, the text will be style in bold.


WebStyle.BorderColor

BorderColor As Color

The color used to draw the border of the object to which the WebStyle is assigned.


WebStyle.BorderThickness

BorderThickness As Integer

The thickness of the border of the object to which the WebStyle is assigned.


WebStyle.Cursor

Cursor As Cursor

The cursor displayed when the user hovers over the object to which the WebStyle is assigned.


WebStyle.FontName

FontName As String

The font used to for any text in the object to which the WebStyle is assigned.


WebStyle.FontSize

FontSize As Double

The font size used to draw any text in the object to which the WebStyle is assigned.


WebStyle.ForegroundColor

ForegroundColor As Color

The color used to draw everything except the border and background of the object to which the WebStyle is assigned.


WebStyle.Italic

Italic As Boolean

If True, the text of the object to which the WebStyle is assigned will be use the italic style.


WebStyle.Opacity

Opacity As Integer

The level of opacity of the control to which the WebStyle is assigned.

Valid values are 0 (invisible) to 100 (fully opaque).


WebStyle.Strikethrough

Strikethrough As Boolean

If True, the text of the object to which the WebStyle is assigned will be use the strikethrough style.


WebStyle.Underline

Underline As Boolean

If True, the text of the object to which the WebStyle is assigned will be use the underline style.

Method descriptions


WebStyle.AddTransition

AddTransition(CSSPropertyName As String, Duration As Double, SpeedPattern As WebStyle, Delay As Double = 0)

Adds a transition with the values passed.

The transition is triggered when the property whose name was passed is modified in another event. The transition will then be from the previous value to the new value.

The default SpeedPattern is EaseInOut.

Because WebStyles use CSS under the hood, there are many CSS properties that can be animated.


WebStyle.Clone

Clone(Deep As Boolean) As WebStyle

Returns a copy of the WebStyle.

If Deep is True the copy will have the any values inherited from WebStyle's WebStyle parent instances.


WebStyle.CSSValue

CSSValue(Selector As String) As String

Returns the value of the CSS Selector whose name is passed.


WebStyle.HasCSSProperty

HasCSSProperty(Name As String) As Boolean

Returns True if WebStyle has a CSS property with name passed.


WebStyle.Remove

Remove(Key As String)

Removes the value of the CSS Selector whose name is passed.


WebStyle.RemoveTransition

RemoveTransition(CSSPropertyName As String)

Removes the transition for the property whose name is passed.


WebStyle.SubClass

SubClass As WebStyle

Returns a subclass of the WebStyle.

The returned WebStyle inherits the values of the WebStyle from which it was created.


WebStyle.Value

Value(CSSPropertyName As String) As String

Returns the value of the CSS Selector whose name was passed.

Value(CSSPropertyName As String, Assigns value As String)

Sets the CSS Selector whose name is passed to the value assigned.

Notes

A WebStyle can be applied to any object that has a WebStyle property.

You can create WebStyle objects that are subclasses of an existing WebStyle using the SubClass method. A subclass inherits all of the values of the parent object and can then override any of those values.

Sample code

There are many CSS Selectors that can be animated.

This code in a WebRectangle's Opening event adds a transition that will change the width of the WebRectangle. It then stores the width of the WebRectangle in the style's width property. This is done so that when the transition is triggered later by modifying the width, the width stored in the width property of the WebStyle will match that of the WebRectangle being animated:

Me.Style.AddTransition("width", 5, WebStyle.SpeedPatterns.EaseInOut, 0)
Me.Style.Value("width") = Me.Width.ToString + "px"

The transition animation of the width of the WebRectangle is then triggered by changing the width value to a new value:

Var currentWidth As Integer = Rectangle1.Style.Value("width").ToInteger
currentWidth = currentWidth + 600
Rectangle1.Style.Value("width") = currentWidth.ToString + "px"

Compatibility

Web projects on all supported operating systems.