Question

我是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>

结果：它没有眨眼。

如果有人帮忙的话，我真的很感激。谢谢，

Answer 1

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

因此，在网格的Loaded事件中创建行。

在每个计时器刻度上，只显示/隐藏它们。

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

Answer 2

你不需要计时器来达到这种效果。只需将五行放在Canvas中，并通过DoubleAnimation为其不透明度设置动画：

<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 个答案: