Label isn't Centered Correctly in Grids Bottom Row

Bryson 0 Reputation points
2023-08-08T11:47:25.23+00:00

I'm using a grid to display a user's character progression but for some reason, my label on the bottom Row isn't being centered correctly. Regardless of the Font Size, "lblLevel" is being centered out of the grid rows bounds. On iOS, the centering is more like "End" but on Android the centering is completely out of bounds. I have tried changing the Frame's Padding to 4 and the grids padding to 0 but it doesn't fix the issue. I have also tried setting the row definitions to ".25*,**,.25*"* but this doesn't fix the issue either. I've also individually manipulated each VisualElement to see if one element could be causing an issue but the only VisualElement not having the expected output is "lblLevel;" the label in the grid's last row.

There is definitely enough space for the label to fit inside of the grid row but it refuses to do so. I tried to create an AutoFitLabel Renderer to size down the text if necessary but I get the same result since the text should already be able to fit. I created a work around in the iOS renderer by setting a negative top margin that will place the label in the vertical center when the Font Size changes but I'm not able to create the same work around on android. I have no clue what could be causing this issue or how to fix. Please help.Screenshot 2023-08-07 at 11.11.26 PM

<Frame BackgroundColor="DarkGray" BorderColor="Gray"
       VerticalOptions="Start" HorizontalOptions="Start"
       HeightRequest="79" WidthRequest="79"
       HasShadow="False"
       Padding="0">
    <Grid x:Name="gridMain" RowDefinitions="*,4*,*" RowSpacing="0" Padding="4">

        <cc:AutoFitLabel x:Name="lblName" MaxLines="1" MinFontSize="8"
                         Text="Name" TextColor="Black" FontAttributes="Bold"
                         HorizontalTextAlignment="Center"/>

        <ff:CachedImage x:Name="imgPet" Grid.Column="0" Grid.Row="1"
                        Source="{StaticResource Gif}"
                        HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Margin="0,0,8,1"/>

        <pb:SfLinearProgressBar x:Name="pbProgress" Grid.Column="0" Grid.Row="2"
                                ProgressColor="Green" SecondaryProgressColor="LawnGreen"
                                TrackHeight="100" TrackColor="LightGray" Progress="80"
                                CornerRadius="2" />

        <Label x:Name="lblLevel" Grid.Column="0" Grid.Row="2" MaxLines="1"
               Text="LVL 12" TextColor="Black" FontSize="8" FontAttributes="Bold"
               VerticalOptions="Center" VerticalTextAlignment="Center"
               HorizontalTextAlignment="Center"/>
    </Grid>
</Frame>
Xamarin
Xamarin
A Microsoft open-source app platform for building Android and iOS apps with .NET and C#.
5,378 questions
{count} votes

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.