Skip to content

Setting the Style property using the VisualStateManager within a Style resource does not work #17175

@SotoiGhost

Description

@SotoiGhost

Description

Having a Style resource using the the VisualStateManager to set the Style property doesn't seem to work or affect the control.

Steps to Reproduce

  1. Copy/paste the following Styles anywhere of your app:

        <Style x:Key="AP_ButtonStyle" TargetType="Button">
            <Setter Property="TextColor" Value="White" />
            <Setter Property="FontSize" Value="16" />
            <Setter Property="CornerRadius" Value="4" />
            <Setter Property="TextTransform" Value="Uppercase" />
        </Style>
    
        <Style x:Key="SecondaryButtonStyle" TargetType="Button" BasedOn="{StaticResource AP_ButtonStyle}">
            <Setter Property="Background" Value="Green" />
        </Style>
    
        <Style x:Key="SecondaryButtonDisableStyle" TargetType="Button" BasedOn="{StaticResource AP_ButtonStyle}">
            <Setter Property="Background" Value="Black" />
            <Setter Property="TextColor" Value="Gray" />
        </Style>
    
        <Style x:Key="SecondaryButtonStatesStyle" TargetType="Button">
            <Setter Property="VisualStateManager.VisualStateGroups">
                <VisualStateGroupList>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal">
                            <VisualState.Setters>
                                <Setter Property="Style" Value="{x:StaticResource SecondaryButtonStyle}" />
                            </VisualState.Setters>
                        </VisualState>
    
                        <VisualState x:Name="Disabled">
                            <VisualState.Setters>
                                <Setter Property="Style" Value="{x:StaticResource SecondaryButtonDisableStyle}" />
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateGroupList>
            </Setter>
        </Style>
  2. Add the style to a button:

    <Button
        ...
        Style="{StaticResource SecondaryButtonStatesStyle}" />
  3. Run the app and observe the bug

Expected result

Android

iOS


Actual result

Android

iOS

Link to public reproduction project repository

https://github.com/SotoiGhost/MauiSandbox/tree/VSM-Style-issue

Version with bug

7.0.92

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

iOS, Android

Affected platform versions

iOS 16, Android 13

Did you find any workaround?

Setting the VisualStateGroupList directly to the button.

Relevant log output

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    area-xamlXAML, CSS, Triggers, Behaviorspartner/syncfusionIssues / PR's with Syncfusion collaborationplatform/androidplatform/ioss/triagedIssue has been revieweds/verifiedVerified / Reproducible Issue ready for Engineering Triaget/bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions