Nick
Nick

Reputation: 10499

Draw Rectangle over Image

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:

enter image description here

Is it possible? How can I do this?

Upvotes: 8

Views: 16468

Answers (2)

CHANDRA
CHANDRA

Reputation: 4928

Try this it also will help you.

<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="Multi_Textbox.Window1"
x:Name="Window"
Title="Window1"
Width="640" Height="480">

<Grid x:Name="LayoutRoot">
    <Image Margin="104,50,75,99" Source="barkship.jpg"/>
    <Rectangle Fill="#FF28B0DE" HorizontalAlignment="Left" Height="17.334" Margin="212,0,0,111.333" Stroke="Black" VerticalAlignment="Bottom" Width="99.667"/>
    <TextBlock HorizontalAlignment="Left" Height="11" Margin="230.667,0,0,115" TextWrapping="Wrap" Text="CHANDRU" VerticalAlignment="Bottom" Width="63.333" Foreground="White"/>
</Grid>

It's output like this

Result

Upvotes: 4

Andy
Andy

Reputation: 6466

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>

Upvotes: 13

Related Questions