Efecto de brillo de pantalla en WPF o Silverlight

Question

Estoy buscando una manera de crear un efecto "se verá bien" para una aplicación de WPF a pantalla completa en la que estoy trabajando: un efecto de "brillo de pantalla" que se mueve o se mueve toda la pantalla para emitir una experiencia de visualización brillante. Estoy pensando en crear un rectángulo grande con un fondo degradado y transparente resaltado, que podría animarse en la pantalla. ¿Alguna idea de cómo se puede hacer esto de manera efectiva en XAML?

Answer 1

Se me ocurrió una solución que se ve bastante bien. Algunos XAML muestra que se apuntó en el SP1 Blend 2.0 se ve así:

<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> 

Una opción es hacer esto en el código subyacente, que es bastante interesante si desea tener un control granular de la animación. Por ejemplo:

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); 

Este es el código que estoy usando y se ve lo suficientemente bueno para mí. Si obtuviste aceleración de HW podrías probar y agregarle un poco de desenfoque. Puede que tenga que ajustar el código y ocultar/mostrar el rectángulo, pero básicamente esto es todo.

Answer 2

Es fácil colocar cualquier panel transparente "en la parte superior" de la rejilla principal y animar un elemento colocado en el panel. Para colocar un panel "en la parte superior", simplemente colóquelo al final de la jerarquía XAML, después de cualquier otro elemento. Alternativamente, puede usar la propiedad "ZIndex".

Laurent

Answer 3

Puede poner un panel transparente en la parte superior como LBugnion dijo, pero no se olvide que hay muchas maneras de hacer esto:

1. cambiar la visibilidad del panel en Oculto.
2. cambiar la opacidad a 0.
3. Cambiar el alfa del color a 0.

Si sólo cambia el Alfa todavía es se puede hacer clic, incluso cuando usted no ve el color.

Fuera de tema pero: intente que el efecto sea sutil y tal vez tenga una opción de encendido/apagado.

Answer 4

Se adjunta a this article en las barras de progreso se muestra el código que tiene una barra de progreso de estilo de Vista que tiene el brillo de estilo de Vista. Utiliza un borde y un pincel y un convertidor para crear animaciones. No puedo decir que entiendo totalmente todo allí, pero funciona muy bien. Debe ser fácil de copiar a sus necesidades.