Create a control from existing objects (Blend for Visual Studio)

You can use the Make Into Control command in Blend for Visual Studio 2012 to make a control template out of any objects on the artboard. The Make Into Control command wraps the object in a style resource that you can then reuse in your project.

Tip

An object in Blend is anything that you place onto the artboard, such as a layout panel, shape, text control, image, button, control template, or any other 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

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

   For more information, see Create a new project (Windows Store apps).

2. 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 Brush in the Properties panel.

   For more information, see Apply a brush to an object's fill or stroke.

3. Right-click the ellipse, point to Group Into, and then click the name of a layout container, such as Grid.

4. With the grid selected in the Objects and Timeline panel, click Make Into Control on the Tools menu or right-click the selected object and then click Make Into Control to convert the grid to a button.

   The Make Into Control dialog box opens.

5. Under Control type, click the type of control you want to create, such as the Button control.

6. 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.

7. 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 <Page: <no name> 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.

8. Click OK to exit the Make Into Control 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. Also notice that you’re automatically switched into template editing mode of the new button you just created:

   

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

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

   

To modify the style of your button

1. To modify the button style that you just created, simply select the object in the Objects and Timeline panel, under the ButtonStyle1 template.

   Note

   When you run the Make Into Control command, you’re automatically switched into template editing mode upon creating a style for your control.

   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. You can also right-click the object in the Objects and Timeline panel, point to Edit Template, and then click 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.

2. 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:

   <Page.Resources>
   <Style x:Key="ButtonStyle1" TargetType="Button">
         <Setter Property="Template">
           <Setter.Value>
   <ControlTemplate TargetType="Button">
   <Grid>
   VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="CommonStates">
   <VisualState x:Name="Pressed"/>
     <VisualState x:Name="Disabled"/>
      <VisualState x:Name="PointerOver"/>
        </VisualStateGroup>
             <VisualStateGroup x:Name="FocusStates">
           <VisualState x:Name="Focused"/>
         <VisualState x:Name="PointerFocused"/>
       </VisualStateGroup>
   </VisualStateManager.VisualStateGroups>
   <Ellipse Fill="{StaticResource TransparentBrush}" Stroke="Black"/>
   <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
   </Grid>
             </ControlTemplate>
           </Setter.Value>
   </Setter>
       </Style>
    </Page.Resources> 
   

3. In the States panel, define the states of the button as desired. For example, in Pressed state you could change the background property of grid object that’s part of the button. Select the [Grid] in the Objects and Timeline panel, and then under Brush in the Properties panel, change the Background property of the grid to a different color.

   Note

   To adjust the size, click and drag the borders of the panel and the border within the panel.

   The States panel after changing the Background property of the grid when the pointer is pressed.

   

4. You can also add Theme animations to the button using the Properties panel. For more information on Theme animations, see States panel (XAML)

5. 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.

6. 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 press the pointer the button, the background color should change.

To apply a button style to a button

1. 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.

2. On the artboard, draw a button by using Button  in the Tools panel.

3. 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 (Blend for Visual Studio) and Creating reusable resources (Blend for Visual Studio).