You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
title: "Animate objects in XAML Designer | Microsoft Docs"
3
-
ms.custom: ""
4
-
ms.date: "11/04/2016"
5
-
ms.reviewer: ""
6
-
ms.suite: ""
7
-
ms.technology:
8
-
- "vs-ide-designers"
9
-
ms.tgt_pltfrm: ""
10
-
ms.topic: "article"
2
+
title: Animate objects in XAML Designer
3
+
ms.date: 04/11/2018
4
+
ms.technology: vs-ide-designers
5
+
ms.topic: conceptual
11
6
ms.assetid: fb88fa26-e835-47f5-9771-2f279441c83c
12
-
caps.latest.revision: 9
13
7
author: "gewarren"
14
8
ms.author: "gewarren"
15
-
manager: ghogen
16
-
ms.workload:
9
+
manager: douge
10
+
ms.workload:
17
11
- "uwp"
18
12
---
19
13
# Animate objects in XAML Designer
20
-
You can create short animations that move objects, or fade them in and out.
21
-
22
-
To get started, create a *storyboard*. A storyboard contains one or more *timelines*. Set *keyframes* on a timeline to mark property changes. Then, when you run the animation, Blend interpolates the property changes over the designated period of time. The result is a smooth transition. You can animate any property that belongs to an object, even nonvisual properties.
23
-
24
-
The following illustration shows a storyboard named **MoveUp**. The timeline contains keyframes that mark the X and Y position of a rectangle. When this animation runs, the rectangle moves from one position to another smoothly.
Learn to create animations by watching these videos.
29
-
30
-
|Watch a short video:|Learn how to:|
31
-
|--------------------------|-------------------|
32
-
|![Configure Installed Features](../designers/media/bldadminconsoleinitialconfigicon.PNG"BldAdminConsoleInitialConfigIcon")[Create timelines](http://www.popscreen.com/v/6A4eF/Microsoft-Expression-Blend-Creating-Timelines)|Create a timeline, and work with objects in the timeline.|
33
-
|![Configure Installed Features](../designers/media/bldadminconsoleinitialconfigicon.PNG"BldAdminConsoleInitialConfigIcon")[Add keyframes and repeat the animation](http://www.popscreen.com/v/6A4fi/Microsoft-Expression-Blend-Adding-Keyframes-and-Repeating-an-Animation)|Add keyframes and set properties at each keyframe. Then, run the animation and watch objects smoothly transition between them.|
34
-
|![Configure Installed Features](../designers/media/bldadminconsoleinitialconfigicon.PNG"BldAdminConsoleInitialConfigIcon")[Add event triggers for interactivity](http://www.popscreen.com/v/6A4e4/Microsoft-Expression-Blend-Adding-Event-Triggers-for-Interactivity)|Start an animation when an event occurs. For example, start one when the window loads.|
35
-
|![Configure Installed Features](../designers/media/bldadminconsoleinitialconfigicon.PNG"BldAdminConsoleInitialConfigIcon")[Animate colors](http://www.popscreen.com/v/6A4gv/Microsoft-Expression-Blend-Animating-Colors)|Use an animation to change the color of an object.|
36
-
|![Configure Installed Features](../designers/media/bldadminconsoleinitialconfigicon.PNG"BldAdminConsoleInitialConfigIcon")[Create and modify motion paths](http://www.popscreen.com/v/6A4fX/Microsoft-Expression-Blend-Creating-and-Modifying-Motion-Paths)|Animate objects along a path.|
37
-
|![Configure Installed Features](../designers/media/bldadminconsoleinitialconfigicon.PNG"BldAdminConsoleInitialConfigIcon")[Ease keyframes](http://www.popscreen.com/v/6A4dM/Microsoft-Expression-Blend-Easing-Keyframes)|Speed up or slow down an animation near the beginning (*easing in*) or near the end (*easing out*) of an animation.|
38
-
|![Configure Installed Features](../designers/media/bldadminconsoleinitialconfigicon.PNG"BldAdminConsoleInitialConfigIcon")[Animate the button](http://www.popscreen.com/v/6A4fK/Microsoft-Expression-Blend-Animating-a-Button)|Create interesting effects that appear on a button when the user points to it.|
39
-
|![Configure Installed Features](../designers/media/bldadminconsoleinitialconfigicon.PNG"BldAdminConsoleInitialConfigIcon")[Create animation and work with easing](https://www.youtube.com/watch?v=mAJXYrwxGYo)|Animate effects that appear when a user presses down a button on the image of a calculator.|
40
-
41
-
## See Also
42
-
[Creating a UI by using Blend for Visual Studio](../designers/creating-a-ui-by-using-blend-for-visual-studio.md)
14
+
15
+
You can create short animations that move objects, or fade them in and out.
16
+
17
+
To get started, create a *storyboard*. A storyboard contains one or more *timelines*. Set *keyframes* on a timeline to mark property changes. Then, when you run the animation, Blend interpolates the property changes over the designated period of time. The result is a smooth transition. You can animate any property that belongs to an object, even nonvisual properties.
18
+
19
+
The following illustration shows a storyboard named **MoveUp**. The timeline contains keyframes that mark the X and Y position of a rectangle. When this animation runs, the rectangle moves from one position to another smoothly.
20
+
21
+
22
+
23
+
## See also
24
+
25
+
-[Create a UI by using Blend for Visual Studio](../designers/creating-a-ui-by-using-blend-for-visual-studio.md)
These videos show you how to use some of the more common controls.
24
-
25
-
|Control|Watch a short video|
26
-
|-------------|-------------------------|
27
-
|`Menu`|[Add the controls](https://www.youtube.com/watch?v=ra4AHfgD4Ys&list=PLBDF977B2F1DAB358&index=45)|
28
-
|`Button`|[Design a button](http://www.popscreen.com/v/6A4gb/Microsoft-Expression-Blend-Designing-a-Button)|
29
-
|`Textblock`|[Add images to a textblock](http://www.popscreen.com/v/6A4du/Microsoft-Expression-Blend-Adding-Images-to-a-TextBlock)|
30
-
|`Slider`|[Build a Slider with a ToolTip](http://www.bing.com/videos/search?q=slider%20expression%20blend&qs=n&form=QBVR&pq=slider%20expression%20blend&sc=1-23&sp=-1&sk=#view=detail&mid=F1BB7DB91B2772A8CA2AF1BB7DB91B2772A8CA2A)|
### Make a control out of an image, shape, or path
33
24
34
-
You can make any object into a control.
25
+
You can make any object into a control.
35
26
36
-
![Blend Make Into Control dialog box](../designers/media/blend_makeintocontrol_xaml.png"blend_MakeIntoControl_XAML")
27
+
37
28
38
-
For example, imagine a picture of a television in the center of a page. You could make controls out of small images that look like television buttons. Then, users could click those buttons to change the channel.
29
+
For example, imagine a picture of a television in the center of a page. You could make controls out of small images that look like television buttons. Then, users could click those buttons to change the channel.
39
30
40
-
This is possible because the buttons are now controls. With controls, you can respond to user interactions; in this case, when the user clicks a button.
31
+
This is possible because the buttons are now controls. With controls, you can respond to user interactions; in this case, when the user clicks a button.
41
32
42
-
To make a control, select an object. Then, on the **Tools** menu, click **Make Control**.
33
+
To make a control, select an object. Then, on the **Tools** menu, click **Make Control**.
43
34
44
35
## Make controls do things
45
36
46
-
Controls can perform actions when users interact with them. For example, they can start an animation, update a data source or play a video.
37
+
Controls can perform actions when users interact with them. For example, they can start an animation, update a data source or play a video.
47
38
48
-
Use *triggers*, *behaviors*, and *events* to make controls do things.
39
+
Use *triggers*, *behaviors*, and *events* to make controls do things.
49
40
50
41
### Triggers
51
42
52
-
A *trigger* changes a property or performs a task in response to an event or a change in another property. For example, you can change the color of a button when users hover over it.
43
+
A *trigger* changes a property or performs a task in response to an event or a change in another property. For example, you can change the color of a button when users hover over it.
**Watch a short video:**[Add a property trigger](http://www.popscreen.com/v/6A4gO/Microsoft-Expression-Blend-Adding-a-Property-Trigger).
A *behavior* is a reusable package of code. It can do a bit more than change properties. It can perform actions such as query a data service. Blend comes with a small collection of them, but you can add more. Drag a behavior onto any object in your artboard, and then customize the behavior by setting properties.
49
+
A *behavior* is a reusable package of code. It can do a bit more than change properties. It can perform actions such as query a data service. Blend comes with a small collection of them, but you can add more. Drag a behavior onto any object in your artboard, and then customize the behavior by setting properties.
61
50
62
-
51
+
63
52
64
-
**Watch a short video:**[Blend tips: Intro to using behaviors Part 1](http://www.bing.com/videos/search?q=Expression%20blend%20behaviors&qs=n&form=QBVR&pq=expression%20blend%20behavior&sc=4-25&sp=-1&sk=#view=detail&mid=CF0DD797ED84DE740904CF0DD797ED84DE740904).
53
+
**Watch a video:**[Blend tips: Intro to using behaviors Part 1](http://www.bing.com/videos/search?q=Expression%20blend%20behaviors&qs=n&form=QBVR&pq=expression%20blend%20behavior&sc=4-25&sp=-1&sk=#view=detail&mid=CF0DD797ED84DE740904CF0DD797ED84DE740904).
65
54
66
55
### Events
67
56
68
-
For ultimate flexibility, handle an *event*. You'll have to write some code.
69
-
70
-
**Watch a short video:**[Add a Mouse event](https://www.youtube.com/watch?v=2PMxAlb-x_E).
57
+
For ultimate flexibility, handle an *event*. You'll have to write some code.
Copy file name to clipboardExpand all lines: docs/designers/modify-the-style-of-objects-in-blend.md
+8-18Lines changed: 8 additions & 18 deletions
Original file line number
Diff line number
Diff line change
@@ -1,16 +1,12 @@
1
1
---
2
-
title: "Modify the style of objects in Blend | Microsoft Docs"
3
-
ms.custom: ""
2
+
title: Modify the style of objects in Blend
4
3
ms.date: "11/04/2016"
5
-
ms.reviewer: ""
6
-
ms.suite: ""
7
4
ms.technology: vs-ide-designers
8
-
ms.tgt_pltfrm: ""
9
-
ms.topic: "article"
5
+
ms.topic: conceptual
10
6
author: "gewarren"
11
7
ms.author: "gewarren"
12
-
manager: ghogen
13
-
ms.workload:
8
+
manager: douge
9
+
ms.workload:
14
10
- "multiple"
15
11
---
16
12
# Modify the style of objects in Blend
@@ -23,8 +19,6 @@ If you want re-use settings or groups of settings, create a re-usable resource.
23
19
24
20
Apply a brush to an object if you want to change its appearance.
25
21
26
-
**Watch a short video:**[Brushes Editor](http://www.popscreen.com/v/6A4mO/Microsoft-Expression-Blend-The-Brushes-Editor).
27
-
28
22
### Paint a repeating image or pattern on an object
29
23
30
24
Paint a repeating image or pattern on an object by using a *tile brush*.
@@ -43,8 +37,6 @@ Create a visual brush from a control such as a button. The following illustratio
**Watch a short video:**[Tile Brushes](http://www.popscreen.com/v/6A4iM/Microsoft-Expression-Blend-Tile-Brushes).
47
-
48
40
## Styles and templates: Create a consistent look and feel across controls
49
41
50
42
You can design the appearance and behavior of a control one time and apply that design to other controls so that you don't have to maintain them individually.
@@ -55,7 +47,7 @@ You can design the appearance and behavior of a control one time and apply that
55
47
56
48
### Create a template or style
57
49
58
-
There's two ways to create a template. You can convert any object on your artboard to a control or you can base your template on an existing control.
50
+
There're two ways to create a template. You can convert any object on your artboard to a control or you can base your template on an existing control.
59
51
60
52
To convert any object to a control template, select the object, and then on the **Tools** menu, choose **Make Into Control**.
61
53
@@ -77,7 +69,7 @@ In the **Create Style Resource** dialog box, you can either name the style or te
77
69
78
70
> [!NOTE]
79
71
> You can't create styles or templates for every type of control. If a control doesn't support them, the breadcrumb button won't appear above the artboard.
80
-
> To return to the editing scope of your main document, click **Return scope to**.
72
+
> To return to the editing scope of your main document, click **Return scope to**.
81
73
82
74
### Apply a style or template to a control
83
75
@@ -87,7 +79,7 @@ Right-click an object in the [Objects and Timeline](../designers/creating-a-ui-b
87
79
88
80
### Restore the default style or template of a control
89
81
90
-
Select the control, and in the [Properties](../designers/creating-a-ui-by-using-blend-for-visual-studio.md#tour-of-the-properties-panel) panel, locate the **Style** or **Template** property. Choose **Advanced options**, and then click **Reset** on the shortcut menu.
82
+
Select the control, and in the [Properties](../designers/creating-a-ui-by-using-blend-for-visual-studio.md#tour-of-the-properties-panel) panel, locate the **Style** or **Template** property. Choose **Advanced options**, and then click **Reset** on the shortcut menu.
91
83
92
84
## Visual states: Change the appearance of a control based on its state
93
85
@@ -97,14 +89,12 @@ Controls can have different visual appearances based on user interactions. For e
97
89
98
90
**Watch a short video:**[Manage the state of your WPF controls](https://www.youtube.com/watch?v=m0PlkF5i6uw).
99
91
100
-
## <aname="Resources"></a> Resources: Create colors, styles, and templates and reuse them later
92
+
## Resources: Create colors, styles, and templates and reuse them later
101
93
102
94
You can convert just about anything in your project to a resource. A resource is just an object that you can reuse in different places in your application. For example, you can create a color one time, make it a resource, and then use that color on several objects. To change the color of all of those objects, just change the color resource.
103
95
104
96
105
97
106
-
**Watch a short video:**[A brief touch on resources](http://www.popscreen.com/v/6A4k7/Microsoft-Expression-Blend-Brief-Touch-on-Resources).
107
-
108
98
## See also
109
99
110
100
[Creating a UI by using Blend for Visual Studio](../designers/creating-a-ui-by-using-blend-for-visual-studio.md)
0 commit comments