`Span` does not inherit text styling from `Label` if that styling is applied using `Style`

[hansmbakker]

trafficstars

Description

This is a followup from https://github.com/dotnet/maui/issues/21034#issuecomment-2008241694.

In https://github.com/dotnet/maui/pull/21191, text styling is inherited from Label on a contained Span but only if those properties are set directly on the Label.

However, I believe text styling is often applied using Style and this usecase is not covered yet. In my opinion it would make sense for a Span to be consistent with the text look & feel of the parent Label by default, unless specified explicitly.

Issue

In this image you see several attempts where the FontFamily setter value of the Heading style class is not properly inherited in the spans. The font family should be PoppinsSemiBold - you can see that the cases using spans are not bold:

Test cases (corresponding to the labels in the Code section)

1. converts a string containing sections marked with * to a FormattedString with Spans - the ConverterParameter sets the TextColor of marked Spans
2. manual creation of FormattedString containing multiple Spans
3. string is converted to FormattedString containing one Span using implicit operator of FormattedString
4. only a Label with Text (not FormattedText) gets the correct FontFamily

Actual behavior

Only the Label not using Spans will have the the correct FontFamily

Expected behavior

Spans not having FontFamily set, inherit the FontFamily from the parent Label.

Steps to Reproduce

1. Create a new MAUI app
2. Add some styling classes with TargetType="Label".
3. If you use a custom FontFamily, register it in MauiProgram.cs
4. Create a Label containing a FormattedString with one or more Spans
5. Apply the styling classes on the Label
6. See that the text in the Spans does not match the styling applied using the styling classes

Styles.xaml

<Style Class="Heading"
       TargetType="Label">
    <Setter Property="FontFamily"
            Value="PoppinsSemiBold" />
</Style>
<Style Class="Heading04"
       TargetType="Label">
    <Setter Property="FontSize"
            Value="20" />
    <Setter Property="LineHeight"
            Value="1.5" />
    <Setter Property="CharacterSpacing"
            Value="0.024" />
    <Setter Property="SemanticProperties.HeadingLevel"
            Value="Level4" />
</Style>

MainPage.xaml

<VerticalStackLayout Spacing="8">
    <Label FormattedText="{Binding Source={x:StaticResource HeadingText}, Converter={StaticResource markStringWithColorSpanConverter}, ConverterParameter={StaticResource Forest500}}"
           StyleClass="Heading, Heading04" />

    <Label StyleClass="Heading, Heading04">
        <Label.FormattedText>
            <FormattedString>
                <Span TextColor="{StaticResource Forest500}">Permanent</Span>
                <Span>workers</Span>
            </FormattedString>
        </Label.FormattedText>
    </Label>

    <Label FormattedText="{x:StaticResource HeadingText}"
           StyleClass="Heading, Heading04" />

    <Label Text="{x:StaticResource HeadingText}"
           StyleClass="Heading, Heading04" />
</VerticalStackLayout>

Link to public reproduction project repository

https://github.com/hansmbakker/bugrepro-span-inheritance

Version with bug

8.0.10 SR3

Is this a regression from previous behavior?

No, this is something new

Last version that worked well

Unknown/Other

Affected platforms

iOS, Android, Windows, macOS, Other (Tizen, Linux, etc. not supported by Microsoft directly), I was not able test on other platforms

Affected platform versions

This is platform-independent

Did you find any workaround?

It is possible to set the properties directly on Label or Span, but that is exactly what this issue is about - not having to do that.

Relevant log output

No response

[hansmbakker]

cc @pjcollins

[hansmbakker]

For the sake of completeness, I would expect the (text-related) properties in the documentation section Use formatted text to be inherited:

• BackgroundColor, of type Color, which represents the color of the span background.
• CharacterSpacing, of type double, sets the spacing between characters in the displayed text.
• FontAttributes, of type FontAttributes, determines text style.
• FontAutoScalingEnabled, of type bool, defines whether the text will reflect scaling preferences set in the operating system. The default value of this property is true.
• FontFamily, of type string, defines the font family.
• FontSize, of type double, defines the font size.
• LineHeight, of type double, specifies the multiplier to apply to the default line height when displaying text.
• TextColor, of type Color, defines the color of the displayed text.
• TextDecorations, of type TextDecorations, specifies the text decorations (underline and strikethrough) that can be applied.
• TextTransform, of type TextTransform, specifies the casing of the displayed text.

[ninachen03]

Verified this issue with Visual Studio 17.10.0 Preview 2 on 8.0.10. Can repro it.

[awasilik]

8.0.40 - still reproducible

[albilaga]

8.0.60 still reproducible

[afk013]

Don't know if this helps but the default Styles.xaml that comes with the Maui template has a style that targets Span explicitly which overrides the style applied to the label. Removing this style resolved the issue for me.

Default Styles.xaml

...
	<Style TargetType="Span">
		<Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}" />
	</Style>
...

[FlavioGoncalves-Cayas]

Still reproducible on 8.0.80.