How to Perform Scale Animation with Mouse in Xamarin Button?
This article explains how to perform the scale animation on its mouseover the state of our Xamarin.Forms Button in the UWP platform.
[XAML]
<local:SfButtonExt x:Name="button" HeightRequest="40" WidthRequest="100" HorizontalOptions="Center" VerticalOptions="Center"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal"> <VisualState.Setters> <Setter Property="BorderWidth" Value="0" /> <Setter Property="BorderColor" Value="Transparent" /> <Setter Property="BackgroundImage" Value="Download.png" /> </VisualState.Setters> </VisualState> <VisualState x:Name="MouseOver"> <VisualState.Setters> <Setter Property="BorderWidth" Value="0" /> <Setter Property="BorderColor" Value="Transparent" /> <Setter Property="BackgroundImage" Value="Save.png" /> </VisualState.Setters> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> </local:SfButtonExt>
[C#]
class CustomButtonRenderer : SfButtonRenderer
{
SfButtonExt sfButton;
protected override void OnElementChanged(ElementChangedEventArgs<SfBorder> e)
{
base.OnElementChanged(e);
if (Control != null)
{
Control.PointerMoved += Control_PointerMoved;
Control.PointerExited += Control_PointerExited;
}
if(e.NewElement != null)
{
sfButton = e.NewElement as SfButtonExt;
}
}
private void Control_PointerExited(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e)
{
Windows.UI.Core.CoreCursor arrowCursor = new Windows.UI.Core.CoreCursor(Windows.UI.Core.CoreCursorType.Arrow, 0);
Window.Current.CoreWindow.PointerCursor = arrowCursor;
}
private void Control_PointerMoved(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e)
{
Windows.UI.Core.CoreCursor handCursor = new Windows.UI.Core.CoreCursor(Windows.UI.Core.CoreCursorType.Hand, 1);
Window.Current.CoreWindow.PointerCursor = handCursor;
StartAnimation();
}
async void StartAnimation()
{
//change the scale value based on your requirement
bool isCancelled = await sfButton.ScaleTo(1.1, 500);
if (!isCancelled)
{
await sfButton.ScaleTo(1, 500);
}
}
}
Also, know how to customize the appearance of the Syncfusion Xamarin.Forms button in its mouseover state as shown below,
The above customization has been done with the help of MouseOver visual state in Xamarin.Forms button. Please find the following code sample to construct the above UI.
[XAML]
<buttons:SfButton ShowIcon="True" HorizontalOptions="Center" HeightRequest="50" WidthRequest="90" VerticalOptions="Center"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <!--default state customization on Background,Text color,ImageSource and Text property--> <VisualState x:Name="Normal"> <VisualState.Setters> <Setter Property="ImageSource"> <Setter.Value> <FontImageSource FontFamily="Assets/Segoe_MDL2_Assets.ttf#Segoe MDL2 Assets" Glyph="" Color="White" /> </Setter.Value> </Setter> <Setter Property="BackgroundColor" Value="#00008B"/> <Setter Property="Text" Value="Play"/> <Setter Property="TextColor" Value="White"/> </VisualState.Setters> </VisualState> <!--mouse over state customization on Background,Text color,ImageSource and Text property--> <VisualState x:Name="MouseOver"> <VisualState.Setters> <Setter Property="ImageSource"> <Setter.Value> <FontImageSource FontFamily="Assets/Segoe_MDL2_Assets.ttf#Segoe MDL2 Assets" Glyph="" Color="Black" /> </Setter.Value> </Setter> <Setter Property="BackgroundColor" Value="#B1D4E0"/> <Setter Property="Text" Value="Pause"/> <Setter Property="TextColor" Value="Black"/> </VisualState.Setters> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> </buttons:SfButton>
See also
How to create a different shape of Xamarin.Forms button
How to add the SVG images in Xamarin.Forms button
How to disable Xamarin.Forms button
How to change Xamarin.Forms button style using its visual states
Conclusion
I hope you enjoyed learning about how to perform scale animation with mouse in Xamarin.Forms Button.
You can refer to our Xamarin.Forms Button feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Xamarin. Forms Button example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
