Search code examples
c#wpfstoryboardwpf-animationdoubleanimation

WPF TextBlock fade in left to right


I have a Textblock which animates when the bound Textis changing:

<EventTrigger RoutedEvent="Binding.TargetUpdated">
    <BeginStoryboard>
        <Storyboard>
            <DoubleAnimation Storyboard.TargetProperty="Opacity" Duration="0:0:0" To="0.0"/>
            <DoubleAnimation Storyboard.TargetProperty="Opacity" Duration="0:0:1" From="0.0" To="1.0" BeginTime="0:0:0"/>
        </Storyboard>
    </BeginStoryboard>
</EventTrigger>

Currently the whole Textblock is fading in as one, but I want the fading to go from left to right. Is this possible?

EDIT

I solved my problem with the comments below. Here's my solution:

<Style x:Key="FadeLeftRightLabel" TargetType="Label">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Label">
                <ContentPresenter>
                    <ContentPresenter.OpacityMask>
                        <LinearGradientBrush StartPoint="0.0,0.5" EndPoint="1.0,0.5">
                            <LinearGradientBrush.GradientStops>
                                <GradientStop x:Name="GradientStop1" Offset="0" Color="Black"/>
                                <GradientStop x:Name="GradientStop2" Offset="0" Color="Transparent"/>
                            </LinearGradientBrush.GradientStops>
                        </LinearGradientBrush>
                    </ContentPresenter.OpacityMask>
                </ContentPresenter>
                <ControlTemplate.Triggers>
                    <EventTrigger RoutedEvent="Binding.TargetUpdated">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetName="GradientStop1" Storyboard.TargetProperty="Offset" Duration="0:0:1" From="0.0" To="1.0" BeginTime="0:0:0"/>
                                <DoubleAnimation Storyboard.TargetName="GradientStop2" Storyboard.TargetProperty="Offset" Duration="0:0:1" From="0.0" To="1.0" BeginTime="0:0:0"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>                
</Style>

Solution

  • You're going to want to use an "Opacity Mask" made out of a linear gradient brush that uses an alpha in the start/end colours.

    http://msdn.microsoft.com/en-us/library/ms743320(v=vs.110).aspx#creatingopacitymaskswithgradients

    Then animate the gradient stop point(s)

    http://msdn.microsoft.com/en-us/library/ms748815(v=vs.110).aspx