none
How to use Blend to acheive equivalent functionality for HTML area/polygon code

    Pregunta

  • Hi All,

    I can use some help. I have used Blend to do some GUI work for Silverlight applications, but have not worked much with irregular shaped graphics superimposed on another graphic.

    I am working on a Silverlight project that needs functionality equivalent to the HTML code below. The HTML code works on a GIF map, and it is used to highlight and identify each county within a state. Can anyone provide assistance as to how to achieve the equivalent functionality in XAML? I need to be able to create 50+ XAML maps for the application.

    Thanks,

    Warren

    <HTML>
    <HEAD>
    <TITLE>Kentucky Map</TITLE>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
    </HEAD>
    <BODY BGCOLOR="#FFFFFF">
    <CENTER>
    <MAP NAME="stout21">
    <AREA SHAPE="polygon"
    COORDS="733, 65, 734, 66, 734, 67, 734, 69, 734, 71, 734, 72, 734, 73, 734, 74, 735, 74, 735, 75, 735, 77, 735, 78, 735, 79, 735, 80, 735, 81, 735, 82, 735, 83, 736, 85, 736, 89, 737, 93, 737, 95, 737, 97, 737, 98, 737, 100, 737, 101, 737, 102, 737, 103, 736, 103, 736, 105, 736, 106, 736, 109, 735, 112, 734, 111, 733, 112, 731, 112, 731, 113, 730, 114, 730, 115, 730, 116, 729, 116, 717, 107, 717, 106, 716, 105, 716, 104, 715, 104, 714, 104, 713, 104, 713, 103, 713, 102, 712, 102, 712, 103, 713, 103, 712, 103, 711, 103, 711, 102, 712, 101, 712, 100, 712, 99, 712, 98, 711, 97, 710, 97, 709, 96, 708, 96, 706, 96, 702, 96, 701, 95, 700, 94, 700, 93, 699, 92, 700, 92, 701, 90, 701, 89, 702, 88, 703, 88, 703, 87, 704, 86, 705, 85, 706, 85, 706, 83, 706, 82, 705, 81, 705, 80, 705, 79, 704, 78, 703, 78, 703, 77, 702, 76, 701, 74, 700, 74, 699, 73, 699, 72, 698, 71, 697, 70, 697, 69, 697, 68, 697, 67, 698, 67, 700, 65, 702, 65, 703, 63, 704, 62, 705, 61, 706, 60, 707, 60, 708, 60, 708, 59, 711, 58, 712, 58, 714, 54, 715, 53, 716, 53, 716, 52, 717, 52, 719, 53, 720, 53, 720, 54, 721, 54, 721, 55, 722, 55, 723, 57, 724, 59, 724, 60, 725, 60, 726, 61, 728, 61, 729, 61, 730, 62, 732, 64, 733, 65"
    HREF="21015" ALT="Boone County">
    </AREA>

     

    domingo, 30 de octubre de 2011 18:43

Respuestas

  • You should be able to use the polygon control to create a similar effect. You can create the polygons, set them to opacity = 0, and they will still receive click events (assuming they are actually in front). They need to be the top level visual, so if they weren't opacity=0 they should be blocking your background.

    Each of the polygons can then have a click handler that takes whatever action you desire.

    Example:

    <Polygon Points="50, 100 200, 100 200, 200 300, 30"

     

        Stroke="Black" StrokeThickness="4"

     

             Fill="Yellow" MouseLeftButtonDown="MouseDown" />

     

    You can assign the click event in Blend by selecting the polygon and going to the events tab of the properties panel, find MouseLeftButtonDown and type a name, and press enter. You can use the same event for each one if you want and distiguish which one is clicked by using the name of the control sending the event, something like:

    private void MouseDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
    		{
    			Polygon poly = sender as Polygon;
    			if(poly != null)
    			{
    				string name = poly.Name;
    				//Do something based on the name.
    				
    			}
    		}
    


    domingo, 30 de octubre de 2011 23:36

Todas las respuestas

  • You should be able to use the polygon control to create a similar effect. You can create the polygons, set them to opacity = 0, and they will still receive click events (assuming they are actually in front). They need to be the top level visual, so if they weren't opacity=0 they should be blocking your background.

    Each of the polygons can then have a click handler that takes whatever action you desire.

    Example:

    <Polygon Points="50, 100 200, 100 200, 200 300, 30"

     

        Stroke="Black" StrokeThickness="4"

     

             Fill="Yellow" MouseLeftButtonDown="MouseDown" />

     

    You can assign the click event in Blend by selecting the polygon and going to the events tab of the properties panel, find MouseLeftButtonDown and type a name, and press enter. You can use the same event for each one if you want and distiguish which one is clicked by using the name of the control sending the event, something like:

    private void MouseDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
    		{
    			Polygon poly = sender as Polygon;
    			if(poly != null)
    			{
    				string name = poly.Name;
    				//Do something based on the name.
    				
    			}
    		}
    


    domingo, 30 de octubre de 2011 23:36
  • I had to do something similar to this laying out defined areas within a map using exactly the same idea Chuck elaborated on. Silverlight / Blend is awesome for this! You can also set the States to add accents/highlighting and other items on mouseover etc. In my case on mouseover I had an additional information window appear giving information about the item chosen and set them as button targettype to interact in other ways as a control. Good luck!

     

    P.S. - Chuck, how many people owe you a beer? Thanks for helping folks!

    lunes, 31 de octubre de 2011 20:29
  • I do what I can :)
    lunes, 31 de octubre de 2011 20:45
  • Chuck,

    Thanks for your quick response. It makes sense. I'll give it a try over the next couple of days for one state. If one works, the rest will be very simple to replicate. Since I already have the HTML code plus graphics, I may write a script/program to convert the remaining data sets once I get a working model for one state. It may be simple enough to do in regular expressions.

    I will verify your approach and mark as answered onced verified.

    Much thanks for your time saving advice... :-)

    Warren


    I verfied that the appoach works to convert the html source code that I have to XAML. Thanks again.
    • Editado highdownts viernes, 04 de noviembre de 2011 13:00
    lunes, 31 de octubre de 2011 21:31