![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(76.8, 5%, 17%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EEG%3C/text%3E%3C/svg%3E)
Developer technologies | .NET | Xamarin
A Microsoft framework for building cross-platform mobile apps using .NET and C# with native performance and user interfaces.
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(12.8, 87%, 11%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EJ%3C/text%3E%3C/svg%3E)
Hello,
Welcome to our Microsoft Q&A platform!
It seems that LeonLu has provided the code about how to design the bubbles in this thread. The bubble is design via drawing two cubic Bezier curves, you can specify different points to change the shape of bubble. For more detail, you could refer to this doc.
To design the UI as the picture shown, you could use a relativeLayout to define the position of each view. Or just use stackLayout as the parent and set the HorizontalOptions the head icon to Start or End. Adjust the direction of the bubble of the chart cell to make it point to the head icon.
Best Regards,
Jarvan 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.