Popup size in .NET MAUI Popup (SfPopup)
15 Jul 202620 minutes to read
The SfPopup allows you to display the popup at any desired width and height by setting the SfPopup.WidthRequest and SfPopup.HeightRequest. The popup size can also be changed by setting the width request and height request to the views loaded inside the templates of the popup.
In the following code snippet, the popup is loaded with a width and height of 320 pixels, where the WidthRequest is set for the SfListView that is loaded as the template content and the HeightRequest is set for the SfPopup.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="PopupMaui.HeightWidthPage"
xmlns:local="clr-namespace:PopupMaui"
xmlns:listView="clr-namespace:Syncfusion.Maui.ListView;assembly=Syncfusion.Maui.ListView"
xmlns:popup="clr-namespace:Syncfusion.Maui.Popup;assembly=Syncfusion.Maui.Popup">
<ContentPage.BindingContext>
<local:ContactsViewModel x:Name="viewModel"/>
</ContentPage.BindingContext>
<ContentPage.Content>
<StackLayout Padding="20">
<Button x:Name="heightWidth" Text="HeightWidth" Clicked="heightWidth_Clicked" WidthRequest="300"/>
<popup:SfPopup x:Name="popup" HeaderTitle="ListView"
HeightRequest="320"
ShowCloseButton="True"
ShowFooter="True">
<popup:SfPopup.ContentTemplate>
<DataTemplate>
<listView:SfListView x:Name="listView"
ScrollBarVisibility="Never"
ItemSpacing="5"
WidthRequest="320"
ItemsSource="{Binding contactsinfo}">
.......
</listView:SfListView>
</DataTemplate>
</popup:SfPopup.ContentTemplate>
</popup:SfPopup>
</StackLayout>
</ContentPage.Content>
</ContentPage>using Syncfusion.Maui.ListView;
using Syncfusion.Maui.Popup;
namespace PopupMaui
{
public partial class MainPage : ContentPage
{
SfListView listView;
ContactsViewModel viewModel;
SfPopup popup;
public MainPage()
{
InitializeComponent();
listView = new SfListView() { ItemSpacing = 5 };
listView.WidthRequest = 320;
listView.ScrollBarVisibility = ScrollBarVisibility.Never;
listView.ItemTemplate = new DataTemplate(() =>
{
.......
});
viewModel = new ContactsViewModel();
listView.ItemsSource = viewModel.contactsinfo;
popup = new SfPopup();
popup.HeaderTitle = "ListView";
popup.HeightRequest = 320;
popup.ContentTemplate = new DataTemplate(() =>
{
return listView;
});
StackLayout stackLayout = new StackLayout();
stackLayout.Padding = 20;
Button heightWidth = new Button();
heightWidth.Clicked += heightWidth_Clicked;
heightWidth.Text = "Click to show popup";
heightWidth.WidthRequest = 300;
stackLayout.Children.Add(heightWidth);
stackLayout.Children.Add(popup);
this.Content = stackLayout;
}
private void heightWidth_Clicked(object sender, EventArgs e)
{
popup.Show();
}
}
}
Full screen
The SfPopup can be shown in full width and height of the screen using,
Refer to the following code example to open the popup in full screen.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="PopupMaui.FullScreenPage"
xmlns:local="clr-namespace:PopupMaui"
xmlns:popup="clr-namespace:Syncfusion.Maui.Popup;assembly=Syncfusion.Maui.Popup">
<ContentPage.Content>
<StackLayout Padding="20">
<Button x:Name="show" Text="Show Popup" Clicked="show_Clicked"/>
<popup:SfPopup x:Name="popup" AppearanceMode="TwoButton" AcceptButtonText="SAVE" DeclineButtonText="CANCEL" ShowCloseButton="True" ShowFooter="True">
<popup:SfPopup.HeaderTemplate>
<DataTemplate>
<Label Text="ADD EVENT" VerticalTextAlignment="Center" FontSize="18" HorizontalTextAlignment="Start" FontAttributes="Bold"/>
</DataTemplate>
</popup:SfPopup.HeaderTemplate>
<popup:SfPopup.ContentTemplate>
.......
</popup:SfPopup.ContentTemplate>
<popup:SfPopup.PopupStyle>
<popup:PopupStyle CornerRadius="0"/>
</popup:SfPopup.PopupStyle>
</popup:SfPopup>
</StackLayout>
</ContentPage.Content>
</ContentPage>using Syncfusion.Maui.Popup;
namespace PopupMaui
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
}
private void show_Clicked(object sender, EventArgs e)
{
// Show the SfPopup in full width and height of the screen using the SfPopup.IsFullScreen property.
popup.IsFullScreen = true;
popup.IsOpen = true;
// Alternatively, show the SfPopup in full width and height of the screen using the Show method.
// popup.Show(true);
}
}
}Executing the above code renders the following output in Windows.
Auto-size popup
The SfPopup can auto-size the popup view based on the contents loaded inside its templates using the AutoSizeMode and PopupAutoSizeTarget properties. The default value is AutoSizeMode.None. You can choose to auto-size the popup in the height, width, or in both (height and width) of its contents. By default, the HeightRequest and WidthRequest set to the SfPopup or the views loaded inside the template are given higher priority than the AutoSizeMode.
PopupAutoSizeTarget
The PopupAutoSizeTarget property specifies which template(s) should be considered for auto-sizing. The default value is PopupAutoSizeTarget.Content.
-
Content: Auto-sizes the popup based on the content template. -
Header: Auto-sizes the popup based on the header template. -
Footer: Auto-sizes the popup based on the footer template. -
All: Auto-sizes the popup based on the header, content, and footer templates.
To auto-size the popup using any two templates, use the following code example:
<ContentPage xmlns:popup="clr-namespace:Syncfusion.Maui.Popup;assembly=Syncfusion.Maui.Popup">
<popup:SfPopup x:Name="popup"
AutoSizeMode="Both"
AutoSizeTarget="Header,Footer" />
</ContentPage>popup.AutoSizeMode = PopupAutoSizeMode.Both;
popup.AutoSizeTarget = Syncfusion.Maui.Popup.PopupAutoSizeTarget.Header | Syncfusion.Maui.Popup.PopupAutoSizeTarget.Footer;
In the following code sample, the popup is auto-sized in the height based on the content loaded inside the ContentTemplate property.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="PopupMaui.AutoSizePage"
xmlns:popup="clr-namespace:Syncfusion.Maui.Popup;assembly=Syncfusion.Maui.Popup">
<ContentPage.Content>
<StackLayout Padding="20">
<Button x:Name="show" Text="Show" WidthRequest="300" Clicked="show_Clicked"/>
<popup:SfPopup x:Name="popup"
ShowFooter="True"
AutoSizeMode="Height">
<popup:SfPopup.ContentTemplate>
<DataTemplate>
<StackLayout Padding="5,5,5,0">
<Label Text="Window loads under the parent window surrounded by an overlay which prevents clicking anywhere else on the screen apart from the control of the modal. Modal opens in the same window. It also does not require any user action to open, and give callbacks when closing or opening the modal."
FontSize="14"
LineBreakMode="WordWrap"/>
</StackLayout>
</DataTemplate>
</popup:SfPopup.ContentTemplate>
</popup:SfPopup>
</StackLayout>
</ContentPage.Content>
</ContentPage>using Syncfusion.Maui.Popup;
namespace PopupMaui
{
public partial class AutoSizePage : ContentPage
{
public AutoSizePage()
{
InitializeComponent();
// Auto-size the popup to fit the height of its content.
popup.AutoSizeMode = PopupAutoSizeMode.Height;
}
private void show_Clicked(object sender, EventArgs e)
{
// Display the popup with the configured auto-size mode.
popup.IsOpen = true;
}
}
}Executing the above code renders the following output in Windows.
In the following code sample, the popup is auto-sized in the height based on the content loaded inside the HeaderTemplate, ContentTemplate, and FooterTemplate properties.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="PopupMaui.AutoSizePage"
xmlns:popup="clr-namespace:Syncfusion.Maui.Popup;assembly=Syncfusion.Maui.Popup">
<ContentPage.Content>
<StackLayout Padding="20">
<Button x:Name="show" Text="Show" WidthRequest="300" Clicked="show_Clicked"/>
<popup:SfPopup x:Name="popup"
ShowFooter="True"
AutoSizeMode="Height"
AutoSizeTarget="All">
<popup:SfPopup.HeaderTemplate>
<DataTemplate>
<StackLayout Padding="5,5,5,0">
<Label Text="Display the Popup without a header by using the property ShowHeader"
FontSize="16"/>
</StackLayout>
</DataTemplate>
</popup:SfPopup.HeaderTemplate>
<popup:SfPopup.ContentTemplate>
<DataTemplate>
<StackLayout Padding="5,5,5,5">
<Label Text="Window loads under the parent window surrounded by an overlay which prevents clicking anywhere else on the screen apart from the control of the modal. Modal opens in the same window. It also does not require any user action to open, and give callbacks when closing or opening the modal."
FontSize="14"
LineBreakMode="WordWrap"/>
</StackLayout>
</DataTemplate>
</popup:SfPopup.ContentTemplate>
<popup:SfPopup.FooterTemplate>
<DataTemplate>
<StackLayout Padding="5,0,5,5">
<Label Text="Display the Popup with the footer by using the property ShowFooter"
FontSize="16"/>
</StackLayout>
</DataTemplate>
</popup:SfPopup.FooterTemplate>
</popup:SfPopup>
</StackLayout>
</ContentPage.Content>
</ContentPage>using Syncfusion.Maui.Popup;
namespace PopupMaui
{
public partial class AutoSizePage : ContentPage
{
public AutoSizePage()
{
InitializeComponent();
// Auto-size the popup height based on the header, content, and footer templates.
popup.AutoSizeMode = PopupAutoSizeMode.Height;
popup.AutoSizeTarget = Syncfusion.Maui.Popup.PopupAutoSizeTarget.All;
}
private void show_Clicked(object sender, EventArgs e)
{
// Display the popup with the configured auto-size mode and target.
popup.IsOpen = true;
}
}
}Executing the above code renders the following output in Windows.
