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

I’ve had a couple request to create a fade in screen using Silverlight/Expression Blend 4 and decided that I would add it to my blog. The whole point of this application, is to present information to the user and once they click on the screen for it to appear in the background. This could be used in numerous ways for a business application. (click to shop, click for more info, etc).

Before diving into this, I did not want multiple XAML pages and chain them together. I wanted to use some of the built in behaviors and states and use no procedural code.

To get started, we will create a new Silverlight 4 application using Expression Blend 4. After we create the application, we will add 2 buttons and it will look like the following. Pretty simple right? I went ahead and added names and a background color but this is completely optional.



XAML here for those that want to follow along. Make sure that you edit the x:Class unless you named your project SilverlightApplication1.

    Width="640" Height="480">

    <Grid x:Name="LayoutRoot" Background="#FFDE5E5E">
       <Button x:Name="btnClick" Content="A Button" Height="55" Margin="83,102,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="122"/>
       <Button x:Name="btnClick2" Content="Another Button" Height="55" Margin="83,170,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="122"/>

Instead of creating another XAML file, we are going to cover the existing Grid with a new one and add our text. When the user clicks on the text then it will fade to the background and show the main application.

We are going to start with adding another Grid on top of the existing Grid and throw in 2 textboxes as shown below:


Notice that we have 2 grids in our Objects and Timeline. The first is named LayoutRoot and the second is grid with no name. I’ve highlighted the grids in red below. Please note that you won’t have the GoToStateAction just yet.


Next, we are going to add a State Group and 2 states. Begin by clicking States and clicking add state group. Now where it says VisualState group add 2 states and name them the same as the following:

  • Show
  • Hide



We are going to go ahead and setup the Default Transition. Click the little fx button and select Fade:


You may want to go ahead and put 0.5 second in for the transition duration.

Now click on the Hide state. After you clicked on Hide, then select the second grid that we added from Objects and Timeline and set its Opacity to 0% and Visibility to collapsed.

You should have the following properties assigned to the second grid that we added.


The only thing left to do at this point is to add a “GoToStateAction” Behavior to the Grid.

Select Assets and then behaviors and look for GoToStateAction.






Drag it onto the grid. Click it once and you will now notice that the properties of the GoToStateAction is available. We want this to trigger on MouseLeftButtonDown and fire the StateName called Hide. Also make sure that you have a check in UseTransitions.


Go ahead and build your application. When it runs you should be able to click on the main screen and it fade into the application.

Complete XAML located here:

    xmlns:ei="" xmlns:ee="" xmlns:d="" xmlns:mc="" xmlns:i="" mc:Ignorable="d"
    Width="640" Height="480">

    <Grid x:Name="LayoutRoot" Background="#FFDE5E5E">
            <VisualStateGroup x:Name="VisualStateGroup">
                    <VisualTransition GeneratedDuration="0:0:0.5">
                            <CircleEase EasingMode="EaseInOut"/>
                <VisualState x:Name="Show"/>
                <VisualState x:Name="Hide">
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="grid">
                            <DiscreteObjectKeyFrame KeyTime="0">
                        <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
        <Button x:Name="btnClick" Content="Button 1" Height="55" Margin="83,102,0,0" VerticalAlignment="Top" Click="btnClick_Click" HorizontalAlignment="Left" Width="122"/>
        <Button x:Name="btnClick2" Content="Button 2" Height="55" Margin="83,170,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="122"/>
        <Grid x:Name="grid" d:IsHidden="True">
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="Black" Offset="0"/>
                    <GradientStop Color="#FF3F5CFF" Offset="1"/>
                <i:EventTrigger EventName="MouseLeftButtonDown">
                    <ei:GoToStateAction StateName="Hide"/>
            <TextBlock TextWrapping="Wrap" Text="Click to Enter:" ToolTipService.ToolTip="For all your Looney Toones Needs" FontSize="48" Foreground="#FFF9F7F7" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            <TextBlock Height="24" Margin="8,0,242,8" TextWrapping="Wrap" Text="Acme Corporation" VerticalAlignment="Bottom" Foreground="#FFF7F2F2" FontSize="16"/>
Posted on Saturday, August 14, 2010 7:21 PM Silverlight | Back to top

Copyright © mbcrump | Powered by: