Class SfPopupLayout
Displays an alert message with customizable buttons or load any desired view inside the pop-up.
Inheritance
Implements
Namespace: Syncfusion.XForms.PopupLayout
Assembly: Syncfusion.SfPopupLayout.XForms.dll
Syntax
public class SfPopupLayout : Layout<View>, IDisposable, IParentThemeElement, IThemeElement
Constructors
SfPopupLayout()
Initializes a new instance of the SfPopupLayout class.
Declaration
public SfPopupLayout()
Fields
AbsoluteXProperty
Identifies the AbsoluteX bindable property.
Declaration
public static readonly BindableProperty AbsoluteXProperty
Field Value
Type |
---|
Xamarin.Forms.BindableProperty |
AbsoluteYProperty
Identifies the AbsoluteY bindable property.
Declaration
public static readonly BindableProperty AbsoluteYProperty
Field Value
Type |
---|
Xamarin.Forms.BindableProperty |
ClosePopupOnBackButtonPressedProperty
Identifies the ClosePopupOnBackButtonPressed Xamarin.Forms.BindableProperty.
Declaration
public static readonly BindableProperty ClosePopupOnBackButtonPressedProperty
Field Value
Type |
---|
Xamarin.Forms.BindableProperty |
ContentProperty
Identifies the Content bindable property.
Declaration
public static readonly BindableProperty ContentProperty
Field Value
Type |
---|
Xamarin.Forms.BindableProperty |
IsOpenProperty
Identifies the IsOpen bindable property.
Declaration
public static readonly BindableProperty IsOpenProperty
Field Value
Type |
---|
Xamarin.Forms.BindableProperty |
OverlayModeProperty
Identifies the OverlayMode Xamarin.Forms.BindableProperty.
Declaration
public static readonly BindableProperty OverlayModeProperty
Field Value
Type |
---|
Xamarin.Forms.BindableProperty |
PopupViewProperty
Identifies the PopupView bindable property.
Declaration
public static readonly BindableProperty PopupViewProperty
Field Value
Type |
---|
Xamarin.Forms.BindableProperty |
RelativePositionProperty
Identifies the RelativePosition bindable property.
Declaration
public static readonly BindableProperty RelativePositionProperty
Field Value
Type |
---|
Xamarin.Forms.BindableProperty |
RelativeViewProperty
Identifies the RelativeView bindable property.
Declaration
public static readonly BindableProperty RelativeViewProperty
Field Value
Type |
---|
Xamarin.Forms.BindableProperty |
ShowOverlayAlwaysProperty
Identifies the ShowOverlay bindable property.
Declaration
public static readonly BindableProperty ShowOverlayAlwaysProperty
Field Value
Type |
---|
Xamarin.Forms.BindableProperty |
StaysOpenProperty
Identifies the StaysOpen bindable property.
Declaration
public static readonly BindableProperty StaysOpenProperty
Field Value
Type |
---|
Xamarin.Forms.BindableProperty |
Properties
AbsoluteX
Gets or sets the absolute x-point to display a pop-up when positioning it relatively to the specified RelativeView based on the RelativePosition. The pop-up will be displayed based on this property value only when relatively displaying it by using the RelativeView property.
Declaration
public int AbsoluteX { get; set; }
Property Value
Type | Description |
---|---|
System.Int32 | The absolute X-point to display the popup when positioning the popup relatively to the specified RelativeView based on the RelativePosition. |
Examples
The following code example demonstrates how to set Absolute X position for the SfPopupLayout control.
using Syncfusion.XForms.PopupLayout;
using System;
using Xamarin.Forms;
namespace PopupGettingStarted
{
public partial class MainPage : ContentPage
{
SfPopupLayout popupLayout;
public MainPage()
{
InitializeComponent();
popupLayout = new SfPopupLayout();
var layout = new StackLayout();
var clickToShowPopup = new Button()
{
Text = "ClickToShowPopup",
VerticalOptions = LayoutOptions.Start,
HorizontalOptions = LayoutOptions.FillAndExpand
};
layout.Children.Add(clickToShowPopup);
Content = popupLayout;
popupLayout.Content = layout;
clickToShowPopup.Clicked += ClickToShowPopup_Clicked;
popupLayout.RelativeView = clickToShowPopup;
popupLayout.RelativePosition = RelativePosition.AlignBottom;
popupLayout.AbsoluteX = 50;
}
private void ClickToShowPopup_Clicked(object sender, EventArgs e)
{
popupLayout.Show();
}
}
}
<?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:local="clr-namespace:PopupGettingStarted"
x:Class="PopupGettingStarted.MainPage"
xmlns:sfPopup="clr-namespace:Syncfusion.XForms.PopupLayout;assembly=Syncfusion.SfPopupLayout.XForms">
<sfPopup:SfPopupLayout x:Name="popupLayout" RelativePosition="AlignBottom" AbsoluteX="50">
<sfPopup:SfPopupLayout.Content>
<StackLayout x:Name="mainLayout" VerticalOptions="StartAndExpand" HorizontalOptions="Start">
<StackLayout VerticalOptions = "StartAndExpand" HorizontalOptions="StartAndExpand">
<Button x:Name="clickToShowPopup" Text="ClickToShowPopup" TextColor="White"
HeightRequest="60" VerticalOptions="Start" Margin="50,0,0,0" HorizontalOptions="StartAndExpand" BackgroundColor="Blue"
Clicked="ClickToShowPopup_Clicked">
</Button>
</StackLayout>
</StackLayout>
</sfPopup:SfPopupLayout.Content>
<sfPopup:SfPopupLayout.RelativeView>
<x:Reference Name="clickToShowPopup"/>
</sfPopup:SfPopupLayout.RelativeView>
</sfPopup:SfPopupLayout>
</ContentPage>
AbsoluteY
Gets or sets the absolute y-point to display a pop-up when positioning it relatively to the specified RelativeView based on the RelativePosition. The pop-up will be displayed based on this property value only when relatively displaying it by using the RelativeView property.
Declaration
public int AbsoluteY { get; set; }
Property Value
Type | Description |
---|---|
System.Int32 | The absolute Y-point to display the popup when positioning the popup relatively to the specified RelativeView based on the RelativePosition. |
Examples
The following code example demonstrates how to set Absolute Y position for the SfPopupLayout control.
using Syncfusion.XForms.PopupLayout;
using System;
using Xamarin.Forms;
namespace PopupGettingStarted
{
public partial class MainPage : ContentPage
{
SfPopupLayout popupLayout;
public MainPage()
{
InitializeComponent();
popupLayout = new SfPopupLayout();
var layout = new StackLayout();
var clickToShowPopup = new Button()
{
Text = "ClickToShowPopup",
VerticalOptions = LayoutOptions.Start,
HorizontalOptions = LayoutOptions.FillAndExpand
};
layout.Children.Add(clickToShowPopup);
Content = popupLayout;
popupLayout.Content = layout;
clickToShowPopup.Clicked += ClickToShowPopup_Clicked;
popupLayout.RelativeView = clickToShowPopup;
popupLayout.RelativePosition = RelativePosition.AlignBottom;
popupLayout.AbsoluteY = 100;
}
private void ClickToShowPopup_Clicked(object sender, EventArgs e)
{
popupLayout.Show();
}
}
}
<?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:local="clr-namespace:PopupGettingStarted"
x:Class="PopupGettingStarted.MainPage"
xmlns:sfPopup="clr-namespace:Syncfusion.XForms.PopupLayout;assembly=Syncfusion.SfPopupLayout.XForms">
<sfPopup:SfPopupLayout x:Name="popupLayout" RelativePosition="AlignBottom" AbsoluteY="100">
<sfPopup:SfPopupLayout.Content>
<StackLayout x:Name="mainLayout" VerticalOptions="StartAndExpand" HorizontalOptions="Start">
<StackLayout VerticalOptions = "StartAndExpand" HorizontalOptions="StartAndExpand">
<Button x:Name="clickToShowPopup" Text="ClickToShowPopup" TextColor="White"
HeightRequest="60" VerticalOptions="Start" Margin="50,0,0,0" HorizontalOptions="StartAndExpand" BackgroundColor="Blue"
Clicked="ClickToShowPopup_Clicked"/>
</StackLayout>
</StackLayout>
</sfPopup:SfPopupLayout.Content>
<sfPopup:SfPopupLayout.RelativeView>
<x:Reference Name="clickToShowPopup"/>
</sfPopup:SfPopupLayout.RelativeView>
</sfPopup:SfPopupLayout>
</ContentPage>
ClosePopupOnBackButtonPressed
Gets or sets a value indicating whether the PopupView should be closed, when interacting with the back button in Android platform.
Declaration
public bool ClosePopupOnBackButtonPressed { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | The value indicating whether the PopupView should be closed, when interacting with the back button in Android platform. |
Remarks
The PopupView will be closed based on this value while interacting with the back button, Default value is true and applicable only for Android platform.
Examples
The following code example demonstrates how to set ClosePopupOnBackButtonPressed property for the SfPopupLayout control.
using Syncfusion.XForms.PopupLayout;
using System;
using Xamarin.Forms;
namespace SfPopupGettingStarted
{
public partial class MainPage : ContentPage
{
SfPopupLayout popupLayout;
public MainPage()
{
InitializeComponent();
popupLayout = new SfPopupLayout();
var layout = new StackLayout();
var clickToShowPopup = new Button()
{
Text = "ClickToShowPopup",
VerticalOptions = LayoutOptions.Start,
HorizontalOptions = LayoutOptions.FillAndExpand
};
layout.Children.Add(clickToShowPopup);
Content = popupLayout;
popupLayout.Content = layout;
clickToShowPopup.Clicked += ClickToShowPopup_Clicked;
popupLayout.ClosePopupOnBackButtonPressed = false;
}
private void ClickToShowPopup_Clicked(object sender, EventArgs e)
{
popupLayout.Show();
}
}
}
<?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:local="clr-namespace:SfPopupGettingStarted"
xmlns:sfPopup="clr-namespace:Syncfusion.XForms.PopupLayout;assembly=Syncfusion.SfPopupLayout.XForms"
x:Class="SfPopupGettingStarted.MainPage">
<sfPopup:SfPopupLayout x:Name="popupLayout" ClosePopupOnBackButtonPressed="False">
<sfPopup:SfPopupLayout.Content>
<StackLayout x:Name="layout">
<Button x:Name="clickToShowPopup" Text="ClickToShowPopup" VerticalOptions="Start" HorizontalOptions="FillAndExpand" Clicked="ClickToShowPopup_Clicked"/>
</StackLayout>
</sfPopup:SfPopupLayout.Content>
</sfPopup:SfPopupLayout>
</ContentPage>
Content
Gets or sets the content to be hosted in the pop-up.
Declaration
public View Content { get; set; }
Property Value
Type | Description |
---|---|
Xamarin.Forms.View | The content of the SfPopupLayout. |
Remarks
The PopupView will be hosted inside the view which is set as the Content.
Examples
The following code example demonstrates how to set content for the SfPopupLayout control.
using Syncfusion.XForms.PopupLayout;
using System;
using Xamarin.Forms;
namespace GettingStarted
{
public partial class MainPage : ContentPage
{
SfPopupLayout popupLayout;
public MainPage()
{
InitializeComponent();
popupLayout = new SfPopupLayout();
var layout = new StackLayout();
var clickToShowPopup = new Button()
{
Text = "ClickToShowPopup",
VerticalOptions = LayoutOptions.Start,
HorizontalOptions = LayoutOptions.FillAndExpand
};
layout.Children.Add(clickToShowPopup);
Content = popupLayout;
popupLayout.Content = layout;
clickToShowPopup.Clicked += ClickToShowPopup_Clicked;
}
private void ClickToShowPopup_Clicked(object sender, EventArgs e)
{
popupLayout.Show();
}
}
}
<?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:local="clr-namespace:GettingStarted"
x:Class="GettingStarted.MainPage"
Padding="0,40,0,0"
xmlns:sfPopup="clr-namespace:Syncfusion.XForms.PopupLayout;assembly=Syncfusion.SfPopupLayout.XForms">
<sfPopup:SfPopupLayout x:Name="popupLayout">
<sfPopup:SfPopupLayout.Content>
<StackLayout x:Name="layout">
<Button x:Name="clickToShowPopup" Text="ClickToShowPopup" VerticalOptions="Start"
HorizontalOptions="FillAndExpand" Clicked="ClickToShowPopup_Clicked" />
</StackLayout>
</sfPopup:SfPopupLayout.Content>
</sfPopup:SfPopupLayout>
</ContentPage>
IsOpen
Gets or sets a value indicating whether the PopupView is open or not.
Declaration
public bool IsOpen { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | The value indicating whether the PopupView is open or not. |
Remarks
The PopupView will be opened and closed based on this value.
Examples
The following code example demonstrates how to set IsOpen property for the SfPopupLayout control.
using Syncfusion.XForms.PopupLayout;
using System;
using Xamarin.Forms;
namespace PopupGettingStarted
{
public partial class MainPage : ContentPage
{
SfPopupLayout popupLayout;
public MainPage()
{
InitializeComponent();
popupLayout = new SfPopupLayout();
var layout = new StackLayout();
var clickToShowPopup = new Button()
{
Text = "ClickToShowPopup",
VerticalOptions = LayoutOptions.Start,
HorizontalOptions = LayoutOptions.FillAndExpand
};
layout.Children.Add(clickToShowPopup);
Content = popupLayout;
popupLayout.Content = layout;
clickToShowPopup.Clicked += ClickToShowPopup_Clicked;
}
private void ClickToShowPopup_Clicked(object sender, EventArgs e)
{
popupLayout.IsOpen = false;
}
}
}
<?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:local="clr-namespace:PopupGettingStarted"
x:Class="PopupGettingStarted.MainPage"
xmlns:sfPopup="clr-namespace:Syncfusion.XForms.PopupLayout;assembly=Syncfusion.SfPopupLayout.XForms">
<ContentPage.BindingContext>
<local:ViewModel x:Name="viewModel" />
</ContentPage.BindingContext>
<sfPopup:SfPopupLayout x:Name="popupLayout" IsOpen="{Binding PopupStatus">
<sfPopup:SfPopupLayout.Content>
<StackLayout x:Name="mainLayout" VerticalOptions="StartAndExpand" HorizontalOptions="Start">
<StackLayout VerticalOptions = "StartAndExpand" HorizontalOptions="StartAndExpand">
<Button x:Name="clickToShowPopup" Text="ClickToShowPopup" TextColor="White"
HeightRequest="60" VerticalOptions="Start" Margin="50,0,0,0" HorizontalOptions="StartAndExpand" BackgroundColor="Blue"
Clicked="ClickToShowPopup_Clicked"/>
</StackLayout>
</StackLayout>
</sfPopup:SfPopupLayout.Content>
</sfPopup:SfPopupLayout>
</ContentPage>
OverlayMode
Gets or sets a value indicating whether overlay should be transparent or blurred ///
Declaration
public OverlayMode OverlayMode { get; set; }
Property Value
Type | Description |
---|---|
OverlayMode | OverlayMode.Blur If the overlay should be blurred otherwise OverlayMode.Transparent. The default value is OverlayMode.Transparent. |
Remarks
Examples
The following code example demonstrates how to apply blur effect to the overlay in SfPopupLayout control.
using Syncfusion.XForms.PopupLayout;
using System;
using Xamarin.Forms;
namespace GettingStarted
{
public partial class MainPage : ContentPage
{
SfPopupLayout popupLayout;
public MainPage()
{
InitializeComponent();
popupLayout = new SfPopupLayout();
popupLayout.PopupView.PopupStyle.OverlayOpacity = 0;
popupLayout.OverlayMode = OverlayMode.Blur;
var layout = new StackLayout();
var clickToShowPopup = new Button()
{
Text = "ClickToShowPopup",
VerticalOptions = LayoutOptions.Start,
HorizontalOptions = LayoutOptions.FillAndExpand
};
layout.Children.Add(clickToShowPopup);
Content = popupLayout;
popupLayout.Content = layout;
clickToShowPopup.Clicked += ClickToShowPopup_Clicked;
}
private void ClickToShowPopup_Clicked(object sender, EventArgs e)
{
popupLayout.Show();
}
}
}
<?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:local="clr-namespace:GettingStarted"
x:Class="GettingStarted.MainPage"
Padding="0,40,0,0"
xmlns:sfPopup="clr-namespace:Syncfusion.XForms.PopupLayout;assembly=Syncfusion.SfPopupLayout.XForms">
<sfPopup:SfPopupLayout x:Name="popupLayout" OverlayMode="Blur">
<sfPopup:SfPopupLayout.PopupView>
<sfPopup:PopupView>
<sfPopup:PopupView.PopupStyle>
<sfPopup:PopupStyle HeaderBackgroundColor="DimGray"
OverlayOpacity="0"/>
</sfPopup:PopupView.PopupStyle>
</sfPopup:PopupView>
</sfPopup:SfPopupLayout.PopupView>
<sfPopup:SfPopupLayout.Content>
<StackLayout x:Name="layout">
<Button x:Name="clickToShowPopup" Text="ClickToShowPopup" VerticalOptions="Start"
HorizontalOptions="FillAndExpand" Clicked="ClickToShowPopup_Clicked" />
</StackLayout>
</sfPopup:SfPopupLayout.Content>
</sfPopup:SfPopupLayout>
</ContentPage>
PopupView
Gets the pop-up view of SfPopupLayout that will be displayed when setting the IsOpen property to true
.
Declaration
public PopupView PopupView { get; set; }
Property Value
Type | Description |
---|---|
PopupView | The popup view of the SfPopupLayout that will be displayed when setting the IsOpen property as |
RelativePosition
Gets or sets the relative position, where the pop-up should be displayed relatively to RelativeView. The relative position can also be absolutely adjusted using the AbsoluteX and AbsoluteY properties.
Declaration
public RelativePosition RelativePosition { get; set; }
Property Value
Type | Description |
---|---|
RelativePosition | The relative position, where popup should be displayed relatively to RelativeView. |
Examples
The following code example demonstrates how to set Relative Position for the SfPopupLayout control.
using Syncfusion.XForms.PopupLayout;
using System;
using Xamarin.Forms;
namespace PopupGettingStarted
{
public partial class MainPage : ContentPage
{
SfPopupLayout popupLayout;
public MainPage()
{
InitializeComponent();
popupLayout = new SfPopupLayout();
var layout = new StackLayout();
var clickToShowPopup = new Button()
{
Text = "ClickToShowPopup",
VerticalOptions = LayoutOptions.Start,
HorizontalOptions = LayoutOptions.FillAndExpand
};
layout.Children.Add(clickToShowPopup);
Content = popupLayout;
popupLayout.Content = layout;
clickToShowPopup.Clicked += ClickToShowPopup_Clicked;
popupLayout.RelativeView = clickToShowPopup;
popupLayout.RelativePosition = RelativePosition.AlignBottom;
}
private void ClickToShowPopup_Clicked(object sender, EventArgs e)
{
popupLayout.Show();
}
}
}
<?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:local="clr-namespace:PopupGettingStarted"
x:Class="PopupGettingStarted.MainPage"
xmlns:sfPopup="clr-namespace:Syncfusion.XForms.PopupLayout;assembly=Syncfusion.SfPopupLayout.XForms">
<sfPopup:SfPopupLayout x:Name="popupLayout" RelativePosition="AlignBottom>
<sfPopup:SfPopupLayout.Content>
<StackLayout x:Name="mainLayout" VerticalOptions="StartAndExpand" HorizontalOptions="Start">
<StackLayout VerticalOptions = "StartAndExpand" HorizontalOptions="StartAndExpand">
<Button x:Name="clickToShowPopup" Text="ClickToShowPopup" TextColor="White"
HeightRequest="60" VerticalOptions="Start" Margin="50,0,0,0" HorizontalOptions="StartAndExpand" BackgroundColor="Blue"
Clicked="ClickToShowPopup_Clicked">
</Button>
</StackLayout>
</StackLayout>
</sfPopup:SfPopupLayout.Content>
<sfPopup:SfPopupLayout.RelativeView>
<x:Reference Name="clickToShowPopup"/>
</sfPopup:SfPopupLayout.RelativeView>
</sfPopup:SfPopupLayout>
</ContentPage>
RelativeView
Gets or sets the view relative to which the popup should be displayed based on the RelativePosition. The relative position can also be absolutely adjusted using the AbsoluteX and AbsoluteY properties.
Declaration
public View RelativeView { get; set; }
Property Value
Type | Description |
---|---|
Xamarin.Forms.View | The view relative to which popup should be displayed based on the RelativePosition. |
Examples
The following code example demonstrates how to set relative view for the SfPopupLayout control.
using Syncfusion.XForms.PopupLayout;
using System;
using Xamarin.Forms;
namespace PopupGettingStarted
{
public partial class MainPage : ContentPage
{
SfPopupLayout popupLayout;
public MainPage()
{
InitializeComponent();
popupLayout = new SfPopupLayout();
var layout = new StackLayout();
var clickToShowPopup = new Button()
{
Text = "ClickToShowPopup",
VerticalOptions = LayoutOptions.Start,
HorizontalOptions = LayoutOptions.FillAndExpand
};
layout.Children.Add(clickToShowPopup);
Content = popupLayout;
popupLayout.Content = layout;
clickToShowPopup.Clicked += ClickToShowPopup_Clicked;
popupLayout.RelativeView = clickToShowPopup;
}
private void ClickToShowPopup_Clicked(object sender, EventArgs e)
{
popupLayout.Show();
}
}
}
<?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:local="clr-namespace:PopupGettingStarted"
x:Class="PopupGettingStarted.MainPage"
xmlns:sfPopup="clr-namespace:Syncfusion.XForms.PopupLayout;assembly=Syncfusion.SfPopupLayout.XForms">
<sfPopup:SfPopupLayout x:Name="popupLayout">
<sfPopup:SfPopupLayout.Content>
<StackLayout x:Name="mainLayout" VerticalOptions="StartAndExpand" HorizontalOptions="Start">
<StackLayout VerticalOptions = "StartAndExpand" HorizontalOptions="StartAndExpand">
<Button x:Name="clickToShowPopup" Text="ClickToShowPopup" TextColor="White"
HeightRequest="60" VerticalOptions="Start" Margin="50,0,0,0" HorizontalOptions="StartAndExpand" BackgroundColor="Blue"
Clicked="ClickToShowPopup_Clicked"/>
</StackLayout>
</StackLayout>
</sfPopup:SfPopupLayout.Content>
<sfPopup:SfPopupLayout.RelativeView>
<x:Reference Name="clickToShowPopup"/>
</sfPopup:SfPopupLayout.RelativeView>
</sfPopup:SfPopupLayout>
</ContentPage>
ShowOverlayAlways
Gets or Sets a value indicating whether an overlay can be shown around the PopupView. Default value is false.
Declaration
public bool ShowOverlayAlways { get; set; }
Property Value
Type |
---|
System.Boolean |
Examples
The following code example demonstrates how to set ShowOverlayAlways property for the SfPopupLayout control.
using Syncfusion.XForms.PopupLayout;
using System;
using Xamarin.Forms;
namespace PopupGettingStarted
{
public partial class MainPage : ContentPage
{
SfPopupLayout popupLayout;
public MainPage()
{
InitializeComponent();
popupLayout = new SfPopupLayout();
var layout = new StackLayout();
var clickToShowPopup = new Button()
{
Text = "ClickToShowPopup",
VerticalOptions = LayoutOptions.Start,
HorizontalOptions = LayoutOptions.FillAndExpand
};
layout.Children.Add(clickToShowPopup);
Content = popupLayout;
popupLayout.Content = layout;
clickToShowPopup.Clicked += ClickToShowPopup_Clicked;
popupLayout.ShowOverlayAlways = true;
}
private void ClickToShowPopup_Clicked(object sender, EventArgs e)
{
popupLayout.Show();
}
}
}
<?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:local="clr-namespace:PopupGettingStarted"
x:Class="PopupGettingStarted.MainPage"
xmlns:sfPopup="clr-namespace:Syncfusion.XForms.PopupLayout;assembly=Syncfusion.SfPopupLayout.XForms">
<sfPopup:SfPopupLayout x:Name="popupLayout" ShowOverlayAlways="True">
<sfPopup:SfPopupLayout.Content>
<StackLayout x:Name="mainLayout" VerticalOptions="StartAndExpand" HorizontalOptions="Start">
<StackLayout VerticalOptions = "StartAndExpand" HorizontalOptions="StartAndExpand">
<Button x:Name="clickToShowPopup" Text="ClickToShowPopup" TextColor="White"
HeightRequest="60" VerticalOptions="Start" Margin="50,0,0,0" HorizontalOptions="StartAndExpand" BackgroundColor="Blue"
Clicked="ClickToShowPopup_Clicked">
</Button>
</StackLayout>
</StackLayout>
</sfPopup:SfPopupLayout.Content>
</sfPopup:SfPopupLayout>
</ContentPage>
StaysOpen
Gets or sets a value indicating whether the PopupView should be opened, when interacting outside its boundary area.
Declaration
public bool StaysOpen { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | The value indicating whether the PopupView should stay open, when the interaction is made outside its boundary area. |
Examples
The following code example demonstrates how to set StaysOpen property for the SfPopupLayout control.
using Syncfusion.XForms.PopupLayout;
using System;
using Xamarin.Forms;
namespace SfPopupGettingStarted
{
public partial class MainPage : ContentPage
{
SfPopupLayout popupLayout;
public MainPage()
{
InitializeComponent();
popupLayout = new SfPopupLayout();
var layout = new StackLayout();
var clickToShowPopup = new Button()
{
Text = "ClickToShowPopup",
VerticalOptions = LayoutOptions.Start,
HorizontalOptions = LayoutOptions.FillAndExpand
};
layout.Children.Add(clickToShowPopup);
Content = popupLayout;
popupLayout.Content = layout;
clickToShowPopup.Clicked += ClickToShowPopup_Clicked;
popupLayout.StaysOpen = true;
}
private void ClickToShowPopup_Clicked(object sender, EventArgs e)
{
popupLayout.Show();
}
}
}
<?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:local="clr-namespace:SfPopupGettingStarted"
xmlns:sfPopup="clr-namespace:Syncfusion.XForms.PopupLayout;assembly=Syncfusion.SfPopupLayout.XForms"
x:Class="SfPopupGettingStarted.MainPage">
<sfPopup:SfPopupLayout x:Name="popupLayout" StaysOpen="True" >
<sfPopup:SfPopupLayout.Content>
<StackLayout x:Name="layout">
<Button x:Name="clickToShowPopup" Text="ClickToShowPopup" VerticalOptions="Start" HorizontalOptions="FillAndExpand" Clicked="ClickToShowPopup_Clicked"/>
</StackLayout>
</sfPopup:SfPopupLayout.Content>
</sfPopup:SfPopupLayout>
</ContentPage>
Methods
Dismiss()
Dismisses the pop-up from the view.
Declaration
public void Dismiss()
Remarks
This parameter is used, when the rootView is not SfPopupLayout. If it is true, the ParentView will be reset in the CotentView, else the rootView will be maintained as SfPopupLayout.
Dispose()
Performs final clean up before it is released from memory.
Declaration
public void Dispose()
Dispose(Boolean)
Releases the unmanaged resources used by the component and optionally releases the managed resources.
Declaration
protected virtual void Dispose(bool disposing)
Parameters
Type | Name | Description |
---|---|---|
System.Boolean | disposing | if true - release both managed and unmanaged resources; if false - release only unmanaged resources. |
LayoutChildren(Double, Double, Double, Double)
Positions and sizes the children of a layout.
Declaration
protected override void LayoutChildren(double x, double y, double width, double height)
Parameters
Type | Name | Description |
---|---|---|
System.Double | x | A value representing the x coordinate of the child region bounding box. |
System.Double | y | A value representing the y coordinate of the child region bounding box. |
System.Double | width | A value representing the width of the child region bounding box. |
System.Double | height | A value representing the height of the child region bounding box. |
OnBindingContextChanged()
Executes an action by overriding this method when the BindingContext gets changed.
Declaration
protected override void OnBindingContextChanged()
Show(Boolean)
Displays a pop-up in the view.
Declaration
public void Show(bool isFullScreen = false)
Parameters
Type | Name | Description |
---|---|---|
System.Boolean | isFullScreen | Determines whether to display the popup in full width and height of the screen. |
Show(Double, Double)
Displays a pop-up at the given x and y points.
Declaration
public void Show(double xPosition, double yPosition)
Parameters
Type | Name | Description |
---|---|---|
System.Double | xPosition | The x-point at which the popup should be displayed. |
System.Double | yPosition | The y-point at which the popup should be displayed. |
ShowAtTouchPoint()
Displays a pop-up at the touch point.
Declaration
public void ShowAtTouchPoint()
ShowRelativeToView(View, RelativePosition, Double, Double)
Displays a pop-up relative to the given view.
Declaration
public void ShowRelativeToView(View relativeView, RelativePosition relativePosition, double absoluteX = NaN, double absoluteY = NaN)
Parameters
Type | Name | Description |
---|---|---|
Xamarin.Forms.View | relativeView | The view relative to which popup should be displayed. |
RelativePosition | relativePosition | The position, where popup should be displayed, relative to the given view. |
System.Double | absoluteX | The absolute X-point from relative view. |
System.Double | absoluteY | The absolute Y-point from relative view. |
Events
Closed
Gets fired whenever the PopupView is dismissed from the view.
Declaration
public event EventHandler Closed
Event Type
Type |
---|
System.EventHandler |
Remarks
This event fires whenever the IsOpen property is set as false
.
Closing
This event will be fired whenever the PopupView is closing in the view. Occurring of this event can be cancelled based on conditions.
Declaration
public event EventHandler<CancelEventArgs> Closing
Event Type
Type |
---|
System.EventHandler<CancelEventArgs> |
Opened
Gets fired whenever the PopupView is shown in the view.
Declaration
public event EventHandler Opened
Event Type
Type |
---|
System.EventHandler |
Remarks
This event fires whenever the IsOpen property is set as true
.
Opening
Gets fired whenever the PopupView is opening in the view. Occurrence can be cancelled based on conditions.
Declaration
public event EventHandler<CancelEventArgs> Opening
Event Type
Type |
---|
System.EventHandler<CancelEventArgs> |
PopupLayoutLoaded
This event will be fired whenever the Syncfusion.XForms.PopupLayout has completed loading and is added to the visual tree.
Declaration
public event EventHandler PopupLayoutLoaded
Event Type
Type |
---|
System.EventHandler |