0

I am developing in Xamarin forms, and I have a Label that can contain a varying amount of text.

The platforms I use in forms are primarily: Android and UWP (no need for iOS ATM).

I want to give this label a background that is not rectangular and that is something more like this: (chat/message bubble style)

Image of desired background effect

I have read about some possible solutions but I'm confused from all the options that are available.

From what I understand of my research around this and from my work with other platforms there are basically two options:

  1. Set an image background.
  2. Use Custom graphic controls to create the shape I want.

I'm not sure how to implement any of these options in Xamarin Forms, I'll be glad to get some help.

Simone
  • 20,302
  • 14
  • 79
  • 103
JackPot16
  • 97
  • 1
  • 1
  • 10

1 Answers1

1

The easy solution would be to host the Label inside a View and set have an Image behind the label:

<Grid>
    <Image Source="message_background.png">
    <Label Text="{Binding Message}">
</Grid>

This is not very performant if you're going to have a lot of these on screen. The best solution would then be to use a custom renderer for each platform an implement it natively. This would give much better performance much more flexibility. It's more maintenance and initial work though.

You can read up on custom renderers here

Jon G Stødle
  • 3,844
  • 1
  • 16
  • 22
  • 1
    setting a background image source would be a bad idea, the OP is saying the volume of text could be dynamic so the height will adjust accordingly, that will then lead to distorted images and a horrible UX. Your secondary answer should be your first one really. =) – JoeTomks Jul 17 '17 at 10:39
  • I know the basics of renderers. But how should Implement it using renderers? Can you give me some directions? – JackPot16 Jul 17 '17 at 10:39
  • Something akin to this https://stackoverflow.com/questions/43761186/how-to-create-a-speech-bubble-in-uwp and this https://stackoverflow.com/questions/17541739/how-to-add-the-bubbles-to-textview-android Top hits searching for "uwp bubble textblock" and "android bubble textview" respectively – Jon G Stødle Jul 17 '17 at 10:59
  • Thank you, but which control should I render? I can't render a Label and set a StackPanel instead.(or can I?) – JackPot16 Jul 17 '17 at 11:13
  • You create a custom class which inherits from view, implement the custom renderers on each platform and register the renderers as renderers for you custom class. https://developer.xamarin.com/guides/xamarin-forms/application-fundamentals/custom-renderer/view/ – Jon G Stødle Jul 17 '17 at 11:15
  • I finally got to implement this. Android works great. UWP also works but this custom background has a fixed size. Meaning when I have short messages there is a lot of blank space. When I have long messages they are cut in the middle. Any other solution you know of? – JackPot16 Aug 07 '17 at 06:34