CODEWITHSUNDEEP
c#wpfstoryboardwpf-animationdoubleanimation
redstripes
redstripes

Reputation: 87

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>

Upvotes: 0

Views: 2558

Answers (2)

Dave
Dave

Reputation: 109

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

Upvotes: 3

Sajeetharan
Sajeetharan

Reputation: 222582

Try this, Have Resource like this,

  <Window.Resources>
        <Storyboard x:Key="Storyboard1" >
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="txttest">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:3" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>

TextBlock:

 <Grid x:Name="LayoutRoot" Background="White" Margin="0,0,0,-45">     
       <TextBlock Text="this is to test" FontSize="45" x:Name="txttest" Background="Black" Foreground="White" Margin="0,175,0,114"/>
 </Grid>

In your Constructor,

  var anim = this.Resources["Storyboard1"] as Storyboard;
  if (anim  != null) anim .Begin();

Upvotes: 0

Related Questions