通过WPF模拟交通红绿灯（图文教程）

先看一下效果图：

第一步：新建一个WPF应用程序，这一步的操作就这里省略了。

第二步：在刚才新建的WPF应用程序中添加一个UserControl命名为：TrafficLightControl，如下图所示

关键代码如下，可以直接拷贝到VS2010即可：

<UserControl x:Class="WPF绑定转换器.TrafficLightControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:myConverter="clr-namespace:WPF绑定转换器"
              Width="120" Height="350">
    <UserControl.Resources>
        <myConverter:ColorConverter x:Key="colorConverter" />
    </UserControl.Resources>
    <Grid>
        <Border Background="Black" CornerRadius="10" BorderBrush="Gray" BorderThickness="2">
            <StackPanel VerticalAlignment="Center">
                <StackPanel.Resources>
                    <Style TargetType="{x:Type Ellipse}">
                        <Setter Property="Width" Value="100"></Setter>
                        <Setter Property="Height" Value="100"></Setter>
                        <Setter Property="Fill" Value="LightGray"></Setter>
                        <Setter Property="Stroke" Value="Gray"></Setter>
                        <Setter Property="StrokeThickness" Value="2"></Setter>
                        <Setter Property="Margin" Value="4"></Setter>
                    </Style>
                </StackPanel.Resources>
                <Ellipse Fill="{Binding State,Converter={StaticResource colorConverter},
                                      ConverterParameter=RED}"/>
  25:                  <Ellipse Fill="{Binding State,Converter={StaticResource colorConverter},                                      ConverterParameter=YELLOW}"/>
                <Ellipse Fill="{Binding State,Converter={StaticResource colorConverter},
                                      ConverterParameter=GREEN}"/>
            </StackPanel>
        </Border>
    </Grid>
</UserControl>

代码解释：为了模拟红绿灯，代码24，25，26行分别创建了3个椭圆，分别设置椭圆的Fill属性，每个椭圆的Fill属性通过绑定的一个状态枚举State{GREEN,YELLOW,RED}，Fill属性值实际是一个Brush实例，由于这里用到了枚举值，所以这里同时又创建了一个Converter，在第6行是具体引入这个转换器的方法，下面贴出这个转换器的代码：

    [ValueConversion(typeof(TrafficLight.States), typeof(Brush))]
    public class ColorConverter : IValueConverter
    {
        public enum Lights
        {
            GREEN,
            YELLOW,
            RED
        }
        public object Convert(object value, Type targetType, object parameter,
                                     System.Globalization.CultureInfo culture)
        {
            TrafficLight.States state = (TrafficLight.States)value;
            Lights light = (Lights)Enum.Parse(typeof(Lights), (string)parameter);
            switch (state)
            {
                case TrafficLight.States.GREEN:
                    if (light == Lights.GREEN)
                    {
                        return new SolidColorBrush(Colors.Green);
                    }
                    break;
                case TrafficLight.States.YELLOW:
                    if (light == Lights.YELLOW)
                    {
                        return new SolidColorBrush(Colors.Yellow);
                    }
                    break;
                case TrafficLight.States.RED:
                    if (light == Lights.RED)
                    {
                        return new SolidColorBrush(Colors.Red);
                    }
                    break;
            }
            return new SolidColorBrush(Colors.LightGray);
        }

        public object ConvertBack(object value, Type targetType, object parameter,
                                         System.Globalization.CultureInfo culture)
        {
            return null;
        }
    }

代码解释：由于上面创建椭圆的Fill属性值就是一个Color实例，所以这里的转换器实现的基本功能就是，根据传来的枚举状态值（GREEN，RED，YELLOW），返回相应的色彩画刷（new SolidColorBrush(Colors.颜色)），实现了转换器之后，下面继续实现状态枚举State，代码如下：

public class TrafficLight : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        private States _state;

        public enum States
        {
            GREEN,
            YELLOW,
            RED
        }

        public States State
        {
            get
            {
                return _state;
            }
            set
            {
                if (value != _state)
                {
                    _state = value;
                    if (PropertyChanged != null)
                    {
                        PropertyChanged(this,new PropertyChangedEventArgs("State"));
                    }
                }
            }
        }
    }

代码解释：状态枚举的定义非常简单，这里不做解释了，拷贝代码只可。

第三步：实现了第二步操作，第三步主要工作是，在项目里添加一个WPF窗口来容纳第二步创建的用户控件（TrafficLightControl）

1、页面代码，Xaml代码如下：

<Window x:Class="WPF绑定转换器.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:my="clr-namespace:WPF绑定转换器"
        Title="MainWindow" Height="512" Width="400" Name="mainWnd" AllowsTransparency="True"
         WindowStyle="None" WindowStartupLocation="CenterScreen"
                             MouseLeftButtonDown="mainWnd_MouseLeftButtonDown">
<Window.Resources>
    <my:TrafficLight State="Red" x:Key="myTrafficLight"/>
    <Style BasedOn="{x:Null}" TargetType="{x:Type Button}">
       <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
<Grid x:Name="buttonClose">
                       <Ellipse Stroke="{x:Null}" StrokeThickness="1" x:Name="btnEllipse" >
                          <Ellipse.Fill>
                             <RadialGradientBrush>
                                <GradientStop Color="#BFABA7A4" Offset="0.777"/>
                                <GradientStop Color="#FF897F77" Offset="1"/>
                             </RadialGradientBrush>
                          </Ellipse.Fill>
                       </Ellipse>

  23:
 <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                   HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
          VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True"/>
</Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsFocused" Value="True"/>
                            <Trigger Property="IsDefaulted" Value="True"/>
                            <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Fill" Value="#FF5D4E3E" TargetName="btnEllipse"/>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True"/>
                            <Trigger Property="IsEnabled" Value="False"/>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

    <Border BorderBrush="LightGray" BorderThickness="5">
        <Grid Background="AliceBlue">
            <Grid.RowDefinitions>
                <RowDefinition Height="30"></RowDefinition>
                <RowDefinition Height="30"></RowDefinition>
                <RowDefinition Height="360"></RowDefinition>
                <RowDefinition Height="*"></RowDefinition>
            </Grid.RowDefinitions>
            <Grid Grid.Row="0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="260"></ColumnDefinition>
                    <ColumnDefinition Width="100"></ColumnDefinition>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                </Grid.ColumnDefinitions>
  55:                  <TextBlock Grid.Column="0" HorizontalAlignment="Right"                     VerticalAlignment="Center" FontFamily="Arial" FontSize="20" Text="模拟红绿灯实验">                       </TextBlock>
                <Button Name="btnClose" Grid.Column="1" HorizontalAlignment="Right"
        VerticalAlignment="Center" Content="X" Width="16" Height="16" Click="btnClose_Click"></Button>
            </Grid>
            <Grid Grid.Row="1">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="200"></ColumnDefinition>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                </Grid.ColumnDefinitions>
  63:                  <Ellipse Name="flagEllipse" HorizontalAlignment="Right"            VerticalAlignment="Center" Grid.Column="0" Fill="Red" Width="18" Height="18"></Ellipse>
                <Label Name="lblMessage" HorizontalAlignment="Left" VerticalAlignment="Center"
                        Grid.Column="1" Height="27"></Label>
            </Grid>
            my:TrafficLightControl Grid.Row="2" DataContext="{StaticResource myTrafficLight}"/>
    <StackPanel Orientation="Horizontal" Grid.Row="3" HorizontalAlignment="Center" Height="30">
    <Button Content="开始模拟" Width="100" Margin="2" Click="ButtonClicked" Name="btnStart"/>
    <Button Content="停止模拟" Width="100" Margin="2" Click="ButtonClicked" Name="btnStop"/>
    </StackPanel>
    </Grid>
    </Border>
</Window>

2、后台代码，cs代码：

/// <summary>
   /// Interaction logic for MainWindow.xaml
   /// </summary>
   public partial class MainWindow : Window
   {
       BackgroundWorker _backgroundWorker = new BackgroundWorker();
       DispatcherTimer dispatcherTimer = new DispatcherTimer();
       public MainWindow()
       {
           InitializeComponent();
           _backgroundWorker.DoWork += new DoWorkEventHandler(_backgroundWorker_DoWork);
           _backgroundWorker.RunWorkerCompleted +=
                  new RunWorkerCompletedEventHandler(_backgroundWorker_RunWorkerCompleted);

           dispatcherTimer.Tick += new EventHandler(dispatcherTimer_Tick);
           dispatcherTimer.Interval = TimeSpan.FromMilliseconds(200);
       }

       void _backgroundWorker_RunWorkerCompleted(object sender, RunWorkerCompletedEventArgs e)
       {
           if (e.Cancelled)
           {
               lblMessage.Content = "终止";
           }
           else if (e.Error != null)
           {
               lblMessage.Content = "异常";
           }
           else
           {
               lblMessage.Content = "运行";
           }
       }

       void _backgroundWorker_DoWork(object sender, DoWorkEventArgs e)
       {
           TrafficLight tLight = (TrafficLight)this.FindResource("myTrafficLight");
           if (tLight.State == TrafficLight.States.GREEN)
           {
               tLight.State = TrafficLight.States.RED;
               Thread.Sleep(TimeSpan.FromSeconds(5));
           }
           else if (tLight.State == TrafficLight.States.RED)
           {
               tLight.State = TrafficLight.States.YELLOW;
               Thread.Sleep(TimeSpan.FromSeconds(2));
           }
           else if (tLight.State == TrafficLight.States.YELLOW)
           {
               tLight.State = TrafficLight.States.GREEN;
               Thread.Sleep(TimeSpan.FromSeconds(5));
           }
       }

       void dispatcherTimer_Tick(object sender, EventArgs e)
       {
           if (!_backgroundWorker.IsBusy)
           {
               _backgroundWorker.RunWorkerAsync();
           }
       }

       private void ButtonClicked(object sender, RoutedEventArgs e)
       {
           if (sender == btnStart)
           {
               dispatcherTimer.Start();
               flagEllipse.Fill = Brushes.Red;
               DoubleAnimation da =
                      new DoubleAnimation(1, 0, new Duration(TimeSpan.FromSeconds(0.2)));
               da.AutoReverse = true;
               da.RepeatBehavior = RepeatBehavior.Forever;
               flagEllipse.BeginAnimation(Ellipse.OpacityProperty, da);
           }
           else if (sender == btnStop)
           {
               dispatcherTimer.Stop();
               lblMessage.Content = "中止";
               flagEllipse.Fill = Brushes.Black;
           }
       }

       private void mainWnd_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
       {
           this.DragMove();
       }

       private void btnClose_Click(object sender, RoutedEventArgs e)
       {
           this.Close();
       }
   }

代码解释：拷贝相应代码即可，为了解决界面更新容易假死的情况，这里利用了异步多线程模型BackgroundWorker，对BackgroundWorker模型用法不清楚的可以BaiDu一下，到处都是。

总结：事实上为了模拟红绿灯效果，并不是一步到位的，比如我开始是利用三个按钮（红灯、黄灯、绿灯），并添加相应的Click事件在运行时改变State属性值，之后改成通过DispatcherTimer 调度时钟，自动开启BackgroundWorker异步模型，并每隔一段时间查询模型运行状态，也就是模拟红红绿灯的运行状态。

第四步：一下Demo下载地址

下载：交通红绿灯