You can disable the fade animation for the overlay alone by updating the opacity of the overlay container to “1” while the animation is occurring. This can be achieved by wiring the PropertyChanged event during the popup Opening event. Public MainPage() { sfPopup = new SfPopup() { AnimationMode = PopupAnimationMode.SlideOnRight, AnimationDuration = 1000 }; sfPopup.Opening += OnSfPopupOpening; } private void OnSfPopupOpening(object? sender, System.ComponentModel.CancelEventArgs e) { var propertyInfo = sfPopup.GetType().GetField("PopupOverlayContainer", System.Reflection.BindingFlags.NonPublic | System.Reflection.BindingFlags.Instance); popupOverlayView = propertyInfo.GetValue(sfPopup) as View; popupOverlayView.PropertyChanged += OnOverlayPropertyChanged; } private void OnOverlayPropertyChanged(object? sender, System.ComponentModel.PropertyChangedEventArgs e) { if(e.PropertyName == "Opacity") { popupOverlayView.Opacity = 1; } } Output: View sample in GitHub Conclusion I hope you enjoyed learning about how to disable fade animation of overlay alone in .NET MAUI Popup. You can refer to our .NET MAUI Popup 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 .NET MAUI Popup 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!
The Xamarin.Forms SfTreeView allows you to show the popup menu with various menu items to the TreeViewNode. C# Define SfPopupLayout to show the menu. Display the popup menu in the ItemHolding event. You can get the touch Position to show the Popup menu from the ItemHoldingEventArgs. For UWP platform, using Renderer, you can show the popup menu on right click. Also, dismiss the Popup when tapping another item. public class ContextManuBehavior : Behavior<ContentPage> { SfTreeViewExt TreeView; SfPopupLayout popupLayout; KeyDetector KeyDetectorGrid; TreeViewNode Node; FileManagerViewModel ViewModel; protected override void OnAttachedTo(ContentPage bindable) { TreeView = bindable.FindByName<SfTreeViewExt>("treeView"); KeyDetectorGrid = bindable.FindByName<KeyDetector>("keyDetectorGrid"); ViewModel = bindable.BindingContext as FileManagerViewModel; InitializePopupLayout(); TreeView.ItemTapped += TreeView_ItemTapped; if (Device.RuntimePlatform == Device.UWP) { TreeView.ItemRightTapped += TreeView_ItemRightTapped; KeyDetectorGrid.KeyPressed += KeyDetectorGrid_KeyPressed; } else { TreeView.ItemHolding += TreeView_ItemHolding; } base.OnAttachedTo(bindable); } private void InitializePopupLayout() { popupLayout = new SfPopupLayout(); popupLayout.PopupView.HeightRequest = 70; popupLayout.PopupView.WidthRequest = 100; popupLayout.PopupView.ContentTemplate = new DataTemplate(() => { var mainStack = new StackLayout(){ BackgroundColor = Color.FromHex("#a6a9b6"), Spacing = 1 }; var deletedButton = new Button() { Text = "Delete", HeightRequest = 35, BackgroundColor = Color.FromHex("#e8e8e8") }; deletedButton.Clicked += DeletedButton_Clicked; var editButton = new Button() { Text = "Edit", HeightRequest = 35, BackgroundColor = Color.FromHex("#e8e8e8") }; editButton.Clicked += EditButton_Clicked; mainStack.Children.Add(deletedButton); mainStack.Children.Add(editButton); return mainStack; }); popupLayout.PopupView.ShowHeader = false; popupLayout.PopupView.ShowFooter = false; } private void ShowPopup(Point position) { if (position.Y + 100 <= TreeView.Height && position.X + 100 > TreeView.Width) popupLayout.Show((double)(position.X - 100), (double)(position.Y)); else if (position.Y + 100 > TreeView.Height && position.X + 100 < TreeView.Width) popupLayout.Show((double)position.X, (double)(position.Y - 100)); else if (position.Y + 100 > TreeView.Height && position.X + 100 > TreeView.Width) popupLayout.Show((double)(position.X - 100), (double)(position.Y - 100)); else popupLayout.Show((double)position.X, (double)(position.Y)); } private void TreeView_ItemHolding(object sender, Syncfusion.XForms.TreeView.ItemHoldingEventArgs e) { if (popupLayout.IsOpen) popupLayout.Dismiss(); Node = e.Node; ShowPopup(e.Position); } private void TreeView_ItemRightTapped(object sender, ItemRightTappedEventArgs e) { if (popupLayout.IsOpen) popupLayout.Dismiss(); Node = e.ItemData as TreeViewNode; ShowPopup(e.Position); } private void TreeView_ItemTapped(object sender, Syncfusion.XForms.TreeView.ItemTappedEventArgs e) { popupLayout.Dismiss(); } private void KeyDetectorGrid_KeyPressed(object sender, KeyEventArgs e) { if (e.Key == "Escape" || e.Key == "Dismiss") { popupLayout.Dismiss(); } } } C# Extend the SfTreeView to raise the right click event. Customize the parent view of the SfTreeView to raise the key inputs. public class SfTreeViewExt : SfTreeView { public event ItemRightTappedEventHandler ItemRightTapped; public void RaiseItemRightTapped(ItemRightTappedEventArgs e) { if (ItemRightTapped != null) this.ItemRightTapped(this, e); } } public class KeyDetector : Grid { public event KeyPressedEventHandler KeyPressed; public void RaiseKeyPressed(KeyEventArgs e) { if (KeyPressed != null) this.KeyPressed(this, e); } } XAML Load the SfTreeView into the custom KeyDetector grid. And customize the ItemTemplate element to raise the right click event for a specific node. <local:KeyDetector x:Name="keyDetectorGrid"> <StackLayout> <Label Text="TreeView Header" HeightRequest="50" HorizontalOptions="Center" VerticalOptions="Center"/> <local:SfTreeViewExt x:Name="treeView" ChildPropertyName="SubFiles" NodeSizeMode="Dynamic" NotificationSubscriptionMode="CollectionChange" ItemsSource="{Binding ImageNodeInfo}" AutoExpandMode="AllNodesExpanded"> <local:SfTreeViewExt.ItemTemplate> <DataTemplate> <local:CustomGrid x:Name="grid" TreeView="{x:Reference treeView}"> ... </local:CustomGrid> </DataTemplate> </local:SfTreeViewExt.ItemTemplate> </local:SfTreeViewExt> </StackLayout> </local:KeyDetector> C# You can also perform action on menu items, such as Delete and Edit, and dismiss the menu once the action is finished. private void EditButton_Clicked(object sender, EventArgs e) { popupLayout.Dismiss(); var item = Node.Content as FileManager; ShowEditor(item); } private void DeletedButton_Clicked(object sender, EventArgs e) { var item = Node.Content as FileManager; if (Node.ParentNode != null) { var parentNode = Node.ParentNode.Content as FileManager; parentNode.SubFiles.Remove(item); } else ViewModel.ImageNodeInfo.Remove(item); popupLayout.Dismiss(); } View sample in GitHub
You can load the Xamarin.Forms SfTreeView inside the popup using the Rg.Plugin.Popup framework. Please follow the steps below to work with Rg plugin popup. Step 1: Install the Rg.Plugin.Popup Nuget package in your shared code project. Step 2: Initialize the popup plugin on each platform. In Android, initialize the plugin on the MainActivity.cs page. Also, override the OnButtonPressed method and invoke the SendBackPressed for back button to work with the plugin. namespace TreeViewXamarin.Droid { [Activity(Label = "TreeViewXamarin", Icon = "@mipmap/icon", Theme = "@style/MainTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)] public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity { protected override void OnCreate(Bundle savedInstanceState) { TabLayoutResource = Resource.Layout.Tabbar; ToolbarResource = Resource.Layout.Toolbar; base.OnCreate(savedInstanceState); Rg.Plugins.Popup.Popup.Init(this, savedInstanceState); global::Xamarin.Forms.Forms.Init(this, savedInstanceState); LoadApplication(new App()); } public override void OnBackPressed() { if (Rg.Plugins.Popup.Popup.SendBackPressed(base.OnBackPressed)) { // Do something if there are some pages in the `PopupStack` } else { // Do something if there are not any pages in the `PopupStack` } } } } In iOS, initialize the plugin on the AppDelegate.cs page. namespace TreeViewXamarin.iOS { [Register("AppDelegate")] public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate { public override bool FinishedLaunching(UIApplication app, NSDictionary options) { global::Xamarin.Forms.Forms.Init(); SfTreeViewRenderer.Init(); Rg.Plugins.Popup.Popup.Init(); LoadApplication(new App()); return base.FinishedLaunching(app, options); } } } In UWP, initialize the plugin on the App.xaml.cs page. protected override void OnLaunched(LaunchActivatedEventArgs e) { ... if (rootFrame == null) { // Create a Frame to act as the navigation context and navigate to the first page rootFrame = new Frame(); rootFrame.NavigationFailed += OnNavigationFailed; Rg.Plugins.Popup.Popup.Init(); Xamarin.Forms.Forms.Init(e); if (e.PreviousExecutionState == ApplicationExecutionState.Terminated) { //TODO: Load state from previously suspended application } } ... } Step 3: Use the command to show the popup using PopupNavigation services in the ViewModel class and bind the command to the button. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:TreeViewXamarin" x:Class="TreeViewXamarin.MainPage"> <Button Text="Show Popup" Command="{Binding ShowPopupCommand}" HeightRequest="50" WidthRequest="150" HorizontalOptions="Center" VerticalOptions="Center" BindingContext="{local:FileManagerViewModel}"/> </ContentPage> Defining the command in the ViewModel. public Command ShowPopupCommand { get; set; } public FileManagerViewModel() { ShowPopupCommand = new Command(OnShowPopupClicked); GenerateSource(); } private async void OnShowPopupClicked(object obj) { await PopupNavigation.Instance.PushAsync(new TreeViewPopupPage()); } Step 4: Create a new page as PopupPage and add SfTreeView to PopupPage.Content. <pages:PopupPage xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:TreeViewXamarin" xmlns:syncfusion="clr-namespace:Syncfusion.XForms.TreeView;assembly=Syncfusion.SfTreeView.XForms" x:Class="TreeViewXamarin.TreeViewPopupPage"> <pages:PopupPage.BindingContext> <local:FileManagerViewModel x:Name="viewModel"/> </pages:PopupPage.BindingContext> <pages:PopupPage.Content> <syncfusion:SfTreeView x:Name="treeView" ChildPropertyName="SubFiles" ItemTemplateContextType="Node" ItemsSource="{Binding ImageNodeInfo}" AutoExpandMode="AllNodesExpanded" VerticalOptions="Center" BackgroundColor="White" Margin="20,40" > <syncfusion:SfTreeView.ItemTemplate> <DataTemplate> <Grid x:Name="grid" > <Grid.ColumnDefinitions> <ColumnDefinition Width="40" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Grid Padding="5,5,5,5"> <Image Source="{Binding Content.ImageIcon}" VerticalOptions="Center" HorizontalOptions="Center" HeightRequest="35" WidthRequest="35"/> </Grid> <Grid Grid.Column="1" RowSpacing="1" Padding="1,0,0,0" VerticalOptions="Center"> <Label LineBreakMode="NoWrap" Text="{Binding Content.ItemName}" VerticalTextAlignment="Center"/> </Grid> </Grid> </DataTemplate> </syncfusion:SfTreeView.ItemTemplate> </syncfusion:SfTreeView> </pages:PopupPage.Content> </pages:PopupPage> Output View sample in GitHub
