Geeks With Blogs
Michael Crump Microsoft MVP, INETA Community Champion and XAML Advocate.

I noticed a lot of confusion around flashing text in Silverlight 4/WPF and wanted to show you a simple way to pull it off using Blend 4. I’ve seen plenty of examples of people using code-behind to accomplish this, but this should really be handled in the View or the .XAML file (if you are not familiar using the term View from the MVVM pattern). If you can get a grasp of Storyboard’s and Behaviors, you can do a lot of things similar to this without cluttering your code-behind files.

Full XAML is provided at the end of this article.

Let’s start with a basic Grid and add a TextBlock to it. You will get the following:

image

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="FlashingText.MainPage"
    Width="640" Height="480">

    <Grid x:Name="LayoutRoot" Background="Black">
        <TextBlock Height="44" TextWrapping="Wrap" Text="http://michaelcrump.net" Width="167" Foreground="#FFFDFF00" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Grid>
</UserControl>

 

Next, we need to add a StoryBoard. Begin by looking at the Objects and Timeline and hitting the + button to create a new storyboard. Name it “FlashMe” to differentiate it between other storyboard that you may create.

image

Now, you will notice your screen changed to what is pictured below.

image

This workspace is the design workspace. A better choice for the working in Animation is the Animation workspace. Who would have guessed? Go ahead and hit F6 to switch to the Animation workspace. As you can tell this is much easier to work with.

image

Click on the TextBlock to get started. We are going to create the storyboard but clicking on the 1 in the timeline below. Now look at the properties of the Textblock and set the Visibility property to Collapsed. We are going to do the same thing with the 2 but set the Visibility property to Visible.

image

image

image

Our Storyboard is now created. All we have to do now is wire up the Behavior to the control, determine what event we want and set it to repeat forever. Go ahead and drag a ControlStoryboardAction to our TextBlock that we created.

image

Click on the ControlStoryboardAction and you will have several Properties to configure.

We are going to change the EventName to “Loaded” and the Storyboard to “FlashMe”. You property window should look like the one below.

image

One last thing, click on the Storyboard you created called “FlashMe” and set the RepeatBehavior to Forever.

image

Go ahead and hit the run button and you should get flashing text. 

Full XAML included below.

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
    x:Class="FlashingText.MainPage"
    Width="640" Height="480">
    <UserControl.Resources>
        <Storyboard x:Name="FlashMe" RepeatBehavior="Forever">
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="textBlock">
                <DiscreteObjectKeyFrame KeyTime="0:0:1">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Collapsed</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="0:0:2">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="Black">
        <TextBlock x:Name="textBlock" Height="44" TextWrapping="Wrap" Text="http://michaelcrump.net" Width="167" Foreground="#FFFDFF00" HorizontalAlignment="Center" VerticalAlignment="Center">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Loaded">
                    <ei:ControlStoryboardAction Storyboard="{StaticResource FlashMe}"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </TextBlock>
    </Grid>
</UserControl>
Posted on Thursday, August 26, 2010 6:13 PM Silverlight | Back to top

Copyright © mbcrump | Powered by: GeeksWithBlogs.net