我正在寻找一种方法来为我正在开发的全屏 WPF 应用程序创建“看起来很酷”的效果 - 一种“屏幕闪烁”效果,可以在整个屏幕上进行动画处理或移动以提供闪亮的显示体验. 我正在考虑创建一个带有高亮渐变和透明背景的大矩形,可以在屏幕上设置动画。任何想法如何在 XAML 中有效地做到这一点?
Johan Danforth
问问题
3673 次
4 回答
6
我想出了一个看起来不错的解决方案。我在 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);
这是我正在使用的代码,它看起来对我来说已经足够好了。如果你有硬件加速,你可以尝试添加一些模糊。您可能需要调整代码并隐藏/显示矩形,但基本上就是这样。
于 2008-10-20T12:53:08.620 回答
2
很容易将任何透明面板放置在主网格的“顶部”,并为放置在面板中的元素设置动画。要将面板放在“顶部”,只需将其放在 XAML 层次结构的末尾,在任何其他元素之后。或者,您可以使用“ZIndex”属性。
洛朗
于 2008-10-10T12:59:39.160 回答
0
您可以像 LBugnion 所说的那样在顶部放置一个透明面板,但不要忘记有很多方法可以做到这一点:
- 将面板的可见性更改为隐藏。
- 将不透明度更改为 0。
- 将颜色的 Alpha 更改为 0。
如果您只更改 Alpha,即使您看不到颜色,它仍然是可点击的。
离题但是:尽量使效果微妙,也许有一个开/关选项。
于 2008-10-10T14:43:46.203 回答
0
附加到这篇关于进度条的文章是示例代码,它有一个 Vista 风格的进度条,它有 Vista 风格的闪烁。它使用边框和画笔以及转换器来创建动画。我不能说我完全理解那里的所有内容,但效果很好。应该很容易复制到您的需要。
于 2008-10-10T16:57:02.440 回答