Icons does not appearing when using Style and Trigger Setter's

[uom42]

Describe the bug If the Label.Text property is set from XAML markup - the icons is displayed. But if the Text property is set from Style.Setter, the icons is not displayed.

To Reproduce Set Label.Text property in XAML markup: <Label Text="{mi:MaterialOutlined Icon=ArrowDropUp, IconColor={StaticResource Primary}}" /> result:

use Styles:

<Label>
    <Label.Style>
        <Style TargetType="Label">
            <Setter Property="Text" Value="{mi:MaterialOutlined Icon=ArrowDropDown, IconColor={StaticResource Primary}}" />
        </Style>
    </Label.Style>
</Label>

result:

Expected behavior use Styles:

<Label>
    <Label.Style>
        <Style TargetType="Label">
            <Setter Property="Text" Value="{mi:MaterialOutlined Icon=ArrowDropDown, IconColor={StaticResource Primary}}" />
        </Style>
    </Label.Style>
</Label>

result:

Additional context API33 Android 13.0

net8.0-android

[AathifMahir]

Describe the bug If the Label.Text property is set from XAML markup - the icons is displayed. But if the Text property is set from Style.Setter, the icons is not displayed.

To Reproduce Set Label.Text property in XAML markup: <Label Text="{mi:MaterialOutlined Icon=ArrowDropUp, IconColor={StaticResource Primary}}" /> result:

use Styles:

<Label>
  <Label.Style>
      <Style TargetType="Label">
          <Setter Property="Text" Value="{mi:MaterialOutlined Icon=ArrowDropDown, IconColor={StaticResource Primary}}" />
      </Style>
  </Label.Style>
</Label>

result:

Expected behavior use Styles:

<Label>
  <Label.Style>
      <Style TargetType="Label">
          <Setter Property="Text" Value="{mi:MaterialOutlined Icon=ArrowDropDown, IconColor={StaticResource Primary}}" />
      </Style>
  </Label.Style>
</Label>

result:

Additional context API33 Android 13.0

net8.0-android

Thanks for reporting, I guess this scenario is rarely used, seems like we don't have test for it yet or nor a complete implementation to support style setter. Will release a patch with fix for this as soon as possible.

[uom42]

...I guess this scenario is rarely used...

I think this should have widespread use:

You can use Setter's not only with styles (I just gave styles as an example), but also in triggers - they have the same Setter's. For example, buttons that change their state (icon) - now I am forced to create several buttons and hide unnecessary ones, instead of just changing the button icon through a trigger.

[AathifMahir]

...I guess this scenario is rarely used...

I think this should have widespread use:

You can use Setter's not only with styles (I just gave styles as an example), but also in triggers - they have the same Setter's. For example, buttons that change their state (icon) - now I am forced to create several buttons and hide unnecessary ones, instead of just changing the button icon through a trigger.

Yeah, I know

When we setting up a roadmap for v2, there's no request regarding support for multitrigger, triggers or setter support from devs. Therefore we mainly focused on supporting Xaml Markup Extension Across Different Controls.

Anyway, this feature request would be great starting point for supporting all Maui triggers and setters.

I'd really appreciate, if you share me sample of Xaml that uses Multitrigger, Single trigger and Setters that covers the whole use case.

[Blackfishbox]

Hey, is this fixed in v3.0.0?

[AathifMahir]

Hey, is this fixed in v3.0.0?

This feature is not part of v3

[kezack]

Hello, I really appreciate your library, I too have this problem with the setter, here is my example in order to have another case.

<Label
          HorizontalOptions="Center"
          HorizontalTextAlignment="Center"
          Text="{mi:FontAwesomeSolid Icon=ChevronDown, IconColor={StaticResource PrimaryColor}}"                                                
          VerticalOptions="Center"
          VerticalTextAlignment="Center">
    <Label.Triggers>
        <DataTrigger
            Binding="{Binding Source={RelativeSource AncestorType={x:Type toolkit:Expander}}, Path=IsExpanded}"
            TargetType="Label"
            Value="True">
            <Setter Property="Text" Value="{mi:FontAwesomeSolid Icon=ChevronUp, IconColor={StaticResource PrimaryColor}}" />
        </DataTrigger>
    </Label.Triggers>
</Label>

[AathifMahir]

Hello, I really appreciate your library, I too have this problem with the setter, here is my example in order to have another case.

<Label
          HorizontalOptions="Center"
          HorizontalTextAlignment="Center"
          Text="{mi:FontAwesomeSolid Icon=ChevronDown, IconColor={StaticResource PrimaryColor}}"                                                
          VerticalOptions="Center"
          VerticalTextAlignment="Center">
    <Label.Triggers>
        <DataTrigger
            Binding="{Binding Source={RelativeSource AncestorType={x:Type toolkit:Expander}}, Path=IsExpanded}"
            TargetType="Label"
            Value="True">
            <Setter Property="Text" Value="{mi:FontAwesomeSolid Icon=ChevronUp, IconColor={StaticResource PrimaryColor}}" />
        </DataTrigger>
    </Label.Triggers>
</Label>

Of course, this feature is in the banks. I know for on the user facing side, this feature looks somewhat straight forward to implement but we need to go through lots of reflection magic to implement this feature.

Of course, this is in the v4 roadmap and most probably this feature is only enough for v4 since it's a major one.

I'm consulting some friends at Maui Team and doing this feature on best possible way, therefore I'm really avoiding rushing it.

Thanks for understanding and will implement this as soon as possible.

[ricavir11]

@kezack I had the same issue and found a workarround : just add the icon name in the setter value.

Here is the workarround from your code :

<Label
         HorizontalOptions="Center"
         HorizontalTextAlignment="Center"
         Text="{mi:FontAwesomeSolid Icon=ChevronDown, IconColor={StaticResource PrimaryColor}}"                                                
         VerticalOptions="Center"
         VerticalTextAlignment="Center">
   <Label.Triggers>
       <DataTrigger
           Binding="{Binding Source={RelativeSource AncestorType={x:Type toolkit:Expander}}, Path=IsExpanded}"
           TargetType="Label"
           Value="True">
           <Setter Property="Text" Value="ChevronUp" />
       </DataTrigger>
   </Label.Triggers>
</Label>

[AathifMahir]

@kezack I had the same issue and found a workarround : just add the icon name in the setter value.

Here is the workarround from your code :

<Label
         HorizontalOptions="Center"
         HorizontalTextAlignment="Center"
         Text="{mi:FontAwesomeSolid Icon=ChevronDown, IconColor={StaticResource PrimaryColor}}"                                                
         VerticalOptions="Center"
         VerticalTextAlignment="Center">
   <Label.Triggers>
       <DataTrigger
           Binding="{Binding Source={RelativeSource AncestorType={x:Type toolkit:Expander}}, Path=IsExpanded}"
           TargetType="Label"
           Value="True">
           <Setter Property="Text" Value="ChevronUp" />
       </DataTrigger>
   </Label.Triggers>
</Label>

That's a great find but with v4 that expected release within next few weeks has official support for styles, triggers and etc..