Visual State when using the Content property

[Simon]

I've customised a set of buttons to allow for multi-language which means some buttons text will be over many lines, I've done this like so:

<buttons:SfButton x:Name="QuestionButton" BackgroundColor="White" Padding="20,18,20,14" CornerRadius="8" Command="{Binding OnNavigateCommand}" CommandParameter="SurveyPage">

<buttons:SfButton.Content>

<Label x:Name="QuestionLabel" LineBreakMode="WordWrap" LineHeight="0.8" TextColor="{StaticResource TextColor}" HorizontalOptions="CenterAndExpand" HorizontalTextAlignment="Center" VerticalOptions="Center" FontFamily="BoldFont" FontSize="20"/>

</buttons:SfButton.Content>

</buttons:SfButton>

My command has a canexecute method and the buttons are disabled as appropriate but the UI doesn't change, is there a way to change the disabled state UI when using the Content property?

[Yuvaraj Palanisamy]

Hi Simon, 

 

Greetings from Syncfusion. 

 

We have analyzed your query and we can achieved your requirement “Update button content property in the SfButon disable state” with the help of below KB document. 

 

https://www.syncfusion.com/kb/11036/how-to-disable-xamarin-forms-button  

 

Please let us know if you have any concern. 

 

Regards, 

Yuvaraj. 

[Simon]

Your knowledgebase reply does not cater for a button using the 'Content' property, the text colour will not change on a disabled button when that text is sat in a label in the buttons content. Please take a closer look at the mark-up in the initial question.

[Devakumar Dhanapoosanam]

Hi Simon, 

 

Sorry for the inconvenience caused.

 

We have analyzed your query and achieved your requirement by using the Label IsEnabled property and applying visual state for Label added in the SfButton Content as per in the below code example. 

 

…
<Switch HorizontalOptions="Center"  VerticalOptions="Center"
               IsToggled="{Binding IsButtonEnabled}"/> 

<buttons:SfButton  

        HorizontalOptions="Center"  

        VerticalOptions="Center" 

        WidthRequest="150" 

        Text="Button" 

        Command="{Binding ButtonCommand}" > 

    <buttons:SfButton.Content> 

        <Label x:Name="QuestionLabel" 

               LineBreakMode="WordWrap" 

               LineHeight="0.8"  

               Text="SfButton Content Label"  

               IsEnabled="{Binding IsButtonEnabled}"  

               TextColor="{StaticResource TextColor}" 

               HorizontalOptions="CenterAndExpand" 

               HorizontalTextAlignment="Center" VerticalOptions="Center" 

               FontFamily="BoldFont" FontSize="20"> 

            <VisualStateManager.VisualStateGroups> 

                <VisualStateGroup x:Name="CommonStates"> 

                    <VisualState x:Name="Normal"> 

                        <VisualState.Setters> 

                            <Setter Property="TextColor" Value="{StaticResource TextColor}" /> 

                        </VisualState.Setters> 

                    </VisualState> 

 

                    <VisualState x:Name="Disabled"> 

                        <VisualState.Setters> 

                            <Setter Property="TextColor" Value="{StaticResource DisableTextColor}"/> 

                        </VisualState.Setters> 

                    </VisualState> 

                </VisualStateGroup> 

            </VisualStateManager.VisualStateGroups> 

        </Label> 

    </buttons:SfButton.Content> 

</buttons:SfButton> 

 

Please download the sample from the below link. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/166489/ze/166489-947687920.zip  

 

Please let us know if you need any further assistance on this. 

 

Regards, 

Devakumar D