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!
You can capture key press in a Popup view by creating a custom grid with keyboard listener attached to it. Step 1: Create a custom grid with a keyboard listener and set focus to the custom grid in the loaded event. In the OnKeyDown event, set the Popup’s IsOpen property to true or false based on the key. using Syncfusion.Maui.Core.Internals; public class CustomGrid : Grid, IKeyboardListener { public SfPopup Popup { get; set; } public CustomGrid() { this.AddKeyboardListener(this); this.Loaded += CustomGrid_Loaded; } private void CustomGrid_Loaded(object? sender, EventArgs e) { SetUpKeyListenerRequirements(); this.Focus(); } public void OnKeyDown(KeyEventArgs args) { if (this.Popup != null && !this.Popup.IsOpen && args.Key == KeyboardKey.O) { this.Popup.IsOpen = true; } if (this.Popup != null && this.Popup.IsOpen && args.Key == KeyboardKey.Enter) { this.Popup.IsOpen = false; } } private void SetUpKeyListenerRequirements() { #if WINDOWS if (this.Handler != null) { (this.Handler.PlatformView as Microsoft.UI.Xaml.FrameworkElement)!.IsTabStop = true; } #elif ANDROID if (this.Handler != null) { (this.Handler!.PlatformView as Android.Views.View) !.FocusableInTouchMode = true; } #endif } } Step 2: Add the custom grid to the Popup’s content template and reference the Popup inside the custom grid. <sfPopup:SfPopup x:Name="popup" Opened="popup_Opened" Closed="popup_Closed"> <sfPopup:SfPopup.ContentTemplate> <DataTemplate> <local:CustomGrid Popup="{x:Reference popup}"> <Label Text="Press Enter key to close popup" BackgroundColor="SkyBlue" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" /> </local:CustomGrid> </DataTemplate> </sfPopup:SfPopup.ContentTemplate> </sfPopup:SfPopup> View sample in GitHub Conclusion: I hope you enjoyed learning about how to capture the key press in Popup view. 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. 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!
In .NET MAUI Popup, elements inside a DataTemplate are not directly accessible by their x:Name because data templates are not instantiated until they are actually used to render an item. This means the elements don’t exist in the visual tree until then, which makes them inaccessible by x:Name. Suggestion 1: To access elements inside the ContentTemplate, we can store the elements in fields in the code-behind once these elements are added. This way, we can access these elements: <popup:SfPopup x:Name="popup" AutoSizeMode="Height"> <popup:SfPopup.ContentTemplate> <DataTemplate> <StackLayout x:Name="stackLayout" ChildAdded="StackLayout_ChildAdded"> <Entry x:Name="Entry" Placeholder="Enter Name"/> <Entry Placeholder="Enter Password" x:Name="Entry1" IsPassword="True" /> <Button Text="Login" Clicked="Button_Clicked"/> </StackLayout> </DataTemplate> </popup:SfPopup.ContentTemplate> </popup:SfPopup> private Entry entry; private Entry entry1; private void StackLayout_ChildAdded(object sender, ElementEventArgs e) { if (e.Element is Entry) { var child = (Entry)e.Element; if (child != null && child.StyleId == "Entry") { entry = child; } else if (child != null && child.StyleId == "Entry1") { entry1 = child; } } } private void Button_Clicked(object sender, EventArgs e) { if (entry1.Text == entry.Text) { DisplayAlert("Status", "Login Successfully", "Ok"); } else { DisplayAlert("Status", "Login Failed", "Ok"); } entry.Text = string.Empty; entry1.Text = string.Empty; } Suggestion 2: We can declare elements in the code-behind and directly use these elements inside the ContentTemplate. internal Label PopupLabel { get; set; } private SfPopup Popup; public MainPage() { InitializeComponent(); Popup = new SfPopup() { ShowFooter = true }; PopupLabel = new Label() { Text = "Custom Popup Content" }; Popup.ContentTemplate = new DataTemplate(() => { return PopupLabel; }); Popup.FooterTemplate = new DataTemplate(() => { var button = new Button() { Text = "Change Text" }; button.Clicked += Button_Clicked; return button; }); private void Button_Clicked(object? sender, EventArgs e) { PopupLabel!.Text = "Text Changed"; } } View sample in GitHub Conclusion I hope you enjoyed learning about how to access ContentTemplate elements 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!
In .NET MAUI Popup, you have the ability to include footer buttons that users can interact with using ShowFooter. This article demonstrates how to handle the click events of the accept and decline buttons in the footer area of the SfPopup by using custom commands. Implementing Custom Commands To handle the actions of the accept and decline buttons, you can create custom commands by implementing the ICommand interface. Below is an example of how to create custom commands for both accept and decline buttons: public class AcceptButtonCustomCommand : ICommand { public event EventHandler CanExecuteChanged; public bool CanExecute(object parameter) { return true; // The command can always execute } public void Execute(object parameter) { // Implement the action to be performed on accept button click } } public class DeclineButtonCustomCommand : ICommand { public event EventHandler CanExecuteChanged; public bool CanExecute(object parameter) { return true; // The command can always execute } public void Execute(object parameter) { // Implement the action to be performed on decline button click } } Assigning Custom Commands to Footer Buttons Once you have defined your custom commands, you can assign them to the AcceptCommand and DeclineCommand of the SfPopup in Behavior.cs as shown below: popup = bindable.FindByName<sfpopup>("popup"); acceptCommand = new AcceptButtonCustomCommand(); declineCommand = new DeclineButtonCustomCommand(); popup.AcceptCommand = acceptCommand; popup.DeclineCommand = declineCommand; View sample in GitHub Conclusion I hope you enjoyed learning about how to bind MVVM Commands in footer buttons in .NET MAUI Popup (SfPopup). 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. 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!
In .NET MAUI Popup control provides a flexible way to customize is the overlay background. This article will guide you through the process of either removing the overlay or changing its color. Removing the Overlay To remove the overlay background, set the ShowOverlayAlways property to False . By default, this property is set to True, which means the overlay is visible whenever the popup is active. XAML <sfPopup:SfPopup x:Name="popup" ShowOverlayAlways="False"/> With this setting, the popup will appear without the dimmed overlay background. Output Changing Overlay Color If you prefer to change the color of the overlay instead of removing it, you can use the OverlayColor property within the PopupStyle. XAML <sfPopup:SfPopup x:Name="popup"> <sfPopup:SfPopup.PopupStyle> <sfPopup:PopupStyle OverlayColor="LightPink" /> </sfPopup:SfPopup.PopupStyle> </sfPopup:SfPopup> This will change the overlay background to a light pink color when the popup is displayed. Output View sample in GitHub Conclusion I hope you enjoyed learning about How to customize Overlay background in .NET MAUI Popup (SfPopup). 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. 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!
In .NET MAUI Popup, there is a flexible way to display transient content. It can be customized to include various elements such as buttons or even complex view. This article will guide you through the process of customizing the content of a .NET MAUI Popup using the ContentTemplate property. For example you can display the Login page inside the .NET MAUI Popup refer the below. XAML <StackLayout x:Name="mainLayout"> <Button x:Name="clickToShowPopup" Text="ClickToShowPopup" VerticalOptions="Start" HorizontalOptions="FillAndExpand" /> <sfPopup:SfPopup x:Name="popup" AppearanceMode="TwoButton" AcceptButtonText="Login" DeclineButtonText="Cancel" ShowHeader="False" ShowFooter="True" HeaderHeight="250"> <sfPopup:SfPopup.ContentTemplate> <DataTemplate> <StackLayout Padding="15"> <Entry Text="UserName"></Entry> <Entry Text="Pasword"></Entry> </StackLayout> </DataTemplate> </sfPopup:SfPopup.ContentTemplate> </sfPopup:SfPopup> </StackLayout> Output View sample in GitHub Conclusion I hope you enjoyed learning about how to customize the message view in .NET MAUI SfPopup. 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. 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!
In .NET MAUI Popup, you can enhance the appearance of SfPopup control using implicit styling. Implicit styling allows you to define a style for a specific control type, and all instances of that type within a particular scope will automatically adopt the defined style. XAML <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:MauiPopup" xmlns:syncLayout="clr-namespace:Syncfusion.Maui.Popup;assembly=Syncfusion.Maui.Popup" x:Class="MauiPopup.MainPage"> <ContentPage.Resources> <Style TargetType="syncLayout:SfPopup"> <Setter Property="PopupStyle"> <Setter.Value> <syncLayout:PopupStyle CornerRadius="0" HeaderBackground="LightCyan" FooterBackground="LightCyan" AcceptButtonBackground ="Green" AcceptButtonTextColor="White" DeclineButtonBackground="Red" DeclineButtonTextColor="White" /> </Setter.Value> </Setter> </Style> </ContentPage.Resources> <StackLayout> <Button Text="Click to Show Popup" x:Name="showPopupButton"/> <syncLayout:SfPopup x:Name="popUpLayout" ShowHeader="True" ShowFooter="True" AppearanceMode="TwoButton"> </syncLayout:SfPopup> </StackLayout> </ContentPage> You can achieve below output: View Sample in GitHub Conclusion I hope you enjoyed learning about how to style popup-view using implicit styling in .NET MAUI SfPopup. You can refer to our.NET MAUI SfPopup feature tour page to know about its other groundbreaking feature representations anddocumentation, and how to quickly get started for configuration specifications. You can also explore our .NET MAUI SfPopup example to understand how to create and present 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!
In this article, you can learn about how to get the entire row details when tapping the respective row cells in Flutter DataGrid STEP 1: Create a data source class by extending DataGridSource for mapping data to the SfDataGrid. class EmployeeDataSource extends DataGridSource { EmployeeDataSource(List<Employee> employees) { buildDataGridRow(employees); } void buildDataGridRow(List<Employee> employeeData) { dataGridRow = employeeData.map<DataGridRow>((employee) { return DataGridRow(cells: [ DataGridCell<int>(columnName: 'id', value: employee.id), DataGridCell<String>(columnName: 'name', value: employee.name), DataGridCell<String>( columnName: 'designation', value: employee.designation), DataGridCell<int>(columnName: 'salary', value: employee.salary), ]); }).toList(); } List<DataGridRow> dataGridRow = <DataGridRow>[]; @override List<DataGridRow> get rows => dataGridRow.isEmpty ? [] : dataGridRow; @override DataGridRowAdapter? buildRow(DataGridRow row) { return DataGridRowAdapter( cells: row.getCells().map<Widget>((dataGridCell) { return Container( alignment: Alignment.center, padding: const EdgeInsets.symmetric(horizontal: 8.0), child: SelectableText(dataGridCell.value.toString()), ); }).toList()); } } STEP 2: Initialize the SfDataGrid widget with all the required properties. When you tap the row, you will get the row index in the onCellTap callback. Then, you can fetch the respective row data from the DataGridSource.effectiveRows. Here, the respective row details will be shown in the AlertDialog with a onCellTap. List<Employee> _employees = <Employee>[]; late EmployeeDataSource _employeeDataSource; @override void initState() { super.initState(); _employees = getEmployeeData(); _employeeDataSource = EmployeeDataSource(_employees); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Flutter SfDataGrid'), ), body: SfDataGrid( source: _employeeDataSource, columns: getColumns, columnWidthMode: ColumnWidthMode.fill, allowSorting: true, onCellTap: ((details) { if (details.rowColumnIndex.rowIndex != 0) { int selectedRowIndex = details.rowColumnIndex.rowIndex - 1; var row = _employeeDataSource.effectiveRows.elementAt(selectedRowIndex); showDialog( context: context, builder: (context) => AlertDialog( shape: const RoundedRectangleBorder( borderRadius: BorderRadius.all(Radius.circular(32.0))), content: SizedBox( height: 300, width: 300, child: Column( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Row(children: [ const Text('Employee ID'), const Padding( padding: EdgeInsets.symmetric(horizontal: 25)), const Text(':'), const Padding( padding: EdgeInsets.symmetric(horizontal: 10)), Text(row.getCells()[0].value.toString()), ]), Row(children: [ const Text('Employee Name'), const Padding( padding: EdgeInsets.symmetric(horizontal: 10)), const Text(':'), const Padding( padding: EdgeInsets.symmetric(horizontal: 10)), Text(row.getCells()[1].value.toString()), ]), Row(children: [ const Text('Designation'), const Padding( padding: EdgeInsets.symmetric(horizontal: 25)), const Text(':'), const Padding( padding: EdgeInsets.symmetric(horizontal: 10)), Text(row.getCells()[2].value.toString()), ]), Row(children: [ const Text('Salary'), const Padding( padding: EdgeInsets.symmetric(horizontal: 45)), const Text(':'), const Padding( padding: EdgeInsets.symmetric(horizontal: 10)), Text(row.getCells()[3].value.toString()), ]), SizedBox( width: 300, child: ElevatedButton( onPressed: () { Navigator.pop(context); }, child: const Text("OK")), ) ]), ))); } }), ), ); } You can download the example from GitHub.ConclusionI hope you enjoyed learning about how to get the entire row details in Flutter DataGrid.You can refer to our Flutter SfDataGrid featuretour 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 Flutter SfDataGrid demo 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!
This article explains how to avoid the following pop-up window while showing up for saving the chart template at load time. If your requirement is to save the chart template (series properties and the point properties, which was saved in XML file) without getting that pop-up then, please refer the following code sample instead of saving like this. [C#] .. var template = new ChartTemplate(typeof(ChartControl)); template.Scan(this.chartControl1); template.Save("TemplateName.xml"); .. Chart Template saving location is bin->debug->FileName.xml. View the sample in GitHub. See also How to bind the data source via chart wizardHow to create a real-time chartHow do I print a ChartHow to create Chart in VB .NET Windows Forms
You can deselect the ListViewItem when navigating back to the ListView page in Xamarin.Forms SfListView. XAML Bind SfListView.TapCommand to show the Popup page using the Rg.Plugin.Popup framework. Bind SelectedItem to handle the selection. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:ListViewXamarin" xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms" x:Class="ListViewXamarin.MainPage" Title="ListViewPage"> <ContentPage.BindingContext> <local:ContactsViewModel/> </ContentPage.BindingContext> <ContentPage.Content> <syncfusion:SfListView x:Name="listView" ItemSize="60" TapCommand="{Binding ShowPopup}" ItemsSource="{Binding contactsinfo}" SelectedItem="{Binding SelectedItem, Mode=TwoWay}"> <syncfusion:SfListView.ItemTemplate > <DataTemplate> <Grid x:Name="grid"> <Grid.ColumnDefinitions> <ColumnDefinition Width="70" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Image Source="{Binding ContactImage}" VerticalOptions="Center" HorizontalOptions="Center" HeightRequest="50" WidthRequest="50"/> <Grid Grid.Column="1" RowSpacing="1" Padding="10,0,0,0" VerticalOptions="Center"> <Label LineBreakMode="NoWrap" TextColor="#474747" Text="{Binding ContactName}"/> <Label Grid.Row="1" Grid.Column="0" TextColor="#474747" LineBreakMode="NoWrap" Text="{Binding ContactNumber}"/> </Grid> </Grid> </DataTemplate> </syncfusion:SfListView.ItemTemplate> </syncfusion:SfListView> </ContentPage.Content> </ContentPage> You can refer to our online document to work with Rg.Plugin.Popup using the link below, https://www.syncfusion.com/kb/11353/how-to-show-xamarin-forms-listview-sflistview-in-popup-using-rg-plugin-popup-framework C# In the ShowPopup command, show the Popup page using the PushAsync method of the PopupNavigation service. public class ContactsViewModel : INotifyPropertyChanged { public Command<object> ShowPopup { get; set; } public ContactsViewModel() { ShowPopup = new Command<object>(ShowPopupPage); } private async void ShowPopupPage(object sender) { //Setting binding context for the popup page to show the tapped item. var popupPage = new ListViewPage(); popupPage.BindingContext = this; await PopupNavigation.Instance.PushAsync(popupPage); } } Set the SelectedItem to null to disable the selection in the Close command and navigate back to the ListView page using the PopAsync method of the PopupNavigation service. public class ContactsViewModel : INotifyPropertyChanged { public Command<object> ClosePopup { get; set; } public ContactsViewModel() { ClosePopup = new Command<object>(ClosePopupPage); } private async void ClosePopupPage(object sender) { //Set selected item as null to clear the selection. SelectedItem = null; await PopupNavigation.Instance.PopAsync(true); } } Output View sample in GitHub
You can access the named SfExpander defined inside DataTemplate of PopupLayout by using Behavior. XAML In PopupLayout’s PopupView, behaviour added to parent of Expander. <sfPopup:SfPopupLayout x:Name="popupLayout"> <sfPopup:SfPopupLayout.Behaviors> <local:PopupBehavior/> </sfPopup:SfPopupLayout.Behaviors> <sfPopup:SfPopupLayout.PopupView> <sfPopup:PopupView WidthRequest="400" HeightRequest="400" ShowFooter="False"> <sfPopup:PopupView.ContentTemplate> <DataTemplate> <ScrollView BackgroundColor="#EDF2F5" Grid.Row="1"> <StackLayout> <StackLayout.Behaviors> <local:Behavior/> </StackLayout.Behaviors> <Button Text="Expand/Collapse Second Expander" x:Name="expanderButton" BackgroundColor="LightGray"/> <syncfusion:SfExpander x:Name="firstExpander"> <syncfusion:SfExpander.Header> ... </syncfusion:SfExpander.Header> <syncfusion:SfExpander.Content> ... </syncfusion:SfExpander.Content> </syncfusion:SfExpander> <syncfusion:SfExpander x:Name="secondExpander"> <syncfusion:SfExpander.Header> ... </syncfusion:SfExpander.Header> <syncfusion:SfExpander.Content> ... </syncfusion:SfExpander.Content> </syncfusion:SfExpander> </StackLayout> </ScrollView> </DataTemplate> </sfPopup:PopupView.ContentTemplate> </sfPopup:PopupView> </sfPopup:SfPopupLayout.PopupView> <sfPopup:SfPopupLayout.Content> <Grid x:Name="popupGrid"> <Grid.RowDefinitions> <RowDefinition Height="50"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Button x:Name="ShowPopup" Text="Bring Popup" /> </Grid> </sfPopup:SfPopupLayout.Content> </sfPopup:SfPopupLayout> C# In ChildAdded event you will get the instance of Expander. public class Behavior : Behavior<StackLayout> { StackLayout stackLayout; SfExpander expander; protected override void OnAttachedTo(StackLayout bindable) { stackLayout = bindable; stackLayout.ChildAdded += StackLayout_ChildAdded; ; } private void StackLayout_ChildAdded(object sender, ElementEventArgs e) { if (e.Element is SfExpander) { //Method 1 : Get SfExpander reference using StackLayout.ChildAdded Event expander = e.Element as SfExpander; } } protected override void OnDetachingFrom(StackLayout bindable) { stackLayout.ChildAdded -= StackLayout_ChildAdded; expander = null; stackLayout = null; base.OnDetachingFrom(bindable); } } C# You can also get the Expander using FindByName method from Parent element. public class Behavior : Behavior<StackLayout> { StackLayout stackLayout; SfExpander expander; Button button; protected override void OnAttachedTo(StackLayout bindable) { stackLayout = bindable; stackLayout.ChildAdded += StackLayout_ChildAdded; ; } private void StackLayout_ChildAdded(object sender, ElementEventArgs e) { if (e.Element is Button) { button = e.Element as Button; button.Clicked += Button_Clicked; } } private void Button_Clicked(object sender, EventArgs e) { //Method 2 : Get SfExpander reference using FindByName expander = stackLayout.FindByName<SfExpander>("secondExpander"); App.Current.MainPage.DisplayAlert("Information", "Second Expander instance is obtained and Expanded/Collapsed", "Ok"); if (expander.IsExpanded) { expander.IsExpanded = false; } else { expander.IsExpanded = true; } } protected override void OnDetachingFrom(StackLayout bindable) { button.Clicked -= Button_Clicked; stackLayout.ChildAdded -= StackLayout_ChildAdded; expander = null; button = null; stackLayout = null; base.OnDetachingFrom(bindable); } } View sample in GitHub
You can access the named SfAccordion defined inside DataTemplate of PopupLayout by using Behavior. XAML In PopupLayout’s PopupView, behaviour added to parent of Accordion. <sfPopup:SfPopupLayout x:Name="popupLayout" Margin="{OnPlatform iOS='0,40,0,0'}"> <sfPopup:SfPopupLayout.Behaviors> <local:PopupBehavior/> </sfPopup:SfPopupLayout.Behaviors> <sfPopup:SfPopupLayout.PopupView> <sfPopup:PopupView WidthRequest="400" HeightRequest="400" ShowFooter="False"> <sfPopup:PopupView.ContentTemplate> <DataTemplate> <ScrollView BackgroundColor="#EDF2F5" Grid.Row="1"> <StackLayout> <StackLayout.Behaviors> <local:Behavior/> </StackLayout.Behaviors> <Button HeightRequest="50" Text="Change Accordion Header Icon Position" x:Name="accordionButton" BackgroundColor="LightGray"/> <syncfusion:SfAccordion Grid.Row="1" x:Name="accordion" ExpandMode="MultipleOrNone" > <syncfusion:SfAccordion.Items> <syncfusion:AccordionItem> ... </syncfusion:AccordionItem> <syncfusion:AccordionItem> ... </syncfusion:AccordionItem> </syncfusion:SfAccordion.Items> </syncfusion:SfAccordion> </StackLayout> </ScrollView> </DataTemplate> </sfPopup:PopupView.ContentTemplate> </sfPopup:PopupView> </sfPopup:SfPopupLayout.PopupView> <sfPopup:SfPopupLayout.Content> <Grid x:Name="popupGrid"> <Grid.RowDefinitions> <RowDefinition Height="50"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Button x:Name="ShowPopup" Text="Bring Popup" /> </Grid> </sfPopup:SfPopupLayout.Content> </sfPopup:SfPopupLayout> C# In ChildAdded event you will get the instance of Accordion. public class Behavior : Behavior<StackLayout> { StackLayout stackLayout; SfAccordion accordion; protected override void OnAttachedTo(StackLayout bindable) { stackLayout = bindable; stackLayout.ChildAdded += StackLayout_ChildAdded; ; } private void StackLayout_ChildAdded(object sender, ElementEventArgs e) { if (e.Element is SfAccordion) { //Method 1 : Get SfAccordion reference using StackLayout.ChildAdded Event accordion = e.Element as SfAccordion; } } protected override void OnDetachingFrom(StackLayout bindable) { stackLayout.ChildAdded -= StackLayout_ChildAdded; accordion = null; stackLayout = null; base.OnDetachingFrom(bindable); } } C# You can also get the Accordion using FindByName method from Parent element. public class Behavior : Behavior<StackLayout> { StackLayout stackLayout; SfAccordion accordion; Button button; protected override void OnAttachedTo(StackLayout bindable) { stackLayout = bindable; stackLayout.ChildAdded += StackLayout_ChildAdded; ; } private void StackLayout_ChildAdded(object sender, ElementEventArgs e) { if (e.Element is Button) { button = e.Element as Button; button.Clicked += Button_Clicked; } } private void Button_Clicked(object sender, EventArgs e) { //Method 2 : Get SfAccordion reference using FindByName accordion = stackLayout.FindByName<SfAccordion>("accordion"); App.Current.MainPage.DisplayAlert("Information", "Accordion instance is obtained and Header Icon Position is changed", "Ok"); if (accordion.HeaderIconPosition == Syncfusion.XForms.Expander.IconPosition.Start) { accordion.HeaderIconPosition = Syncfusion.XForms.Expander.IconPosition.End; } else { accordion.HeaderIconPosition = Syncfusion.XForms.Expander.IconPosition.Start; } } protected override void OnDetachingFrom(StackLayout bindable) { button.Clicked -= Button_Clicked; stackLayout.ChildAdded -= StackLayout_ChildAdded; accordion = null; button = null; stackLayout = null; base.OnDetachingFrom(bindable); } } View sample in GitHub
SfPopupLayout can be added inside any layout. Only think we have to consider is popup layout platform render initialization if it is not root view of a page. Refer the link to know more about SfPopupLayout platform render initialization. <?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:d="http://xamarin.com/schemas/2014/forms/design" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:sfPopup="clr-namespace:Syncfusion.XForms.PopupLayout;assembly=Syncfusion.SfPopupLayout.XForms" mc:Ignorable="d" x:Class="Popup.MainPage"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="50"/> </Grid.RowDefinitions> <sfPopup:SfPopupLayout x:Name="popUpLayout" Grid.Row="0"> <sfPopup:SfPopupLayout.PopupView> <sfPopup:PopupView HeightRequest="230" HeaderTitle="Popup view" ShowFooter="False"> <sfPopup:PopupView.ContentTemplate> <DataTemplate> <StackLayout Padding="10"> <Label Text="SfPopupLayout is loaded inside xamarin forms Grid" WidthRequest="260" BackgroundColor="White" HorizontalOptions="FillAndExpand" /> </StackLayout> </DataTemplate> </sfPopup:PopupView.ContentTemplate> </sfPopup:PopupView> </sfPopup:SfPopupLayout.PopupView> <sfPopup:SfPopupLayout.Content> <StackLayout x:Name="mainLayout"> <Button x:Name="clickToShowPopup" Text="ClickToShowPopup" VerticalOptions="Start" HorizontalOptions="FillAndExpand" Clicked="Button_Clicked" /> </StackLayout> </sfPopup:SfPopupLayout.Content> </sfPopup:SfPopupLayout> </Grid> </ContentPage> View Sample in GitHub
You can show the SfCalendar using SfPopupLayout in Xamarin.Forms. C# Set HeaderHeight property of calendar as Zero to hide the default header. //// Initialize SfCalendar calendar = new SFCalendar(); calendar.MonthChanged += Calendar_MonthChanged; calendar.HeaderHeight = 0; calendar.MonthViewSettings.TodaySelectionBackgroundColor = UIColor.FromRGB(137, 82, 83); C# Initialize the PopupLayout and set the custom header content as the SfPopupLayout HeaderView. //// Initialize SfPopUpLayout popupLayout = new SfPopupLayout(); headerContent = new UILabel(); headerContent.TextAlignment = UITextAlignment.Center; headerContent.BackgroundColor = UIColor.FromRGB(137, 82, 83); headerContent.TextColor = UIColor.White; headerContent.Font = UIFont.FromName("Helvetica-Bold", 16); // Adding Header view of the SfPopupLayout popupLayout.PopupView.HeaderView = headerContent; popupLayout.PopupView.ShowCloseButton = false; C# Set Sfcalendar as ContentView of SfPopupLayout. // Adding Calendar as ContentView of the SfPopupLayout popupLayout.PopupView.ContentView = calendar; Output View Sample in GitHub
You can load the Xamarin.Forms SfListView inside popup using Rg.Plugin.Popup framework. Please follow the below steps to work with Rg plugin popup. Step 1: Install the Rg.Plugin.Popup Nuget package in the shared code project. Step 2: Initialize the popup plugin in each platform. In Android, initialize the plugin in MainActivity.cs page. Also, override the OnButtonPressed and invoke SendBackPressed for back button to work with the plugin. namespace ListViewXamarin.Droid { [Activity(Label = "ListViewXamarin", 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 in AppDelegate.cs page. namespace ListViewXamarin.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(); SfListViewRenderer.Init(); Rg.Plugins.Popup.Popup.Init(); LoadApplication(new App()); return base.FinishedLaunching(app, options); } } } In UWP, initialize the plugin in 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 command to show the popup using PopupNavigation services in ViewModel class and bind the command to button. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:ListViewXamarin" x:Class="ListViewXamarin.MyContentPage"> <Button Text="Show Popup" Command="{Binding ShowPopup}" HeightRequest="50" WidthRequest="150" HorizontalOptions="Center" VerticalOptions="Center" BindingContext="{local:FileManagerViewModel}"/> </ContentPage> public Command ShowPopup { get; set; } public ContactsViewModel() { ShowPopup = new Command(ShowPopupPage); } private async void ShowPopupPage(object obj) { await PopupNavigation.Instance.PushAsync(new MainPage()); } Step 4: Create new page and add SfListView inside PopupPage.Content. <pages:PopupPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup" xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms" x:Class="ListViewXamarin.ListViewPage"> <pages:PopupPage.BindingContext> <local:ContactsViewModel x:Name="vm"/> </pages:PopupPage.BindingContext> <pages:PopupPage.Content> <syncfusion:SfListView x:Name="listView" AutoFitMode="Height" ItemsSource="{Binding contactsinfo}" Margin="40"> <syncfusion:SfListView.ItemTemplate > <DataTemplate> <ViewCell> <ViewCell.View> <Grid x:Name="grid" RowSpacing="0"> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="1" /> </Grid.RowDefinitions> <Grid RowSpacing="0"> <Grid.ColumnDefinitions> <ColumnDefinition Width="70" /> <ColumnDefinition Width="*" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <Image Source="{Binding ContactImage}" HeightRequest="50" WidthRequest="50"/> <Grid Grid.Column="1"> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <Label Text="{Binding ContactName}"/> <Label Grid.Row="1" Grid.Column="0" Text="{Binding ContactNumber}"/> </Grid> <Grid Grid.Row="0" Grid.Column="2"> <Label Text="{Binding ContactType}"/> </Grid> </Grid> </Grid> </ViewCell.View> </ViewCell> </DataTemplate> </syncfusion:SfListView.ItemTemplate> </syncfusion:SfListView> </pages:PopupPage.Content> </pages:PopupPage> Output View sample in GitHub
In an application, the Flutter date range picker can be displayed in a dialog window by using the `onPressed` event of the button. Step 1: To host a date range picker in a pop-up, you can use the 'AlertDialog' window to achieve this add the date range picker inside the alert dialog and open the dialog on the 'onpressed' event of a button. Here, a material button is used. body: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.stretch, children: <Widget>[ MaterialButton( child: Container( child: _selectedDate ==null ? Text('Select a date'):Text(_selectedDate!), ), onPressed: () { showDialog( context: context, builder: (BuildContext context) { return AlertDialog( title: Text(''), content: Container( height: 350, child: Column( children: <Widget>[ getDateRangePicker(), MaterialButton( child: Text("OK"), onPressed: () { Navigator.pop(context); }, ) ], ), )); }); }, ), ], )); Widget getDateRangePicker() { return Container( height: 250, child: Card( child: SfDateRangePicker( view: DateRangePickerView.month, selectionMode: DateRangePickerSelectionMode.single, onSelectionChanged: selectionChanged, ))); } Step 2: Using the `onSelectionChanged` event, you can show the selected date of the picker. void selectionChanged(DateRangePickerSelectionChangedArgs args) { _selectedDate = DateFormat('dd MMMM, yyyy').format(args.value); SchedulerBinding.instance!.addPostFrameCallback((duration) { setState(() {}); }); } View sample in GitHub. Screenshots:
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
You can access the named SfListView defined inside DataTemplate of PopupLayout by using Behavior. XAML In PopupLayout’s PopupView, behaviour added to parent of ListView. <sfPopup:SfPopupLayout x:Name="popupLayout"> <sfPopup:SfPopupLayout.PopupView> <sfPopup:PopupView > <sfPopup:PopupView.ContentTemplate> <DataTemplate> <Grid> <Grid.Behaviors> <local:GridBehavior/> </Grid.Behaviors> <Button Text="Find ListView" x:Name="listviewButton" /> <sfListView:SfListView x:Name="listView" ItemsSource="{Binding Items}" > <sfListView:SfListView.ItemTemplate> <DataTemplate> … </DataTemplate> </sfListView:SfListView.ItemTemplate> </sfListView:SfListView> </Grid> </DataTemplate> </sfPopup:PopupView.ContentTemplate> </sfPopup:PopupView> </sfPopup:SfPopupLayout.PopupView> <sfPopup:SfPopupLayout.Content> <Grid> <Button x:Name="ShowPopup" Text="Bring Popup"/> </Grid> </sfPopup:SfPopupLayout.Content> </sfPopup:SfPopupLayout> C# In ChildAdded event you will get the instance of ListView. public class GridBehavior : Behavior<Grid> { Grid grid; SfListView listView; protected override void OnAttachedTo(BindableObject bindable) { grid = bindable as Grid; grid.ChildAdded += Grid_ChildAdded; } //Method 1 : Get SfListView reference using Grid.ChildAdded Event private void Grid_ChildAdded(object sender, ElementEventArgs e) { if (e.Element is SfListView) { listView = e.Element as SfListView; listView.RefreshView(); } } protected override void OnDetachingFrom(BindableObject bindable) { grid.ChildAdded -= Grid_ChildAdded; listView = null; grid = null; base.OnDetachingFrom(bindable); } } C# You can also get the ListView using FindByName method from Parent element. public class GridBehavior : Behavior<Grid> { Grid grid; SfListView listView; Button button; protected override void OnAttachedTo(BindableObject bindable) { grid = bindable as Grid; grid.ChildAdded += Grid_ChildAdded; } private void Grid_ChildAdded(object sender, ElementEventArgs e) { if (e.Element is Button) { button = e.Element as Button; button.Clicked += Button_Clicked; } } //Method 2 : Get SfListView reference using FindByName private void Button_Clicked(object sender, EventArgs e) { listView = grid.FindByName<SfListView>("listView"); App.Current.MainPage.DisplayAlert("Information", "ListView instance obtained", "Ok"); listView.ItemTapped += ListView_ItemTapped; } private void ListView_ItemTapped(object sender, Syncfusion.ListView.XForms.ItemTappedEventArgs e) { App.Current.MainPage.DisplayAlert("Information", "ListView ItemTapped", "Ok"); } protected override void OnDetachingFrom(BindableObject bindable) { button.Clicked -= Button_Clicked; grid.ChildAdded -= Grid_ChildAdded; listView.ItemTapped -= ListView_ItemTapped; listView = null; button = null; grid = null; base.OnDetachingFrom(bindable); } } View sample in GitHub
Essential JS 2 PDF Viewer The Syncfusion PDF Viewer in ASP.NET Core PDF (Essential JS 2) is a modern enterprise UI toolkit that has been built from the ground up to be lightweight, responsive, modular, and touch-friendly. It also available in other frameworks such as JavaScript, Angular, ASP.NET MVC, and React.Refer to the following UG link for getting started with the PdfViewerControl.https://ej2.syncfusion.com/aspnetcore/documentation/pdfviewer/getting-startedOpen PDF Viewer in Dialog ControlPDF viewer can be initialized and used insidethe Dialog control using the beforeOpen event.Refer to the following UG link for getting started with Dialog control.https://ej2.syncfusion.com/aspnetcore/documentation/dialog/getting-startedThe following code will initialize the Dialog control and the dialog content. HTML <div id="target" style="display:block;height:600px"> <button onclick="onBeforeOpen();">Open PDF Viewer</button> <ejs-dialog id="dialog" height="600px" created="onCreated" beforeOpen="onDialogBeforeOpen" visible="false" width="auto" isModal="true" target="#target" header="PDF Viewer" showCloseIcon="true"></ejs-dialog> <div id="dialog_content" style="display:none;border:1px solid #E0E0E0; width:100%;height:600px"> <div id="pdfViewer" style="height:750px"></div> </div> </div> Refer to the following code to initialize the PdfViewerControl in the beforeOpen event of the Dialog control. JavaScript function onBeforeOpen(args) { var dialog = document.getElementById("dialog").ej2_instances[0]; var filePath = "PDF Succinctly.pdf"; dialog.show(); if (pdfviewer) { //Load the document in PDF viewer pdfviewer.load(filePath, null); } else { //Intialize the PDF Viewer var viewer = new ej.pdfviewer.PdfViewer({ serviceUrl: '/api/PdfViewer', documentPath: filePath, }); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation); viewer.appendTo('#pdfViewer'); pdfviewer = document.getElementById("pdfViewer").ej2_instances[0]; } } Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/EJ2PdfViewer_Core320690343 In the preceding sample, clicking the Open PDF Viewer button will open the PdfViewerControl inside the dialog box. ConclusionI hope you enjoyed learning about how to open ASP.NET Core PDF Viewer inside the dialog box.You can refer to our ASP.NET Core PDF Viewer 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 ASP.NET Core PDF Viewer 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!
SfListView can display a pop-up like, SnackBar using SfPopupLayout at any desired position of the list by tapping, double tapping, or holding the item. xaml Here, ItemWidth sets the screen width for SfPopupLayout using the OnSizeAllocated method. C# SfPopupLayout is customized with label and button that displays when tapping the ListViewItem. C# Run the application. Sample Link : SnackBarSample
You can customize the content of the PopupView with buttons or load any desired view inside the PopupView using the ContentTemplate property of the PopupView. For example you can display the Login page inside the PopupLayout refer the below. XAML <sfPopup:SfPopupLayout x:Name="popupLayout"> <sfPopup:SfPopupLayout.PopupView> <sfPopup:PopupView AppearanceMode="TwoButton" AcceptButtonText="Login" DeclineButtonText="Cancel" ShowHeader="False" HeaderHeight="250" > <sfPopup:PopupView.ContentTemplate> <DataTemplate> <StackLayout> <Entry Text="UserName"></Entry> <Entry Text="Pasword"></Entry> </StackLayout> </DataTemplate> </sfPopup:PopupView.ContentTemplate> </sfPopup:PopupView> </sfPopup:SfPopupLayout.PopupView> <sfPopup:SfPopupLayout.Content> <StackLayout x:Name="mainLayout"> <Button x:Name="clickToShowPopup" Text="ClickToShowPopup" VerticalOptions="Start" HorizontalOptions="FillAndExpand" /> </StackLayout> </sfPopup:SfPopupLayout.Content> </sfPopup:SfPopupLayout> Sample
In our Xamarin.Forms Picker, SfPicker control has multi column support. Using this we can populate Hour, Minute and Format values providing as a collection to SfPicker control. We have demonstrated how to create CustomTimePicker using Picker control in the following steps. Step 1: We have created custom class named as “CustomTimePicker”. This class should inherit from SfPicker control. C#: public class CustomTimePicker : SfPicker { } Step 2: After that create four ObservableCollection with object type in CustomTimePicker class. Collection details: Time Collection, Minute Collection, Hour Collection and Format Collection. Time Collection->We have added all the three collections. Minute Collection -> We have added minutes from 0 to 59. Hour Collection -> We have added hours from 1 to 12. Format Collection -> We have added two format AM and PM. The below code demonstrates Time collection creation. C#: public class CustomTimePicker: SfPicker { // Time api is used to modify the Hour collection as per change in Time /// <summary> /// Time is the acutal DataSource for SfPicker control which will holds the collection of Hour ,Minute and Format /// </summary> public ObservableCollection<object> Time { get; set; } //Minute is the collection of minute numbers public ObservableCollection<object> Minute; //Hour is the collection of hour numbers public ObservableCollection<object> Hour; //Format is the collection of AM and PM public ObservableCollection<object> Format; public CustomTimePicker() { Time = new ObservableCollection<object>(); Hour = new ObservableCollection<object>(); Minute = new ObservableCollection<object>(); Format = new ObservableCollection<object>(); PopulateTimeCollection(); this.ItemsSource = Time; } private void PopulateTimeCollection() { //Populate Hour for (int i = 1; i <= 12; i++) { Hour.Add(i.ToString()); } //Populate Minute for (int j = 0; j < 60; j++) { if (j < 10) { Minute.Add("0" + j); } else Minute.Add(j.ToString()); } //Populate Format Format.Add("AM"); Format.Add("PM"); Time.Add(Hour); Time.Add(Minute); Time.Add(Format); } } Step 3: We have defined each column headers “Hour”, “Minute” and “Format” using ColumnHeaderText property of SfPicker control. The below code demonstrates how to define header for each column of SfPicker control. C#: public class CustomTimePicker: SfPicker { /// <summary> /// Header api is holds the column name for every column in time picker /// </summary> public ObservableCollection<string> Headers { get; set; } public CustomTimePicker() { Headers = new ObservableCollection<string>(); if (Device.OS == TargetPlatform.Android) { Headers.Add("HOUR"); Headers.Add("MINUTE"); Headers.Add("FORMAT"); } else { Headers.Add("Hour"); Headers.Add("Minute"); Headers.Add("Format"); } // Column header text collection this.ColumnHeaderText = Headers; } } Step 4: Finally we have enabled SfPicker header, Column header and footer using ShowHeader , ShowFooter and ShowColumnHeader properties. C#: public CustomTimePicker() { //Enable Footer of SfPicker ShowFooter = true; //Enable Header of SfPicker ShowHeader = true; //Enable Column Header of SfPicker ShowColumnHeader = true; } Step 5: We have added the CustomTimePicker control in main XAML page. Please refer the below code snippets. XAML: <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:TimePickerSample" x:Class="TimePickerSample.MainPage" xmlns:picker="clr-namespace:Syncfusion.SfPicker.XForms;assembly=Syncfusion.SfPicker.XForms"> <!--Assign the TimePickerViewModel to BindingContext of Page--> <ContentPage.BindingContext> <local:TimePickerViewModel /> </ContentPage.BindingContext> <Grid> <Button Clicked="Button_Clicked" HeightRequest="30" HorizontalOptions="Center" Text="Show TimePicker" VerticalOptions="Center" WidthRequest="200" /> <!--Initialize the CustomTimePicker--> <local:CustomTimePicker x:Name="date" ColumnHeaderHeight="40" HorizontalOptions="Center" VerticalOptions="Center" PickerHeight="400" PickerMode="Dialog" PickerWidth="300" SelectedItem="{Binding SelectedTime,Mode=TwoWay}"/> </Grid> </ContentPage> C#: public partial class MainPage : ContentPage { public MainPage() { InitializeComponent(); } private void Button_Clicked(object sender, EventArgs e) { date.IsOpen = !date.IsOpen; } } Please find the below screen shot using the above code We have attached TimePicker sample for your reference. Please download the sample from the following link.Sample link: TimePicker ConclusionI hope you enjoyed learning about how to achieve TimePicker using SfPicker in Xamarin.Forms.You can refer to our Xamarin.Forms Picker feature tour page to know about its other groundbreaking feature representations. You can also explore our Xamarin.Forms Picker documentation 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!
Avoid the selection on the grid By default, the record can be selected by using mouse left click or right click. In order to show the PopupControlContainer on right click without clearing the previous selections when the ListBoxSelectionMode is enabled in WinForms GridGrouping Control, set the SelectCellsMouseButtonMask property as MouseButtons.Left. C# //To avoid the selection when right click on the grid this.gridGroupingControl1.TableModel.Options.SelectCellsMouseButtonsMask = MouseButtons.Left; VB 'To avoid the selection when right click on the grid Me.gridGroupingControl1.TableModel.Options.SelectCellsMouseButtonsMask = MouseButtons.Left Screenshot Samples: C#: Showing_PopupContainer VB: Showing_PopupContainer Conclusion I hope you enjoyed learning about how to show PopupControlContainer on right click without clearing the selections in WinForms GridGroupingControl. You can refer to our WinForms GridGroupingControl’s feature tour page to know about its other groundbreaking feature representations. You can also explore our WinForms GridGroupingControl documentation to understand how to present and manipulate data. For current customers, you can check out our WinForms 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 WinForms GridGroupingControl and other WinForms components. If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
To disable tool-tip “invalid” in SfMaskedEdit, customize the template of SfMaskedEdit control. This can be achieved by removing the style of Error_Popup from SfMaskedEdit template. The same has been explained in the following code. Output:
Currently, there is no support to include pop-up annotation in Windows Forms using the PdfViewerControl. However, the following workaround has the support for the same action in Windows Forms. C# //Create a new popup annotation PdfPopupAnnotation popupAnnotation = new PdfPopupAnnotation(bounds, textBox.Text); // Set the location popupAnnotation.Location =new System.Drawing.PointF(Point.X, Point.Y); // Set the properties popupAnnotation.Border.Width = 4; //Set the pdf popup icon popupAnnotation.Icon = PdfPopupIcon.Note; //Add this annotation to a new page ldoc.Pages[currentPageIndex].Annotations.Add(popupAnnotation); Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/PdfViewerPopup766861027 Steps to be followed: Drag the text box control, which is available at the left to the displayed document at the required position. Using the text box, you can enter and edit the text and also move and delete the text box control. To save the annotations in the document, go to File, and click Save. It will save the text as PopupAnnotation on the saved PDF file in the Output folder. To open a new document, go to File, and click Save.
