by
kirupa | 26 April 2010
So much of what you do to your elements involves
changing properties. Setting some text, changing the
background color, adjusting the width/height, etc.
all involve taking something that was once default
and customizing it to suit your own needs.
While customizing properties is something
Expression Blend allows you to shine at, its
influence doesn’t go beyond the artboard. If you
want to change the properties of something in a
running application, you probably have to write some
code or do some other tasks that you may not like.
To make it easier for you to change properties at
runtime, we created a simple behavior called
ChangePropertyAction. Below is an example of a small
application that uses ChangePropertyAction to toggle
the visibility of some text:
Click on the Hide or Show buttons to hide or show
the text. Notice that the text disappears or appears with a
slight easing function that provides that jittery,
flickering look.
The
ChangePropertyAction is a behavior of type Action
(more specifically TargetedTriggerAction), that
allows you to trigger a change to an element’s
property and optionally define a transition:

[ all
of the properties in their full glory ]
Let’s look at some of the properties in greater
detail.
This
action contains only a handful of properties that
you need to set in order to make it all work. With
the TargetName property, you can pick the element
whose property you want to change. By default, it
will be the element that this action is attached to.
The PropertyName property gives you a list of all
properties the element referenced by TargetName
contains:

[ the
PropertyName values depend on the element you have
targeted ]
Depending on which property you select for
PropertyName, the editor you see for Value will
vary. For example, because the Fill property takes a
Brush value, you see the appropriate Brush editor
displayed:

[ the
Fill property displays a cool Brush editor ]
If select a less exciting property such as
Opacity, I see the less ornate number editor:

[ the
Opacity property displays a simple range editor
instead ]
As long as you set the PropertyName and set the
appropriate Value, you pretty much figured out
everything you can do with the ChangePropertyAction.
The only optional thing you can do is specify a
transition to make your property changes a bit more
interesting.
The Animation Properties category contains the
Duration and Ease properties that allow you to set
how long your transition will run for and what kind
of easing effect you wish to apply:

[ you
can specify the ease to apply for the property
change ]
The Duration property takes time values in terms
of Hours:Minutes:Seconds.Milliseconds, so to animate
something for 1 second, you would use
00:00:01:00.
Similarly, for .2 seconds, you would use
00:00:00.2. For 2
milliseconds, you would use
00:00:00.02.
Just note that not all properties can be
animated. For example, if you have a property whose
values can either be True or False, having a
transition between them does not make a lot of
sense. On the other hand, animating the opacity or
Width of an element will work though.
Well,
there you have it. This is the ChangePropertyAction
- an action that allows you to change a property
when triggered. If you are curious to see how my
example was created, feel free to download the
Expression Blend 4 source file below:
|