Semáforo II

Semáforo II
En esta entrega vamos a crear el semáforo. Aunque no lo parezca, pero un semáforo a pesar de su simplicidad visual, tiene aspectos bastante complejos y sobre todo cuando tienen que estar sincronizados o comunicados con otros, existen muchas matemáticas detrás de los modelos de tráfico de las grandes ciudades.

Sin darle más complejidad que la que necesitamos para nuestro proyecto final, que es un sistema de control de semáforos en una avenida para poder cruzarla de una sola vez sin pararnos, le asignaremos las siguientes características:

  • Tiempo en verde
  • Tiempo en amarillo
  • Tiempos en rojo
  • Tiempo de retardo para sincronziación de semáforos
  • Estado en el que se encuentra
  • Función de funcionamiento en manual o automático
  • Función de inicio automático
  • Función de parpadeo

En el diseño XAML, creamos unos objetos rectangle y le incluimos los controles de usuario creados en el post Semáforo I. El cambio de color lo podiamos haber hecho con converter, con propiedades, pero esta vez he optado por hacerlo con estilos y DataTrigger. A cada objeto LEDLight (luz del semáforo) le asigno un estilo genérico con algún efecto de fundido para que parezca más real; luego este estilo es heredado por otros tres estilos, uno por cada color donde los DataTrigger hacen su trabajo comprobando el estado del semáforo y activando la propiedad LightIsEnabled a Truesi cumple con la condición del DataTrigger. (Código al final del post)

Luego en el código de clase, le añado un DispatcherTime que nos hará las funciones de temporizador, creamos unas cuantas propiedades de dependencia para cumplir con nuestras características.
Tiene un método privado que será llamado desde el temporizador y este asignará el estado al semáforo y como consecuencia activando el color correspondiente.

        void changingState()
        {
            // Retardo inicial
            if (DelayTime > 0)
            {
                timer.Interval = new TimeSpan(0, 0, (int)DelayTime);
                DelayTime = 0;
                return;
            }

            // Parpadeando
            if (IsFlashingAmberLight)
            {
                if (State.Equals(LEDTrafficLightState.Yellow))
                {
                    State = LEDTrafficLightState.None;
                    timer.Interval = new TimeSpan(0, 0, 0, 0, 500);
                }
                else
                {
                    State = LEDTrafficLightState.Yellow;
                    timer.Interval = new TimeSpan(0, 0, 0, 1);
                }

                return;
            }

            // Cambio de color
            switch (State)
            {
                case LEDTrafficLightState.Red:
                    // SEMÁFORO EN VERDE
                    State = LEDTrafficLightState.Green;
                    
                    timer.Interval = new TimeSpan(0, 0, GreenTime);
                    break;
                case LEDTrafficLightState.Yellow:
                    // SEMÁFORO EN VERDE
                    State = LEDTrafficLightState.Red;
                    timer.Interval = new TimeSpan(0, 0, RedTime);
                    break;
                case LEDTrafficLightState.Green:
                    // SEMÁFORO EN AMBAR
                    State = LEDTrafficLightState.Yellow;
                    timer.Interval = new TimeSpan(0, 0, YellowTime);
                    break;
                default:
                    break;
            }
        }

y este el resultado instanciando varios semáforos en una ventana

            <controls:LEDTrafficLight x:Name="LEDTL1" Width="100" Height="300" GreenTime="4" RedTime="4" DelayTime="1" Margin="10"/>
            <controls:LEDTrafficLight x:Name="LEDTL2" Width="100" Height="300" GreenTime="5" RedTime="4" DelayTime="2" Margin="10"/>
            <controls:LEDTrafficLight x:Name="LEDTL3" Width="100" Height="300" GreenTime="5" RedTime="5" DelayTime="3" Margin="10"/>
            <controls:LEDTrafficLight x:Name="LEDTL4" Width="100" Height="300" GreenTime="5" RedTime="5" IsFlashingAmberLight="True" Margin="10"/>  

Video7
La próxima entrega, el sistema de control de semáforos

<UserControl x:Class="Controls.LEDTrafficLight"
             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="300" d:DesignWidth="100">
    <Grid x:Name="grid">
        <Grid.Resources>
            <Style x:Key="LightStyle" TargetType="controls:LEDLight">
                <Setter Property="Margin" Value="5"/>
                <Style.Triggers>
                    <Trigger Property="LightIsEnabled" Value="True">
                        <Trigger.ExitActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation
                  Storyboard.TargetProperty="Opacity"
                  From="0" To="1" Duration="0:0:0.2" />
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.ExitActions>
                        <Trigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation
                  Storyboard.TargetProperty="Opacity"
                  From="0" To="1" Duration="0:0:0.1" />
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>
                    </Trigger>
                </Style.Triggers>
            </Style>
            <Style x:Key="RedLightStyle" TargetType="controls:LEDLight" BasedOn="{StaticResource LightStyle}">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=controls:LEDTrafficLight},Path=State }" Value="{x:Static controls:LEDTrafficLight+LEDTrafficLightState.Red}">
                        <Setter Property="LightIsEnabled" Value="True"/>
                    </DataTrigger>

                </Style.Triggers>
            </Style>
            <Style x:Key="YellowLightStyle" TargetType="controls:LEDLight" BasedOn="{StaticResource LightStyle}">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=controls:LEDTrafficLight},Path=State }" Value="{x:Static controls:LEDTrafficLight+LEDTrafficLightState.Yellow}">
                        <Setter Property="LightIsEnabled" Value="True"/>
                    </DataTrigger>

                </Style.Triggers>
            </Style>
            <Style x:Key="GreenLightStyle" TargetType="controls:LEDLight" BasedOn="{StaticResource LightStyle}">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=controls:LEDTrafficLight},Path=State }" Value="{x:Static controls:LEDTrafficLight+LEDTrafficLightState.Green}">
                        <Setter Property="LightIsEnabled" Value="True"/>
                    </DataTrigger>

                </Style.Triggers>
            </Style>
            <Style x:Key="rectangleTraficLight" TargetType="Border">
                <Setter Property="Width" Value="{Binding ElementName=redEllipse, Path=ActualWidth}"/>
                <Setter Property="Height" Value="5"/>
                <Setter Property="Background" Value="Gray"/>
                <Setter Property="Margin" Value="1"/>
                <Setter Property="VerticalAlignment" Value="Top"/>
                <Setter Property="CornerRadius" Value="3"/>
            </Style>
            <Style x:Key="borderColor" TargetType="Border">
                <Setter Property="BorderBrush" Value="Gray"/>
                <Setter Property="BorderThickness" Value="2"/>
                <Setter Property="Margin" Value="2,0,2,2"/>
                <Setter Property="CornerRadius" Value="3"/>
            </Style>
        </Grid.Resources>
        <Grid.RowDefinitions>
            <RowDefinition Height="100*"/>
            <RowDefinition Height="100*"/>
            <RowDefinition Height="100*"/>
        </Grid.RowDefinitions>
        <Border Grid.RowSpan="3" BorderBrush="DarkGreen" BorderThickness="5" Background="DarkGreen" Opacity=".5" CornerRadius="5"/>
        <Border Style="{StaticResource borderColor}" Grid.Row="0">
            <controls:LEDLight x:Name="RedLight" LEDLightBackgroundON="Red" Style="{StaticResource RedLightStyle}"/>
        </Border>
        <Border Style="{StaticResource borderColor}" Grid.Row="1">
            <controls:LEDLight x:Name="YellowLight"  LEDLightBackgroundON="Gold" Style="{StaticResource YellowLightStyle}"/>
        </Border>
        <Border Style="{StaticResource borderColor}" Grid.Row="2">
            <controls:LEDLight x:Name="GreenLight" Style="{StaticResource GreenLightStyle}"/>
        </Border>
    </Grid>
</UserControl>
namespace Controls
{
    /// <summary>
    /// Lógica de interacción para LEDTrafficLight.xaml
    /// </summary>
    public partial class LEDTrafficLight : UserControl
    {
        #region Constructor

        public LEDTrafficLight()
        {
            InitializeComponent();
            this.DataContext = this;
            timer.Tick += Timer_Tick;
            timer.IsEnabled = StartAuto;
        }

        #endregion

        #region Enum

        public enum LEDTrafficLightState
        {
            Red,
            Yellow,
            Green,
            None
        }

        #endregion

        #region DependencyProperties

        public int GreenTime
        {
            get { return (int)GetValue(GreenTimeProperty); }
            set
            {
                value = value > YellowTime ? value - YellowTime : YellowTime + 1;
                SetValue(GreenTimeProperty, value);
            }
        }

        public int RedTime
        {
            get { return (int)GetValue(RedTimeProperty); }
            set
            {
                if (value <= 0) value = 1;
                SetValue(RedTimeProperty, value);
            }
        }

        public int YellowTime
        {
            get { return (int)GetValue(YellowTimeProperty); }
            set { SetValue(YellowTimeProperty, value); }
        }

        public int DelayTime
        {
            get { return (int)GetValue(TimeProperty); }
            set { SetValue(TimeProperty, value); }
        }

        public bool IsFlashingAmberLight
        {
            get { return (bool)GetValue(IsFlickingProperty); }
            set
            {
                SetValue(IsFlickingProperty, value);
                State = LEDTrafficLightState.Yellow;
                // en 100 ms cambia a Parpadeo
                timer.Interval = new TimeSpan(0, 0, 0, 0, 100);
            }
        }

        public bool IsManual
        {
            get { return (bool)GetValue(IsManualProperty); }
            set
            {
                SetValue(IsManualProperty, value);
                timer.IsEnabled = !value;
            }
        }

        public bool StartAuto
        {
            get { return (bool)GetValue(StarAutoProperty); }
            set
            {
                SetValue(StarAutoProperty, value);
                timer.IsEnabled = value;
            }
        }

        public LEDTrafficLightState State
        {
            get { return (LEDTrafficLightState)GetValue(StateProperty); }
            set { SetValue(StateProperty, value); }
        }

        #region DependecyProperties Register

        // Using a DependencyProperty as the backing store for StarAuto.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty StarAutoProperty =
            DependencyProperty.Register("StartAuto", typeof(bool), typeof(LEDTrafficLight), new PropertyMetadata(true));

        // Using a DependencyProperty as the backing store for IsManual.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty IsManualProperty =
            DependencyProperty.Register("IsManual", typeof(bool), typeof(LEDTrafficLight), new PropertyMetadata(false));

        // Using a DependencyProperty as the backing store for IsFlicking.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty IsFlickingProperty =
            DependencyProperty.Register("IsFlashingAmberLight", typeof(bool), typeof(LEDTrafficLight), new PropertyMetadata(false));

        // Using a DependencyProperty as the backing store for State.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty StateProperty =
            DependencyProperty.Register("State", typeof(LEDTrafficLightState), typeof(LEDTrafficLight), new PropertyMetadata(LEDTrafficLightState.Red));

        // Using a DependencyProperty as the backing store for Time.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty TimeProperty =
            DependencyProperty.Register("DelayTime", typeof(int), typeof(LEDTrafficLight), new PropertyMetadata(0));

        // Using a DependencyProperty as the backing store for TimeYellow.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty YellowTimeProperty =
            DependencyProperty.Register("YellowTime", typeof(int), typeof(LEDTrafficLight), new PropertyMetadata(2));

        // Using a DependencyProperty as the backing store for TimeRed.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty RedTimeProperty =
            DependencyProperty.Register("RedTime", typeof(int), typeof(LEDTrafficLight), new PropertyMetadata(7));

        // Using a DependencyProperty as the backing store for TimeGreen.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty GreenTimeProperty =
            DependencyProperty.Register("GreenTime", typeof(int), typeof(LEDTrafficLight), new PropertyMetadata(7));

        #endregion

        #endregion

        #region Fields & Const & Event

        DispatcherTimer timer = new DispatcherTimer();

        #endregion


        #region Publics Method

        /// <summary>
        /// Inicia el semáforo cuando se encuentra en modo automático
        /// </summary>
        public void Start()
        {
            if (IsManual) return;
            timer.Start();
        }

        /// <summary>
        /// Detiene el semáforo
        /// </summary>
        public void Stop()
        {
            timer.Stop();
        }

        /// <summary>
        /// Cambia el semáforo a rojo
        /// </summary>
        public void OnRed()
        {
            State = LEDTrafficLightState.Red;
        }

        /// <summary>
        /// Cambia el semáforo a verde
        /// </summary>
        public void OnGreen()
        {
            State = LEDTrafficLightState.Green;
        }

        /// <summary>
        /// Cambia el semáforo a amarillo
        /// </summary>
        public void OnYellow()
        {
            State = LEDTrafficLightState.Yellow;
        }

        public void Test()
        {
            throw new NotImplementedException();
        }

        #endregion

        #region Privates methods

        /// <summary>
        /// Cambia el estado del semáforo según el estado anterior
        /// </summary>
        void changingState()
        {
            // Retardo inicial
            if (DelayTime > 0)
            {
                timer.Interval = new TimeSpan(0, 0, (int)DelayTime);
                DelayTime = 0;
                return;
            }

            // Parpadeando
            if (IsFlashingAmberLight)
            {
                if (State.Equals(LEDTrafficLightState.Yellow))
                {
                    State = LEDTrafficLightState.None;
                    timer.Interval = new TimeSpan(0, 0, 0, 0, 500);
                }
                else
                {
                    State = LEDTrafficLightState.Yellow;
                    timer.Interval = new TimeSpan(0, 0, 0, 1);
                }

                return;
            }

            // Cambio de color
            switch (State)
            {
                case LEDTrafficLightState.Red:
                    // SEMÁFORO EN VERDE
                    State = LEDTrafficLightState.Green;
                    
                    timer.Interval = new TimeSpan(0, 0, GreenTime);
                    break;
                case LEDTrafficLightState.Yellow:
                    // SEMÁFORO EN VERDE
                    State = LEDTrafficLightState.Red;
                    timer.Interval = new TimeSpan(0, 0, RedTime);
                    break;
                case LEDTrafficLightState.Green:
                    // SEMÁFORO EN AMBAR
                    State = LEDTrafficLightState.Yellow;
                    timer.Interval = new TimeSpan(0, 0, YellowTime);
                    break;
                default:
                    break;
            }

        }

        private void Timer_Tick(object sender, EventArgs e)
        {
            changingState();
        }

        #endregion
    }
}
Anuncios

ForEach

ForEach

Una colección que implementa la interfaz IEnumerable contiene un método GetEnumerator y este a su vez implementa la interfaz IEnumerator que contiene la propiedad Current y los métodos MoveNext y Reset. Esto va a permitir a la instrucción foreach iterar por la colección.

Así, si generamos una colección de 20.000.000 de números enteros y queremos efectuar una operación por cada uno de ellos, en este caso el inverso del producto de la raiz cuadrada por el logaritmo neperiano y luego realizar la suma sobre cada resultado, podemos iterar con una instrucción foreach,

static int n = 20000000;
static List list = Enumerable.Range(1, n).ToList();

static double forEachStandar()
        {
            var result = 0.0;

            foreach (var item in list)
            {
                result += 1 / Math.Sqrt(item) * Math.Log(item);
            }
            return result;
        }

Una colección además contiene un método ForEach, el cual es accesible mediante una expresión Lambda, asignando la acción que vamos a realizar en cada uno de los elementos.

        static double forEachLambda()
        {
            var result = 0.0;
            list.ForEach(n => result += 1 / Math.Sqrt(n) * Math.Log(n));
            return result;
        }

Podemos aprovechar al máximo los recursos disponibles y es iterando en paralelo por los elementos de la colección pudiendo realizar cálculos simultáneos. Este medio debe ser tratado con cuidado, puesto que si el orden interviene en el resultado final, esta herramienta no sería útil, y en todo caso, los resultados no serían los esperados; así mismo, siempre hay que replantearse el uso en paralelo. Para usarlo, podemos hacerlo mediante la clase Parallel
Parallel.ForEach(list, k => result += 1 / Math.Sqrt(n) * Math.Log(n));
o mediante el método AsParallel de la colección.

foreach (var item in list.AsParallel())
{
result += 1 / Math.Sqrt(item) * Math.Log(item);
}

Aprovechando el artículo sobre LINQ publicado en Wakicode, es posible efectuar cálculos sobre elementos de la colección mediante sintáxis de consulta en Linq. En el siquiente ejemplo, efectuamos el cálculo sobre cada uno de los elementos asignádolo a la variable sum y posteriormente efectuar la suma por cada uno de los elementos

static double queryLinq()
        {
            var query = (from u in list
                        select new { sum = 1 / Math.Sqrt(u) * Math.Log(u) }).Sum(k=>k.sum);

            return query;
        }

pero existe un método mejor y es que toda colección contiene el método Sum, y podremos entonces hacer lo siguiente

        static double collectionSum()
        {
            return list.Sum(k => 1 / Math.Sqrt(k) * Math.Log(k));
        }

Bien, todavía habría alguna otra forma de iterar sobre colecciones, pero con estas nos basta y ahora vamos a ver como se comportan en base a su rendimiento y para ello he creado cuatro hilos, de los cuales cada uno generará la suma de los elementos calculados de la colección, pero cada uno con su método y una vez que terminen todos, que nos muestre el tiempo invertido en los cuatro procesos y cual ha sido el más eficiente. Lanzaremos los procesos por este orden, foreach estándar, expresión foreach lambda, Linq sintáxis de consulta y por último la suma directa sobre la colección mediante expresión lambda.

        static void inBackGround()
        {
            string text = "";
            List cronos = new List();

            Stopwatch stw = new Stopwatch();
            Stopwatch stw1 = new Stopwatch();
            Stopwatch stw2 = new Stopwatch();
            Stopwatch stw3 = new Stopwatch();
            Stopwatch stw4 = new Stopwatch();

            cronos.Add(new KeyValuePair(stw1, "For Each Estandar"));
            cronos.Add(new KeyValuePair(stw2, "For Each Lambda"));
            cronos.Add(new KeyValuePair(stw2, "Query LINQ"));
            cronos.Add(new KeyValuePair(stw2, "Colección.Sum()"));

            stw.Start();
            Task[] tasks;

            var t1 = Task.Factory.StartNew(() =>
            {
                stw1.Start();
                text = string.Format("For Each Estandar. n = {0}. Resultado = {1}. Tiempo del proceso: {2}", n, forEachStandar(), stw1.Elapsed);
                stw1.Stop();
                Console.WriteLine(text);
            });

            var t2 = Task.Factory.StartNew(() =>
            {
                stw2.Start();
                text = string.Format("For Each Lambda. n = {0}. Resultado = {1}. Tiempo del proceso: {2}", n, forEachLambda(), stw2.Elapsed);
                stw2.Stop();
                Console.WriteLine(text);
            });

            var t3 = Task.Factory.StartNew(() =>
            {
                stw3.Start();
                text = string.Format("Query LINQ. n = {0}. Resultado = {1}. Tiempo del proceso: {2}", n, queryLinq(), stw3.Elapsed);
                stw3.Stop();
                Console.WriteLine(text);
            });

            var t4 = Task.Factory.StartNew(() =>
            {
                stw4.Start();
                text = string.Format("Colección.Sum(). n = {0}. Resultado = {1}. Tiempo del proceso: {2}", n, collectionSum(), stw4.Elapsed);
                stw4.Stop();
                Console.WriteLine(text);
            });

            tasks = new Task[] { t1, t2, t3, t4 };

            Task.WaitAll(tasks);
            Console.WriteLine(string.Format("Los cuatro procesos han terminado. Tiempo: {0}",stw.Elapsed));
            var theBest = cronos.Where(k => k.Key.Elapsed == cronos.Min(m => m.Key.Elapsed)).FirstOrDefault();
            Console.WriteLine(string.Format("El más efectivo ha sido {0} con un tiempo de {1}",theBest.Value, theBest.Key.Elapsed));

            Console.Read();

        }

y ahora el resultado en el que el ganador en cuanto a rendimiento es el método For Each Lambda por muy poco sobre la suma sobre la colección, el foreach estándar y el menos eficiente la consulta Linq.

foreach.png
El fin del artículo, para un problema podemos usar distintos métodos que producen el mismo efecto o resultado, pero debemos escoger el mejor de ellos en cuanto a eficiencia y rendimiento. Además, necesitamos conocer todos los métodos, no podemos escoger o seleccionar si no tenemos o no conocemos opciones.

Hilando

Hilando

Desde .NET 4, los hilos en C# se convirtieron en una tarea de lo más fácil. En este post vamos a realizar una par de muestras, una prueba sencilla donde vamos a ejecutar una tarea que usa mucho tiempo en terminarse como es la obtención de π(x) o la cantidad de números primos menores que un número.Vamos a usar una función lambda para obtener el codiciado π(x) y para ello vamos a usar la clase Enumerable del espacio System.Linq y un método llamado Range para obtener un conjunto de números enteros entre dos rangos numerable.Range(2, max), contamos los elementos con el predicado con el que obtengamos todos los números entre el rango de 2 y la raiz del número Count(n => Enumerable.Range(2, (int)Math.Sqrt(n) - 1) que cumplan la condición de tener un módulo mayor que 0 All(i => n % i > 0))o lo que es lo mismo todos los números que no son múltiplos.

Enumerable.Range(2, max).Count(n => Enumerable.Range(2, (int)Math.Sqrt(n) - 1).All(i => n % i > 0))

Linq es bestial, ¿no?
Si le damos un valor alto a la variable max com por ejemplo 10.000.000, la tarea dejará la interfaz bloqueada y por tanto tendremos que crear un hilo para evitar este problema y aquí viene lo bueno de la clase Task.

Esta clase tiene un método Factory.StartNew al que se le pasa un método como delegado, el cual se ejecutará de forma asincrónica devolviendo la tarea iniciada, es decir no devuelve un valor sino la tarea Task en si con sus propiedades y métodos.

Task.Factory.StartNew(() => TareaMuyCostosa());
En nuestro código vamos a ver solo dos aspectos de los muchos de los que podemos extraerle a Task, uno es la propiedad IsCompleted y otra sería el método Wait.
Nuestra aplicación como he dicho, generará números primos en una tarea y mientras que no esté finalizada, mostrará un mensaje indicando el tiempo empleado y una vez que finalice, mostrará el resultado que lo mostraremos de dos modos, uno esperando a que finalice y otro con el método ContinueWith.

La primera

static void primeNumbersCount(int max)
        {
            Stopwatch stw = new Stopwatch();
            stw.Start();
            int sec = 0;
            var piXTask = Task.Factory.StartNew(() => Enumerable.Range(2, max).Count(n => Enumerable.Range(2, (int)Math.Sqrt(n) - 1).All(i => n % i > 0)));

            var calculando = "Calculando ";
            while (!piXTask.IsCompleted || piXTask.IsFaulted || piXTask.IsCanceled)
            {
                Thread.Sleep(1000);
                Console.Clear();
                Console.WriteLine(calculando.PadRight(sec % 5 + 11,'.'));
                Console.WriteLine(string.Format("Tiempo empleado: {0} sengundos", sec++));
            }

            piXTask.Wait();

            string text = string.Format("Calculo de {0} números primos menores de {1}", piXTask.Result, max);
            Console.WriteLine(text);
            Console.WriteLine(string.Format("Tiempo empleado: {0}", stw.Elapsed));
            Console.Read();
        }

En este código, vemos que se lanza la tarea, luego pasamos a un bucle del que debemos asegurarnos que saldremos algún día (esta opción no la aconsejo, pero para mostrar que la app se queda en sus cosas mientras la tarea se está realizando, está bien), mediante la propiedad IsCompleted, IsFaulted o IsCanceled, es decir cuando pase alguna de estas cosas, sale del bucle.
Luego pasamos al método Wait, que lo que hace es lo mismo que el bucle, hasta que la tarea no haya finalizado, espera y no sobrepasa a la siguiente línea de código. Una vez acabado, muestra el resultado con la propiedad Result del tipo int, porque es el resultado que entrega el delegado que lanzó. Y el resultadotask03task01

Pero para mi, en este caso usaría lo mismo pero con el método ContinueWith.

static void primeNumbersCount(int max)
        {
            Stopwatch stw = new Stopwatch();
            stw.Start();
            int sec = 0;
            var piXTask = Task.Factory.StartNew(() => Enumerable.Range(2, max).Count(n => Enumerable.Range(2, (int)Math.Sqrt(n) - 1).All(i => n % i > 0)));
            var calculando = "calculando ";
            piXTask.ContinueWith((p) =>
            {
                string text = string.Format("Calculo de {0} números primos menores de {1}", piXTask.Result, max);
                Console.WriteLine(text); Console.WriteLine(string.Format("Tiempo empleado: {0}", stw.Elapsed));
            });
            Console.WriteLine("Esto no ha terminado...");
            Thread.Sleep(1000); sec++;
            while (!piXTask.IsCompleted)
            {
                Thread.Sleep(1000); Console.Clear();
                Console.WriteLine(calculando.PadRight(sec % 5 + 11, '.'));
                Console.WriteLine(string.Format("Tiempo empleado: {0} segundos", sec++));
            }
          }

Aquí podemos apreciar que se lanza la tarea, vemos el método ContinueWith que contiene código en su interior mediante otro delegado y posteriormente el código ese que hemos creado para mostrar cosas mientras la tarea se realiza. Al ejecutarlo, se lanza la tarea y se obvia el código del método ContinueWith en cuestión, continua y pasa al bucle, una vez que ha terminado la tarea, continua con lo que le queda dentro del bloque ContinueWith y se acabó, ¿fácil? facilísimo!!

Video4
Ya veremos en otra ocasión el uso de Arrays de Task, esperas, sincronías entre ellos y alguna otra cosa más.

Un poco de Linq

Un poco de Linq

LINQ en inglés es Language Integrated Query o lenguaje de consultas integrado. Lleva en la brecha desde 2007 con la versión 3.5 de .NET, por tanto no estoy descubriendo nada y para el que no lo conozca, con este post podrá introducirse e implementar sus posibilidades.

LINQ es un lenguaje parecido a SQL, es decir mediante una gramática concreta aplicada sobre un conjunto de datos, obtenemos un resultado que puede ser valores o un conjunto de resultados. Uno de los aspectos fundamentales de este lenguaje es que puede ser usado con cualquier colección de datos, ya sea un array, una lista de objetos, una cadena de texto (es un array), una colección, una clase enumerable, una base de datos, un documento XML, etc.

Primer ejemplo, vamos a enumerar los objetos tipo char de de una cadena de texto ya que un tipo string es lo mismo que array de objetos char; si la cadena de texto es “Wakicode” podríamos obtener los char del siguiente modo:

string cadena = "Wakicode";
var query = from u in cadena
select u;
// el resultado de query es un array de objetos char
// query = {'W', 'a', 'k', 'i', 'c', 'o', 'd', 'e'}

Vamos a repasar la gramática de esta consulta de LINQ. Comienza por from, asignamos la variable usada en la consulta, en este caso u, le decimos mediante in, donde vamos a efectuar la consulta y con select, la salida de la consulta que en este caso es la variable o lo que es lo mismo la variable u que es cada uno de los objetos de la cadena. Si le aplicamos una sentencia condicional, por ejemplo queremos obtener todas las vocales de nuestra cadena y para ello he creado una función que determine si un caracter es vocal y ahora agregamos el predicado where en la sentencia LINQ.

string cadena = "Wakicode";
var query = from u in cadena
where esVocal(u)
            select u;
bool esVocal(char c)
{
return "aeiouAEIOU".Contains(c);
}
// el resultado de query es un array de objetos char
// query = {'a','i','o','e'}

Vamos a crear una lista de enteros desde el valor 0 hasta el 100 y luego ejecutaremos consultas básicas sobre la colección. De momento vamos a obtener los múltiplos de 7.

List list = new List();
for (int i = 0; i < 100; i++) {
list.Add(i);
}
var query = from u in list
where u % 7 == 0
select u;
// query = {0,7,14,21,28,35,...91,98}

Por último, vamos a complicar la cosa efectuando consultas sobre objetos complejos y para ello creamos una clase persona con alguna propiedad, creamos una colección de esta clase y le agregamos algún objeto.

public class Persona
{
public string Name { get; set; }
public string City { get; set; }
public int Age { get; set; }
}

public class Main
{
public Main()
{
List people = new List();
// añadimos unos objetos

people.Add(new Persona() { Name = "Donald Trump", City = "Washington", Age = 56 });
people.Add(new Persona() { Name = "Tiriti Trump", City = "New York", Age = 45 });
people.Add(new Persona() { Name = "Michael Knight", City = "Washington", Age = 35 });
people.Add(new Persona() { Name = "Paul Churches", City = "Teheran", Age = 34 });
people.Add(new Persona() { Name = "John Charles Purse", City = "Valencia", Age = 25 });

var query = from u in people
where u.Name.Contains("Trump")
select u.Name;
// query = Donald Trump, Tiriti Trump

var query1 = from u in people
where u.City.Contains("Washington")
select u.Name;
// query1 = Donald Trump, Michael Knight

var query2 = from u in people
where u.Age < 40
select u.Name;
// query2 = Michael Knight, Paul Churches, John Charles Purse
}
}

Podemos apreciar que a la variable u le corresponde el valor de cada uno de los objetos de la lista en cada iteración, les aplica el filtro y se agregan a la variable si cumplen con la condición, pero se agregan según la clausula select. En el caso del ejemplo, seleccionamos la propiedad del tipo string Name, pero si hubieramos dejado select u, estariamos creando una consulta con objetos del tipo Persona pudiendo posteriormente usar alguna de las propiedades del objeto.

var query2 = from u in people
                         where u.Age < 40
                         select u;
            foreach (var item in query2)
            {
                Console.WriteLine(string.Format("Nombre: {0}, Edad: {1}", item.Name, item.Age));
            }
//Nombre: Michael Knight, Edad: 35
//Nombre: Paul Churches, Edad: 34
//Nombre: John Charles Purse, Edad: 25

Como ya comentamos al inicio, podemos usar Linq con cualquier colección y su uso con bases de datos es fantástico, de hecho existe una herramienta LinqToSql que genera las clases y propiedades (tablas y campos) de una base de datos automáticamente, de modo que podemos acceder a los datos de las tablas y sus relaciones de un modo rápido y eficaz.
Pd: Para el que quiera avanzar, puede hacerlo con el siguiente libro.

Controles de Usuario en WPF 2

Controles de Usuario en WPF 2
Continuando con los controles de usuario en WPF, voy a mostrarles un control un poco más complejo y en este caso se trata de un reloj un poco especial, se trata de un reloj binario.
Se trata de un reloj, pero los dígitos se muestran uno a uno en modo binario mediante una bola de indicador. Por ejemplo para indicar la hora 15, se muestra un 1 en binario 001 y un 5 en binario 101.He creado un control básico que hará las veces de indicador con un tono grisáceo cuando el indicador está apagado o es un cero y un tono verdoso para indicar un 1 o cuando está encendido.

indicadores

Y ahora muestro el código de la bolita

<UserControl x:Class="Controls.EllipseUserControl"
             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="48" d:DesignWidth="48" x:Name="ellipseUserControl">
    <Grid x:Name="gridEllipse" Height="{Binding ElementName=ellipseUserControl,Path=Height}"
          Width="{Binding ElementName=ellipseUserControl,Path=Width}">
        <Grid.Resources>
            <Style x:Key="ellipseStyle" TargetType="Ellipse">
                <Setter Property="VerticalAlignment" Value="Stretch"/>
                <Setter Property="HorizontalAlignment" Value="Stretch"/>
                <Setter Property="Margin" Value="2"/>
                <Setter Property="Fill">
                    <Setter.Value>
                        <RadialGradientBrush GradientOrigin="0.6,0.2"
                    Center="0.6,0.2"
                    RadiusX="0.4" RadiusY="0.4">
                            <RadialGradientBrush.GradientStops>
                                <GradientStop Color="White" Offset="0" />
                                <GradientStop Color="{Binding ElementName=gridEllipse, Path=Parent.ActiveColor}" Offset="1.5" />
                            </RadialGradientBrush.GradientStops>
                        </RadialGradientBrush>
                    </Setter.Value>
                </Setter>
            </Style>
        </Grid.Resources>
        <Ellipse x:Name="ellipse" Style="{StaticResource ellipseStyle}"/>
    </Grid>
</UserControl>

Podemos apreciar que el control básico solo tiene un Grid y dentro de este una ellipse, la ellipse tiene un estilo declarado en Grid.Resources y el cual tiene un degradado radial y desde una de sus propiedades GradientStop enlazamos con una propiedad DependecyProperty ActiveColor, de modo que podamos convertir valores booleanos en colores y se la asignemos a esta propiedad y por tanto esta propiedad cambiará el color de GradientStop. Esta propiedad la declaramos en la clase del control de usuario del siguiente modo:


public Color ActiveColor
{
get { return (Color)GetValue(ActiveColorProperty); }
set { SetValue(ActiveColorProperty, value); }
}

// Using a DependencyProperty as the backing store for IsActiveColor. This enables animation, styling, binding, etc...
public static readonly DependencyProperty ActiveColorProperty =
DependencyProperty.Register("ActiveColor", typeof(Color), typeof(EllipseUserControl), new PropertyMetadata(Brushes.Red.Color));

Ahora vamos al trabajo duro, que es crear un control de usuario más complejo, basado en unos cuantos controles básicos. Para las horas usaremos para:

  • Horas. Primer dígito 2, o vale 0, 1 o 2 (00, 01 o 11). Segundo dígito 4 indicadores, desde 0 a 9 y el 9 es 1001 en binario.
  • Minutos. Primer dígito. Valor máximo es 5, por tanto 3 indicadores (101), segundo dígito valor máximo 9, cuatro indicadores (1001)
  • Segundos. Igual que los minutos.

Ahora que tenemos el diseño del reloj, lo generamos en XAML

<UserControl x:Class="Controls.BinaryClock"
             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"
             xmlns:sys="clr-namespace:System;assembly=mscorlib"
             d:DesignHeight="155" d:DesignWidth="180" >
    <UserControl.Resources>
        <Controls:BooleanToBrushes x:Key="btb"/>
    </UserControl.Resources>
    <Grid x:Name="grid">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="30"/>
            <ColumnDefinition Width="30"/>
            <ColumnDefinition Width="30"/>
            <ColumnDefinition Width="30"/>
            <ColumnDefinition Width="30"/>
            <ColumnDefinition Width="30"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="25"/>
            <RowDefinition Height="25"/>
            <RowDefinition Height="25"/>
            <RowDefinition Height="25"/>
            <RowDefinition Height="25"/>
            <RowDefinition Height="25"/>
            <RowDefinition Height="25"/>
        </Grid.RowDefinitions>
        <!-- HORAS -->
        <TextBlock Text="H" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" HorizontalAlignment="Center" FontSize="20"/>
        <Border BorderThickness="1" BorderBrush="LightCoral" Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" Grid.RowSpan="4" Margin="1"/>

        <Controls:EllipseUserControl x:Name="hour11" Grid.Column="0" Grid.Row="4" ActiveColor="{Binding ElementName=grid, Path=Parent.H10, Converter={StaticResource btb}}"/>
        <Controls:EllipseUserControl x:Name="hour12" Grid.Column="0" Grid.Row="3" ActiveColor="{Binding ElementName=grid, Path=Parent.H11, Converter={StaticResource btb}}"/>
        <Controls:EllipseUserControl x:Name="hour21" Grid.Column="1" Grid.Row="4" ActiveColor="{Binding ElementName=grid, Path=Parent.H20, Converter={StaticResource btb}}"/>
        <Controls:EllipseUserControl x:Name="hour22" Grid.Column="1" Grid.Row="3" ActiveColor="{Binding ElementName=grid, Path=Parent.H21, Converter={StaticResource btb}}"/>
        <Controls:EllipseUserControl x:Name="hour24" Grid.Column="1" Grid.Row="2" ActiveColor="{Binding ElementName=grid, Path=Parent.H22, Converter={StaticResource btb}}"/>
        <Controls:EllipseUserControl x:Name="hour28" Grid.Column="1" Grid.Row="1" ActiveColor="{Binding ElementName=grid, Path=Parent.H23, Converter={StaticResource btb}}"/>

        <!-- MINUTOS -->
        <TextBlock Text="M" Grid.Column="2" Grid.Row="0" Grid.ColumnSpan="2" HorizontalAlignment="Center" FontSize="20"/>
        <Border BorderThickness="1" BorderBrush="LightBlue" Grid.Column="2" Grid.Row="1" Grid.ColumnSpan="2" Grid.RowSpan="4" Margin="1"/>

        <Controls:EllipseUserControl x:Name="minute11" Grid.Column="2" Grid.Row="4" ActiveColor="{Binding ElementName=grid, Path=Parent.M10, Converter={StaticResource btb}}"/>
        <Controls:EllipseUserControl x:Name="minute12" Grid.Column="2" Grid.Row="3" ActiveColor="{Binding ElementName=grid, Path=Parent.M11, Converter={StaticResource btb}}"/>
        <Controls:EllipseUserControl x:Name="minute14" Grid.Column="2" Grid.Row="2" ActiveColor="{Binding ElementName=grid, Path=Parent.M12, Converter={StaticResource btb}}"/>
        <Controls:EllipseUserControl x:Name="minute21" Grid.Column="3" Grid.Row="4" ActiveColor="{Binding ElementName=grid, Path=Parent.M20, Converter={StaticResource btb}}"/>
        <Controls:EllipseUserControl x:Name="minute22" Grid.Column="3" Grid.Row="3" ActiveColor="{Binding ElementName=grid, Path=Parent.M21, Converter={StaticResource btb}}"/>
        <Controls:EllipseUserControl x:Name="minute24" Grid.Column="3" Grid.Row="2" ActiveColor="{Binding ElementName=grid, Path=Parent.M22, Converter={StaticResource btb}}"/>
        <Controls:EllipseUserControl x:Name="minute28" Grid.Column="3" Grid.Row="1" ActiveColor="{Binding ElementName=grid, Path=Parent.M23, Converter={StaticResource btb}}"/>

        <!-- SEGUNDOS -->
        <TextBlock Text="S" Grid.Column="4" Grid.Row="0" Grid.ColumnSpan="2" HorizontalAlignment="Center" FontSize="20"/>
        <Border BorderThickness="1" BorderBrush="LightGreen" Grid.Column="4" Grid.Row="1" Grid.ColumnSpan="2" Grid.RowSpan="4" Margin="1"/>

        <Controls:EllipseUserControl x:Name="second11" Grid.Column="4" Grid.Row="4" ActiveColor="{Binding ElementName=grid, Path=Parent.S10, Converter={StaticResource btb}}"/>
        <Controls:EllipseUserControl x:Name="second12" Grid.Column="4" Grid.Row="3" ActiveColor="{Binding ElementName=grid, Path=Parent.S11, Converter={StaticResource btb}}"/>
        <Controls:EllipseUserControl x:Name="second14" Grid.Column="4" Grid.Row="2" ActiveColor="{Binding ElementName=grid, Path=Parent.S12, Converter={StaticResource btb}}"/>
        <Controls:EllipseUserControl x:Name="second21" Grid.Column="5" Grid.Row="4" ActiveColor="{Binding ElementName=grid, Path=Parent.S20, Converter={StaticResource btb}}"/>
        <Controls:EllipseUserControl x:Name="second22" Grid.Column="5" Grid.Row="3" ActiveColor="{Binding ElementName=grid, Path=Parent.S21, Converter={StaticResource btb}}"/>
        <Controls:EllipseUserControl x:Name="second24" Grid.Column="5" Grid.Row="2" ActiveColor="{Binding ElementName=grid, Path=Parent.S22, Converter={StaticResource btb}}"/>
        <Controls:EllipseUserControl x:Name="second28" Grid.Column="5" Grid.Row="1" ActiveColor="{Binding ElementName=grid, Path=Parent.S23, Converter={StaticResource btb}}"/>

        <TextBlock Text="{Binding ElementName=grid, Path=Parent.Hour}" Grid.Column="0" Grid.Row="5" Grid.ColumnSpan="2" HorizontalAlignment="Center" FontSize="22"/>
        <TextBlock Text="{Binding ElementName=grid, Path=Parent.Minutes}" Grid.Column="2" Grid.Row="5" Grid.ColumnSpan="2" HorizontalAlignment="Center" FontSize="22"/>
        <TextBlock Text="{Binding ElementName=grid, Path=Parent.Seconds}" Grid.Column="4" Grid.Row="5" Grid.ColumnSpan="2" HorizontalAlignment="Center" FontSize="22"/>
    </Grid>
</UserControl>

como podéis apreciar, he distribuido los controles para dar forma al reloj quedando su diseño así
bin01
Cada indicador usa una clase converter para convertir el valor booleano en un color y con esto finaliza el código XAML.

public class BooleanToBrushes : IValueConverter
    {
        #region Constructor

        #endregion

        #region Propiedades

        #endregion

        #region IValueConverter

        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            bool bValue = (bool)value;
            if (bValue)
            {
                return Brushes.Green.Color;
            }
            else
            {
                return Brushes.Gray.Color;
            }
        }

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

        #endregion
    }

Vamos al código. Hay una propiedad booleana por cada uno de los indicadores. Un DispatcherTime para calcular los valores en cada segundo y un par de métodos para convertir la hora a binario y pasarla a cada uno de los indicadores mediante las propiedades. Paso el código.

    public partial class BinaryClock : UserControl,INotifyPropertyChanged
    {
        public BinaryClock()
        {
            InitializeComponent();

            dispatcher.Tick += Dispatcher_Tick; ;
            dispatcher.Interval = TimeSpan.FromSeconds(1);
            dispatcher.Start();
        }

        #region Privates Method

        List setDecimalToBinary(int value, bool isHour)
        {
            List values = new List();
            string valueToString = value.ToString("00");
            string digit1 = valueToString.Substring(0, 1);
            string digit2 = valueToString.Substring(1, 1);
            string binaryDigit1 = convertToBinary(Convert.ToInt16(digit1)).PadLeft(2, '0');
            if (!isHour)
            {
                binaryDigit1 = binaryDigit1.PadLeft(3, '0');
            }
            string binaryDigit2 = convertToBinary(Convert.ToInt16(digit2)).PadLeft(4, '0');
            foreach (var item in binaryDigit1 + binaryDigit2)
            {
                values.Add(item.Equals('0') ? false : true);
            }
            return values;
        }

        string convertToBinary(int value)
        {
            return Convert.ToString(value, 2);
        }

        List setDecimalToBinary(int value)
        {
            return setDecimalToBinary(value, false);
        }

        private void Dispatcher_Tick(object sender, EventArgs e)
        {
            DateTime horaActual = DateTime.Now;

            Hour = horaActual.Hour.ToString();
            Minutes = horaActual.Minute.ToString();
            Seconds = horaActual.Second.ToString();

            var hora = setDecimalToBinary(horaActual.Hour, true);
            H10 = hora[1];
            H11 = hora[0];

            H20 = hora[5];
            H21 = hora[4];
            H22 = hora[3];
            H23 = hora[2];

            var minutos = setDecimalToBinary(horaActual.Minute);
            M10 = minutos[2];
            M11 = minutos[1];
            M12 = minutos[0];

            M20 = minutos[6];
            M21 = minutos[5];
            M22 = minutos[4];
            M23 = minutos[3];

            var segundos = setDecimalToBinary(horaActual.Second);
            S10 = segundos[2];
            S11 = segundos[1];
            S12 = segundos[0];

            S20 = segundos[6];
            S21 = segundos[5];
            S22 = segundos[4];
            S23 = segundos[3];

        }

        #endregion

        public event PropertyChangedEventHandler PropertyChanged;

        #region Public Methods

        ///
<summary>
        /// Inicia el evento de cambio de propiedad
        /// </summary>

        /// Nombre de la propiedad
        public void OnPropertyChanged(string p_PropertyName)
        {

            if (this.PropertyChanged != null)
            {
                this.PropertyChanged(this, new PropertyChangedEventArgs(p_PropertyName));
            }
        }

        #endregion

        #region Properties &amp; fields

        private bool h10;
        private bool h11;
        private bool h20;
        private bool h21;
        private bool h22;
        private bool h23;
        private bool m10;
        private bool m11;
        private bool m12;
        private bool m20;
        private bool m21;
        private bool m22;
        private bool m23;
        private bool s10;
        private bool s11;
        private bool s12;
        private bool s20;
        private bool s21;
        private bool s22;
        private bool s23;
        DispatcherTimer dispatcher = new DispatcherTimer();

        private string hour;
        private string minute;
        private string seconds;

        public string Hour
        {
            get { return hour; }
            set
            {
                hour = value;
                OnPropertyChanged("Hour");
            }
        }

        public string Minutes
        {
            get { return minute; }
            set
            {
                minute = value;
                OnPropertyChanged("Minutes");
            }
        }

        public string Seconds
        {
            get { return seconds; }
            set
            {
                seconds = value;
                OnPropertyChanged("Seconds");
            }
        }

        // HORAS. 1ER DIGITO
        public bool H10
        {
            get { return h10; }
            set
            {
                h10 = value;
                OnPropertyChanged("H10");
            }
        }

        public bool H11
        {
            get { return h11; }
            set
            {
                h11 = value;
                OnPropertyChanged("H11");
            }
        }

        // HORAS. 2º DIGITO
        public bool H20
        {
            get { return h20; }
            set
            {
                h20 = value;
                OnPropertyChanged("H20");
            }
        }
        public bool H21
        {
            get { return h21; }
            set
            {
                h21 = value;
                OnPropertyChanged("H21");
            }
        }
        public bool H22
        {
            get { return h22; }
            set
            {
                h22 = value;
                OnPropertyChanged("H22");
            }
        }
        public bool H23
        {
            get { return h23; }
            set
            {
                h23 = value;
                OnPropertyChanged("H23");
            }
        }

        //MINUTOS. 1ER DIGITO
        public bool M10
        {
            get { return m10; }
            set
            {
                m10 = value;
                OnPropertyChanged("M10");
            }
        }
        public bool M11
        {
            get { return m11; }
            set
            {
                m11 = value;
                OnPropertyChanged("M11");
            }
        }
        public bool M12
        {
            get { return m12; }
            set
            {
                m12 = value;
                OnPropertyChanged("M12");
            }
        }
        // MINUTOS. 2º DIGITO
        public bool M20
        {
            get { return m20; }
            set
            {
                m20 = value;
                OnPropertyChanged("M20");
            }
        }
        public bool M21
        {
            get { return m21; }
            set
            {
                m21 = value;
                OnPropertyChanged("M21");
            }
        }
        public bool M22
        {
            get { return m22; }
            set
            {
                m22 = value;
                OnPropertyChanged("M22");
            }
        }
        public bool M23
        {
            get { return m23; }
            set
            {
                m23 = value;
                OnPropertyChanged("M23");
            }
        }

        // SEGUNDOS. 1ER DIGITO
        public bool S10
        {
            get { return s10; }
            set
            {
                s10 = value;
                OnPropertyChanged("S10");
            }
        }
        public bool S11
        {
            get { return s11; }
            set
            {
                s11 = value;
                OnPropertyChanged("S11");
            }
        }
        public bool S12
        {
            get { return s12; }
            set
            {
                s12 = value;
                OnPropertyChanged("S12");
            }
        }
        // SEGUNDOS. 2º DIGITO
        public bool S20
        {
            get { return s20; }
            set
            {
                s20 = value;
                OnPropertyChanged("S20");
            }
        }
        public bool S21
        {
            get { return s21; }
            set
            {
                s21 = value;
                OnPropertyChanged("S21");
            }
        }
        public bool S22
        {
            get { return s22; }
            set
            {
                s22 = value;
                OnPropertyChanged("S22");
            }
        }
        public bool S23
        {
            get { return s23; }
            set
            {
                s23 = value;
                OnPropertyChanged("S23");
            }
        }

        #endregion
    }

Pues con este código, cada segundo, se comprueba la hora y se pasa a cada uno de los indicadores un valor booleano correspondiente a su valor en binario, este se convierte en un color con el converter y et voilá, un reloj binario. Le he añadido la hora con números arábigos para que podáis contrastar. Y el resultado… en la cabecera.Espero que os haya gustado.

Sucesión de Fibonacci

Sucesión de Fibonacci
Publiqué en mi otro blog sobre mates, física y otros temas un post acerca de la sucesión y la espiral de Fibonacci y gustándome como me gustan las funciones recursivas, no podía quedar atrás una implementación en C# de esta sucesión.
Para ellos, en este artículo expondré diversos métodos para calcular la sucesión de Fibonacci a los cuales se les pasará como argumento el valor de n de la función y que a continuación os muestro:
El primero de ellos será mediante la función recursiva. Este es el método natural de cálculo de la sucesión
espiral01.png

        public double GetRecursiveFunction(int n)
        {
            if ((n == 0) || (n == 1)) return 1;
            else return GetRecursiveFunction(n -1) + GetRecursiveFunction(n - 2);
        }

Este método tiene el inconveniente de la complejidad recurrente que se aplica sobre su cálculo, es decir que si solicitamos el valor del elemento 39, haríamos una llamada a GetRecursiveFunction(39) , la cual una vez dentro de esta, llamará a los elementos GetRecursiveFunction(38) y GetRecursiveFunction(37) de la misma función para sumarlos, y estos a su vez a sus dos anteriores hasta llegar a GetRecursiveFunction(0) o GetRecursiveFunction(1) devolviendo el valor de 1 a partir de entonces comenzará a sumar. Esto significa que para cada cálculo se realiza la suma de las iteraciones de los dos elementos anteriores más 1. Si para n igual a 6 se llama a la función 15 veces y para n igual a 7, 25 veces, para n igual a 8 se llamaría a la función 15 más 25 y más 1 de la primera llamada. Esto supone un gasto de recursos enorme ya que para n igual a 40 el número de iteraciones se elevaría a la suma de 78.176.337, 126.491.971 y 1, un total de 204.668.309 iteraciones para obtener el elemento 40 de la sucesión; en tiempo, aproximadamente unos 8 segundos en un dual core con SSD. A todos los efectos, no es eficiente.El siguiente método de cálculo de la sucesión de Fibonacci, será el de la función general extraída mediante la ecuación de recurrencia y sus raíces.espiral14.png

Esta función tiene como inconveniente la precisión y muestro el por qué. En primero lugar creo una propiedad de solo lectura para calcular ϕ (Phi) o el número áureo, el cual es igual a
Espiral04.png
provocando una falta de precisión; por otra parte el uso de la exponenciación a n, lo que a su vez provoca que un número excesivamente grande, sea tratado exponencialmente. Todo esto unido para un n grande, nos hace obtener un número extremadamente aproximado a cualquier elemento de la sucesión, pero sin llegar a serlo, por lo que debemos auxiliarnos de la función de redondeo para obtener unos resultados satisfactorios. A pesar de los complejos cálculos, es muy rápida.

        public double Phi
        {
            get
            {
                return (1 + Math.Sqrt(5)) / 2;
            }
        }

        public double GetGeneralFuncion(int n)
        {
            double result = (double)((Math.Pow(Phi, n) - Math.Pow((1 - Phi), n)) / Math.Sqrt(5));
            return Math.Round(result);
        }

La siguiente función es la iterativa. Esta parte de los dos primeros valores 0 y 1 y va obteniendo el siguiente en cada iteración, sencilla y muy rápida. No tiene problemas de redondeo. El inconveniente que tiene es que no almacena los valores anteriores, sino que simplemente los calcula.

        public double GetIterativeFunction(int n)
        {
            double f0 = 0;
            double f1 = 1;
            for (int i = 1; i < n; i++)
            {
                f1 = f0 + f1;
                f0 = f1 - f0;
            }

            return f1;
        }

Por último, una función parecida a la iterativa pero en la cual quedan almacenados los elementos de la sucesión mediante un objeto List, de este modo se asignan los dos primeros valores y se van generando los siguientes añadiéndolos a la lista según se van calculando.

        public List numbers = new List();
        public void GetArrayListFunction(int n)
        {
            numbers.Clear();
            numbers.Add(0);
            numbers.Add(1);
            for (int i = 2; i < n; i++)
            {
                numbers.Add(numbers[i - 1] + numbers[i - 2]);
            }
        }

Una vez que hemos visto las funciones para obtener los elementos de la sucesión de Fibonacci, vamos a calcular la espiral de Fibonacci mediante dos métodos, XAML y código puro y duro.
Si lo hacemos con XAML, creamos un objeto Path y dentro de Path.Data con el siguiente código:

        <Path Stroke="Red" StrokeThickness="2" >
        <Path.Data>
            <PathGeometry>
                <PathGeometry.Figures>
                    <PathFigureCollection>
                            <PathFigure StartPoint="610,610">
                                <PathFigure.Segments>
                                <PathSegmentCollection>
                                        <ArcSegment Point="600, 600" Size="10 10" />
                                        <ArcSegment Point="590, 610" Size="10 10" />
                                        <ArcSegment Point="610, 630" Size="20 20" />
                                        <ArcSegment Point="640, 600" Size="30 30" />
                                        <ArcSegment Point="590, 550" Size="50 50" />
                                        <ArcSegment Point="510, 630" Size="80 80" />
                                        <ArcSegment Point="640, 760" Size="130 130" />
                                        <ArcSegment Point="850, 550" Size="210 210" />
                                        <ArcSegment Point="510, 210" Size="340 340" />
                                        <ArcSegment Point="-40, 760" Size="550 550" />
                                        <ArcSegment Point="850, 1650" Size="890 890" />
                                        <ArcSegment Point="2290, 210" Size="1440 1440" />
                                    </PathSegmentCollection>
                            </PathFigure.Segments>
                        </PathFigure>
                    </PathFigureCollection>
                </PathGeometry.Figures>
            </PathGeometry>
        </Path.Data>
        </Path>

Lo que hacemos es crear objetos ArcSegment como tantos elementos de la sucesión queramos incluir, pero su límite es evidente, por lo que podríamos crear un método genérico que creara una espiral en base al argumento n, de modo que llamamos por ejemplo a la función iterativa basada en List y con los datos almacenados en esta lista, usarlos para crear tanto objetos ArcSegment como elementos tenga la sucesión. El problema es que la sucesión de Fibonacci tiene un crecimiento alto y la espiral desaparecerá rápidamente de nuestra ventana, pero calcular, calcula correctamente la espiral.
He creado dos propiedades para el centro de la espiral, x e y un ángulo como variable angular. (También podríamos haber usado la función polar de la espiral, pero he escogido esta para mostrar cada arco de segmento).
Para seleccionar el centro de cada arco, he ingeniado un método que mediante el seno y coseno del ángulo de la función, sume o reste los valores de la sucesión y asigne correctamente el centro.
Una vez creados los arcos, los añadimos al objeto Figure y como en XAML vamos añadiendo a la colección.

        public double CenterX { get; set; } = 512;
        public double CenterY { get; set; } = 384;
        public double Angle { get; set; } = Math.PI;

        void create(int n)
        {

            Fibonacci fib = new Fibonacci();
            fib.GetArrayListFunction(n);

            PathGeometry pathGeometry = new PathGeometry();

            PathFigure figure = new PathFigure();
            figure.StartPoint = new Point(CenterX, CenterY);

            for (int i =0; i < fib.numbers.Count; i++)
            {
                double sign = (i % 2 == 0 ? 1 : -1);
                double x = sign==1? Math.Round(Math.Cos(Angle)) : Math.Round(Math.Sin(Angle));
                double y = sign == 1 ? Math.Round(Math.Sin(Angle - Math.PI / 2)) : Math.Round(Math.Cos(Angle-Math.PI/2));
                double a = Math.Round(fib.numbers[i] * sign * x);
                double b = Math.Round(fib.numbers[i] * sign * y);

                CenterX = CenterX + a;
                CenterY = CenterY + b;

                ArcSegment arcSegment = new ArcSegment(new Point(CenterX, CenterY),
                    new Size(fib.numbers[i], fib.numbers[i]),
                    0,false,SweepDirection.Counterclockwise,true);

                figure.Segments.Add(arcSegment);
                Angle += Math.PI/2;

            }

            pathGeometry.Figures.Add(figure);
            path.Data = pathGeometry;
            path.Stroke = Brushes.Green;
        }

el resultado en ambos casos

fib02.png
y esto es todo,
saludos!

Tabla periódica

Tabla periódica
Con este post, vamos a mejorar nuestro aprendizaje sobre el diseño de software MVVM (Model View ViewModel) en las que claramente separamos el código por capas en el mismo ensamblado o en varios, pero en este caso lo haremos en el mismo. Para el ejemplo se me ha ocurrido mostrar la tabla periódica, en la cual no vamos a realizar modificaciones, puesto que los datos son los que son y lo único que nos interesa de ella es mostrarla correctamente.
tabla03
Como ya he comentado en otros posts, esto nos va a permitir diseñar y desarrollar un software mucho más robusto y fácil de mantener.
Las aplicaciones MVVM, son sucesoras de las aplicaciones MVC (Model View Controller). En una aplicación MVC podemos apreciar tres tipos de objetos:
Modelo
Esta capa, es la que se encarga de trabajar con los datos y contiene la capa de negocio.
Vista
La vista es la representación de cara al usuario o el objeto responsable de mostrar y permitir la interacción el usuario sobre los datos
Controlador
Permite transferir los datos desde el modelo a la vistaEsto nos permite poder sustituir o modificar cualquiera de las capas sin afectar o afectando lo menos posible al resto de capas, pudiendo mantener de un modo más eficaz nuestra aplicación. La diferencia con las aplicaciones WPF (o Silverlight) es que la capa ViewModel o modelo-vista es la responsable de exponer los datos del modelo usando bindings y de controlar el comportamiento de la vista

En nuestro caso, usamos como datos un archivo XML que he convertido a este formato desde una hoja de cálculo que tenía con los elementos de la tabla periódica y sus propiedades, como modelo, un gestor de datos desde XML, como vista la tabla periódica en XAML y como ViewModel, cada uno de los elementos de la tabla y la tabla en sí.

Los datos xml están distribuidos mediante un elemento raíz elements y como nodos hijos element los cuales contienen las propiedades en bruto que usará el ViewModel.

<elements xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  <element>
    <simbolo>H</simbolo>
    <elemento>Hidrogeno</elemento>
    <numeroAtomico>1</numeroAtomico>
    <pesoAtomico>1,0079</pesoAtomico>
    <densidad>0,071</densidad>
    <valencia>1</valencia>
    <puntoEbullicion>-252,7</puntoEbullicion>
    <puntoFusion>259,2</puntoFusion>
    <estado>Gas</estado>
    <serieQuimica>Otros no metales</serieQuimica>
    <grupo>1</grupo>
    <periodo>1</periodo>
  </element>
  ...
</elements>

Los datos xml son extraídos y pasados a la clase ViewModel mediante la clase XMLManager. Esta clase extrae los datos del archivo XML y al mismo tiempo los convierte en el objeto de la clase ViewModel mediante XML.Linq. Fijaros en la línea subrayada donde desde Linq se crea el nuevo objeto Element por cada una de los componentes del archivo xml y que posteriormente la query se añade a la lista de retorno.

        public List GetElements()
        {
            string path = GetPathXML();
            List elements = new List();

            XDocument xdoc = XDocument.Load(path);

            var query = from u in xdoc.Descendants("element")
                        select new Element
                        {
                            Symbol = u.Element("simbolo").Value,
                            Name = u.Element("elemento").Value,
                            AtomicNumber = Convert.ToInt32(u.Element("numeroAtomico").Value),
                            AtomicMass = Convert.ToDouble(u.Element("pesoAtomico").Value),
                            Density = Convert.ToDouble(u.Element("densidad").Value),
                            Valencia = u.Element("valencia").Value,
                            MeltingPoint = !string.IsNullOrEmpty(u.Element("puntoEbullicion").Value) ? Convert.ToDouble(u.Element("puntoEbullicion").Value): 0,
                            BoilingPoint = !string.IsNullOrEmpty(u.Element("puntoFusion").Value) ? Convert.ToDouble(u.Element("puntoFusion").Value):0,
                            StandarState = u.Element("estado").Value,
                            SerialChemical = u.Element("serieQuimica").Value,
                            Group = Convert.ToInt32(u.Element("grupo").Value),
                            Period = Convert.ToInt32(u.Element("periodo").Value)
                        };

            elements.AddRange(query.ToList());
            return elements;
        }

Como clases ViewModel tenemos por una parte la clase Element que ostenta la entidad de cualquier elemento de la tabla y la clase PeriodicTable que alberga las colecciones. Con extremada sencillez, solo propiedades, sin métodos, de hecho no tenemos que usar la actualización de la propiedades mediante el evento PropertyChanged, ya que las propiedades de los elementos solo se van a cargar una sola vez.

Clase Element

/* ****************************************************************
* © JOAQUIN MARTINEZ RUS 2016
* PROYECTO:        Tabla periódica
* Archivo:         Element.cs
* Descripción:     Clase element.
 *
* Historial:       1. 12 sep 2016. Creación
*
* Comentarios:      Elemento de la tabla periódica
*
*
*******************************************************************/
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.ComponentModel;

namespace DimitriMendeleyev
{
    public class Element: INotifyPropertyChanged
    {
        public string Symbol { get; set; }
        public string Name { get; set; }
        public int AtomicNumber { get; set; }
        public double AtomicMass { get; set; }
        public double Density { get; set; }
        public string Valencia { get; set; }
        public double MeltingPoint { get; set; }
        public double BoilingPoint { get; set; }
        public string StandarState { get; set; }
        public string SerialChemical { get; set; }
        public int Period { get; set; }
        public int Group { get; set; }

        public event PropertyChangedEventHandler PropertyChanged;

    }
}

Clase PeriodicTable

/* ****************************************************************
* © JOAQUIN MARTINEZ RUS 2016
* PROYECTO:        Tabla periódica
* Archivo:         PeriodicTable.cs
* Descripción:     Clase PeriodicTable.
 *
* Historial:
*                  1. 12 sep 2016. Creación
*
* Comentarios:     Tabla periódica
*
*
*******************************************************************/
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.ComponentModel;

namespace DimitriMendeleyev
{
    public class PeriodicTable: INotifyPropertyChanged
    {
        public PeriodicTable()
        {
            Elements = new List<Element>();
            SerialChemical = new List<string>();
            SerialChemical.AddRange(new string[] { "Metales", "Metaloides" , "Otros no metales",
                "Halógenos", "Alcalinotérreos", "Alcalinos", "Metales de Transición",
                "Gases nobles", "Lantánidos", "Actínidos"});
            States = new List<string>();
            States.AddRange(new string[] { "Gas", "Líquido", "Sólido", "Artificial" });
        }

        public List<Element> Elements { get; set; }
        public List<string> SerialChemical { get; set; }
        public List<string> States { get; set; }

        public event PropertyChangedEventHandler PropertyChanged;
    }
}

Por último en la vista creo un control de usuario para un elemento de la tabla y que utilizaremos hasta en 108 ocasiones para crear nuestra tabla.
Cada elemento tiene una serie de propiedades como el número atómico, el símbolo, el nombre, la masa atómica, la serie química, el grupo, el periodo, el estado y un sinfín de propiedades. A este control definido, le asignamos mediante binding las propiedades que queremos mostrar y además le asigno la serie química mediante un color y el estado del elemento a 0ºC, (gas, sólido. líquido o artificial) mediante otro color. Para mostrar estos colores uso sendos conversores que a continuación muestro.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Data;
using System.Windows.Media;

namespace DimitriMendeleyev
{
    public class SerialChemicalToColorConverter : IValueConverter
    {

        #region IValueConverter

        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            SolidColorBrush scb = new SolidColorBrush();

            switch (value.ToString())
            {
                case "Metales":
                    scb.Color = Color.FromRgb(144,238,144);
                    break;
                case "Metaloides":
                    scb.Color = Color.FromRgb(126, 179, 126);
                    break;
                case "Otros no metales":
                    scb.Color = Color.FromRgb(47, 155, 47);
                    break;
                case "Halógenos":
                    scb.Color = Color.FromRgb(134, 221, 221);
                    break;
                case "Alcalinotérreos":
                    scb.Color = Brushes.Khaki.Color;
                    break;
                case "Alcalinos":
                    scb.Color = Brushes.Gold.Color;
                    break;
                case "Metales de Transición":
                    scb.Color = Brushes.BurlyWood.Color;
                    break;
                case "Gases nobles":
                    scb.Color = Brushes.SteelBlue.Color;
                    break;
                case "Lantánidos":
                    scb.Color = Brushes.SandyBrown.Color;
                    break;
                case "Actínidos":
                    scb.Color = Brushes.RosyBrown.Color;
                    break;
            }
            return scb;
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            return Color.FromRgb(255, 0, 0);
        }

        #endregion
    }

    public class StandarStateToColorConverter : IValueConverter
    {

        #region IValueConverter

        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            SolidColorBrush scb = new SolidColorBrush();

            switch (value.ToString())
            {
                case "Gas":
                    scb.Color = Brushes.LightBlue.Color;
                    break;
                case "Líquido":
                    scb.Color = Brushes.Blue.Color;
                    break;
                case "Sólido":
                    scb.Color = Brushes.Black.Color;
                    break;
                case "Artificial":
                    scb.Color = Brushes.DarkRed.Color;
                    break;
            }
            return scb;
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            return Color.FromRgb(255, 0, 0);
        }

        #endregion
    }
}

En cuanto al elemento, contiene un Grid con un control Button y un StackPanel con tres controles Textblock que mostrarán las propiedades mediante binding. Es de reseñar que el modo que usan los enlaces a datos es OneTime, ya que los datos solo se mostrarán una sola vez y no habrá modificaciones; con esto conseguimos menos sobrecarga sobre la aplicación y economía de medios y recursos.

<UserControl x:Class="DimitriMendeleyev.ElementControl"
             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:local="clr-namespace:DimitriMendeleyev"
             mc:Ignorable="d"
             xmlns:Controls="http://metro.mahapps.com/winfx/xaml/controls"
             d:DesignHeight="60" d:DesignWidth="60" x:Name="_element">
    <UserControl.Resources>
        <local:SerialChemicalToColorConverter x:Key="sctcc"/>
        <local:StandarStateToColorConverter x:Key="sstcc"/>
    </UserControl.Resources>
    <Grid>
        <Button Width="auto" Height="auto"
                Background="{Binding Path=SerialChemical, Converter={StaticResource sctcc}, Mode=OneTime}"
                x:Name="buttonElement">
            <StackPanel>
                <TextBlock x:Name="AtomicNumberTextBlock" Text="{Binding AtomicNumber, Mode=OneTime}" FontSize="12" TextAlignment="Center"/>
                <TextBlock x:Name="SymbolTextBlock" Text="{Binding Symbol, Mode=OneTime}" FontSize="15" TextAlignment="Center" FontWeight="Bold" Foreground="{Binding StandarState, Converter={StaticResource sstcc}}"/>
                <TextBlock x:Name="NameTextBlock" Text="{Binding Name, Mode=OneTime}" FontSize="10" TextAlignment="Center" />
            </StackPanel>
        </Button>
    </Grid>
</UserControl>

He creado otro control de usuario que muestra los datos ampliados del elemento de la tabla seleccionado y funciona prácticamente igual pero con la diferencia que se le pasa cada vez que se pulsa sobre un elemento concreto, este elemento, traspasa sus datos mediante el DataContext propio al control de datos ampliados.
Elemento con selección

<UserControl x:Class="DimitriMendeleyev.BigElementControl"
             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:local="clr-namespace:DimitriMendeleyev"
             mc:Ignorable="d"
             d:DesignHeight="220" d:DesignWidth="250" x:Name="big">
    <UserControl.Resources>
        <local:SerialChemicalToColorConverter x:Key="sctcc"/>
        <local:StandarStateToColorConverter x:Key="sstcc"/>
    </UserControl.Resources>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200*"/>
            <ColumnDefinition Width="50*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="30"/>
            <RowDefinition Height="50"/>
            <RowDefinition Height="30"/>
            <RowDefinition Height="30"/>
            <RowDefinition Height="30"/>
            <RowDefinition Height="30*"/>
        </Grid.RowDefinitions>
        <Border BorderBrush="Navy" BorderThickness="4"
                Width="auto" Height="auto" Margin="1"
                Background="{Binding Path=SerialChemical, Converter={StaticResource sctcc}}"
                Grid.ColumnSpan="2" Grid.RowSpan="6"/>
        <TextBlock x:Name="AtomicNumberTextBlock" Text="{Binding AtomicNumber}" FontSize="20" TextAlignment="Center" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"/>
        <TextBlock x:Name="SymbolTextBlock" Text="{Binding Symbol}" FontSize="30" TextAlignment="Center" FontWeight="Bold" Grid.Row="1" Grid.Column="0" Foreground="{Binding StandarState, Converter={StaticResource sstcc}}" Grid.ColumnSpan="2"/>
        <TextBlock x:Name="NameTextBlock" Text="{Binding Name}" FontSize="20" TextAlignment="Center" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2"/>
        <TextBlock Text="{Binding AtomicMass, StringFormat='Masa Atómica: {0}'}" FontSize="14" TextAlignment="Center" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2"/>
        <TextBlock Text="{Binding Density, StringFormat='Densidad: {0}'}" FontSize="14" TextAlignment="Center" Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2"/>
        <TextBlock Text="{Binding Valencia}" FontSize="14" TextAlignment="Center" Grid.Row="0" Grid.Column="1" Grid.RowSpan="4" TextWrapping="Wrap" Margin="5"/>
    </Grid>
</UserControl>

Paso del datacontext

        private void ButtonElement_Click(object sender, RoutedEventArgs e)
        {
            var buttonElement = e.OriginalSource as Button;
            var el = buttonElement.Parent as Grid;
            bigElement.DataContext = el.DataContext;
        }

La tabla periódica es la que tiene su “currito”, tenemos que crear un control ElementControl por cada uno de los elementos de la tabla colocándolos en su sitio correcto, dejándolo lo más bonito que nuestro gusto nos permita. El código que contiene esta vista, no es otro que la instanciación de la clase XMLManager, la clase PeriodicTable y asignación al DataContext de la lista de elementos que contiene esta última. Muestro a continuación el código XAML completo de la tabla periódica.

<Controls:MetroWindow x:Class="DimitriMendeleyev.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:Controls="http://metro.mahapps.com/winfx/xaml/controls"
        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:DimitriMendeleyev"
        mc:Ignorable="d"
        Title="MainWindow" Height="800" Width="1140"
                      BorderBrush="{DynamicResource AccentColorBrush}"
                      BorderThickness="1" WindowState="Maximized" WindowStartupLocation="CenterScreen">
    <Controls:MetroWindow.Resources>
        <Style x:Key="baseStyle" TargetType="TextBlock">
            <Setter Property="TextAlignment" Value="Center"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="HorizontalAlignment" Value="Stretch"/>
            <Setter Property="Margin" Value="2"/>
            <Setter Property="FontSize" Value="22"/>
            <Setter Property="Foreground" Value="DarkGray"/>
        </Style>
        <Style x:Key="serialChemicalStyle" TargetType="TextBlock">
            <Setter Property="HorizontalAlignment" Value="Stretch"/>
            <Setter Property="TextAlignment" Value="Left"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="Margin" Value="10"/>
            <Setter Property="FontSize" Value="12"/>
            <Setter Property="TextWrapping" Value="Wrap"/>
            <Setter Property="Width" Value="auto"/>
        </Style>
        <local:SerialChemicalToColorConverter x:Key="sctcc"/>
        <local:StandarStateToColorConverter x:Key="sstcc"/>
    </Controls:MetroWindow.Resources>
    <Grid x:Name="grid" HorizontalAlignment="Center">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="40"/>
            <ColumnDefinition Width="60"/>
            <ColumnDefinition Width="60"/>
            <ColumnDefinition Width="60"/>
            <ColumnDefinition Width="60"/>
            <ColumnDefinition Width="60"/>
            <ColumnDefinition Width="60"/>
            <ColumnDefinition Width="60"/>
            <ColumnDefinition Width="60"/>
            <ColumnDefinition Width="60"/>
            <ColumnDefinition Width="60"/>
            <ColumnDefinition Width="60"/>
            <ColumnDefinition Width="60"/>
            <ColumnDefinition Width="60"/>
            <ColumnDefinition Width="60"/>
            <ColumnDefinition Width="60"/>
            <ColumnDefinition Width="60"/>
            <ColumnDefinition Width="60"/>
            <ColumnDefinition Width="60"/>
            <ColumnDefinition Width="20"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="80"/>
            <RowDefinition Height="60"/>
            <RowDefinition Height="60"/>
            <RowDefinition Height="60"/>
            <RowDefinition Height="60"/>
            <RowDefinition Height="60"/>
            <RowDefinition Height="60"/>
            <RowDefinition Height="60"/>
            <RowDefinition Height="20"/>
            <RowDefinition Height="60"/>
            <RowDefinition Height="60"/>
            <RowDefinition Height="60"/>
            <RowDefinition Height="20"/>
        </Grid.RowDefinitions>
        <!-- CONTROL GRANDE -->
        <local:BigElementControl x:Name="bigElement" Grid.Column="0" Grid.Row="9" Grid.ColumnSpan="3" Grid.RowSpan="3" Margin="10,0,0,0"/>
        <!-- Periodos -->
        <TextBlock Text="1" Grid.Column="0" Grid.Row="1" Style="{StaticResource baseStyle}"/>
        <TextBlock Text="2" Grid.Column="0" Grid.Row="2" Style="{StaticResource baseStyle}"/>
        <TextBlock Text="3" Grid.Column="0" Grid.Row="3" Style="{StaticResource baseStyle}"/>
        <TextBlock Text="4" Grid.Column="0" Grid.Row="4" Style="{StaticResource baseStyle}"/>
        <TextBlock Text="5" Grid.Column="0" Grid.Row="5" Style="{StaticResource baseStyle}"/>
        <TextBlock Text="6" Grid.Column="0" Grid.Row="6" Style="{StaticResource baseStyle}"/>
        <TextBlock Text="7" Grid.Column="0" Grid.Row="7" Style="{StaticResource baseStyle}"/>
        <!-- Grupos -->
        <TextBlock Text="1" Grid.Column="1" Grid.Row="0" Style="{StaticResource baseStyle}"/>
        <TextBlock Text="2" Grid.Column="2" Grid.Row="0" Style="{StaticResource baseStyle}"/>
        <TextBlock Text="3" Grid.Column="3" Grid.Row="0" Style="{StaticResource baseStyle}"/>
        <TextBlock Text="4" Grid.Column="4" Grid.Row="0" Style="{StaticResource baseStyle}"/>
        <TextBlock Text="5" Grid.Column="5" Grid.Row="0" Style="{StaticResource baseStyle}"/>
        <TextBlock Text="6" Grid.Column="6" Grid.Row="0" Style="{StaticResource baseStyle}"/>
        <TextBlock Text="7" Grid.Column="7" Grid.Row="0" Style="{StaticResource baseStyle}"/>
        <TextBlock Text="8" Grid.Column="8" Grid.Row="0" Style="{StaticResource baseStyle}"/>
        <TextBlock Text="9" Grid.Column="9" Grid.Row="0" Style="{StaticResource baseStyle}"/>
        <TextBlock Text="10" Grid.Column="10" Grid.Row="0" Style="{StaticResource baseStyle}"/>
        <TextBlock Text="11" Grid.Column="11" Grid.Row="0" Style="{StaticResource baseStyle}"/>
        <TextBlock Text="12" Grid.Column="12" Grid.Row="0" Style="{StaticResource baseStyle}"/>
        <TextBlock Text="13" Grid.Column="13" Grid.Row="0" Style="{StaticResource baseStyle}"/>
        <TextBlock Text="14" Grid.Column="14" Grid.Row="0" Style="{StaticResource baseStyle}"/>
        <TextBlock Text="15" Grid.Column="15" Grid.Row="0" Style="{StaticResource baseStyle}"/>
        <TextBlock Text="16" Grid.Column="16" Grid.Row="0" Style="{StaticResource baseStyle}"/>
        <TextBlock Text="17" Grid.Column="17" Grid.Row="0" Style="{StaticResource baseStyle}"/>
        <TextBlock Text="18" Grid.Column="18" Grid.Row="0" Style="{StaticResource baseStyle}"/>

        <!-- series quimicas-->
        <Grid Grid.Column="4" Grid.Row="1" Grid.ColumnSpan="9" Grid.RowSpan="3" Height="183" VerticalAlignment="Bottom">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="50"/>
                <ColumnDefinition Width="50"/>
                <ColumnDefinition Width="50"/>
                <ColumnDefinition Width="50"/>
                <ColumnDefinition Width="50"/>
                <ColumnDefinition Width="50"/>
                <ColumnDefinition Width="50"/>
                <ColumnDefinition Width="50"/>
                <ColumnDefinition Width="50"/>
                <ColumnDefinition Width="50"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="35"/>
                <RowDefinition Height="35"/>
                <RowDefinition Height="35"/>
                <RowDefinition Height="35"/>
                <RowDefinition Height="35"/>
            </Grid.RowDefinitions>
            <!--Metaloides-->
            <Grid Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2" Grid.RowSpan="2" Margin="2,0,2,2">
                <Border Width="auto" Height="auto"  Background="{Binding Path=SerialChemical[1], Converter={StaticResource sctcc}}" CornerRadius="10,0,0,0"/>
                <TextBlock Text="{Binding Path=SerialChemical[1]}" Style="{StaticResource serialChemicalStyle}"/>
            </Grid>
            <!--No metales-->
            <Border Grid.Row="0" Grid.Column="3" Grid.ColumnSpan="6" BorderBrush="MidnightBlue" BorderThickness="2,2,2,0" CornerRadius="0,10,0,0" Margin="2"/>
            <TextBlock Text="No metales" HorizontalAlignment="Stretch" Grid.Row="0" Grid.Column="3" Grid.ColumnSpan="6" TextAlignment="Center" FontSize="19" VerticalAlignment="Top"/>
            <Grid Grid.Row="0" Grid.Column="3" Grid.ColumnSpan="2" Grid.RowSpan="2" Margin="2" VerticalAlignment="Bottom">
                <Border Width="auto" Height="auto"  Background="{Binding Path=SerialChemical[2], Converter={StaticResource sctcc}}" CornerRadius="0,0,0,8"/>
                <TextBlock Text="{Binding Path=SerialChemical[2]}" Style="{StaticResource serialChemicalStyle}" FontSize="10"/>
            </Grid>
            <Grid Grid.Row="0" Grid.Column="5" Grid.ColumnSpan="2" Grid.RowSpan="2" Margin="2" VerticalAlignment="Bottom">
                <Border Width="auto" Height="auto"  Background="{Binding Path=SerialChemical[3], Converter={StaticResource sctcc}}"/>
                <TextBlock Text="{Binding Path=SerialChemical[3]}" Style="{StaticResource serialChemicalStyle}"/>
            </Grid>
            <Grid Grid.Row="0" Grid.Column="7" Grid.ColumnSpan="2" Grid.RowSpan="2" Margin="2" VerticalAlignment="Bottom">
                <Border Width="auto" Height="auto" Background="{Binding Path=SerialChemical[7], Converter={StaticResource sctcc}}" CornerRadius="0,0,8,0"/>
                <TextBlock Text="{Binding Path=SerialChemical[7]}" Style="{StaticResource serialChemicalStyle}"/>
            </Grid>
            <!--Metales-->
            <Border Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="10" BorderBrush="MidnightBlue" BorderThickness="2,2,2,0" CornerRadius="10,10,0,0" Margin="2"/>
            <TextBlock Text="Metales" HorizontalAlignment="Stretch" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="10" TextAlignment="Center" FontSize="19" VerticalAlignment="Top"/>

            <Grid Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" Grid.RowSpan="2" Margin="2">
                <Border Width="auto" Height="auto" Background="{Binding Path=SerialChemical[5], Converter={StaticResource sctcc}}" CornerRadius="0,0,0,10"/>
                <TextBlock Text="{Binding Path=SerialChemical[5]}" Style="{StaticResource serialChemicalStyle}"/>
            </Grid>
            <Grid Grid.Row="3" Grid.Column="2" Grid.ColumnSpan="2" Grid.RowSpan="2" Margin="2">
                <Border Width="auto" Height="auto" Background="{Binding Path=SerialChemical[4], Converter={StaticResource sctcc}}" />
                <TextBlock Text="{Binding Path=SerialChemical[4]}" Style="{StaticResource serialChemicalStyle}" FontSize="11"/>
            </Grid>
            <Grid Grid.Row="3" Grid.Column="4" Grid.ColumnSpan="2" Margin="2">
                <Border Width="auto" Height="auto" Background="{Binding Path=SerialChemical[8], Converter={StaticResource sctcc}}" />
                <TextBlock Text="{Binding Path=SerialChemical[8]}" Style="{StaticResource serialChemicalStyle}"/>
            </Grid>
            <Grid Grid.Row="4" Grid.Column="4" Grid.ColumnSpan="2" Margin="2">
                <Border Width="auto" Height="auto" Background="{Binding Path=SerialChemical[9], Converter={StaticResource sctcc}}" />
                <TextBlock Text="{Binding Path=SerialChemical[9]}" Style="{StaticResource serialChemicalStyle}"/>
            </Grid>
            <Grid Grid.Row="3" Grid.Column="6" Grid.ColumnSpan="2" Grid.RowSpan="2" Margin="2">
                <Border Width="auto" Height="auto" Background="{Binding Path=SerialChemical[6], Converter={StaticResource sctcc}}" />
                <TextBlock Text="{Binding Path=SerialChemical[6]}" Style="{StaticResource serialChemicalStyle}"/>
            </Grid>
            <Grid Grid.Row="3" Grid.Column="8" Grid.ColumnSpan="2" Grid.RowSpan="2" Margin="2">
                <Border Width="auto" Height="auto" Background="{Binding Path=SerialChemical[0], Converter={StaticResource sctcc}}" CornerRadius="0,0,10,0"/>
                <TextBlock Text="{Binding Path=SerialChemical[0]}" Style="{StaticResource serialChemicalStyle}"/>
            </Grid>

        </Grid>

        <!-- Elementos -->
        <Grid Grid.Column="2" Grid.Row="1">
            <Border BorderBrush="{DynamicResource AccentColorBrush}" BorderThickness="1" Width="auto" Height="auto" Margin="1"/>
            <StackPanel>
                <TextBlock x:Name="AtomicNumberTextBlock" Text="NºAtóm." FontSize="12" TextAlignment="Center"/>
                <TextBlock x:Name="SymbolTextBlock" Text="Símbolo" FontSize="14" TextAlignment="Center" FontWeight="Bold"/>
                <TextBlock x:Name="NameTextBlock" Text="Nombre" FontSize="12" TextAlignment="Center"/>
            </StackPanel>
        </Grid>
        <StackPanel Grid.Column="3" Grid.Row="1" Grid.RowSpan="2">
            <TextBlock Text="{Binding States[0]}" Foreground="{Binding States[0], Converter={StaticResource sstcc}}" FontSize="14" FontWeight="Bold" TextAlignment="Center"/>
            <TextBlock Text="{Binding States[1]}" Foreground="{Binding States[1], Converter={StaticResource sstcc}}" FontSize="14" FontWeight="Bold" TextAlignment="Center"/>
            <TextBlock Text="{Binding States[2]}" Foreground="{Binding States[2], Converter={StaticResource sstcc}}" FontSize="14" FontWeight="Bold" TextAlignment="Center"/>
            <TextBlock Text="{Binding States[3]}" Foreground="{Binding States[3], Converter={StaticResource sstcc}}" FontSize="14" FontWeight="Bold" TextAlignment="Center"/>
        </StackPanel>
        <local:ElementControl DataContext="{Binding Elements[0]}" Grid.Column="1" Grid.Row="1"/>
        <local:ElementControl DataContext="{Binding Elements[1]}" Grid.Column="18" Grid.Row="1"/>
        <local:ElementControl DataContext="{Binding Elements[2]}" Grid.Column="1" Grid.Row="2"/>
        <local:ElementControl DataContext="{Binding Elements[3]}" Grid.Column="2" Grid.Row="2"/>
        <local:ElementControl DataContext="{Binding Elements[4]}" Grid.Column="13" Grid.Row="2"/>
        <local:ElementControl DataContext="{Binding Elements[5]}" Grid.Column="14" Grid.Row="2"/>
        <local:ElementControl DataContext="{Binding Elements[6]}" Grid.Column="15" Grid.Row="2"/>
        <local:ElementControl DataContext="{Binding Elements[7]}" Grid.Column="16" Grid.Row="2"/>
        <local:ElementControl DataContext="{Binding Elements[8]}" Grid.Column="17" Grid.Row="2"/>
        <local:ElementControl DataContext="{Binding Elements[9]}" Grid.Column="18" Grid.Row="2"/>
        <local:ElementControl DataContext="{Binding Elements[10]}" Grid.Column="1" Grid.Row="3"/>
        <local:ElementControl DataContext="{Binding Elements[11]}" Grid.Column="2" Grid.Row="3"/>
        <local:ElementControl DataContext="{Binding Elements[12]}" Grid.Column="13" Grid.Row="3"/>
        <local:ElementControl DataContext="{Binding Elements[13]}" Grid.Column="14" Grid.Row="3"/>
        <local:ElementControl DataContext="{Binding Elements[14]}" Grid.Column="15" Grid.Row="3"/>
        <local:ElementControl DataContext="{Binding Elements[15]}" Grid.Column="16" Grid.Row="3"/>
        <local:ElementControl DataContext="{Binding Elements[16]}" Grid.Column="17" Grid.Row="3"/>
        <local:ElementControl DataContext="{Binding Elements[17]}" Grid.Column="18" Grid.Row="3"/>
        <local:ElementControl DataContext="{Binding Elements[18]}" Grid.Column="1" Grid.Row="4"/>
        <local:ElementControl DataContext="{Binding Elements[19]}" Grid.Column="2" Grid.Row="4"/>
        <local:ElementControl DataContext="{Binding Elements[20]}" Grid.Column="3" Grid.Row="4"/>
        <local:ElementControl DataContext="{Binding Elements[21]}" Grid.Column="4" Grid.Row="4"/>
        <local:ElementControl DataContext="{Binding Elements[22]}" Grid.Column="5" Grid.Row="4"/>
        <local:ElementControl DataContext="{Binding Elements[23]}" Grid.Column="6" Grid.Row="4"/>
        <local:ElementControl DataContext="{Binding Elements[24]}" Grid.Column="7" Grid.Row="4"/>
        <local:ElementControl DataContext="{Binding Elements[25]}" Grid.Column="8" Grid.Row="4"/>
        <local:ElementControl DataContext="{Binding Elements[26]}" Grid.Column="9" Grid.Row="4"/>
        <local:ElementControl DataContext="{Binding Elements[27]}" Grid.Column="10" Grid.Row="4"/>
        <local:ElementControl DataContext="{Binding Elements[28]}" Grid.Column="11" Grid.Row="4"/>
        <local:ElementControl DataContext="{Binding Elements[29]}" Grid.Column="12" Grid.Row="4"/>
        <local:ElementControl DataContext="{Binding Elements[30]}" Grid.Column="13" Grid.Row="4"/>
        <local:ElementControl DataContext="{Binding Elements[31]}" Grid.Column="14" Grid.Row="4"/>
        <local:ElementControl DataContext="{Binding Elements[32]}" Grid.Column="15" Grid.Row="4"/>
        <local:ElementControl DataContext="{Binding Elements[33]}" Grid.Column="16" Grid.Row="4"/>
        <local:ElementControl DataContext="{Binding Elements[34]}" Grid.Column="17" Grid.Row="4"/>
        <local:ElementControl DataContext="{Binding Elements[35]}" Grid.Column="18" Grid.Row="4"/>
        <local:ElementControl DataContext="{Binding Elements[36]}" Grid.Column="1" Grid.Row="5"/>
        <local:ElementControl DataContext="{Binding Elements[37]}" Grid.Column="2" Grid.Row="5"/>
        <local:ElementControl DataContext="{Binding Elements[38]}" Grid.Column="3" Grid.Row="5"/>
        <local:ElementControl DataContext="{Binding Elements[39]}" Grid.Column="4" Grid.Row="5"/>
        <local:ElementControl DataContext="{Binding Elements[40]}" Grid.Column="5" Grid.Row="5"/>
        <local:ElementControl DataContext="{Binding Elements[41]}" Grid.Column="6" Grid.Row="5"/>
        <local:ElementControl DataContext="{Binding Elements[42]}" Grid.Column="7" Grid.Row="5"/>
        <local:ElementControl DataContext="{Binding Elements[43]}" Grid.Column="8" Grid.Row="5"/>
        <local:ElementControl DataContext="{Binding Elements[44]}" Grid.Column="9" Grid.Row="5"/>
        <local:ElementControl DataContext="{Binding Elements[45]}" Grid.Column="10" Grid.Row="5"/>
        <local:ElementControl DataContext="{Binding Elements[46]}" Grid.Column="11" Grid.Row="5"/>
        <local:ElementControl DataContext="{Binding Elements[47]}" Grid.Column="12" Grid.Row="5"/>
        <local:ElementControl DataContext="{Binding Elements[48]}" Grid.Column="13" Grid.Row="5"/>
        <local:ElementControl DataContext="{Binding Elements[49]}" Grid.Column="14" Grid.Row="5"/>
        <local:ElementControl DataContext="{Binding Elements[50]}" Grid.Column="15" Grid.Row="5"/>
        <local:ElementControl DataContext="{Binding Elements[51]}" Grid.Column="16" Grid.Row="5"/>
        <local:ElementControl DataContext="{Binding Elements[52]}" Grid.Column="17" Grid.Row="5"/>
        <local:ElementControl DataContext="{Binding Elements[53]}" Grid.Column="18" Grid.Row="5"/>
        <local:ElementControl DataContext="{Binding Elements[54]}" Grid.Column="1" Grid.Row="6"/>
        <local:ElementControl DataContext="{Binding Elements[55]}" Grid.Column="2" Grid.Row="6"/>

        <local:ElementControl DataContext="{Binding Elements[71]}" Grid.Column="4" Grid.Row="6"/>
        <local:ElementControl DataContext="{Binding Elements[72]}" Grid.Column="5" Grid.Row="6"/>
        <local:ElementControl DataContext="{Binding Elements[73]}" Grid.Column="6" Grid.Row="6"/>
        <local:ElementControl DataContext="{Binding Elements[74]}" Grid.Column="7" Grid.Row="6"/>
        <local:ElementControl DataContext="{Binding Elements[75]}" Grid.Column="8" Grid.Row="6"/>
        <local:ElementControl DataContext="{Binding Elements[76]}" Grid.Column="9" Grid.Row="6"/>
        <local:ElementControl DataContext="{Binding Elements[77]}" Grid.Column="10" Grid.Row="6"/>
        <local:ElementControl DataContext="{Binding Elements[78]}" Grid.Column="11" Grid.Row="6"/>
        <local:ElementControl DataContext="{Binding Elements[79]}" Grid.Column="12" Grid.Row="6"/>
        <local:ElementControl DataContext="{Binding Elements[80]}" Grid.Column="13" Grid.Row="6"/>
        <local:ElementControl DataContext="{Binding Elements[81]}" Grid.Column="14" Grid.Row="6"/>
        <local:ElementControl DataContext="{Binding Elements[82]}" Grid.Column="15" Grid.Row="6"/>
        <local:ElementControl DataContext="{Binding Elements[83]}" Grid.Column="16" Grid.Row="6"/>
        <local:ElementControl DataContext="{Binding Elements[84]}" Grid.Column="17" Grid.Row="6"/>
        <local:ElementControl DataContext="{Binding Elements[85]}" Grid.Column="18" Grid.Row="6"/>

        <local:ElementControl DataContext="{Binding Elements[86]}" Grid.Column="1" Grid.Row="7"/>
        <local:ElementControl DataContext="{Binding Elements[87]}" Grid.Column="2" Grid.Row="7"/>

        <local:ElementControl DataContext="{Binding Elements[103]}" Grid.Column="4" Grid.Row="7"/>
        <local:ElementControl DataContext="{Binding Elements[104]}" Grid.Column="5" Grid.Row="7"/>
        <local:ElementControl DataContext="{Binding Elements[105]}" Grid.Column="6" Grid.Row="7"/>
        <local:ElementControl DataContext="{Binding Elements[106]}" Grid.Column="7" Grid.Row="7"/>
        <local:ElementControl DataContext="{Binding Elements[107]}" Grid.Column="8" Grid.Row="7"/>
        <local:ElementControl DataContext="{Binding Elements[108]}" Grid.Column="9" Grid.Row="7"/>
        <local:ElementControl DataContext="{Binding Elements[109]}" Grid.Column="10" Grid.Row="7"/>
        <local:ElementControl DataContext="{Binding Elements[110]}" Grid.Column="11" Grid.Row="7"/>
        <local:ElementControl DataContext="{Binding Elements[111]}" Grid.Column="12" Grid.Row="7"/>
        <local:ElementControl DataContext="{Binding Elements[112]}" Grid.Column="13" Grid.Row="7"/>
        <local:ElementControl DataContext="{Binding Elements[113]}" Grid.Column="14" Grid.Row="7"/>
        <local:ElementControl DataContext="{Binding Elements[114]}" Grid.Column="15" Grid.Row="7"/>
        <local:ElementControl DataContext="{Binding Elements[115]}" Grid.Column="16" Grid.Row="7"/>
        <local:ElementControl DataContext="{Binding Elements[116]}" Grid.Column="17" Grid.Row="7"/>
        <local:ElementControl DataContext="{Binding Elements[117]}" Grid.Column="18" Grid.Row="7"/>

        <!--  Lineas de lantánidos y actínidos -->
        <Polygon Grid.Column="3" Grid.Row="6" Grid.RowSpan="6" Stroke="Blue"
              Grid.ColumnSpan="18" Points="2 2 2 318 58 318 58 198 962 198 962 318 975 318 975 180 58 180 58 2">
            <Polygon.Fill>
                <SolidColorBrush Color="Coral" Opacity="0.3"/>
            </Polygon.Fill>
        </Polygon>
        <!--<local:ElementControl Grid.Column="3" Grid.Row="6" Background="Beige" />
        <local:ElementControl Grid.Column="3" Grid.Row="7" Background="PaleGoldenrod" />-->
        <TextBlock Text="57-71" Grid.Column="3" Grid.Row="6" Style="{StaticResource baseStyle}" FontSize="16"/>
        <TextBlock Text="89-103" Grid.Column="3" Grid.Row="7" Style="{StaticResource baseStyle}" FontSize="16"/>

        <local:ElementControl DataContext="{Binding Elements[56]}" Grid.Column="4" Grid.Row="10"/>
        <local:ElementControl DataContext="{Binding Elements[57]}" Grid.Column="5" Grid.Row="10"/>
        <local:ElementControl DataContext="{Binding Elements[58]}" Grid.Column="6" Grid.Row="10"/>
        <local:ElementControl DataContext="{Binding Elements[59]}" Grid.Column="7" Grid.Row="10"/>
        <local:ElementControl DataContext="{Binding Elements[60]}" Grid.Column="8" Grid.Row="10"/>
        <local:ElementControl DataContext="{Binding Elements[61]}" Grid.Column="9" Grid.Row="10"/>
        <local:ElementControl DataContext="{Binding Elements[62]}" Grid.Column="10" Grid.Row="10"/>
        <local:ElementControl DataContext="{Binding Elements[63]}" Grid.Column="11" Grid.Row="10"/>
        <local:ElementControl DataContext="{Binding Elements[64]}" Grid.Column="12" Grid.Row="10"/>
        <local:ElementControl DataContext="{Binding Elements[65]}" Grid.Column="13" Grid.Row="10"/>
        <local:ElementControl DataContext="{Binding Elements[66]}" Grid.Column="14" Grid.Row="10"/>
        <local:ElementControl DataContext="{Binding Elements[67]}" Grid.Column="15" Grid.Row="10"/>
        <local:ElementControl DataContext="{Binding Elements[68]}" Grid.Column="16" Grid.Row="10"/>
        <local:ElementControl DataContext="{Binding Elements[69]}" Grid.Column="17" Grid.Row="10"/>
        <local:ElementControl DataContext="{Binding Elements[70]}" Grid.Column="18" Grid.Row="10"/>

        <local:ElementControl DataContext="{Binding Elements[88]}" Grid.Column="4" Grid.Row="11"/>
        <local:ElementControl DataContext="{Binding Elements[89]}" Grid.Column="5" Grid.Row="11"/>
        <local:ElementControl DataContext="{Binding Elements[90]}" Grid.Column="6" Grid.Row="11"/>
        <local:ElementControl DataContext="{Binding Elements[91]}" Grid.Column="7" Grid.Row="11"/>
        <local:ElementControl DataContext="{Binding Elements[92]}" Grid.Column="8" Grid.Row="11"/>
        <local:ElementControl DataContext="{Binding Elements[93]}" Grid.Column="9" Grid.Row="11"/>
        <local:ElementControl DataContext="{Binding Elements[94]}" Grid.Column="10" Grid.Row="11"/>
        <local:ElementControl DataContext="{Binding Elements[95]}" Grid.Column="11" Grid.Row="11"/>
        <local:ElementControl DataContext="{Binding Elements[96]}" Grid.Column="12" Grid.Row="11"/>
        <local:ElementControl DataContext="{Binding Elements[97]}" Grid.Column="13" Grid.Row="11"/>
        <local:ElementControl DataContext="{Binding Elements[98]}" Grid.Column="14" Grid.Row="11"/>
        <local:ElementControl DataContext="{Binding Elements[99]}" Grid.Column="15" Grid.Row="11"/>
        <local:ElementControl DataContext="{Binding Elements[100]}" Grid.Column="16" Grid.Row="11"/>
        <local:ElementControl DataContext="{Binding Elements[101]}" Grid.Column="17" Grid.Row="11"/>
        <local:ElementControl DataContext="{Binding Elements[102]}" Grid.Column="18" Grid.Row="11"/>

    </Grid>
</Controls:MetroWindow>

Con esto, podemos apreciar que podríamos implementar lo que quisiéramos sobre la tabla periódica sin necesidad de modificar ni una sola línea de código de las clases MVVM. Como ejemplo, podríamos incluir en la tabla un control Slider que cambie la temperatura, de modo que una vez superara o quedara por debajo de las temperaturas de fusión y ebullición, el estado de los elementos cambiaría y por tanto el color del símbolo también.

Y aquí el resultado

Tabla05.gif
Espero que os haya gustado y como no, si queréis que os pase el proyecto, no dudéis en escribir un comentario o ponerse en contacto conmigo.

Saludos amig@s

Nota: Esta vez el NameSpace se lo dedico, como no, al químico Dimitri Mendeleiev que descubrió el fantástico patrón con el que los elementos químicos quedan ordenados en su tabla periódica. La imagen de la cabecera, es un monumento en la ciudad de Bratislava en su honor.