Rodrigo Díaz Concha

My good friend Martín Uresti sent to me a newer and more detailed version of the Mexico Map in XAML so we can use it in Entrenamiento intensivo de Silverlight en Español / WPF applications!  At a first glance it looks amazingly detailed and more beautiful than the first one.  Thank you Martín for your cooperation with the Entrenamiento intensivo de Silverlight en Español community!  Just as in the first version each state is surrounded by a <Canvas> element so we can develop against each state in its own (maybe changing the color or something).

You can download the newer Mexico map in XAML right here

Enjoy!

I’ve just finished my first version of my beloved Mexico map in XAML ! (I think this is the first Mexico map with detailed states in XAML ever!!! :P) for all developers and enthusiasts in Silverlight or WPF technologies that could need it in their current solutions.  This map could be the startup for exciting and newer user interfaces to allow users to have a better experience when using our applications.  Even for geography didactic or academic applications that need to display localized information about Mexico or data filtering by state, etc.  I’ve created it in a few hours using some tools like Photoshop, Expression Design and Expression Blend.

This map includes the 32 states of the Mexican republic, each of them implemented as a <Canvas> with its name property set for access when developing the desired behavior in the code-behind.

Please click on the above image to see the full version

In the other hand, for those developers that need a basic code template to see how this could be programmed I made the following code as an example of how to use this map.  Following is the coded needed to identify each state with a different color when hovering the mouse over each of them.  The code also displays an alert with the state name when clicked:

namespace Rodrigo.Maps
{
    public partial class Mexico : UserControl
    {
        Brush original;
        public Mexico()
        {
            InitializeComponent();

            original = (Brush)this.Resources["brochaVerde"];

            foreach (UIElement estado in this.mexico.Children)
            {
                if (estado is Canvas)
                {
                    RegisterEvents(estado as Canvas);
                }
            }

            //Español: También podemos hacer esto:
            //English: We could do this as well:
            //RegisterEvents(Aguascalientes);
            //RegisterEvents(BC);
            //RegisterEvents(NuevoLeon);
            //...
        }

        /// <summary>
        /// Español: Registra los manejadores de eventos para el estado especificado en el parámetro
        /// English: Register the event handlers for the state specified in the parameter
        /// </summary>
        /// <param name="estado"></param>
        void RegisterEvents(Canvas estado)
        {
            estado.MouseEnter += new MouseEventHandler(this.Estado_MouseEnter);
            estado.MouseLeave += new MouseEventHandler(this.Estado_MouseLeave);
            estado.MouseLeftButtonUp += new MouseButtonEventHandler(this.Estado_MouseButtonUp);
        }

        /// <summary>
        /// Español: Muestra el nombre del estado en una alerta al hacer clic
        /// English: Displays the state name when clicked
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        void Estado_MouseButtonUp(object sender, MouseButtonEventArgs e)
        {
            HtmlPage.Window.Alert(((Canvas)sender).Name);
        }

        /// <summary>
        /// Español: Cambia el color del estado que está recibiendo el foco
        /// English: Changes the state color when the mouse cursor hovers
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        void Estado_MouseEnter(object sender, MouseEventArgs e)
        {
            ((Path)((Canvas)sender).Children[0]).Fill = new SolidColorBrush(Colors.Magenta);
        }

        /// <summary>
        /// Español: Regresa el color original del estado al perder el foco
        /// English: Rolls back to the original color when the mouse cursor leaves
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        void Estado_MouseLeave(object sender, MouseEventArgs e)
        {
            ((Path)((Canvas)sender).Children[0]).Fill = original;
        }
        
    }
}

And of course, don’t forget to update the RootVisual property accordingly in order to invoke Mexico.xaml in the application (when using Silverlight).

private void Application_Startup(object sender, StartupEventArgs e)
        {
            this.RootVisual = new Rodrigo.Maps.Mexico();
        }

Download the XAML Mexico Map here

Soon I will be writing some articles about how I’m using this map and how we could write a reusable control with it.

Hope this will be helpful.

Cheers!