Create an empty user control
If you want to design a reusable component that can be added to the artboard just like a system control, you can create a user control in Microsoft Expression Blend. User controls can contain other controls, resources, and animation timelines, just like an application. The only difference is that the root element is a UserControl instead of a Window or a Page.
The following procedures show you how to create a user control that contains some animation, and instantiate it in another document.
For an example of creating a custom control in code that can be based on an existing system control, see Try it: Create a custom control with custom properties.
You can find more examples of user controls in the samples that come with Expression Blend. On the Help menu, click Welcome Screen, select the Samples tab, and then click the name of a sample.
For more information about user controls, including XAML and code examples, see the Control Authoring Overview in the Windows Presentation Foundation section on MSDN.
To define the user control
In Expression Blend, do one of the following:
To create a user control in a .dll file, click New Project on the File menu, select the WPF Control Library or the Silverlight 3 Control Library project type, give the project a name, select the language for the code-behind file of the main document, and then click OK. Use this option if you want to hide the implementation of your user control when you give it to someone else, or if you want to be able to change the appearance of the user control by creating a template when the user control is drawn in another application.
To create a user control in a .xaml file in an existing project, click New Item (CTRL+N) on the File menu, select the UserControl template, give the file a name, and then click OK. This option is easier to change because your user control is in the same project in which you use it. Therefore, you can skip the step of updating a reference to a .dll.
Expression Blend opens the user control for editing.
Decide what type of panel you want for the root element. By default, a Grid named LayoutRoot is used, which allows any animations to be resized when the user control is drawn in another document. You could change this to a Canvas or other panel control by right-clicking the LayoutRoot element in the Objects and Timeline panel, pointing to Change Layout Type, and then clicking the name of the panel.
In the Tools panel, select whichever controls and drawing tools that you want in your user control and draw them on the artboard. Modify them using the properties in the Properties panel. User controls can contain anything that a WPF application can contain.
In the Objects and Timeline panel, create any animation timelines that you want.
For an example, see Create a simple animation.
Note
When you set keyframes, consider the timing of all the animations in your application, and when the animation in your user control will run. For example, consider an application that animates a splash screen first and then animates the user interface fading into view second. You can put each animation in its own user control, but leave enough time at the start of the second animation for the length of time that it takes for the splash screen animation to finish.
Tip
Set a keyframe at the 0-second mark if you want the animation to be able to start over multiple times. For example, if you create an animation timeline that moves an object from left to right and is triggered by a mouse double-click, but you do not set a keyframe at the 0-second mark, the animation will not run more than once on subsequent mouse double-clicks because it is a handoff animation. For information about handoff animations, see the "Using multiple and overlapping animation timelines" section in Animating objects.
In the Triggers panel, configure any property or event triggers that will make your application respond to user interactions.
For an example, see Add or remove a trigger.
Note
When you decide on the triggers that you want to set in your user control, consider all the properties and triggers that you want to make available to your user control. For example, consider an application that contains a button, and an animation that is contained in a user control. In Expression Blend, you cannot add a trigger to the user control that will start the animation timeline when the button is clicked unless the button is also a part of the user control. Additionally, you can data bind only between property values if both properties are in the same user control. You can work around this programmatically in code-behind files, or by creating a template with triggers and animation timelines for your user control after it is added to a document. For an example of a user control with a code-behind file, see the Control Authoring Overview in the Windows Presentation Foundation section on MSDN. For information about how to modify a code-behind file from Expression Blend, see Modify a code-behind file.
When you finish creating your user control, make sure that you change the size of the root element of your document so that it is only as big as it has to be. In the Objects and Timeline panel, select your document root, and then, using the Selection tool
.png "Cc294992.2ff91340-477e-4efa-a0f7-af20851e4daa(en-us,Expression.30).png")
, adjust the size of your document window using the blue adorners on the artboard.If your user control depends on mouse clicks or interaction with the empty area in the user control, you have to set the background of the root element to a solid brush so that your user control uses space on the artboard when it is added to another document. In the Brushes category of the Properties panel, change the Background property of your root element to a Solid Color Brush
.png "Cc294992.3a66ec96-47bb-47fc-8876-6b9456feec3a(en-us,Expression.30).png")
. If you want to keep the background invisible, change the Alpha subproperty to 0.If your user control depends on a specific height or width, set the MinHeight and MinWidth properties in the Advanced section
.png "Cc294992.de239c9d-42ce-4f5e-83b9-5f9924c0431f(en-us,Expression.30).png")
of the Layout category in the Properties panel.If you want your user control to be able to be resized when it is drawn in a document, make sure that the Width and Height properties of all objects in the user control are reset to Auto.
Save your files and project by clicking Save All on the File menu.
If your project is a control library, build your project to create the .dll file by clicking Build Project (CTRL+SHIFT+B) on the Project menu. The .dll file is built and saved to the \bin\Debug folder in the same location as your project.