question

Nort-0044 avatar image
0 Votes"
Nort-0044 asked ninaada answered

How to join two UI elements into one

I need to combine two photos into one, and add the text to the center of the circle, but so that it is adaptive to all devices.
I used Grid, RelativeLayout, Frame, but nothing worked. Prompt or direct on the path of truth, I will be grateful.
127321-simulator-screen-shot-new-iphone-6s-2021-08-28-at.png


127312-123.png


dotnet-csharpdotnet-xamarinformsdotnet-ios
· 3
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.

I got two pictures from the screenshots of the first picture you provided, and I try to use SkiaSharp and RelativeLayout,
the yellow background of the picture below will obscure the edgs of the picture above. In order to show the effect, would you mind providing the pictures you use in your project ?
127527-image.png


0 Votes 0 ·
image.png (5.7 KiB)
Nort-0044 avatar image Nort-0044 WenyanZhang-MSFT ·

127603-train.png
127604-spout2.png


Are these?

0 Votes 0 ·
train.png (6.9 KiB)
spout2.png (70.7 KiB)

Yes, I got it, the spout2.png looks a little big.

0 Votes 0 ·
WenyanZhang-MSFT avatar image
0 Votes"
WenyanZhang-MSFT answered

Hello,
Welcome to our Microsoft Q&A platform!
You could have a try to use grid and Margin between UI elements. Since the top image is a little big, it doesn’t fit the circle completely, you could resize the image.
127891-image.png
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="260" />
<RowDefinition Height="260" />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Image Grid.Row="0"
Source="top2.png"
/>
<Image
Grid.Row="1"
Margin="0,-92,0,0"
Source="circle.png" />
<Label
Grid.Row="2"
Text="24"
HorizontalOptions="Center"
VerticalOptions="Center"
Margin="0,-430,0,0"
></Label>
</Grid>

Best Regards,
Wenyan Zhang



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 (187.5 KiB)
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.

ninaada avatar image
0 Votes"
ninaada answered

I think the better approach to this would be to try this out using Shapes and Paths API

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.