Many components support the Styles feature. This is a feature that allows you to define a set of visual styles that will change based upon a single driving property. Typically, you'll have a property (often a custom property) on your component that you want to use as a driving property, usually a discrete state, and you have multiple visual properties, like the font, border, foreground color, visibility, etc that you want to change based upon that one driving property.
Styles lets you define these relationships all at once, and with a preview to boot! Configuring styles goes like this:
| 1. | Pick a driving property. This is the property whose value will determine the current style. |
| 2. | Pick one or more styled properties. These are the properties that will change as the style changes. |
| 3. | Add the values of the driving property that define the styles (e.g. 0=off, 1=hand, 2=auto) |
| 4. | Customize the values of the styled properties for each style. |
Example
Lets say that you have a Level Indicator component that is displaying the level in a tank. Lets say that you want to have its appearance change based upon the alarm state of the tank's temperature. You can add an integer custom property to the level indicator that you'll bind to the tank temperature tag's AlertCurrentSeverity property.
Now go into the Style customizer. Choose your severity property as the driving property, and the Border and Filled Color properties as the styled properties. Add states for -1 (not in alarm), 2 (Medium alarm) and 4 (High alarm). Leave the -1 state alone. Use a red border for state 2 and an orange fill color. For state 4, you can animate it to get a flashing effect. Add two animation frames and set their delay to 500ms each. Configure the frames differently from each other so that you can get a flashing effect.
Hit OK - thats it! Notice that the styled properties that you chose are now bold and have the styles indicator ( 
) next to them. This is to help remind you that those properties are being driven, so if you change their values directly, you changes will be overwritten.