WPF模拟探照灯文字

利用Blend可以轻松做出WPF模仿探照灯照射文字的效果,Blend步骤不详写了,代码copy出来基本上就清楚了,就是利用矩形加圆形和透明等实现的效果。

xaml代码如下:

<Window  x:Class="WPF探照灯.MainWindow"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         Title="MainWindow" Height="200" Width="527" WindowStyle="None" Background="Black" WindowStartupLocation="CenterScreen">
    <Window.Resources>
        <Storyboard x:Key="SearchLight" RepeatBehavior="Forever" AutoReverse="True">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="path">
                <EasingDoubleKeyFrame KeyTime="0:0:6" Value="260"/>
                <EasingDoubleKeyFrame KeyTime="0:0:7" Value="260"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="path">
                <EasingDoubleKeyFrame KeyTime="0:0:6" Value="5"/>
                <EasingDoubleKeyFrame KeyTime="0:0:7" Value="5"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>
    <Window.Triggers>
        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
            <BeginStoryboard Storyboard="{StaticResource SearchLight}"/>
        </EventTrigger>
    </Window.Triggers>
    <Grid>
        <TextBlock Height="45" Margin="128,79,0,0" TextWrapping="Wrap" Width="459" FontSize="32" HorizontalAlignment="Left" VerticalAlignment="Top"><Run Foreground="DeepSkyBlue" Language="zh-cn" Text="祝大家:马年大吉!"/></TextBlock>
        <Path x:Name="path" Data="M532.5,10.499994 C520.34973,10.499994 510.5,20.34973 510.5,32.499994 510.5,44.650259 520.34973,54.499994 532.5,54.499998 544.65027,54.499994 554.5,44.650259 554.5,32.499994 554.5,20.34973 544.65027,10.499994 532.5,10.499994 z M0.5,0.5 L999.5,0.5 999.5,69.499987 0.5,69.499987 z" Fill="#CC00000E" HorizontalAlignment="Left" Height="67" Margin="-171.5,68,0,0" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="592" RenderTransformOrigin="0.5,0.5">
            <Path.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </Path.RenderTransform>
        </Path>

    </Grid>
</Window>
效果如图:

WPF模拟探照灯文字

WPF模拟探照灯文字

上一篇:Qt5.2加载百度地图进行相关操作


下一篇:基于CSerialPort修改类的串口调试助手源代码(支持中文、自动保存等)