ChangePropertyAction Behavior (Compact 2013)

3/26/2014

This behavior changes the value of a specified property when a specified event occurs. For example, the following XAML example shows you how to create a button that will change the color of a rectangle when the button is clicked.

<!-- This collection element might exist if you have already added other behaviors. -->
    <i:Interaction.Triggers>
    
      <!-- Specify the name of the object (button) whose event will cause the property change.
           Also specify the event name (Click). -->
      <i:EventTrigger SourceName="button" EventName="Click">
      
        <!-- Specify the name of the object (rectangle) whose property will change.
             Also specify the name of the property (Fill). -->
        <ic:ChangePropertyAction TargetName="rectangle" PropertyName="Fill">
        
          <!-- Specify the new value that will be applied to the property.
               In this case, the value is a color, and the property type is a solid color brush. -->
          <ic:ChangePropertyAction.Value>
            <SolidColorBrush Color="#FF2667D8"/>
          </ic:ChangePropertyAction.Value>
          
        </ic:ChangePropertyAction>

      </i:EventTrigger>

    </i:Interaction.Triggers>

    <!-- Here is the button that will trigger the property change when clicked. -->
    <Button x:Name="button" Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top"/>

    <!-- Here is the rectangle whose Fill property will be changed. -->
    <Rectangle x:Name="rectangle" Fill="#FFBC0F0F" HorizontalAlignment="Left"
         Width="200" Height="100" VerticalAlignment="Top" Margin="0,30,0,0"/>

If the property value that you want to change is an enumerable value (such as a number) then the transition can be tweened (animated automatically over time). You can specify a duration of time over which to complete the animated change. For example, the following XAML example shows you how to create a button that will move a rectangle by updating the position attributes. The Duration attribute specifies how much time to take to make the property change.

<ic:ChangePropertyAction TargetName="rectangle" PropertyName="Width" Duration="00:00:02">
    <ic:ChangePropertyAction.Ease>
        <BackEase EasingMode="EaseIn"/>
    </ic:ChangePropertyAction.Ease>
...

Important

If you animate a property with an enumerable value, make sure that you explicitly set the value on the object instead of using Auto. For example, you cannot animate the Width of a rectangle from Auto to 100.

See Also

Concepts

Expression Blend Behaviors in XAML for Windows Embedded
Behaviors, Actions, and Triggers