SfButton BackgroundColor and backgroundgradient

[Stephane]

Hello,

i have a problem with the button. Indeed I do not have the possibility to change the background color when the button is pressed if I have previously defined a backgroundgradient. Is there a solution ? Thank you in advance.

<button:SfButton  HorizontalOptions="Center" VerticalOptions="CenterAndExpand" Text="Check" CornerRadius="40" HeightRequest="80" WidthRequest="80" HasShadow="True"

                          Grid.Row="0" Grid.Column="0" BorderWidth="0" ShadowColor="LightGray" >

            <button:SfButton.BackgroundGradient>

                <graphics:SfLinearGradientBrush>

                    <graphics:SfLinearGradientBrush.GradientStops>

                        <graphics:SfGradientStop Color="#506460" Offset="0"/>

                        <graphics:SfGradientStop Color="#262832" Offset="0.2"/>

                        <graphics:SfGradientStop Color="Black" Offset="0.9"/>

                    </graphics:SfLinearGradientBrush.GradientStops>

                </graphics:SfLinearGradientBrush>

            </button:SfButton.BackgroundGradient>

        </button:SfButton>

[Suyamburaja Jayakumar]

Hi Stephane, 

 

Greetings from Syncfusion. 

 

We would like to let you know that your requirement has been achieved by using available visual states of SfButton.  To achieve your requirement, you can change the BackgroundGradient based on the visual states like Pressed and Normal as per in below code snippet. 

 

XAML: 

<ContentPage.Resources> 

        <ResourceDictionary> 

            <gradient:SfLinearGradientBrush x:Key="GradientBrush1"> 

                <gradient:SfLinearGradientBrush.GradientStops> 

                    <gradient:SfGradientStop Color="#506460" Offset="0"/> 

                    <gradient:SfGradientStop Color="#262832" Offset="1"/> 

                </gradient:SfLinearGradientBrush.GradientStops> 

            </gradient:SfLinearGradientBrush> 

            <gradient:SfLinearGradientBrush x:Key="GradientBrush2"> 

                <gradient:SfLinearGradientBrush.GradientStops> 

                    <gradient:SfGradientStop Color="Cyan" Offset="0"/> 

                    <gradient:SfGradientStop Color="DarkCyan" Offset="1"/> 

                </gradient:SfLinearGradientBrush.GradientStops> 

            </gradient:SfLinearGradientBrush> 

        </ResourceDictionary> 

    </ContentPage.Resources> 

 

    <StackLayout HorizontalOptions="Center" VerticalOptions="Center" Orientation="Vertical"> 

        <button:SfButton  HorizontalOptions="Center" VerticalOptions="CenterAndExpand" Text="Check" CornerRadius="40" HeightRequest="80" WidthRequest="80" HasShadow="True" 

                          Grid.Row="0" Grid.Column="0" BorderWidth="0" ShadowColor="LightGray" > 

            <VisualStateManager.VisualStateGroups> 

                <VisualStateGroup x:Name="CommonStates"> 

                    <VisualState x:Name="Normal"> 

                        <VisualState.Setters> 

                            <Setter Property="BackgroundGradient" Value="{StaticResource GradientBrush1}" /> 

                        </VisualState.Setters> 

                    </VisualState> 

                    <VisualState x:Name="Pressed"> 

                        <VisualState.Setters> 

                            <Setter Property="BackgroundGradient" Value="{StaticResource GradientBrush2}" /> 

                        </VisualState.Setters> 

                    </VisualState> 

                </VisualStateGroup> 

            </VisualStateManager.VisualStateGroups> 

        </button:SfButton> 

    </StackLayout> 

 

GIF: 

 

 

Please let us know if you need any further assistance. 

 

Regards, 

Suyamburaja J.