WPF用Blend写的交通信号灯

原文:WPF用Blend写的交通信号灯

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/yangyisen0713/article/details/18357035

用Blend写WPF界面和Behavior特别方便，下面是我写的一个交通信号灯，用Blend写完后代码直接Copy到wpf窗体就可以了。

1.打开Blend做一个矩形和三个圆形，然后分别填充颜色，把矩形的四角编程圆角；

2.添加时间动画并设置动画循环显示：

3.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="106.879" Width="218.457">
    <Window.Resources>
        <Storyboard x:Key="Storyboard1" AutoReverse="True" RepeatBehavior="Forever">
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="ellipse1">
                <EasingColorKeyFrame KeyTime="0:0:0.4" Value="sc#1, 0.004391442, 0.004024717, 0.004024717"/>
                <EasingColorKeyFrame KeyTime="0:0:0.9" Value="#FFF9FF00"/>
                <EasingColorKeyFrame KeyTime="0:0:1.5" Value="sc#1, 0.004391442, 0.004024717, 0.004024717"/>
            </ColorAnimationUsingKeyFrames>
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="ellipse2">
                <EasingColorKeyFrame KeyTime="0:0:0.4" Value="#FF1B1C1B"/>
                <EasingColorKeyFrame KeyTime="0:0:0.9" Value="#FF0F0E0E"/>
                <EasingColorKeyFrame KeyTime="0:0:2" Value="#FF1DFF00"/>
            </ColorAnimationUsingKeyFrames>
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="ellipse">
                <EasingColorKeyFrame KeyTime="0:0:0.9" Value="#FF0F0E0E"/>
            </ColorAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>
    <Window.Triggers>
        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
            <BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
        </EventTrigger>
    </Window.Triggers>
    <Grid x:Name="grid">
        <Rectangle Fill="#FF0063FF" HorizontalAlignment="Left" Height="65" Margin="6,6,0,0" Stroke="Black" VerticalAlignment="Top" Width="202" RadiusY="13.394" RadiusX="13.394"/>
        <Ellipse x:Name="ellipse" Fill="#FFFF0006" HorizontalAlignment="Left" Height="57" Margin="11,10,0,0" Stroke="Black" VerticalAlignment="Top" Width="56"/>
        <Ellipse x:Name="ellipse1" Fill="#FF070707" HorizontalAlignment="Left" Height="57" Margin="77,10,0,0" Stroke="Black" VerticalAlignment="Top" Width="56"/>
        <Ellipse x:Name="ellipse2" Fill="#FF101111" HorizontalAlignment="Left" Height="57" Margin="145,10,0,0" Stroke="Black" VerticalAlignment="Top" Width="56"/>

    </Grid>

</Window>

4.最后效果如图：

下面这个是竖着的效果图：