Define VisualStateGroups in global style does not work

[Andreas Reitberger]

Hi,

I'm using a bunch of sfSwitch controls in my app. For now, I have defined the VisualStateGroups for each control. This is a huge work to update the states if anything has changed.

So I tried to define the groups in the default style, which is globally available through the app.

However this does not work?

    <Style x:Key="DefaultToggleButtonStyle" TargetType="buttons:SfSwitch">

        <Setter Property="HeightRequest" Value="28"/>

        <Setter Property="VisualType" Value="Cupertino"/>

        <Setter Property="BackgroundColor" Value="{DynamicResource Transparent}"/>

        <Setter Property="VisualStateManager.VisualStateGroups">

            <VisualStateGroupList>

                <VisualStateGroup x:Name="CommonStates">

                    <VisualState x:Name="On">

                        <VisualState.Setters>

                            <Setter Property="SwitchSettings">

                                <Setter.Value>

                                    <buttons:DefaultSwitchSettings

                                        x:TypeArguments="buttons:OnState"

                                        ThumbBorderColor="{DynamicResource Gray-200}"

                                        ThumbColor="{DynamicResource Gray-White}"

                                        TrackBorderColor="{DynamicResource Gray-200}"

                                        TrackColor="{DynamicResource PrimaryColor}" />

                                </Setter.Value>

                            </Setter>

                        </VisualState.Setters>

                    </VisualState>

                    <VisualState x:Name="Off">

                        <VisualState.Setters>

                            <Setter Property="SwitchSettings">

                                <Setter.Value>

                                    <buttons:DefaultSwitchSettings

                                        x:TypeArguments="buttons:OffState"

                                        ThumbBorderColor="{DynamicResource Gray-200}"

                                        ThumbColor="{DynamicResource Gray-White}"

                                        TrackBorderColor="{DynamicResource Gray-200}"

                                        TrackColor="{DynamicResource Gray-200}" />

                                </Setter.Value>

                            </Setter>

                        </VisualState.Setters>

                    </VisualState>

                </VisualStateGroup>

            </VisualStateGroupList>

        </Setter>

    </Style>

I searched the internet and found some examples from default controls where the StateGroups were set in the style.

Why does this not work for the buttons?

Thank you!

[Suganya Sethuraman]

Hi Andreas,

Greetings from Syncfusion.

We were able to reproduce the reported issue and we confirm this as a bug and already logged a defect report. You can keep track of the bug from the feedback portal below.

Link: https://www.syncfusion.com/feedback/19797

The provided feedback link is private, and you need to login to view this feedback.

The fix for the reported issue will be available on December 7, 2020.

If you have any more specification/precise replication procedure or a scenario to be tested, you can add it as a comment in the portal.

Regards,
Suganya Sethuraman. 

[Suganya Sethuraman]

Hi Andreas,

Thanks for your patience.

After our further analysis, you need to set the VisualType as Custom so that you to customize the control, where you can handle the size, colors, images etc.

For more information refer the link below:

https://help.syncfusion.com/xamarin/switch/visualtypes#custom

https://help.syncfusion.com/xamarin/switch/customization

Code Snippet: 

App.XAML: 

  

<Application.Resources> 

        <ResourceDictionary> 

            <Color x:Key="PrimaryColor">#FB08F7</Color> 

            <Style x:Key="DefaultToggleButtonStyle" TargetType="buttons:SfSwitch"> 

                <Setter Property="HeightRequest" Value="28"/> 

                <Setter Property="VisualType" Value="Custom"/> 

                <Setter Property="BackgroundColor" Value="{DynamicResource Transparent}"/> 

                <Setter Property="VisualStateManager.VisualStateGroups"> 

                    <VisualStateGroupList> 

                        <VisualStateGroup x:Name="CommonStates"> 

                            <VisualState x:Name="On"> 

                                <VisualState.Setters> 

                                    <Setter Property="SwitchSettings"> 

                                        <Setter.Value> 

                                            <buttons:CupertinoSwitchSettings 

                                        x:TypeArguments="buttons:OnState" 

                                        ThumbBorderColor="{DynamicResource Gray-200}" 

                                        ThumbColor="{DynamicResource Gray-White}" 

                                        TrackBorderColor="{DynamicResource Gray-200}" 

                                        TrackColor="{DynamicResource PrimaryColor}" /> 

                                        </Setter.Value> 

                                    </Setter> 

                                </VisualState.Setters> 

                            </VisualState> 

                            <VisualState x:Name="Off"> 

                                <VisualState.Setters> 

                                    <Setter Property="SwitchSettings"> 

                                        <Setter.Value> 

                                            <buttons:CupertinoSwitchSettings 

                                        x:TypeArguments="buttons:OffState" 

                                        ThumbBorderColor="{DynamicResource Gray-200}" 

                                        ThumbColor="{DynamicResource Gray-White}" 

                                        TrackBorderColor="{DynamicResource Gray-200}" 

                                        TrackColor="{DynamicResource Gray-200}" /> 

                                        </Setter.Value> 

                                    </Setter> 

                                </VisualState.Setters> 

                            </VisualState> 

                        </VisualStateGroup> 

                    </VisualStateGroupList> 

                </Setter> 

            </Style> 

        </ResourceDictionary> 

    </Application.Resources> 

  

MainPage.XAML: 

  

<buttons:SfSwitch Style="{StaticResource DefaultToggleButtonStyle}"/> 

 

We have prepared a sample based on your requirement and get it from link below.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfSwitchStyleSample55033105

Please let us know, if you have any concern on this.

Regards,
Suganya Sethuraman.