ColorAnimation.By Property

Definition

Namespace:

Windows.UI.Xaml.Media.Animation

Gets or sets the total amount by which the animation changes its starting value.

public:
 property IReference<Color> ^ By { IReference<Color> ^ get(); void set(IReference<Color> ^ value); };

IReference<Color> By();

void By(IReference<Color> value);

public System.Nullable<Color> By { get; set; }

var iReference = colorAnimation.by;
colorAnimation.by = iReference;

Public Property By As Nullable(Of Color)

<ColorAnimation By="colorString"/>
-or-
<ColorAnimation By="referenceToColor"/>
- or -
<ColorAnimation>
  <ColorAnimation.By>
    <Color>colorString</Color>
  </ColorAnimation.By>
</ColorAnimation>

Property Value

IReference<Color>

Nullable<Color>

The total amount by which the animation changes its starting value. The default is null.

If you are programming using C# or Visual Basic, the type of this property is projected as Color?(a nullable Color).

Examples

<StackPanel>
    <StackPanel.Resources>
        <Storyboard x:Name="colorStoryboard">
            <ColorAnimation Storyboard.TargetName="mySolidColorBrush"
                            Storyboard.TargetProperty="Color" Duration="0:0:4" 
                            By="#0000FF"/>
        </Storyboard>
    </StackPanel.Resources>

    <StackPanel Orientation="Horizontal">
        <Button Content="Animate color" Click="Start_Animation"/>
        <Rectangle Height="100" Width="300" Margin="12,0">
            <Rectangle.Fill>
                <SolidColorBrush x:Name="mySolidColorBrush" Color="#00FF00" />
            </Rectangle.Fill>
        </Rectangle>
    </StackPanel>
</StackPanel>

private void Start_Animation(object sender, RoutedEventArgs e)
{
    colorStoryboard.Begin();
}

Remarks

When you use the By property to animate a color by the specified amount, the hexadecimal value of the By property is added to the hexadecimal value of the starting color. If you're using named colors, remember, the name just represents an rgb value, and that value is what is being added.

For example, if you animate #FF0000 (Red) by #0000FF (Blue), the final color is #FF00FF (Fuchsia). However, if you animate #FF00FF (Fuchsia) by #0000FF (Blue), the final color is still #FF00FF (Fuchsia).

You can set the By property by itself or with the From property. If you set both the By and To properties, the By value is ignored and the animation ends with the To value.

• By only: The animation progresses from the base value of the property being animated or a previous animation's output value to the sum of that value and the value specified by the By property.
• From and By: The animation progresses from the value specified by the From property to the value specified by the sum of the From and By properties.