Programmatically creating a clickable area on an image.

Question

Hi, I'm trying to create "imagemaps" on an image in wpf using codebehind.

See the following XML:

<Button Type="Area">
  <Point X="100" Y="100"></Point>
  <Point X="100" Y="200"></Point>
  <Point X="200" Y="200"></Point>
  <Point X="200" Y="100"></Point>
  <Point X="150" Y="150"></Point>
</Button>

I'm trying to translate this to a button on a certain image in my WPF app.

I've already did a part of this, but I'm stuck at setting the Polygon as the button's "template":

    private Button GetAreaButton(XElement buttonNode)
    {
        // get points
        PointCollection buttonPointCollection = new PointCollection();

        foreach (var pointNode in buttonNode.Elements("Point"))
        {
            buttonPointCollection.Add(new Point((int)pointNode.Attribute("X"), (int)pointNode.Attribute("Y")));
        }

        // create polygon
        Polygon myPolygon = new Polygon();
        myPolygon.Points = buttonPointCollection;
        myPolygon.Stroke = Brushes.Yellow;
        myPolygon.StrokeThickness = 2;

        // create button based on polygon
        Button button = new Button();
        ?????
    }

I'm also unsure on how to add/remove this button to/from my image, but I'm looking into that.

Any help is appreciated.

Answer 1

See this article by Rob Relyea here, I believe it answers your question.

 //Create a button from scratch
        Button perhapsButton = new Button();
        perhapsButton.Content = "Perhaps"
        perhapsButton.Click += new RoutedEventHandler(perhapsButton_Click);
        container.Children.Add(perhapsButton);

Consider you could set the button opacity to 0 to make it invisible.