Export (0) Print
Expand All
Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

Color structure

Applies to Windows and Windows Phone

Describes a color in terms of alpha, red, green, and blue channels.

Syntax


var color = {
    a : /* Your value */,
    b : /* Your value */,
    g : /* Your value */,
    r : /* Your value */
}


<Color ...>predefinedColor</Color>
- or -
<Color ...>#rgb</Color>
- or -
<Color ...>#argb</Color>
- or -
<Color ...>#rrggbb</Color>
- or -
<Color ...>#aarrggbb</Color>
- or -
<Color ...>sc#scR,scG,scB</Color>
- or -
<Color ...>sc#scA,scR,scG,scB</Color>


<object property="predefinedColor"/>
- or -
<object property="#rgb"/>
- or -
<object property="#argb"/>
- or -
<object property="#rrggbb"/>
- or -
<object property="#aarrggbb"/>
- or -
<object property="sc#scR,scG,scB"/>
- or -
<object property="sc#scA,scR,scG,scB"/>

XAML Values

predefinedColor

One of the colors predefined by the Colors class. See members of Colors for a list. These are static properties. Specify just the color name, for example "Transparent". Do not include the static class qualifier in the string: for example "Colors.Transparent" does not parse in XAML.

rgb

A three-character hexadecimal value. The first character specifies the color's R value, the second character specifies the G value, and the third character specifies the B value. For example, 00F.

argb

A four-character hexadecimal value. The first character specifies the color's A value, the second character specifies its R value, the third character specifies the G value, and the fourth character specifies its B value. For example, F00F.

rrggbb

A six-character hexadecimal value. The first two characters specify the color's R value, the next two specify its G value, and the final two specify its B value. For example, 0000FF.

aarrggbb

An eight-character hexadecimal value. The first two characters specify the color's A value, the next two specify its R value, the next two specify its G value, and the final two specify its B value. For example, FF0000FF.

scA

The color's ScA value as a value between 0 and 1.

scR

The color's ScR value as a value between 0 and 1.

scG

The color's ScG value as a value between 0 and 1.

scB

The color's ScB value as a value between 0 and 1.

Attributes

[Version(0x06020000)]

Members

The Color structure has these types of members:

Fields

The Color structure has these fields.

FieldData typeDescription
A | a [C++, JavaScript]

Number [JavaScript] | System.Byte [.NET] | uint8 [C++]

Gets or sets the sRGB alpha channel value of the color.

B | b [C++, JavaScript]

Number [JavaScript] | System.Byte [.NET] | uint8 [C++]

Gets or sets the sRGB blue channel value of the color.

G | g [C++, JavaScript]

Number [JavaScript] | System.Byte [.NET] | uint8 [C++]

Gets or sets the sRGB green channel value of the color.

R | r [C++, JavaScript]

Number [JavaScript] | System.Byte [.NET] | uint8 [C++]

Gets or sets the sRGB red channel value of the color.

 

Methods

The Color structure has these methods. With C#, Visual Basic, and C++, it also inherits methods from the Object class.

MethodDescription
Equals(Color) [C#, VB]Compares two Color structures for equality.
Equals(Object) [C#, VB]Determines whether the specified object is equal to a Color.
FromArgb [C#, VB]Creates a new Color structure by using the specified sRGB alpha channel and color channel values.
GetHashCode [C#, VB]Gets a hash code for this object.
ToString [C#, VB]Creates a String representation of this Color.
ToString(IFormatProvider) [C#, VB]Creates a String representation of this Color, using a specified formatter.

 

Operators

The Color structure has these operators.

OperatorDescription
Equality Compares two Color structures for equality.
Inequality Compares two Color structures for inequality.

 

Properties

The Color structure has these properties.

PropertyAccess typeDescription

A [C#, VB]

Read/writeGets or sets the sRGB alpha channel value of the color.

B [C#, VB]

Read/writeGets or sets the sRGB blue channel value of the color.

G [C#, VB]

Read/writeGets or sets the sRGB green channel value of the color.

R [C#, VB]

Read/writeGets or sets the sRGB red channel value of the color.

 

Remarks

Color is a Windows Runtime structure that represents a color that has four channels: A (alpha), R (red), G (green), B (blue). Each of the values is stored as a Byte type with value 0-255.

Color values are used in these features and scenarios:

  • Colors for start screens and general UI (for example SecondaryTile.BackgroundColor and UISettings.UIElementColor). These can be used in JavaScript.
  • Color values for the Windows 8 ink system. Specifically, InkDrawingAttributes.Color. This can be used in JavaScript.
  • Color values for XAML UI and Windows Store apps using C++, C#, or Visual Basic, particularly for brushes. These APIs can't be used in JavaScript.
  • Defining color values that are used for interfaces representing text, in the Windows.UI.Text namespace. These APIs can't be used in JavaScript.

Color values and XAML definitions

The most frequent application of Color is to define color-related properties in a UI element as part of a Windows Store app using C++, C#, or Visual Basic and its XAML UI definition.

Various predefined Color values are available as static properties on the Colors class. These properties are useful for setting Color values in code that match the attribute string form used in XAML to set a named Color. For example, the Colors.AliceBlue property returns a Color that is equal to Color from the XAML usage <SolidColorBrush Color="AliceBlue" />. You can also use the Colors values for equality comparisons against a Color.

In most XAML UI scenarios, a Color isn't used directly as a property value of a UIElement. Instead, a Color is used as a component value of a Brush (either SolidColorBrush or LinearGradientBrush). However, the Brush type enables a XAML shorthand that lets you set an attribute value of type Brush using a named color string, or a format string that can be parsed into an ARGB form. For example, you can set the Brush-type value TextBlock.Foreground using a syntax such as <TextBlock Foreground="Cyan" />. This syntax implicitly creates a new SolidColorBrush with a Color value equal to Cyan that fills the Brush-type value of TextBlock.Foreground for that element. For more info on using brushes and colors in XAML, see Quickstart: Using brushes.

If you use the same color brush often in your XAML, you should define a SolidColorBrush as a resource rather than using the inline implicit creation of new values, because that's more efficient. For more info, see Optimize loading XAML or ResourceDictionary and XAML resource references. You might also want to use system colors, which can be accessed as merged-in resources for themes that the system defines. See XAML theme resources reference.

There are also some XAML properties that take a direct Color value. These mostly support animating a Color value that exists on a Brush. The Windows Runtime supports an interpolation logic so that you can animate from one Color to another in a From/To animation and the animation will use interpolated Color values as the animation runs. For more info, see Storyboarded animations.

Notes on XAML syntax

If you use the "#" token to specify color values in hex form, the hex values are stored in the structure as values between 0 and 255, not as the original hex strings. If you use the "sc#" token, the values are also stored as values between 0 and 255, not the original value of 0 to 1.

Strings for named colors are interpreted based on the associated Colors constants, and the values for A, R, G and B are set in the structure as values between 0 and 255 that are representative of that color.

The XAML object element usage (with initialization text) is useful for declaring a Color as a resource in a XAML ResourceDictionary. For more info, see ResourceDictionary and XAML resource references.

Projection and members of Color

If you are using a Microsoft .NET language (C# or Microsoft Visual Basic) then Color has a static method FromArgb that acts as a Color value generator. Also, the data members of Color are exposed as read-write properties.

If you are programming with C++, either Visual C++ component extensions (C++/CX) or WRL, then only the data member fields exist as members of Color, and you cannot use the utility methods or properties listed in the members table. C++ code can use an equivalent FromArgb method on the ColorHelper class, and the Platform::Object methods.

ToString behavior for Color

For C# and Visual Basic, the language support for the Color structure provides a behavior for ToString that serializes the values of the ARGB data properties into a single string. The string representations of Color values are similar to XAML attribute string syntax for specifying Color values in markup. It is the syntax that is most commonly used by designer tools to specify a (non-named) Color. The string is in the form #AARRGGBB, where each letter pair represents one of the color channels as a value between 00 and FF. Each letter pair is interpreted as if it were a hex value and thus represents a value between 0 and 255. The string always starts with a hash (#). For example, the string form of the color where A=255, R=0, G=128, B=255 is "#FF0080FF". For named colors you get the serialized string and not the constant name; for example calling ToString on Colors.Blue gives "#FF0000FF".

Note  C++/CX doesn't use nondata members of Color, and doesn't enable this form of string returned from ToString(). The ToString() value returned from C++/CX for a Color is the unmodified Platform::Object::ToString behavior, which gives a representation of the type (boxed by IReference) and does not indicate the value.

Examples

Here's the syntax for defining a Color value as a resource in a XAML ResourceDictionary. You'd typically only need this if you are defining a color that is not already one of the 250+ colors provided as the values in the Colors class, and you want to use the XAML resource system as enforcement that you're using the same color in multiple areas of your app UI. Note the x:Key attribute, required when you define a XAML resource.


  <Application.Resources>
    ...
    <Color x:Key="SlightlyOffBlue">#FF0000E8</Color>
  </Application.Resources>


<!-- example reference to the resource, make sure is a property that is really Color not Brush-->
      <ColorAnimation Storyboard.TargetName="mySolidColorBrush"
        Storyboard.TargetProperty="Color" To="{StaticResource SlightlyOffBlue}" Duration="0:0:4"/>


This code shows a two-way converter for SolidColorBrush and Color values. This can be useful for databinding scenarios, because it implements the IValueConverter pattern that the Converter property of a data binding can use, and you can then bind a SolidColorBrush source to a Color target and vice versa. To see this code in context, see the source for the SwapChainPanel sample.


    class BrushConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, string language)
        {
            return new SolidColorBrush((value is Color) ? (Color)value : Colors.Black);
        }

        public object ConvertBack(object value, Type targetType, object parameter, string language)
        {
            return (value is SolidColorBrush) ? (value as SolidColorBrush).Color : Colors.Black;
        }
    }

Requirements

Minimum supported client

Windows 8

Minimum supported server

Windows Server 2012

Minimum supported phone

Windows Phone 8

Namespace

Windows.UI
Windows::UI [C++]

Metadata

Windows.winmd

Assembly

System.Runtime.WindowsRuntime.dll

See also

Quickstart: Using brushes
Colors
ColorHelper
SolidColorBrush
LinearGradientBrush
ResourceDictionary and XAML resource references

 

 

Show:
© 2014 Microsoft