How to add Label text into rounded boxview

Question

I want to add text over BoxView component through AbsoluteLayout in codebehind.
Something like this:

How can I do it?

Here is my code, where I put AbsoluteLayout into StackLayout at the end:

 public TestPageBoxView()
    {
        StackLayout sl = new StackLayout();
        AbsoluteLayout al = new AbsoluteLayout();

        BoxView bv = new BoxView { BackgroundColor = Color.Green };
        Label l = new Label { Text = "Some text with \n breaks" };

        AbsoluteLayout.SetLayoutBounds(l, new Rectangle(0, 0,1,1));
        AbsoluteLayout.SetLayoutFlags(l, AbsoluteLayoutFlags.All);

        sl.Children.Add(bv);
        sl.Children.Add(al);
        Content = sl;
    }

So, my concern is that this l component is sticked to stacklayout and not for BoxView.

Maybe I should try with RelativeLayout?

Do you know some component on git? like XLabs?

Thanks.

Answer 1

You can try Frame instead of Absolute Layout like this

<Frame BackgroundColor="#13CF13" Padding="5" HorizontalOptions="Center" WidthRequest="80" HeightRequest="20" CornerRadius="40">
        <Label WidthRequest="40" Text="Backlog" HorizontalTextAlignment="Center"></Label>
    </Frame>

Gives you this result:

Answer 2

This is a very old question but I just achieved this as following.

In XAML

<StackLayout AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <BoxView HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" HeightRequest="2" />
            <Label Text="{Binding Caption}" Grid.Row="0"  FontAttributes="Bold" BackgroundColor="Silver" FontSize="Large"/>
        </Grid>
    </StackLayout>

And this is what it loos like in the app