Эффект блика экрана в WPF или Silverlight

Question

Я ищу способ создания эффекта «это будет выглядеть круто» для полноэкранного WPF-приложения, над которым я работаю, - эффекта «блика экрана», который анимирует или перемещается по всему экрану, выделяя блестящий опыт показа. Я думаю о создании большого прямоугольника с выделенным градиентом и прозрачным фоном, который можно анимировать по всему экрану. Любые идеи, как это можно эффективно сделать в XAML?

Answer 1

Я придумал решение, которое выглядит довольно хорошо. Пример XAML, который я записал в Blend 2.0 SP1, выглядит следующим образом:

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

Можно сделать это в коде, что довольно удобно, если вы хотите иметь детальный контроль над анимацией. Например:

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

Это код, который я использую, и он выглядит достаточно хорошо для меня. Если вы получили ускорение HW, вы можете попробовать добавить к нему немного размытия. Возможно, вам придется настроить код и скрыть / показать прямоугольник, но в основном это все.

Answer 2

Легко разместить любую прозрачную панель «сверху» основной сетки и анимировать элемент, размещенный на панели. Чтобы разместить панель «сверху», просто поместите ее в конец иерархии XAML после любого другого элемента. Кроме того, вы можете использовать свойство "ZIndex".

Laurent

Answer 3

Прикрепленная к эта статья на индикаторах выполнения представляет собой пример кода с индикатором выполнения в стиле Vista, который имеет блеск в стиле Vista. Он использует Border, Brush и Converter для создания анимации. Я не могу сказать, что я полностью все понимаю, но это прекрасно работает. Должно быть легко скопировано для ваших нужд.

Answer 4

Вы можете поместить прозрачную панель сверху, как сказал LBugnion, но не забывайте, что есть много способов сделать это:

1. Изменить видимость панели на Скрытый.
2. Измените непрозрачность на 0.
3. Изменить альфа цвета на 0.

Если вы измените только альфа-канал, он все равно будет активным , даже если вы не видите цвет.

Не по теме, но: постарайтесь сделать эффект тонким и, возможно, включите или выключите его.