diff --git a/MAUI/Badge-View/Animation.md b/MAUI/Badge-View/Animation.md index 0fc2494c78..1c0692f004 100644 --- a/MAUI/Badge-View/Animation.md +++ b/MAUI/Badge-View/Animation.md @@ -11,6 +11,8 @@ documentation: ug # Animation in .NET MAUI Badge View (SfBadgeView) +## Enable animation + You can enable or disable the animation of the badge text using [Scale](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeAnimation.html#Syncfusion_Maui_Core_BadgeAnimation_Scale) or [None](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.BadgeAnimation.html#Syncfusion_Maui_Core_BadgeAnimation_None) enum values of the BadgeAnimation property. You can see the animation when you change the badge text. {% tabs %} @@ -54,4 +56,50 @@ Content = sfBadgeView; {% endtabs %} -![.NET Maui Badge View Animation](animation_images/net_maui_badge_view_animation.gif) \ No newline at end of file +![.NET Maui Badge View Animation](animation_images/net_maui_badge_view_animation.gif) + +## Animation duration + +The `AnimationDuration` property of the [.NET MAUI Badge View](https://www.syncfusion.com/maui-controls/maui-badge-view) can be used to set the animation speed based on given value. Setting smaller duration value accelerates animation speed. Its default value is 250. + +{% tabs %} + +{% highlight xaml %} + + + + + + + + + + +{% endhighlight %} + +{% highlight c# %} + +SfBadgeView sfBadgeView = new SfBadgeView(); +sfBadgeView.HeightRequest = 70; +sfBadgeView.WidthRequest = 70; +sfBadgeView.HorizontalOptions = LayoutOptions.Center; +sfBadgeView.VerticalOptions = LayoutOptions.Center; +sfBadgeView.BadgeText = "6"; +Image image = new Image(); +image.Source = "BadgeFacebook.png"; +image.HeightRequest = 70; +image.WidthRequest = 70; +sfBadgeView.Content = image; +BadgeSettings badgeSetting = new BadgeSettings(); +badgeSetting.Type = BadgeType.Error; +badgeSetting.Animation = BadgeAnimation.Scale; +badgeSetting.AnimationDuration = 600; +badgeSetting.Offset = new Point(-12, 6); +badgeSetting.Position = BadgePosition.TopRight; +sfBadgeView.BadgeSettings = badgeSetting; +Content = sfBadgeView; + +{% endhighlight %} + +{% endtabs %} diff --git a/MAUI/Busy-Indicator/AnimationType.md b/MAUI/Busy-Indicator/AnimationType.md index 7e87fe737d..5dd4c63ba7 100644 --- a/MAUI/Busy-Indicator/AnimationType.md +++ b/MAUI/Busy-Indicator/AnimationType.md @@ -190,3 +190,31 @@ The Globe animation is one of the built-in animations in [.NET MAUI BusyIndicato The following gif image illustrates the result of the above code. ![Global](Images/AnimationType/Globe.gif) + +### Horizontal Pulsing Box + +The horizontal pulsing box animation is one of the built-in animations in [.NET MAUI BusyIndicator](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html?tabs=tabid-1). Refer to the following code example. Here, we’ll set the [AnimationType](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_AnimationType) as `HorizontalPulsingBox.` + +{% tabs %} + +{% highlight xaml %} + + + +{% endhighlight %} + +{% highlight C# %} + + SfBusyIndicator busyIndicator = new SfBusyIndicator() + { + AnimationType = AnimationType.HorizontalPulsingBox, + IsRunning = true + }; + +{% endhighlight %} + +{% endtabs %} + +The following gif image illustrates the result of the above code. + +![Horizontal Pulsing Box](Images/AnimationType/HorizontalPulsingBox.gif) diff --git a/MAUI/Busy-Indicator/Images/AnimationType/HorizontalPulsingBox.gif b/MAUI/Busy-Indicator/Images/AnimationType/HorizontalPulsingBox.gif new file mode 100644 index 0000000000..bccca81ccd Binary files /dev/null and b/MAUI/Busy-Indicator/Images/AnimationType/HorizontalPulsingBox.gif differ diff --git a/MAUI/Radial-Menu/Events.md b/MAUI/Radial-Menu/Events.md index 0e941ee800..b6d76359b5 100644 --- a/MAUI/Radial-Menu/Events.md +++ b/MAUI/Radial-Menu/Events.md @@ -364,3 +364,75 @@ namespace RadialSample {% endhighlight %} {% endtabs %} + +## Perform an action while Presssing and Releasing the radial menu item + +You can perform an action when pressing and releasing the radial menu item of the radial menu. The `TouchDown` event occurs when pressing the radial menu item and the `TouchUp`event occurs When releasing the radial menu item. + +{% tabs %} + +{% highlight xaml %} + + + + + + + + + + + + + + + +{% endhighlight %} + +{% highlight C# %} + +using Syncfusion.Maui.RadialMenu; + +namespace RadialSample +{ + public partial class MainPage : ContentPage + { + public MainPage() + { + InitializeComponent(); + SfRadialMenu radialMenu = new SfRadialMenu(); + + RadialMenuItemsCollection itemCollection = RadialMenuItemsCollection() + { + new SfRadialMenuItem() { Text = "Bold", FontSize = 12 }, + new SfRadialMenuItem() { Text = "Copy", FontSize = 12 }, + new SfRadialMenuItem() { Text = "Paste", FontSize = 12 }, + new SfRadialMenuItem() { Text = "Undo", FontSize = 12 }, + new SfRadialMenuItem() { Text = "Color", FontSize = 12 }, + }; + + radialMenu.Items = itemCollection; + radialMenu.Items[0].TouchDown += SfRadialMenuItemTouchDown; + radialMenu.Items[0].TouchUP += SfRadialMenuItemTouchUP; + this.Content = radialMenu; + } + + private async void SfRadialMenuItemTouchDown(object? sender, RadialMenuItemEventArgs e) + { + await DisplayAlert("Alert", "The RadialMenuItem is pressed.", "Ok"); + } + + private async void SfRadialMenuItemTouchUP(object? sender, RadialMenuItemEventArgs e) + { + await DisplayAlert("Alert", "The RadialMenuItem is released.", "Ok"); + } + } +} + +{% endhighlight %} + +{% endtabs %} diff --git a/MAUI/Radial-Menu/Populating-Items.md b/MAUI/Radial-Menu/Populating-Items.md index 7dab45b68f..a9057b50ad 100644 --- a/MAUI/Radial-Menu/Populating-Items.md +++ b/MAUI/Radial-Menu/Populating-Items.md @@ -738,3 +738,65 @@ namespace RadialSample {% endhighlight %} {% endtabs %} + +## SelectionColor + +The [SfRadialMenu](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.RadialMenu.html) allows you to change the selection color for the selected radial menu item by using the `SelectionColor` property. + +{% tabs %} + +{% highlight xaml %} + + + + + + + + + + + + + + +{% endhighlight %} + +{% highlight c# %} + +using Syncfusion.Maui.RadialMenu; + +namespace RadialSample +{ + public partial class MainPage : ContentPage + { + public MainPage() + { + InitializeComponent(); + + SfRadialMenu radialMenu = new SfRadialMenu() + { + SelectionColor = Color.FromHex("#FF1493") + }; + + RadialMenuItemsCollection itemCollection = new RadialMenuItemsCollection() + { + new SfRadialMenuItem() { Text = "Bold", FontSize = 12 }, + new SfRadialMenuItem() { Text = "Copy", FontSize = 12 }, + new SfRadialMenuItem() { Text = "Paste", FontSize = 12 }, + new SfRadialMenuItem() { Text = "Undo", FontSize = 12 }, + new SfRadialMenuItem() { Text = "Color", FontSize = 12 }, + }; + + radialMenu.Items = itemCollection; + this.Content = radialMenu; + } + } +} + +{% endhighlight %} +{% endtabs %} diff --git a/MAUI/TabView/Tab-Item-Customization.md b/MAUI/TabView/Tab-Item-Customization.md index aa43735b69..1091acea39 100644 --- a/MAUI/TabView/Tab-Item-Customization.md +++ b/MAUI/TabView/Tab-Item-Customization.md @@ -553,6 +553,8 @@ tabView.ContentTransitionDuration = 300; {% endtabs %} +![ContentTransitionDuration](images/ContentTransition.gif) + ## Image size You can customize the image size in the .NET MAUI TabView control by setting the [ImageSize](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TabView.SfTabItem.html#Syncfusion_Maui_TabView_SfTabItem_ImageSize) property. diff --git a/MAUI/TabView/images/ContentTransition.gif b/MAUI/TabView/images/ContentTransition.gif new file mode 100644 index 0000000000..a4d96af6be Binary files /dev/null and b/MAUI/TabView/images/ContentTransition.gif differ