CODEWITHSUNDEEP
c#xamlwindows-store-apps
Sonali Chalke
Sonali Chalke

Reputation: 149

text highlighting animation in windows 8 apps

i want to create an animation where each word of a line changes its foreground color from black to white after some intervals. initially all the words are set to black. i have used this code:

DispatcherTimer text1timer = new DispatcherTimer();
text1timer.Interval = TimeSpan.FromMilliseconds(440);
        text1timer.Tick += text1timer_Tick;
        text1timer.Start();

void text1timer_Tick(object sender, object e)
    {
        text1timer.Tick -= text1timer_Tick;

        txt1.Foreground = new SolidColorBrush(Colors.White);           
        text1timer.Stop();

        text1timer.Tick += text2timer_Tick;
        text1timer.Start();
    }


 private void text2timer_Tick(object sender, object e)
    {
        text1timer.Tick -= text2timer_Tick;

        txt2.Foreground = new SolidColorBrush(Colors.White);
        text1timer.Stop();

        text1timer.Tick += text3timer_Tick;
        text1timer.Start();

    }

    private void text3timer_Tick(object sender, object e)
    {
        text1timer.Tick -= text3timer_Tick;

        txt3.Foreground = new SolidColorBrush(Colors.White);
        text1timer.Stop();

        text1timer.Tick += text4timer_Tick;
        text1timer.Start();
    }

and so on but i have more than 100 words and i will have to make more than 100 events of the timer.is there any other solution?

Upvotes: 1

Views: 208

Answers (2)

user3155730
user3155730

Reputation:

Use storyboard! there are instructions online and on MSDN.

Upvotes: 0

asitis
asitis

Reputation: 3031

You can use StoryBoard for the desired functionality.Check the following codes.

<Page.Resources>
    <Storyboard x:Name="TextForegroundSb" RepeatBehavior="Forever">
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Tag)" Storyboard.TargetName="textBlock">
        <DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="Red"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:0.2" Value="Green"/>
            <DiscreteObjectKeyFrame KeyTime="0:0:0.4" Value="Blue"/>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</Page.Resources>

Here is the Textblock

<TextBlock x:Name="textBlock" TextWrapping="Wrap" Text="TextBlock"  FontSize="48" Tag="Red" FontWeight="Bold" Foreground="{Binding Tag, RelativeSource={RelativeSource Mode=Self}}" FontFamily="Global User Interface" />

Also you can modify the time by changing DiscreteObjectKeyFrame KeyTime property.

For playing the storyboard on a button click use this code.

xmlns:Interactivity="using:Microsoft.Xaml.Interactivity" <br/>               
xmlns:Core="using:Microsoft.Xaml.Interactions.Core"  <br/>
xmlns:Media="using:Microsoft.Xaml.Interactions.Media" <br/>

  <Button Content="Start sb" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="915,285,0,0" Height="119" Width="276">
        <Interactivity:Interaction.Behaviors>
            <Core:EventTriggerBehavior EventName="Click">
                <Media:ControlStoryboardAction Storyboard="{StaticResource TextForegroundSb}"/>
            </Core:EventTriggerBehavior>
        </Interactivity:Interaction.Behaviors>
    </Button>

Hope this helps. Thanks..

Upvotes: 1

Related Questions