I am new to Xamarin....
I have to draw coordinate boxes on an image, user can click one and save that A4 coordinate for example.
What library could I use to do this functionality?
Thank you!!
103470-cuadricula.jpg
I am new to Xamarin....
I have to draw coordinate boxes on an image, user can click one and save that A4 coordinate for example.
What library could I use to do this functionality?
Thank you!!
103470-cuadricula.jpg
![103524-cuadricula.jpg][2]
Hello,
Welcome to our Microsoft Q&A platform!
Firstly, I cannot nuget package could achieve it,
But I can give you a method to write layout that could draw squares over an image in Xamarin.
Then, we can use AbsoluteLayout and Grid to achieve it.
Grid to draw squares.
AbsoluteLayout could make your squares over an image.
Here is running screenshot.

Here is layout code.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="DrawSquaresOverImage.MainPage">
<StackLayout>
<AbsoluteLayout VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<Image Source="icon1.png"
AbsoluteLayout.LayoutBounds="0.25, 0.25, 0.5, 0.5"
AbsoluteLayout.LayoutFlags="All" />
<Grid BackgroundColor="Transparent" AbsoluteLayout.LayoutBounds="1, 1, 1, 1"
AbsoluteLayout.LayoutFlags="All">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="15*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="15*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="15*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="10*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="10*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="10*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="10*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<BoxView Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="8" BackgroundColor="Blue" HeightRequest="1" VerticalOptions="End" HorizontalOptions="FillAndExpand"/>
<!--Your stuff here!-->
<BoxView Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="8" BackgroundColor="Blue" HeightRequest="1" VerticalOptions="End" HorizontalOptions="FillAndExpand"/>
<!--Your stuff here!-->
<BoxView Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="8" BackgroundColor="Blue" HeightRequest="1" VerticalOptions="End" HorizontalOptions="FillAndExpand"/>
<!--Your stuff here!-->
<BoxView Grid.Row="6" Grid.Column="0" Grid.ColumnSpan="8" BackgroundColor="Blue" HeightRequest="1" VerticalOptions="End" HorizontalOptions="FillAndExpand"/>
<!--Vertical lines and no "stuff"-->
<BoxView Grid.Column="0" Grid.Row="0" Grid.RowSpan="7" BackgroundColor="Blue" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="Start"/>
<BoxView Grid.Column="1" Grid.Row="0" Grid.RowSpan="7" BackgroundColor="Blue" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="End"/>
<BoxView Grid.Column="3" Grid.Row="0" Grid.RowSpan="7" BackgroundColor="Blue" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="End"/>
<BoxView Grid.Column="5" Grid.Row="0" Grid.RowSpan="7" BackgroundColor="Blue" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="End"/>
<BoxView Grid.Column="7" Grid.Row="0" Grid.RowSpan="7" BackgroundColor="Blue" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="End"/>
</Grid>
</AbsoluteLayout>
</StackLayout>
</ContentPage>
Best Regards,
Leon Lu
If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
7 people are following this question.