WPF 或 Silverlight 中的屏幕闪烁效果答案

【问题标题】：Screen glint effect in WPF or SilverlightWPF 或 Silverlight 中的屏幕闪烁效果
【发布时间】：2008-10-10 11:46:19
【问题描述】：

我正在寻找一种方法来为我正在开发的全屏 WPF 应用程序创建“看起来很酷”的效果 - 一种“屏幕闪烁”效果，可以在整个屏幕上设置动画或在整个屏幕上移动以发出闪亮的显示体验。我正在考虑创建一个带有高亮渐变和透明背景的大矩形，可以在屏幕上进行动画处理。任何想法如何在 XAML 中有效地完成？

【问题讨论】：

标签： wpf silverlight xaml

【解决方案1】：

我想出了一个看起来不错的解决方案。我在 Blend 2.0 SP1 中记录的一些示例 XAML 如下所示：

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

这是我正在使用的代码，它看起来对我来说已经足够好了。如果你有硬件加速，你可以尝试添加一些模糊。您可能需要调整代码并隐藏/显示矩形，但基本上就是这样。

【讨论】：

如果有交互式控件，则需要在画布上添加IsHitTestVisible="False"。

【解决方案2】：

很容易将任何透明面板放置在主网格的“顶部”，并为放置在面板中的元素设置动画。要将面板放在“顶部”，只需将其放在 XAML 层次结构的末尾，在任何其他元素之后。或者，您可以使用“ZIndex”属性。

劳伦特

【讨论】：

【解决方案3】：

您可以像 LBugnion 所说的那样在顶部放置一个透明面板，但不要忘记有很多方法可以做到这一点：

将面板的可见性更改为隐藏。
将不透明度更改为 0。
将颜色的 Alpha 更改为 0。

如果您只更改 Alpha，即使您看不到颜色，它仍然是可点击的。

题外话，但：尽量使效果微妙，也许有一个开/关选项。

【讨论】：

【解决方案4】：

附在进度条this article 上的是示例代码，它有一个Vista 风格的进度条，它有Vista 风格的闪光。它使用边框和画笔以及转换器来创建动画。我不能说我完全理解那里的一切，但它工作得很好。应该很容易复制到您的需要。

【讨论】：