Export (0) Print
Expand All

Styling Elements in your Application by using Surface Colors



You can give your application a consistent look by using Microsoft Surface colors to design elements in your application. For example, you could use the same background and foreground colors of the SurfaceButton in the template of a custom control to make your custom control look similar to the Surface controls. Alternatively, you could use the accent colors of the SurfaceColors palette in a bar graph.

Bind a XAML Property to a Surface Color

  • Binding a property in XAML results in a dynamic value. If the system administrator selects one of the other Surface color schemes, the value of the bound property is updated. This is the preferred method of styling elements in your application.

    The following code example shows how to set the Fill property of a rectangle using the following syntax:

    {DynamicResource {x:Static s:SurfaceColors.property_name}}

    When referencing a Surface color in XAML, use the key version of the resource. Each color and brush in SurfaceColors has a key version.

    
    <Rectangle Fill="{DynamicResource {x:Static s:SurfaceColors.Accent1BrushKey}}" Height="20" Width="20"/>
    

Set a Property to a Surface Color in Code

  • Setting a property in code is not recommended because it results in a hard-coded value. If the system administrator changes the Surface color scheme while your application is running, hard-coded colors are not updated.

    If this is the result you want, the following code example shows how to set the Fill property of a rectangle using the properties of the SurfaceColors run-time object.

    
    // Do not use this method.  This code snippet is included for completeness, but
    // it is not a good practice to use hard-coded values.
    // Use the XAML binding method instead.
    Rectangle1.Fill = SurfaceColors.Accent1Brush;
    

See Also

Did you find this information useful? Please send us your suggestions and comments.

© Microsoft Corporation. All rights reserved.
Show:
© 2014 Microsoft