Upgrade your Internet Experience
Welcome Sign in
|
Microsoft.com
|
Expression Product Site
|
Expression Library > Design Tools > Expression Studio 2 > Expression Blend 2 > Quick start with Silverlight 2 >  Create a skin for a control in a Silverlight 2 ...
Create a skin for a control in a Silverlight 2 project
This page applies to Silverlight 2 projects only

You can customize the look of system controls in Microsoft Silverlight 2 by using static resources to define templates that are applied to the controls. For example, you could create a template for a button that used images instead of rectangles to construct the appearance of the button.

To create a common look among different control templates or among different user controls, you can convert individual properties to static resources and then apply them to templates and user controls. For example, you could convert the border color of a button template to a resource and then apply that color resource to the border property of a check box template or a custom user control.

To reuse your templates and resources in other projects, you can move the resources into the App.xaml file, and then paste them into the App.xaml file of other projects. By moving your resources to the App.xaml file, it becomes a repository for the skin of your application.

 To create a template of a control
 To create a user control
 To convert a property to a static resource

  1. Select an object on the artboard that has a property value that you want to reuse in other controls.

  2. In the properties Dd185519.cee1494c-ef95-4dd4-9fbc-9d02edfa78b7(en-us,Expression.10).png view of the Properties panel, locate the property that you want to reuse.

    Dd185519.alert_tip(en-us,Expression.10).gifTip:

    You can use the Search text box in the Properties panel to quickly locate a property by characters in the property name.

    Dd185519.a1e4026a-4e48-4f0c-8898-3783121e57fa(en-us,Expression.10).png

    The text that you enter will filter the list of properties.

    Dd185519.c286ad76-70a6-41f7-bed6-d6d4ad69e549(en-us,Expression.10).png

    To restore the Properties panel, click the Clear Dd185519.1d1f5548-6c7a-46bd-9d93-591edc576888(en-us,Expression.10).png button next to the Search text box.

  3. Do one of the following:

    • If you want to reuse a Brush, select the brush, and then click the Convert brush to resource Dd185519.c6247e94-077c-40e1-8979-7886a2eaa8ef(en-us,Expression.10).png button.

      Dd185519.fdc0c10a-e13a-46cd-8cf8-42189fd20550(en-us,Expression.10).png

    • If you want to reuse a color that is applied to a brush, select the brush if it is a Solid color brush Dd185519.3a66ec96-47bb-47fc-8876-6b9456feec3a(en-us,Expression.10).png, or select the gradient stop Dd185519.d45e017e-3123-4fc1-9d99-e87b4e3e2202(en-us,Expression.10).png for the color you want to reuse if the brush is a Gradient brush Dd185519.91fb0c61-7b3b-4ae7-8a59-760e625e3bd7(en-us,Expression.10).png. Then, click the Convert color to resource Dd185519.6bf68607-add8-4d87-b6f4-100c8f05dd17(en-us,Expression.10).png button.

      Dd185519.89203705-cf66-46e0-b153-52a23cd744f7(en-us,Expression.10).png

    • If you want to reuse a numeric or other value type, click the Advanced property options Dd185519.d6ba8f4a-b8a2-445a-af0b-a267dfade6e1(en-us,Expression.10).png button next to the property, and then click Convert to New Resource.

      Dd185519.3f69215a-f522-4347-88fb-f6b219f5419e(en-us,Expression.10).png

  4. In the dialog box that appears (titled Create <type> Resource), enter a meaningful name for your resource, and then click OK.

    The resource is created and listed in the Resources panel.

    Dd185519.97203920-a26b-4bb5-b0ed-9c71ae6973d3(en-us,Expression.10).png

    For information about how to modify a resource after you create it, see Modify a resource.
 To apply a resource to another property

You have many ways to apply a resources to a property.

To apply a resource by dragging it from the Resources panel

  1. From the Resources panel, drag a resource onto a control on the artboard.

    Dragging a font family resource onto a check box control
    Dd185519.8290ff37-d8e8-479f-89f3-a04118ab186b(en-us,Expression.10).png

  2. From the drop-down menu that appears, select which property of the control you want to apply the resource to.

    Applying a font family resource to the FontFamily property of the check box
    Dd185519.2063f03b-e8ad-46cb-9f12-7898b6bc1f43(en-us,Expression.10).png

To apply a resource by using the Advanced property options menu

  1. In the properties Dd185519.cee1494c-ef95-4dd4-9fbc-9d02edfa78b7(en-us,Expression.10).png view of the Properties panel, locate the property that you want to set to a resource.

  2. Click the Advanced property options Dd185519.d6ba8f4a-b8a2-445a-af0b-a267dfade6e1(en-us,Expression.10).png button, point to Local Resource, and then select the resource name from the drop-down list that appears.

To apply a brush resource

  1. In the properties Dd185519.cee1494c-ef95-4dd4-9fbc-9d02edfa78b7(en-us,Expression.10).png view of the Properties panel, select the brush that you want to set to a resource.

  2. In the Brush resources Dd185519.415db740-5a54-48d2-8678-245ccfa7ee8b(en-us,Expression.10).png tab, select the name of the resource.

    Dd185519.af28e5e4-4861-45ac-b02d-e65386520ed7(en-us,Expression.10).png

To apply a color resource

  1. In the properties Dd185519.cee1494c-ef95-4dd4-9fbc-9d02edfa78b7(en-us,Expression.10).png view of the Properties panel, select the brush whose color you want to set to a resource. If the brush is a Gradient brush Dd185519.91fb0c61-7b3b-4ae7-8a59-760e625e3bd7(en-us,Expression.10).png, select the gradient stop Dd185519.d45e017e-3123-4fc1-9d99-e87b4e3e2202(en-us,Expression.10).png for the color.

  2. In the Color resources tab, select the name of the resource.

    Dd185519.5cb88f90-c17a-4dad-be87-b6be7d74f410(en-us,Expression.10).png
 To apply a template to another control of the same type

You have many ways to apply templates to controls.

To apply a template by selecting it in the Asset Library and drawing a new control

  1. From the Toolbox, open the Asset Library Dd185519.0224cabd-5da1-4e01-bddd-4a647401a098(en-us,Expression.10).png.

  2. In the Local Styles tab of the Asset Library, select the template you created.

  3. On the artboard, use your mouse pointer to draw a bounding box.

    A new control is drawn that matches the selected template, and the template is automatically applied.

To apply a template by dragging it from the Resources panel

  1. From the Resources panel, drag a template resource onto a control on the artboard.

  2. From the drop-down menu that appears, select the Style property.

To apply a template by using the Advanced property options menu

  1. Select the object to which you want to apply a template.

  2. In the properties Dd185519.cee1494c-ef95-4dd4-9fbc-9d02edfa78b7(en-us,Expression.10).png view of the Properties panel, locate the Style property.

  3. Next to the Style property, click the Advanced property options Dd185519.d6ba8f4a-b8a2-445a-af0b-a267dfade6e1(en-us,Expression.10).png button, point to Local Resource, and then select the name of the template from the drop-down list that appears.
 To move resources to the App.xaml file

  • If you did not define your resources in the App.xaml file when you created them, you can move your resources to the App.xaml file by dragging them in the Resources panel.

    Dd185519.alert_tip(en-us,Expression.10).gifTip:

    If you do not see your resources, you might have to expand the nodes under the document node (typically Page.xaml).
 To copy resources to other projects

  1. From the Projects panel, double-click the App.xaml file to open it on the artboard.

  2. The App.xaml file cannot be viewed in Design view, so select the XAML tab on the right side of the artboard.

  3. Resources are defined between <Application.Resources> tags.

    <Application.Resources>
</Application.Resources>

    Within these tags, property resources are defined in tags that represent the type of property they are. The Key attribute represents the name that you gave to the resource.

      <FontFamily x:Key="ApplicationFont">Segoe UI</FontFamily>
  <LinearGradientBrush x:Key="BorderBrush" EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FF000000"/>
    <GradientStop Color="#FFC64545" Offset="1"/>
  </LinearGradientBrush>

    Templates are defined between <Style> tags. The Key attribute represents the name that you gave to the template.

      <Style x:Key="ImageButton" TargetType="Button">
    <Setter Property="Background" Value="#FF1F3B53"/>
    <Setter Property="Template">
      ...
    </Setter>
  </Style>

  4. Highlight the XAML that represents the resources that you want to move to another project and then press CTRL+C to copy them.

  5. Open the other project in Expression Blend, open the App.xaml file on the artboard in XAML view, insert the pointer right after the <Application.Resources> tag, and then press CTRL+V to paste the resources.

  6. Make sure no key names are duplicated in any preexisting resources.

  7. Build your project (CTRL+SHIFT+B) to make sure that the new resources were copied correctly.

    Dd185519.alert_tip(en-us,Expression.10).gifTip:

    Alternatively, you could copy the complete App.xaml file into a new project and then just change the name in the x:Class attribute to the name of the new project.

    <Application

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    x:Class="ProjectName.App" ...

Next steps

  • You can watch how to create a control skin for a button and a check box in the "How Do I?" video tutorials at Expression Community website.
Page view tracker