Center a label on a badge

3

I can not centralize a label inside a badge. It looks like the label is out of the badge. See the code:

<Grid      
    xmlns="http://xamarin.com/schemas/2014/forms"      
    xmlns:local="clr-namespace:Operacional"     
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"   
    x:Class="Operacional.BadgeView" 
        Padding="5"
        Margin="1"
        HeightRequest="16"     
        WidthRequest="32">

    <local:CircleView x:Name="BadgeCircle"
                      HeightRequest="16" 
                      WidthRequest="32" 
                      CornerRadius="16" 
                      VerticalOptions="Start" 
                      HorizontalOptions="Start" />

    <Label x:Name="BadgeLabel"
           TextColor="White" 
           VerticalOptions="Start"           
           HorizontalOptions="Start" 
           VerticalTextAlignment="Center" 
           HorizontalTextAlignment="Center"
           FontSize="10"/>
</Grid>

ese is the behind

[XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class BadgeView : Grid
    {
        public static BindableProperty TextProperty = BindableProperty.Create("Text", typeof(string), typeof(BadgeView), "0", propertyChanged: (bindable, oldVal, newVal) =>
        {
            var view = (BadgeView)bindable;
            view.BadgeLabel.Text = (string)newVal;
        });

        public static BindableProperty BadgeColorProperty = BindableProperty.Create("BadgeColor", typeof(Color), typeof(BadgeView), Color.Blue, propertyChanged: (bindable, oldVal, newVal) =>
        {
            var view = (BadgeView)bindable;
            view.BadgeCircle.BackgroundColor = (Color)newVal;
        });

        public string Text
        {
            get
            {
                return (string)GetValue(TextProperty);
            }
            set
            {
                SetValue(TextProperty, value);
            }
        }
        public Color BadgeColor
        {
            get
            {
                return (Color)GetValue(BadgeColorProperty);
            }
            set
            {
                SetValue(BadgeColorProperty, value);
            }
        }
        public BadgeView()
        {
            InitializeComponent();
            BadgeLabel.Text = Text;
            BadgeCircle.BackgroundColor = BadgeColor;
        }
    }

screenshot below shows how it appears in the app

    
asked by anonymous 26.02.2018 / 20:58

1 answer

3

Just change the HorizontalOptions and VerticalOptions of the Label within the Grid to Center . I would also recommend making it clear in the elements within the Grid what their position is:

<Grid      
    xmlns="http://xamarin.com/schemas/2014/forms"      
    xmlns:local="clr-namespace:Operacional"     
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"   
    x:Class="Operacional.BadgeView" 
    Padding="5"
    Margin="1"
    HeightRequest="16"     
    WidthRequest="32">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
    </Grid.RowDefinitions>
    <local:CircleView Grid.Row="0" Grid.Column="0"
                      x:Name="BadgeCircle"
                      HeightRequest="16" 
                      WidthRequest="32" 
                      CornerRadius="16" 
                      VerticalOptions="Start" 
                      HorizontalOptions="Start"/>
    <Label Grid.Row="0" Grid.Column="0"
           x:Name="BadgeLabel"
           TextColor="White" 
           VerticalOptions="Center"           
           HorizontalOptions="Center" 
           VerticalTextAlignment="Center" 
           HorizontalTextAlignment="Center"
           FontSize="10"/>
</Grid>

Grid is one of the Layouts that allow Views overlap, unlike StackLayout , for example. The components within it will be organized in a row-column schema according to the location definition, and the components declared last will be on the previous ones. When this location is not explicit it becomes more difficult to understand the visual arrangement of the components in the layout in case you need to add or change views later.

To better design the layout layout, it's also nice to enable the Mostar limites do layout option in the android developer options.

Issue 1: In your case, it is necessary to define the size of the row and column of the grid, because when omitted the view occupies all available space, but you need to occupy only the space required to hold your label and circle view.

    
26.02.2018 / 21:15