question

REYNAISABELESTRELLADELCASTILLO-1417 avatar image
0 Votes"
REYNAISABELESTRELLADELCASTILLO-1417 asked REYNAISABELESTRELLADELCASTILLO-1417 commented

Draw squares over an image in Xamarin

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


dotnet-xamarin
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

103571-cuadricula.jpg![103524-cuadricula.jpg][2]



0 Votes 0 ·
cuadricula.jpg (100.9 KiB)

1 Answer

LeonLu-MSFT avatar image
0 Votes"
LeonLu-MSFT answered REYNAISABELESTRELLADELCASTILLO-1417 commented

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.

103680-image.png


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.



image.png (20.3 KiB)
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.