Create a control from existing objects

Article
10/10/2017

You can use the Make Into Control feature in Microsoft Expression Blend to make a control template out of any objects on the artboard. The Make Into Control tool wraps the objects in a style resource that you can reuse.

Tip

An object in Expression Blend is anything that you place onto the artboard, such as a layout panel, shape, text control, image, button, control template, or any other user interface (UI) design element. Placing a UI element onto the artboard creates an object instance of the element in your application.

To create a button from an ellipse

If you have not already done so, open or create a new project.

For more information, see Create a new project.
On the artboard, draw a circle by using Ellipse in the Tools panel. To make the ellipse more visible, you can change its appearance by altering its properties under Brushes in the Properties panel.

For more information, see Apply a solid color or gradient brush to an object's fill or stroke.
Right-click the ellipse, point to Group Into, and then click the name of a layout container, such as Grid.
With the grid selected in the Objects and Timeline panel, click Make Into Control on the Tools menu to convert the grid to a button.

The Make Into Control dialog box opens.
Under Control type, click the type of control you want to create, such as the Button control.
Under Name (Key), select the first radio button (default), and then enter a name to be used to identify the button style. Alternatively, you could select the Apply to all option that would apply the style to all buttons on the artboard that do not already reference a style by name.
Under Define in, click the option that reflects where you want the button style to be defined. Click Application to make the button style available to any document in your application. Click This document (Window: Window) to make the button style available only to the current document. Click Resource dictionary to define the button style in a resource dictionary in your application.
Click OK to exit the Create Style Resource dialog box and to create the button style.

Notice that in the Objects and Timeline panel, the ellipse object is converted to a button object whose style is set to your new button style.

Additionally, the button style is listed in the Resources tab in the node where it was defined (for example, in the Window node).

The new button style as it appears in the Resources tab of Expression Blend

To modify the style of your button

To modify the button style that you just created, right-click the new button object in the Objects and Timeline panel, point to Edit Template, and then click Edit Current.

The artboard switches to the editing scope of the control template.

Tip

There are multiple ways that you can enter the editing scope of a control template. For example, you can view your button style in the Resources tab, and then click the Edit resource button beside the resource name. This takes you to the editing scope of the style, from which you can go to the editing scope of the control template by right-clicking the style object in the Objects and Timeline panel, pointing to Edit Template, and then clicking Edit Current.

To exit the editing scope of a control template, click Return scope to in the Objects and Timeline panel. If you entered the editing scope of the control template from the editing scope of the style, you will be returned to the style. Click the Return scope to button again to return to the editing mode of the document.

Tip

The Make Into Control tool wraps the original object (the ellipse) in a style resource that contains a control template. The style defines the properties that are set on the object to which the style is applied (in this case, a button object). The control template defines the states, structure, and appearance of the object.
Inside the control template is a Grid panel that contains the original object (the ellipse) and a ContentPresenter object that displays the content of the button object. Placing your object inside a Grid panel enables you to quickly add and arrange other objects.

The structure of the control template for the new button style

You can see how the style and the control template are related by looking at the Extensible Application Markup Language (XAML) for the resource. For example, the structure of the button style might look like the following:
```
  <Window.Resources>
    <Style x:Key="ButtonStyle1" ...>  
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="{x:Type Button}">  
            <Grid>
              <Ellipse>
                ...
              </Ellipse>
              <ContentPresenter .../>
            </Grid>
            <ControlTemplate.Triggers>
              ...
            </ControlTemplate.Triggers>
          </ControlTemplate>  
        </Setter.Value>
      </Setter>
    </Style>  
  </Window.Resources>
```
In the Triggers panel, define the states of the button as desired. For example, click IsMouseOver = True to activate trigger recording for the state when the user passes their mouse over the button. Select the ellipse in the Objects and Timeline panel, and then under Appearance in the Properties panel, change the Fill property of the ellipse to a different color. Notice that a new property change for ellipse.Fill is added in the Triggers panel under Properties when active, as shown in the following image.

Note

You might have to adjust the size of the Triggers panel to see the Properties when active section. To adjust the size, click and drag the borders of the panel and the border within the panel.

The Triggers panel after changing the Fill of the ellipse when the pointer is over the button
You can also add animation to the button. For example, in the Triggers panel, click IsPressed = True to activate trigger recording for the state when the user clicks the button. With the ellipse still selected in the Objects and Timeline panel, hold the SHIFT and ALT keys while you drag one corner of the ellipse. (The SHIFT+ALT keyboard shortcut maintains the center point of the object.)

Alternatively, you can add more complicated animation by creating a new storyboard and triggering that storyboard from an Event Trigger for the IsPressed event.

For more information, see Writing code that will respond to events.
After you have defined the states of the button as desired, click Return scope to in the Objects and Timeline panel to return to the editing scope of the document.
To test the states, click Run Project on the Project menu (or press F5), and then see if the button states are working properly. For example, when you move the pointer over the button, the fill color should change.

To apply a button style to a button

Make sure that you are in the editing scope that you want. You can apply a style to a button in any scope, including within the scope of a control template.
On the artboard, draw a button by using Button in the Tools panel.
Right-click the new button object in the Objects and Timeline panel, point to Edit Template, point to Apply Resource, and then select your button style from the list.

You can also use the Edit Style and Edit Template commands on the Object menu to apply a style resource.

Applying the button style to a button object, by using the right-click method

To remove or change the style of a button

Because the button style is a resource, treat it like any other resource.

For information about removing or altering style resources, see Reset a property to its default value and Creating reusable resources.

Create a control from existing objects

To create a button from an ellipse

To modify the style of your button

To apply a button style to a button

To remove or change the style of a button

See also

Tasks

Concepts

Additional resources