When using Sfbutton, there is no transparent background color.

[BN YOO]

Hi.

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]

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:  

 

Sample: http://www.syncfusion.com/downloads/support/forum/144981/ze/Button_GettingStarted-82201482.zip 

 

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.  

 

Regards, 

Bharathi. 

[BN YOO]

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.

https://drive.google.com/open?id=1qgb3ZxlkEVyrx7chcgKhKRelJ6qPU1S2

[Bharathiraja K]

Hi BN YOO, 

 

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 

 

[XAML]: 

      <syncfusion:SfButton x:Name="transparentButton"
                                             HorizontalOptions="Start"
                                             VerticalOptions="Start"
                                             FontSize="18"
                                             BorderWidth="1"
                                             BorderColor="Gray"
                                             CornerRadius="0"
                                             IsCheckable="true"
                                             WidthRequest="70"
                                             HeightRequest="40"
                                             Text="OFF"
                                             BackgroundColor="Transparent"
                                             TextColor="Black"
                                             Clicked="FontButton_Clicked">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Checked" >
                                        <VisualState.Setters>
                                            <Setter Property="Text" Value="ON"/>
                                            <Setter Property="BackgroundColor" Value="White" />
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="Unchecked">
                                        <VisualState.Setters>
                                            <Setter Property="Text" Value="OFF" />
                                            <Setter Property="BackgroundColor" Value="Red" />
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                        </syncfusion:SfButton> 

 

 

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. 

 

Sample link: http://www.syncfusion.com/downloads/support/forum/144981/ze/ButtonVisual-315471528.zip  

 

Regards, 

Bharathi. 

[BN YOO]

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.

https://drive.google.com/open?id=1SCJiwqU7-ObU28OVWtictY9Znxjk6TQO

[Hemalatha Marikumar]

Hi BN YOO,

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" /> 

            </Style> 

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,

App.xaml:

 

 

<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" /> 

 </Style> 

 

  

Instead of Grid use CustomGrid in your sample to resolve the issues.
 

 

Sample code: 

 

<fact:BasePage xmlns="http://xamarin.com/schemas/2014/forms" 

               xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 

               xmlns:fact="clr-namespace:FactPDA.Views;assembly=FactPDA" 

               xmlns:factv="clr-namespace:FactPDA.Views" 

               xmlns:local="clr-namespace:FactPDA" 

               xmlns:syncfusion="clr-namespace:Syncfusion.XForms.Buttons;assembly=Syncfusion.Buttons.XForms" 

               x:Class="FactPDA.Views.MB020110Page" 

               Title="Sta선택"> 

        <ScrollView> 

            <local:CustomGrid> 

                <local:CustomGrid.RowDefinitions> 

                    <RowDefinition Height="150"/> 

                    <RowDefinition Height="*"/> 

                </local:CustomGrid.RowDefinitions> 

                <local:CustomGrid.ColumnDefinitions> 

                </local:CustomGrid.ColumnDefinitions> 

              </local:CustomGrid> 

        </ScrollView> 

</fact:BasePage> 

 

  

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.

Regards,
Hemalatha M. 

 

 

 

 

 

  

[BN YOO]

wow.. Hemalatha M. Thank you for your answers.

I have solved it through your answer.

very very very grateful. thank!

[Bharathiraja K]

Hi BN YOO, 

 

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

 

Regards, 

Bharathi.