CODEWITHSUNDEEP
listviewlabelxamarin.formsgeometry
user4071320
user4071320

Reputation:

Xamarin Forms listview item with label+circle background

I want to design my ListView in Xamarin Forms for Android and IOS.

I want to make this item list : enter image description here

My problem is the circle with the number. In fact, i don't know how i can make circle in Xamarin Forms.

This is my itemTemplate:

<ViewCell.View>
<StackLayout HorizontalOptions="FillAndExpand" Padding="10" BackgroundColor="{Binding RowColor}">
    <Label Text="{Binding Name}" TextColor="White" FontSize="20"
           LineBreakMode="NoWrap" />
    <Grid HorizontalOptions="FillAndExpand">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="4*" />
            <ColumnDefinition Width="1*" />
        </Grid.ColumnDefinitions>
        <Label Text="{Binding BarcodeMessage}" Grid.Column="0"
               HorizontalOptions="FillAndExpand" TextColor="White" /> 
        <Label Text="{Binding Quantity}" Grid.Column="1"
               HorizontalOptions="FillAndExpand" TextColor="White" />
    </Grid>
</StackLayout>

Can you help me ?

Thank you

Upvotes: 0

Views: 2567

Answers (1)

Jason
Jason

Reputation: 89204

Use a Label with a circle as the background image, then place the text inside of it. Alterantely, with a grid you could use an Image control with a Label (with transparent background) layered on top of it.

There is also a RoundedBoxView plugin that might be useful.

Upvotes: 1

Related Questions