We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

When using Sfbutton, there is no transparent background color.

Thread ID:





144981 May 31,2019 05:29 AM UTC Jun 10,2019 05:22 AM UTC Xamarin.Forms 7
Tags: SfButton
Asked On May 31, 2019 06:29 AM UTC

I have to use sfButton in xamarin.forms.
I would like to use the VisualStateManager function to put colors on the button in Sfbutton function.
However, what worked well in the sample is only fading in the back of my solution.
Also, the button effect when clicking Text style or Text Alignment is not displayed. (Functionally, it works normally)

Can you see what's wrong?

code : 

The code above will change backgroundcolor normally in the sample solution, but it will not work in my solution.

Attachment: 20190531_14_05_002_556a3493.zip

Bharathiraja K [Syncfusion]
Replied On May 31, 2019 08:59 AM UTC

Hi YOO, 
Greetings from Syncfusion, 
We have tried to replicate the reported issue at our end by creating a simple sample, we are afraid that we are not able to reproduce the issue at our end. We have attached the prepared sample for this, and it can be downloaded from the below link:  
We would like to let you know that Checked and Unchecked visual states are having effect only when IsCheckable value is set as true for SfButton. Can you please ensure once whether you set IsCheckable property in your solution? 
If you still face the problem, please revert us by modifying the sample based on your application along with replication procedure. This would be helpful for us to give better solution at earliest.  

Replied On June 3, 2019 01:17 AM UTC

Hi. Thank you first for your answers.

I checked both the sample and IsCheckable properties of Sfbutton, but still my solution does not apply the button's backgroundcolor.

In my solution, I will attach only the relevant part, so please review it.


Bharathiraja K [Syncfusion]
Replied On June 3, 2019 09:09 AM UTC

Thanks for your update, 
We have checked the attached sample which is not in a runnable state due to the dependency project error. So, we have used only the needed files code (MB020100) which having SfButton with VisualState changes. From that code examples, prepared a simple sample and checked the following code files 
      <syncfusion:SfButton x:Name="transparentButton"
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Checked" >
                                            <Setter Property="Text" Value="ON"/>
                                            <Setter Property="BackgroundColor" Value="White" />
                                    <VisualState x:Name="Unchecked">
                                            <Setter Property="Text" Value="OFF" />
                                            <Setter Property="BackgroundColor" Value="Red" />
SfButton with the Text Background has been changed its background color as per the state changed. We were afraid that we were not able to reproduce this issue at our end, so can you please revert us by modifying the sample. This will be helpful for us to investigate further and provide you with a better solution. 

Replied On June 4, 2019 01:01 AM UTC

Hi. Thank you for your answers.

um.. I do not know how to use the sample I sent and attach apk.
The apk file is a distribution of the previously uploaded sorce file.

Thank you for your review.

Hemalatha Marikumar [Syncfusion]
Replied On June 6, 2019 05:52 PM UTC


Thanks for your patience.

We checked the reported issue and we were able to reproduce that only with already provided sample. In your sample, you have added the Style for Grid control in App.xaml file without having style key. In that BackgroundColor for Grid has been applied as in below 
<Color x:Key="GridBorderColor">#ffffff</Color> 
            <Style  TargetType="Grid"> 
                <Setter Property="Padding" Value="1" /> 
                <Setter Property="BackgroundColor" Value="{StaticResource GridBorderColor}" /> 
                <Setter Property="ColumnSpacing" Value="1" /> 
                <Setter Property="RowSpacing" Value="1" /> 

SfButton is implemented with Grid control. So, that Grid’s style has been applied to SfButton. To resolve the issue, we suggest that to use Custom Grid and use that Style instead of Grid control like,


<Style TargetType="local:CustomGrid"> 
                <Setter Property="Padding" Value="1" /> 
                <Setter Property="BackgroundColor" Value="{StaticResource GridBorderColor}" /> 
                <Setter Property="ColumnSpacing" Value="1" /> 
                <Setter Property="RowSpacing" Value="1" /> 
Instead of Grid use CustomGrid in your sample to resolve the issues.
Sample code: 
<fact:BasePage xmlns="http://xamarin.com/schemas/2014/forms" 
                    <RowDefinition Height="150"/> 
                    <RowDefinition Height="*"/> 
Custom Grid: 
class CustomGrid : Grid

We have modified the provided sample and please download that in below

Sample Link: http://www.syncfusion.com/downloads/support/forum/144981/ze/ModifiedSample2116306383 

Please check the sample and let us know if the issue has been fixed or not.

Hemalatha M. 

Replied On June 9, 2019 10:21 AM UTC

wow.. Hemalatha M. Thank you for your answers.
I have solved it through your answer.
very very very grateful. thank!

Bharathiraja K [Syncfusion]
Replied On June 10, 2019 05:22 AM UTC

Thanks for your feedback and we are glad that the reported problem resolved at your end. 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon