How to trigger visual states on a button using view model

[Pamela]

I would like to trigger each individual state of this button , I added a command property but this react to both states. How could I identify each individual states and perform an action based on that EX - OnChecked - do this and OnUncheck - do that? see below

<syncfusion:SfButton x:Name="iconButton" 
                                     Command="{Binding Source={x:Reference list}, Path=BindingContext.AddFavoritesCommand}"
                                     CommandParameter="{Binding .}" >
                        <syncfusion:SfButton.FontFamily>
                            <OnPlatform x:TypeArguments="x:String">
                                <On Platform="iOS" Value="Segoe MDL2 Assets" />
                                <On Platform="Android" Value="button_Segoe MDL2 Assets.ttf#Segoe MDL2 Assets" />

                            </OnPlatform>
                        </syncfusion:SfButton.FontFamily>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Checked" > i NEED TO ACCESS THIS COLOR 
                                    <VisualState.Setters>
                                        <Setter  Property="TextColor" Value="Red"/>
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="Unchecked">
                                    <VisualState.Setters>
                                        <Setter Property="TextColor" Value="White" /> AND THIS ONE FROM MY COMMAND
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </syncfusion:SfButton>

[Hemalatha Marikumar]

Hi Pamela, 

 

Greetings from Syncfusion.

 

How could I identify each individual state and perform an action?

 

We would like to let you know that your requirement is to have a toggle SfButton that has been achieved by enabling the IsCheckable property. In it, two states are named

 

·       Checked

 

·       Unchecked

 

https://help.syncfusion.com/xamarin/button/gettingstarted#toggle-button

 

You can perform an action based on its state using IsChecked property which is enabled/disabled based on its state

 

We have prepared the simple sample to achieve your requirement, please download that in below link

 

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

 

Code Snippet:

 

In viewModel, itself having bool property which is binding with IsChecked property of SfButton. Through out that value, we can identify its state.

 

[XAML] 

        <syncfusion:SfButton 

                            x:Name="iconButton"  

                            IsCheckable="True" 

                            Text="Check" 

                            IsChecked="{Binding IsChecked}" 

                            Command="{Binding AddFavoritesCommand}" 

                            CommandParameter="{x:Reference iconButton}" > 

            <VisualStateManager.VisualStateGroups> 

                <VisualStateGroup x:Name="CommonStates"> 

                    <VisualState x:Name="Checked" > 

                        <VisualState.Setters> 

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

                        </VisualState.Setters> 

                    </VisualState> 

                    <VisualState x:Name="Unchecked"> 

                        <VisualState.Setters> 

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

                        </VisualState.Setters> 

                    </VisualState> 

                </VisualStateGroup> 

            </VisualStateManager.VisualStateGroups> 

        </syncfusion:SfButton> 

 

[C#] 

public ViewModel() 

        { 

            AddFavoritesCommand = new Command(AddFavorites); 

        } 

 

 

        private void AddFavorites(object obj) 

        { 

            TextColor = (obj as SfButton).TextColor; 

 

            if(IsChecked) 

            { 

                //execute once checked 

            } 

            else 

            { 

                //execute once unchecked 

            } 

            

        } 

 

 

I hope this information helps. If you need any further assistance, please don't hesitate to contact us. 

 

Regards, 

Hemalatha M.