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

Hi,

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

Answer 2

You can put a transparent panel on top like LBugnion said, but don't forget there are many ways you can do this:

1. Change the visibility of the panel to Hidden.
2. Change the opacity to 0.
3. Change the Alpha of the color to 0.

If you only change the Alpha it still is clickable even when you don't see the color.

Off topic but: try to make the effect subtle and maybe have a on/off option.

Answer 3

Attached to this article on progressbars is sample code that has a Vista style progress bar which has the Vista style glint. It uses a Border and a Brush and a Converter to create animations. I can't say I totally understand everything in there, but it works great. Should be easy to copy to your needs.

Answer 4

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 5

How do you convert this to silverlight? Some of the properties don't work.