How to add VisualStateManager.VisualStateGroups to Style for SfButton?

[Thanh Hai Dang]

Hi,

I wanted to define a style for SfButton. In this style, I set up property 'VisualStateManager.VisualStateGroups' to re-used for multi buttons. However, I got the error when built app like the screenshot below. 

I tried to move the style to Resources/Styles/Styles.xaml and sometimes the error appeared, sometimes not. 

 

Additional, the error didn't happened with MAUI Microsoft Button.

Please tell me if you have any recommend for this issue?

Thanks and regards,

TH

Attachment: SyncfusionSample_59ca6e87.rar

[AhamedAliNishad JahirHussain]

Hi Thanh Hai Dang,

After reviewing your query and the provided sample , we found that the error you encountered arises from a mismatch between the expected type in the style declaration and what {x:Type} attempts to set. In XAML, {x:Type} is intended to specify a System.Type object, but in the context of a style declaration, a BindableProperty is expected instead. We have also verified a similar issue occurring in the Maui Button control within the framework. In the MAUI framework, support for this feature is needed.

Style cannot be compiled in  {x:Type buttons:SfButton} because x:Type is used to set attribute System.Type object. And also similar error issue occured in Button control. So kindly use the control explicitly like buttons: SfButton to apply style.

To resolve this, you need to explicitly specify the control type in the TargetType attribute of the style declaration. For instance, using buttons:Sfbutton directly as the TargetType instead of {x:Type} resolves this discrepancy, as it aligns with the expected BindableProperty type.

We have attached the modified sample for your reference and please review it and let us know the details.

Code Snippet :

     <Style x:Key="SfButtonStyle" TargetType="buttons:SfButton">

         <Setter Property="StrokeThickness" Value="1"/>

         <Setter Property="VisualStateManager.VisualStateGroups">

             <Setter.Value>

                 <VisualStateGroupList>

                     <VisualStateGroup x:Name="CommonStates">

                         <VisualState x:Name="Normal">

                             <VisualState.Setters>

                                 <Setter Property="Background" Value="Black"/>

                                 <Setter Property="TextColor" Value="Blue"/>

 

                             </VisualState.Setters>

                         </VisualState>

                         <VisualState x:Name="Hovered">

                             <VisualState.Setters>

                                 <Setter Property="Background" Value="Blue"/>

                                 <Setter Property="TextColor" Value="White"/>

                             </VisualState.Setters>

                         </VisualState>

                     </VisualStateGroup>

                 </VisualStateGroupList>

               

             </Setter.Value>

         </Setter>

     </Style>

Regards,

Ahamed Ali Nishad.

Attachment: SyncfusionSample_59ca6e87_730a45fe.zip

[Thanh H?i Ð?ng]

Hi Ahamed Ali Nishad,

Thanks for your explanation. I've resolved my issue

Regards,

TH

[Preethi Rajakandham]

Hi Thanh Hai Dang,

You're welcome. 

We are glad to know that the reported problem has been resolved. Please let us know if you have any further queries on this. We are happy to help.

Regards,

Preethi R