Question

I want to draw some Rectangle over a single Image.

For example I have following (white and black) ship profile, and I want to add some (yellow and red) rectangles over this profile in specific locations:

Is it possible? How can I do this?

Answer 1

It’s very possible, if you know the x, y, width and height of the areas that you want to highlight already you can place all of the controls in to a canvas.

You can set the properties on the rectangles in code behind like this:

Rectangle rectangle = new Rectangle();
rectangle.SetValue(Canvas.LeftProperty, 10);
rectangle.SetValue(Canvas.TopProperty, 10);
rectangle.Width = 1000;
rectangle.Height = 50;
rectangle.Fill = new SolidColorBrush() { Color = Colors.Red, Opacity = 0.75f };

canvas.Children.Add(rectangle);

and if you want to add them in xaml you can like this.

<Canvas>
    <Image Source="..."/>
    <Rectangle Canvas.Left="10" Canvas.Top="10" Width="1000" Height="50">
        <Rectangle.Fill>
           <SolidColorBrush Color="Red" Opacity="0.75"/>
        </Rectangle.Fill>
    </Rectangle>                        
</Canvas>