Vamos a crear un sistema de control de semáforos. Un sistema de control de tráfico, debe coordinar semáforos conforme a la situación geográfica, prioridad de paso, alta circulación y sinfín de factores, en este caso vamos a crear uno sencillo que nos permita cruzar una avenida de una sola vez. Para ello debemos tener un sistema de control y semáforos lógicamente. La mayoría de los semáforos, como de todos es bien sabido, tienen 3 luces, una roja, otra ámbar y otra verde, algunos además tienen control de peatones e indicaciones auxiliares, pero nosotros vamos a crear uno sencillo, con sus tres luces y más adelante ya veremos si ampliamos sus funcionalidades.
Su funcionamiento básico es verde, pasa a amarillo esperando durante unos segundos pasando a rojo finalizando el bucle, vuelve al verde y comienza de nuevo. También puede estar parpadeando.
Pues empezando por lo básico, vamos a crear las luces y como estamos en 2017, vamos a crearlos de LED,s, ya que cambiar el color y añadir un degradado radial no es muy complicado, lo vamos a hacer un poco más difícil o más fácil según se vea.
He usado WPF para crear un control de usuario y dentro de este, he añadido un grid donde voy a distribuir los LED,s dándole un aspecto como el siguiente (el código lo adjunto al final del post)
Además, le he agregado algunas propiedades de dependencia en las que podamos cambiar el color de los LED cuando está encendida la luz, (en este caso yo las he puesto blancas), el color del LED cuando está apagada y el color de fondo cuando están de igual modo apagadas o encendidas. A continuación el código
#region DependecyProperties
public bool LightIsEnabled
{
get { return (bool)GetValue(LightIsEnabledProperty); }
set { SetValue(LightIsEnabledProperty, value); }
}
public Brush LEDColorON
{
get { return (Brush)GetValue(LEDColorONProperty); }
set { SetValue(LEDColorONProperty, value); }
}
public Brush LEDColorOFF
{
get { return (Brush)GetValue(LEDColorOFFProperty); }
set { SetValue(LEDColorOFFProperty, value); }
}
public Brush LEDLightBackgroundOFF
{
get { return (Brush)GetValue(LEDLightBackgroundProperty); }
set { SetValue(LEDLightBackgroundProperty, value); }
}
public Brush LEDLightBackgroundON
{
get { return (Brush)GetValue(LEDLightBackgroundONProperty); }
set { SetValue(LEDLightBackgroundONProperty, value); }
}
// Using a DependencyProperty as the backing store for MyProperty. This enables animation, styling, binding, etc...
public static readonly DependencyProperty LEDLightBackgroundONProperty =
DependencyProperty.Register("LEDLightBackgroundON", typeof(Brush), typeof(LEDLight), new PropertyMetadata(Brushes.Lime));
// Using a DependencyProperty as the backing store for LEDLightBackground. This enables animation, styling, binding, etc...
public static readonly DependencyProperty LEDLightBackgroundProperty =
DependencyProperty.Register("LEDLightBackgroundOFF", typeof(Brush), typeof(LEDLight), new PropertyMetadata(Brushes.Silver));
// Using a DependencyProperty as the backing store for LEDColorOFF. This enables animation, styling, binding, etc...
public static readonly DependencyProperty LEDColorOFFProperty =
DependencyProperty.Register("LEDColorOFF", typeof(Brush), typeof(LEDLight), new PropertyMetadata(Brushes.LightGray));
// Using a DependencyProperty as the backing store for MyProperty. This enables animation, styling, binding, etc...
public static readonly DependencyProperty LEDColorONProperty =
DependencyProperty.Register("LEDColorON", typeof(Brush), typeof(LEDLight), new PropertyMetadata(Brushes.White));
// Using a DependencyProperty as the backing store for ON. This enables animation, styling, binding, etc...
public static readonly DependencyProperty LightIsEnabledProperty =
DependencyProperty.Register("LightIsEnabled", typeof(bool), typeof(LEDLight), new PropertyMetadata(false));
#endregion
Y ¿como se enciende y se apaga? He incluido un par de DataTrigger que comprueban si el valor de la propiedad LightIsEnabled es verdadero y si es así asigna el valor de la propiedad LEDColorON a cada LED y el valor de la propiedad LEDLightBackgroundON al relleno de la ellipse interna. Si al crear una instancia de este, cambiamos esta propiedad, la luz se encenderá o se apagará.
Ahora solo nos queda crear una instancia desde un formulario y ver si funciona
Fondo de color y LED,s blancos
Fondo y LED,s de color
y las instancias desde XAML, quedarían así:
y el código del control de usuario. En la próxima entrega el semáforo.
<UserControl x:Class="Controls.LEDLight"
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:controls="clr-namespace:Controls"
mc:Ignorable="d"
d:DesignHeight="200" d:DesignWidth="200">
<Grid x:Name="grid">
<Grid.Resources>
<!--ESTILO DE LED-->
<Style x:Key="ellipseLED" TargetType="Ellipse">
<Setter Property="Margin" Value="1"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="VerticalAlignment" Value="Stretch"/>
<Setter Property="Fill" Value="{Binding LEDColorOFF}"/>
<Setter Property="Grid.RowSpan" Value="2"/>
<Setter Property="Grid.ColumnSpan" Value="2"/>
<Style.Triggers>
<DataTrigger Binding="{Binding LightIsEnabled}" Value="True">
<Setter Property="Fill" Value="{Binding LEDColorON}"/>
</DataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=controls:LEDLight},Path=LEDLightInsideShape}" Value="{x:Static controls:LEDLight+LEDLightInsideShapeEnum.LeftArrow}"/>
<Condition Binding="{Binding LightIsEnabled}" Value="True"/>
</MultiDataTrigger.Conditions>
<Setter Property="Fill" Value="{Binding LEDColorON}"/>
</MultiDataTrigger>
</Style.Triggers>
</Style>
<!--ESTILO DEL CIRCULO CENTRAL EXTERIOR-->
<Style x:Key="centralEllipse" TargetType="Ellipse">
<Setter Property="Fill" Value="Transparent"/>
<Setter Property="Stroke" Value="DarkGray"/>
<Setter Property="StrokeThickness" Value="5"/>
</Style>
<!--ESTILO DEL FONDO DEL CIRCULO INTERIOR-->
<Style x:Key="centralEllipse2" TargetType="Ellipse">
<Setter Property="Fill" Value="{Binding LEDLightBackgroundOFF}"/>
<Style.Triggers>
<DataTrigger Binding="{Binding LightIsEnabled}" Value="True">
<Setter Property="Fill" Value="{Binding LEDLightBackgroundON}"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="10*"/>
<RowDefinition Height="10*"/>
<RowDefinition Height="10*"/>
<RowDefinition Height="10*"/>
<RowDefinition Height="10*"/>
<RowDefinition Height="10*"/>
<RowDefinition Height="10*"/>
<RowDefinition Height="10*"/>
<RowDefinition Height="10*"/>
<RowDefinition Height="10*"/>
<RowDefinition Height="10*"/>
<RowDefinition Height="10*"/>
<RowDefinition Height="10*"/>
<RowDefinition Height="10*"/>
<RowDefinition Height="10*"/>
<RowDefinition Height="10*"/>
<RowDefinition Height="10*"/>
<RowDefinition Height="10*"/>
<RowDefinition Height="10*"/>
<RowDefinition Height="10*"/>
<RowDefinition Height="10*"/>
<RowDefinition Height="10*"/>
<RowDefinition Height="10*"/>
<RowDefinition Height="10*"/>
<RowDefinition Height="10*"/>
<RowDefinition Height="10*"/>
<RowDefinition Height="10*"/>
<RowDefinition Height="10*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10*"/>
<ColumnDefinition Width="10*"/>
<ColumnDefinition Width="10*"/>
<ColumnDefinition Width="10*"/>
<ColumnDefinition Width="10*"/>
<ColumnDefinition Width="10*"/>
<ColumnDefinition Width="10*"/>
<ColumnDefinition Width="10*"/>
<ColumnDefinition Width="10*"/>
<ColumnDefinition Width="10*"/>
<ColumnDefinition Width="10*"/>
<ColumnDefinition Width="10*"/>
<ColumnDefinition Width="10*"/>
<ColumnDefinition Width="10*"/>
<ColumnDefinition Width="10*"/>
<ColumnDefinition Width="10*"/>
<ColumnDefinition Width="10*"/>
<ColumnDefinition Width="10*"/>
<ColumnDefinition Width="10*"/>
<ColumnDefinition Width="10*"/>
<ColumnDefinition Width="10*"/>
<ColumnDefinition Width="10*"/>
<ColumnDefinition Width="10*"/>
<ColumnDefinition Width="10*"/>
<ColumnDefinition Width="10*"/>
<ColumnDefinition Width="10*"/>
</Grid.ColumnDefinitions>
<!--Ellipse central. INTERIOR-->
<Ellipse Grid.Row="0" Grid.ColumnSpan="27" Grid.RowSpan="28" Style="{StaticResource centralEllipse2}"/>
<!--Linea 0-->
<Ellipse Grid.Row="1" Grid.Column="8" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="1" Grid.Column="10" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="1" Grid.Column="12" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="1" Grid.Column="14" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="1" Grid.Column="16" Style="{StaticResource ellipseLED}"/>
<!--Linea 1-->
<Ellipse Grid.Row="3" Grid.Column="5" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="3" Grid.Column="7" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="3" Grid.Column="9" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="3" Grid.Column="11" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="3" Grid.Column="13" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="3" Grid.Column="15" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="3" Grid.Column="17" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="3" Grid.Column="19" Style="{StaticResource ellipseLED}"/>
<!--Linea 2-->
<Ellipse Grid.Row="5" Grid.Column="4" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="5" Grid.Column="6" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="5" Grid.Column="8" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="5" Grid.Column="10" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="5" Grid.Column="12" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="5" Grid.Column="14" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="5" Grid.Column="16" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="5" Grid.Column="18" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="5" Grid.Column="20" Style="{StaticResource ellipseLED}"/>
<!--Linea 3-->
<Ellipse Grid.Row="7" Grid.Column="3" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="7" Grid.Column="5" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="7" Grid.Column="7" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="7" Grid.Column="9" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="7" Grid.Column="11" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="7" Grid.Column="13" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="7" Grid.Column="15" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="7" Grid.Column="17" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="7" Grid.Column="19" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="7" Grid.Column="21" Style="{StaticResource ellipseLED}"/>
<!--Linea 4-->
<Ellipse Grid.Row="9" Grid.Column="2" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="9" Grid.Column="4" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="9" Grid.Column="6" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="9" Grid.Column="8" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="9" Grid.Column="10" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="9" Grid.Column="12" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="9" Grid.Column="14" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="9" Grid.Column="16" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="9" Grid.Column="18" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="9" Grid.Column="20" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="9" Grid.Column="22" Style="{StaticResource ellipseLED}"/>
<!--Linea 5-->
<Ellipse Grid.Row="11" Grid.Column="1" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="11" Grid.Column="3" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="11" Grid.Column="5" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="11" Grid.Column="7" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="11" Grid.Column="9" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="11" Grid.Column="11" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="11" Grid.Column="13" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="11" Grid.Column="15" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="11" Grid.Column="17" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="11" Grid.Column="19" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="11" Grid.Column="21" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="11" Grid.Column="23" Style="{StaticResource ellipseLED}"/>
<!--Linea 6-->
<Ellipse Grid.Row="13" Grid.Column="2" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="13" Grid.Column="4" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="13" Grid.Column="6" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="13" Grid.Column="8" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="13" Grid.Column="10" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="13" Grid.Column="12" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="13" Grid.Column="14" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="13" Grid.Column="16" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="13" Grid.Column="18" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="13" Grid.Column="20" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="13" Grid.Column="22" Style="{StaticResource ellipseLED}"/>
<!--Linea 7-->
<Ellipse Grid.Row="15" Grid.Column="1" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="15" Grid.Column="3" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="15" Grid.Column="5" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="15" Grid.Column="7" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="15" Grid.Column="9" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="15" Grid.Column="11" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="15" Grid.Column="13" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="15" Grid.Column="15" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="15" Grid.Column="17" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="15" Grid.Column="19" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="15" Grid.Column="21" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="15" Grid.Column="23" Style="{StaticResource ellipseLED}"/>
<!--Linea 8-->
<Ellipse Grid.Row="17" Grid.Column="2" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="17" Grid.Column="4" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="17" Grid.Column="6" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="17" Grid.Column="8" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="17" Grid.Column="10" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="17" Grid.Column="12" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="17" Grid.Column="14" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="17" Grid.Column="16" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="17" Grid.Column="18" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="17" Grid.Column="20" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="17" Grid.Column="22" Style="{StaticResource ellipseLED}"/>
<!--Linea 9-->
<Ellipse Grid.Row="19" Grid.Column="3" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="19" Grid.Column="5" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="19" Grid.Column="7" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="19" Grid.Column="9" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="19" Grid.Column="11" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="19" Grid.Column="13" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="19" Grid.Column="15" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="19" Grid.Column="17" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="19" Grid.Column="19" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="19" Grid.Column="21" Style="{StaticResource ellipseLED}"/>
<!--Linea 10-->
<Ellipse Grid.Row="21" Grid.Column="4" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="21" Grid.Column="6" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="21" Grid.Column="8" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="21" Grid.Column="10" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="21" Grid.Column="12" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="21" Grid.Column="14" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="21" Grid.Column="16" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="21" Grid.Column="18" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="21" Grid.Column="20" Style="{StaticResource ellipseLED}"/>
<!--Linea 11-->
<Ellipse Grid.Row="23" Grid.Column="5" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="23" Grid.Column="7" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="23" Grid.Column="9" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="23" Grid.Column="11" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="23" Grid.Column="13" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="23" Grid.Column="15" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="23" Grid.Column="17" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="23" Grid.Column="19" Style="{StaticResource ellipseLED}"/>
<!--Linea 12-->
<Ellipse Grid.Row="25" Grid.Column="8" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="25" Grid.Column="10" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="25" Grid.Column="12" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="25" Grid.Column="14" Style="{StaticResource ellipseLED}"/>
<Ellipse Grid.Row="25" Grid.Column="16" Style="{StaticResource ellipseLED}"/>
<!--Ellipse central. EXTERIOR-->
<Ellipse Grid.Row="0" Grid.ColumnSpan="27" Grid.RowSpan="28" Style="{StaticResource centralEllipse}"/>
</Grid>
</UserControl>
wakicode 
NO SE VISUALIZA EL CÓDIGO
Me gustaMe gusta
Ya está corregido! los signos < y > tienen algún problemilla con la web!
Me gustaMe gusta
Que Tal fijate que tengo un error, me dice lo siguiente:
El nombre «LEDLight+LEDLightInsideShapeEnum» no existe en el espacio de nombres «clr-namespace:Semaforo».
Me gustaMe gusta
Hola! estas intentando acceder a esa enumeracion a través del espacio de nombres Semaforo y ahí no se encuentra. Debes usar el espacio de nombres Controls a través de su alias controls:(xmlns:controls=»clr-namespace:Controls») siempre que el control de usuario esté en el espacio Controls. Por defecto se les asigna MiEspacioDeNombres.UserControl y si es así debes cambiarlo primero en el XAML y luego en la clase.
Me gustaMe gusta