红色警笛上方闪烁的线条答案

【问题标题】：Blinking lines above red siren红色警笛上方闪烁的线条
【发布时间】：2016-11-05 11:24:10
【问题描述】：

我是 C# 新手，找不到适合我的问题的解决方案。我正在尝试在 wpf 中使红色警报器上方的闪烁线如下所示。当我单击按钮时，绘制的线条应该每秒闪烁一次，如下图所示。

下面的代码用于在警报器上绘制红线。 2. 参数（bool a）是通过定时器改变行的可见性。

 // Below method is for drawing line and bool a parameter is for changing line visibility according to Mytimer_Tick. 
    public void DrawLine(Point[] points, bool a)
    {
        int i = 0;
        int count = points.Length;
           for (i = 0; i < count - 1; i += 2) 
           { 
        Line myline = new Line();
            myline.Stroke = Brushes.Red;
            myline.StrokeThickness = 3;
            myline.SnapsToDevicePixels = true;
            myline.X1 = points[i].X;
            myline.Y1 = points[i].Y;
            myline.X2 = points[i + 1].X;
            myline.Y2 = points[i + 1].Y;
            Grid.Children.Add(myline);

            if (a==true)
            {
                myline.Visibility = Visibility.Visible;
            }
           else
            {
                myline.Visibility = Visibility.Collapsed;
            }           
        }
    }

下面是时间跨度为 1 秒的计时器。计时器将从按钮开始。

// Timer with 1 sec. timespan. It's for making lines blink every second.     
    public void button_Click(object sender, RoutedEventArgs e)
             {
             DispatcherTimer mytimer = new DispatcherTimer();
                 mytimer.Tick += Mytimer_Tick;
                 mytimer.Interval = new TimeSpan(0, 0, 1);
                 mytimer.Start(); }       

    private bool BlinkOn = true;
    public void Mytimer_Tick(object sender, EventArgs e)
    {
        Point[] points = new Point[10]
         {
          new Point(100, 50),
          new Point(100, 10),

          new Point(115, 50),
          new Point(145, 10),

          new Point(125, 70),
          new Point(185, 45),

          new Point(85, 50),
          new Point(55, 10),

          new Point(75, 70),
          new Point(25, 45),
         };
        if(BlinkOn)
        {
            DrawLine(points, true);
        }
        else
        {
            DrawLine(points,false);
        }
        BlinkOn = !BlinkOn;
        }

下面还有 XAML：

<Window x:Class="try_out_blinking_lines.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:try_out_blinking_lines"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
<Grid x:Name="prid">
    <Grid x:Name="Grid" HorizontalAlignment="Left" Height="170" Margin="130,51,0,0" VerticalAlignment="Top" Width="206" RenderTransformOrigin="0.5,0.5">
        <Image x:Name="siren_r0_jpg" Margin="69,55,78,57" Source="siren_r0.jpg" Stretch="Fill"/>
        <Border BorderThickness="2,2,2,2" BorderBrush="Green"></Border>
    </Grid>
    <Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin="201,261,0,0" VerticalAlignment="Top" Width="75" Click="button_Click"/>

</Grid>

结果：它不闪烁。

如果有人提供帮助，我将不胜感激。谢谢，

【问题讨论】：

标签： c# wpf visual-studio

【解决方案1】：

这种效果不需要计时器。只需将五行放在 Canvas 中，并通过 DoubleAnimation 为其 Opacity 设置动画：

<Canvas>
    <Canvas>
        <Canvas.Triggers>
            <EventTrigger RoutedEvent="Loaded">
                <BeginStoryboard>
                    <Storyboard Duration="0:0:2" RepeatBehavior="Forever">
                        <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                         BeginTime="0:0:1" Duration="0:0:0" To="0"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Canvas.Triggers>
        <Line X1="100" Y1="10" X2="100" Y2="50" Stroke="Red" StrokeThickness="3"/>
        <Line X1="145" Y1="10" X2="115" Y2="50" Stroke="Red" StrokeThickness="3"/>
        <Line X1="55" Y1="10" X2="85" Y2="50" Stroke="Red" StrokeThickness="3"/>
        <Line X1="185" Y1="45" X2="125" Y2="70" Stroke="Red" StrokeThickness="3"/>
        <Line X1="25" Y1="45" X2="75" Y2="70" Stroke="Red" StrokeThickness="3"/>
    </Canvas>
    <Image Source="siren_r0.jpg"
           Width="50" Height="50" Canvas.Left="75" Canvas.Top="55"/>
</Canvas>

现在您还可以通过连续动画不透明度来实现各种漂亮的闪烁效果，例如

<Storyboard RepeatBehavior="Forever">
    <DoubleAnimation Storyboard.TargetProperty="Opacity"
                     Duration="0:0:0.5" To="0" AutoReverse="True">
        <DoubleAnimation.EasingFunction>
            <CubicEase EasingMode="EaseOut"/>
        </DoubleAnimation.EasingFunction>
    </DoubleAnimation>
</Storyboard>

【讨论】：

【解决方案2】：

现在，您在每个计时器滴答声中都创建它们，因此有许多 lines 被创建在另一个之上。此外，您没有清除 false 参数上添加的行。

所以，在网格的Loaded 事件中创建你的线条。

在每个计时器滴答声中，只需显示/隐藏它们。

另外，我会在这里使用Canvas。

【讨论】：