通过WPF模拟交通红绿灯（图文教程）
时间：05-30来源：作者：点击数：
先看一下效果图：
第一步：新建一个WPF应用程序，这一步的操作就这里省略了。
第二步：在刚才新建的WPF应用程序中添加一个UserControl命名为：TrafficLightControl，如下图所示
关键代码如下，可以直接拷贝到VS2010即可：
1: <UserControl x:Class="WPF绑定转换器.TrafficLightControl"
2: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4: xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
5: xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
6: xmlns:myConverter="clr-namespace:WPF绑定转换器"
7: Width="120" Height="350">
8: <UserControl.Resources>
9: <myConverter:ColorConverter x:Key="colorConverter" />
10: </UserControl.Resources>
11: <Grid>
12: <Border Background="Black" CornerRadius="10" BorderBrush="Gray" BorderThickness="2">
13: <StackPanel VerticalAlignment="Center">
14: <StackPanel.Resources>
15: <Style TargetType="{x:Type Ellipse}">
16: <Setter Property="Width" Value="100"></Setter>
17: <Setter Property="Height" Value="100"></Setter>
18: <Setter Property="Fill" Value="LightGray"></Setter>
19: <Setter Property="Stroke" Value="Gray"></Setter>
20: <Setter Property="StrokeThickness" Value="2"></Setter>
21: <Setter Property="Margin" Value="4"></Setter>
22: </Style>
23: </StackPanel.Resources>
24: <Ellipse Fill="{Binding State,Converter={StaticResource colorConverter},
ConverterParameter=RED}"/>
25: <Ellipse Fill="{Binding State,Converter={StaticResource colorConverter},
ConverterParameter=YELLOW}"/>
26: <Ellipse Fill="{Binding State,Converter={StaticResource colorConverter},
ConverterParameter=GREEN}"/>
27: </StackPanel>
28: </Border>
29: </Grid>
30: </UserControl>
代码解释：为了模拟红绿灯，代码24，25，26行分别创建了3个椭圆，分别设置椭圆的Fill属性，每个椭圆的Fill属性通过绑定的一个状态枚举State{GREEN,YELLOW,RED}，Fill属性值实际是一个Brush实例，由于这里用到了枚举值，所以这里同时又创建了一个Converter，在第6行是具体引入这个转换器的方法，下面贴出这个转换器的代码：
1: [ValueConversion(typeof(TrafficLight.States), typeof(Brush))]
2: public class ColorConverter : IValueConverter
3: {
4: public enum Lights
5: {
6: GREEN,
7: YELLOW,
8: RED
9: }
10: public object Convert(object value, Type targetType, object parameter,
System.Globalization.CultureInfo culture)
11: {
12: TrafficLight.States state = (TrafficLight.States)value;
13: Lights light = (Lights)Enum.Parse(typeof(Lights), (string)parameter);
14: switch (state)
15: {
16: case TrafficLight.States.GREEN:
17: if (light == Lights.GREEN)
18: {
19: return new SolidColorBrush(Colors.Green);
20: }
21: break;
22: case TrafficLight.States.YELLOW:
23: if (light == Lights.YELLOW)
24: {
25: return new SolidColorBrush(Colors.Yellow);
26: }
27: break;
28: case TrafficLight.States.RED:
29: if (light == Lights.RED)
30: {
31: return new SolidColorBrush(Colors.Red);
32: }
33: break;
34: }
35: return new SolidColorBrush(Colors.LightGray);
36: }
37:
38: public object ConvertBack(object value, Type targetType, object parameter,
System.Globalization.CultureInfo culture)
39: {
40: return null;
41: }
42: }
代码解释：由于上面创建椭圆的Fill属性值就是一个Color实例，所以这里的转换器实现的基本功能就是，根据传来的枚举状态值（GREEN，RED，YELLOW），返回相应的色彩画刷（newSolidColorBrush(Colors.颜色)），实现了转换器之后，下面继续实现状态枚举State，代码如下：
1: public class TrafficLight : INotifyPropertyChanged
2: {
3: public event PropertyChangedEventHandler PropertyChanged;
4:
5: private States _state;
6:
7: public enum States
8: {
9: GREEN,
10: YELLOW,
11: RED
12: }
13:
14: public States State
15: {
16: get
17: {
18: return _state;
19: }
20: set
21: {
22: if (value != _state)
23: {
24: _state = value;
25: if (PropertyChanged != null)
26: {
27: PropertyChanged(this,new PropertyChangedEventArgs("State"));
28: }
29: }
30: }
31: }
32: }
代码解释：状态枚举的定义非常简单，这里不做解释了，拷贝代码只可。
第三步：实现了第二步操作，第三步主要工作是，在项目里添加一个WPF窗口来容纳第二步创建的用户控件（TrafficLightControl）
1、页面代码，Xaml代码如下：
1: <Window x:Class="WPF绑定转换器.MainWindow"
2: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4: xmlns:my="clr-namespace:WPF绑定转换器"
5: Title="MainWindow" Height="512" Width="400" Name="mainWnd" AllowsTransparency="True"
6: WindowStyle="None" WindowStartupLocation="CenterScreen"
MouseLeftButtonDown="mainWnd_MouseLeftButtonDown">
7: <Window.Resources>
8: <my:TrafficLight State="Red" x:Key="myTrafficLight"/>
9: <Style BasedOn="{x:Null}" TargetType="{x:Type Button}">
10: <Setter Property="Template">
11: <Setter.Value>
12: <ControlTemplate TargetType="{x:Type Button}">
13: <Grid x:Name="buttonClose">
14: <Ellipse Stroke="{x:Null}" StrokeThickness="1" x:Name="btnEllipse" >
15: <Ellipse.Fill>
16: <RadialGradientBrush>
17: <GradientStop Color="#BFABA7A4" Offset="0.777"/>
18: <GradientStop Color="#FF897F77" Offset="1"/>
19: </RadialGradientBrush>
20: </Ellipse.Fill>
21: </Ellipse>
22:
23:
24: <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True"/>
25:</Grid>
26: <ControlTemplate.Triggers>
27: <Trigger Property="IsFocused" Value="True"/>
28: <Trigger Property="IsDefaulted" Value="True"/>
29: <Trigger Property="IsMouseOver" Value="True">
30: <Setter Property="Fill" Value="#FF5D4E3E" TargetName="btnEllipse"/>
31: </Trigger>
32: <Trigger Property="IsPressed" Value="True"/>
33: <Trigger Property="IsEnabled" Value="False"/>
34: </ControlTemplate.Triggers>
35: </ControlTemplate>
36: </Setter.Value>
37: </Setter>
38: </Style>
39: </Window.Resources>
40:
41: <Border BorderBrush="LightGray" BorderThickness="5">
42: <Grid Background="AliceBlue">
43: <Grid.RowDefinitions>
44: <RowDefinition Height="30"></RowDefinition>
45: <RowDefinition Height="30"></RowDefinition>
46: <RowDefinition Height="360"></RowDefinition>
47: <RowDefinition Height="*"></RowDefinition>
48: </Grid.RowDefinitions>
49: <Grid Grid.Row="0">
50: <Grid.ColumnDefinitions>
51: <ColumnDefinition Width="260"></ColumnDefinition>
52: <ColumnDefinition Width="100"></ColumnDefinition>
53: <ColumnDefinition Width="*"></ColumnDefinition>
54: </Grid.ColumnDefinitions>
55: <TextBlock Grid.Column="0" HorizontalAlignment="Right"
VerticalAlignment="Center" FontFamily="Arial" FontSize="20" Text="模拟红绿灯实验">
</TextBlock>
56: <Button Name="btnClose" Grid.Column="1" HorizontalAlignment="Right"
VerticalAlignment="Center" Content="X" Width="16" Height="16" Click="btnClose_Click"></Button>
57: </Grid>
58: <Grid Grid.Row="1">
59: <Grid.ColumnDefinitions>
60: <ColumnDefinition Width="200"></ColumnDefinition>
61: <ColumnDefinition Width="*"></ColumnDefinition>
62: </Grid.ColumnDefinitions>
63: <Ellipse Name="flagEllipse" HorizontalAlignment="Right"
VerticalAlignment="Center" Grid.Column="0" Fill="Red" Width="18" Height="18"></Ellipse>
64: <Label Name="lblMessage" HorizontalAlignment="Left" VerticalAlignment="Center"
Grid.Column="1" Height="27"></Label>
65: </Grid>
66: my:TrafficLightControl Grid.Row="2" DataContext="{StaticResource myTrafficLight}"/>
67: <StackPanel Orientation="Horizontal" Grid.Row="3" HorizontalAlignment="Center" Height="30">
68: <Button Content="开始模拟" Width="100" Margin="2" Click="ButtonClicked" Name="btnStart"/>
69: <Button Content="停止模拟" Width="100" Margin="2" Click="ButtonClicked" Name="btnStop"/>
70: </StackPanel>
71: </Grid>
72: </Border>
73: </Window>
2、后台代码，cs代码：
1: /// <summary>
2: /// Interaction logic for MainWindow.xaml
3: /// </summary>
4: public partial class MainWindow : Window
5: {
6: BackgroundWorker _backgroundWorker = new BackgroundWorker();
7: DispatcherTimer dispatcherTimer = new DispatcherTimer();
8: public MainWindow()
9: {
10: InitializeComponent();
11: _backgroundWorker.DoWork += new DoWorkEventHandler(_backgroundWorker_DoWork);
12: _backgroundWorker.RunWorkerCompleted +=
new RunWorkerCompletedEventHandler(_backgroundWorker_RunWorkerCompleted);
13:
14: dispatcherTimer.Tick += new EventHandler(dispatcherTimer_Tick);
15: dispatcherTimer.Interval = TimeSpan.FromMilliseconds(200);
16: }
17:
18: void _backgroundWorker_RunWorkerCompleted(object sender, RunWorkerCompletedEventArgs e)
19: {
20: if (e.Cancelled)
21: {
22: lblMessage.Content = "终止";
23: }
24: else if (e.Error != null)
25: {
26: lblMessage.Content = "异常";
27: }
28: else
29: {
30: lblMessage.Content = "运行";
31: }
32: }
33:
34: void _backgroundWorker_DoWork(object sender, DoWorkEventArgs e)
35: {
36: TrafficLight tLight = (TrafficLight)this.FindResource("myTrafficLight");
37: if (tLight.State == TrafficLight.States.GREEN)
38: {
39: tLight.State = TrafficLight.States.RED;
40: Thread.Sleep(TimeSpan.FromSeconds(5));
41: }
42: else if (tLight.State == TrafficLight.States.RED)
43: {
44: tLight.State = TrafficLight.States.YELLOW;
45: Thread.Sleep(TimeSpan.FromSeconds(2));
46: }
47: else if (tLight.State == TrafficLight.States.YELLOW)
48: {
49: tLight.State = TrafficLight.States.GREEN;
50: Thread.Sleep(TimeSpan.FromSeconds(5));
51: }
52: }
53:
54: void dispatcherTimer_Tick(object sender, EventArgs e)
55: {
56: if (!_backgroundWorker.IsBusy)
57: {
58: _backgroundWorker.RunWorkerAsync();
59: }
60: }
61:
62: private void ButtonClicked(object sender, RoutedEventArgs e)
63: {
64: if (sender == btnStart)
65: {
66: dispatcherTimer.Start();
67: flagEllipse.Fill = Brushes.Red;
68: DoubleAnimation da =
new DoubleAnimation(1, 0, new Duration(TimeSpan.FromSeconds(0.2)));
69: da.AutoReverse = true;
70: da.RepeatBehavior = RepeatBehavior.Forever;
71: flagEllipse.BeginAnimation(Ellipse.OpacityProperty, da);
72: }
73: else if (sender == btnStop)
74: {
75: dispatcherTimer.Stop();
76: lblMessage.Content = "中止";
77: flagEllipse.Fill = Brushes.Black;
78: }
79: }
80:
81: private void mainWnd_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
82: {
83: this.DragMove();
84: }
85:
86: private void btnClose_Click(object sender, RoutedEventArgs e)
87: {
88: this.Close();
89: }
90: }
代码解释：拷贝相应代码即可，为了解决界面更新容易假死的情况，这里利用了异步多线程模型BackgroundWorker，对BackgroundWorker模型用法不清楚的可以BaiDu一下，到处都是。
总结：事实上为了模拟红绿灯效果，并不是一步到位的，比如我开始是利用三个按钮（红灯、黄灯、绿灯），并添加相应的Click事件在运行时改变State属性值，之后改成通过DispatcherTimer 调度时钟，自动开启BackgroundWorker异步模型，并每隔一段时间查询模型运行状态，也就是模拟红红绿灯的运行状态。
第四步：一下Demo下载地址
下载：交通红绿灯
方便获取更多学习、工作、生活信息请关注本站微信公众号
湘公网安备 43102202000103号