How to join two UI elements into one

Question

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.

Answer 1

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.

<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.

Answer 2

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