Screen glint effect in WPF or Silverlight

Question

I'm looking for a way to create an "it will look cool" effect for a full screen WPF application I'm working on - a "screen glint" effect that animates or moves across the whole screen to give off a shiny display experience. I'm thinking of creating a large rectangle with a highlighted-gradient and transparent background, which could be animated across the screen. Any ideas how this can be done effectively in XAML?

Answer 1

I came up with a solution that looks pretty good. Some sample XAML that I chalked up in Blend 2.0 SP1 looks like this:

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="ScreenGlintApplication.Window1"
    x:Name="Window"
    Title="Window1"
    Width="500" Height="250" Background="#FF000000" Foreground="#FF3EE229" >

    <Grid x:Name="LayoutRoot">
        <TextBlock TextWrapping="Wrap" FontSize="40" >
        <Run Text="This is some sample text to have something to work with. Have a nice day! /Johan"/>
        </TextBlock>
        <Canvas Panel.ZIndex="99" >
        <Rectangle x:Name="ScreenGlintRect"  
            Width="{Binding Path=ActualWidth, ElementName=Window, Mode=Default}" 
            Height="{Binding Path=ActualHeight, ElementName=Window, Mode=Default}" 
            Opacity="0.4" >
            <Rectangle.Triggers> 
                <EventTrigger RoutedEvent="Rectangle.Loaded"> 
                  <BeginStoryboard> 
                    <Storyboard> 
                    <DoubleAnimation Storyboard.TargetName="ScreenGlintRect" 
                    Storyboard.TargetProperty="(Canvas.Left)"
                    From="-500" To="1000" Duration="0:0:2" />
                    </Storyboard> 
                  </BeginStoryboard> 
                </EventTrigger> 
          </Rectangle.Triggers> 

            <Rectangle.Fill>
                <LinearGradientBrush StartPoint="0,1" EndPoint="1,1">
                    <GradientStop Color="Transparent" Offset="0.0" />
                    <GradientStop x:Name="GlintColor" Color="LightGreen" Offset="0.50" />
                    <GradientStop Color="Transparent" Offset="1" />
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
        </Canvas>
    </Grid>
</Window>

An option is to do this in code behind, which is pretty neat if you want to have granular control of the animation. For example:

    ScreenGlintRect.Width = Width;
    ScreenGlintRect.Height = Height;
    var animation = new DoubleAnimation
    {
        Duration = new Duration(TimeSpan.FromSeconds(2)),
        From = (-Width),
        To = Width * 2
    };
    ScreenGlintRect.BeginAnimation(Canvas.LeftProperty, animation);

This is the code I'm using and it looks good enough for me. If you got HW acceleration you could try and add some blur to it. You may have to tweak the code and hide/show the rectangle, but basically this is it.

Answer 2

It's easy to place any transparent panel "on top" of the main Grid, and to animate an element placed in the panel. To place a panel "on top", simply put it at the end of the XAML hierarchy, after any other element. Alternatively, you can use the "ZIndex" property.

Laurent