maui

End of Italic text gets cut off in Maui

enter image description here

As you can see, the end of the labels with italic text are getting cut off. It doesn't seem to recognize the extra room the slant is taking up in comparison to the non-italic version of the font.

Here is my Maui .Xaml code for this:

                    <Grid BackgroundColor="{Binding color}" ColumnDefinitions="*,*" RowDefinitions="Auto,Auto,Auto,Auto" >
                        <Grid.GestureRecognizers>
                            <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" NumberOfTapsRequired="1" CommandParameter="{Binding trackName}"></TapGestureRecognizer>
                            <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_1"  NumberOfTapsRequired="2" CommandParameter="{Binding trackName}"></TapGestureRecognizer>
                        </Grid.GestureRecognizers>
                        <Label Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Text="{Binding trackName}" TextColor="Black" FontSize="Large" FontAttributes="Bold" HorizontalTextAlignment="Center" HorizontalOptions="CenterAndExpand" VerticalTextAlignment="Center" />
                        <Label Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1"  Text="{Binding raceName}" TextColor="White" FontSize="Medium" FontAttributes="Bold,Italic" HorizontalTextAlignment="Center" HorizontalOptions="CenterAndExpand" VerticalTextAlignment="Center" />
                        <Label Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="2"  Text="{Binding round}" TextColor="White" FontSize="Medium" FontAttributes="Bold,Italic" HorizontalTextAlignment="Center" HorizontalOptions="CenterAndExpand" VerticalTextAlignment="Center" />
                        <Label Grid.Column="1" Grid.ColumnSpan="1" Grid.Row="2"  Text="{Binding pair}" TextColor="White" FontSize="Medium" FontAttributes="Bold,Italic" HorizontalTextAlignment="Center" HorizontalOptions="CenterAndExpand" VerticalTextAlignment="Center" />
                        <Label Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="3"  Text="{Binding lastResult}" TextColor="{Binding colorResult}" FontSize="Medium" FontAttributes="Bold,Italic" HorizontalTextAlignment="Center" HorizontalOptions="CenterAndExpand" VerticalTextAlignment="Center" />
Solution

  • Assuming that you're seeing this on Android it is probably known issue Label italic width incorrect #8118

    You can work around the problem by setting the Label's interior FormattedText property:

    <Label Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" TextColor="White" FontSize="Medium"  HorizontalTextAlignment="Center" HorizontalOptions="CenterAndExpand" VerticalTextAlignment="Center" >
     <Label.FormattedText>
          <FormattedString>
              <Span Text="{Binding raceName}"  FontAttributes="Bold,Italic" />
          </FormattedString>
     </Label.FormattedText>
</Label>