.NET MAUI Popup Content

The Telerik UI for .NET MAUI Popup provides options for setting its content and for defining when it will open and close.

Opening and Closing

To show the Popup control, set IsOpen property to True. By default, the Popup stays open until the IsOpen property is set to False or, in case of a non-modal Popup, until the user clicks outside the control.

Setting the Content

To host content inside the Popup, either add it directly as a child element or use the ContentTemplate Popup property.

The example below demonstrates how to create a sample DataTemplate and set it as the ContentTemplate of the Popup.

1. Add the needed DataTemplate to the page Resources:

<ResourceDictionary>
    <DataTemplate x:Key="PopupTemplate">
        <telerik:RadBorder CornerRadius="8"
                           BackgroundColor="#93D7FF"
                           WidthRequest="250"
                           Padding="10">
            <Grid Padding="10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="30" />
                    <RowDefinition Height="50" />
                    <RowDefinition Height="30" />
                </Grid.RowDefinitions>
                <Label Text="ACCEPT TERMS" />
                <Label Grid.Row="1"
                       Text="By checking this, you agree to the Terms of Service and Privacy Policy." />
                <telerik:RadButton Grid.Row="2"
                                   Padding="2"
                                   HorizontalOptions="Start"
                                   Text="Agree &amp; Continue"
                                   Clicked="ClosePopup"
                                   CornerRadius="6"
                                   BackgroundColor="#7A9BFF"
                                   TextColor="White"/>
            </Grid>
        </telerik:RadBorder>
    </DataTemplate>
</ResourceDictionary>

2. When you define the Popup either in XAML or as code-behind, apply the ContentTemplate property:

<HorizontalStackLayout VerticalOptions="Start">
    <telerik:RadCheckBox x:Name="checkbox"
                                   IsCheckedChanged="Checkbox_IsCheckedChanged">
        <telerik:RadPopup.Popup>
            <telerik:RadPopup x:Name="popup"
                              Placement="Bottom"
                              ContentTemplate="{StaticResource PopupTemplate}" />
        </telerik:RadPopup.Popup>
    </telerik:RadCheckBox>
    <Label Text="Agree to the Terms &amp; Conditions"/>
</HorizontalStackLayout>

3. Add the events as shown below:

private void ClosePopup(object sender, EventArgs e)
{
    popup.IsOpen = false;
}
private void Checkbox_IsCheckedChanged(object sender, IsCheckedChangedEventArgs e)
{
    if (e.NewValue == true)
        popup.IsOpen = true;
}

The following image shows the end result.

See Also

• Modal Popup