TelerikUI for MAUI: any example of using popup.ContentTemplate.LoadFromXaml()

2 Answers 563 Views
Popup
Scofield
Top achievements
Rank 2
Iron
Iron
Iron
Scofield asked on 12 Apr 2022, 02:21 AM
According to this post: .NET MAUI Popup Documentation | Content | Telerik UI for .NET MAUI, I may want to load the content template of popup dynamically, do you have any example for me?

2 Answers, 1 is accepted

Sort by
0
Accepted
Antoan
Telerik team
answered on 14 Apr 2022, 11:47 AM

Greetings Scofield,

To use the RadPopup from code behind add the following namespace:

using Telerik.XamarinForms.Primitives;

By adding the namespace we can now define the RadPopup as a field for example:

private RadPopup popup;

After defining the field we need to add it do the constructor:

this.popup = new RadPopup();

To add content to the Popup we must first create our DataTemplate, I have used the following code to populate the DataTemplate:

<DataTemplate x:Key="popupDataTemplate">
                <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="Popup from code behind" />
                        <Label Grid.Row="1"
                                    Text="Click the Close Popup button to close it." />
                        <telerik:RadButton Grid.Row="2"
                                                       Padding="2"
                                                       HorizontalOptions="Start"
                                                       Text="Close Popup"
                                                       Clicked="ClosePopup"
                                                       CornerRadius="6"
                                                       BackgroundColor="#7A9BFF"
                                                       TextColor="White"/>
                    </Grid>
                </telerik:RadBorder>
    </DataTemplate>

In addition I have decided to create a button to visualize the Popup dynamically by using an event.

<VerticalStackLayout>
        <Button Clicked="show_dt_Popup" Text="Visualize DataTemplate" WidthRequest="200" />
</VerticalStackLayout>

Having created a button to visualize the Popup, we can add the content from the DataTemplate to the Popup in our code behind:

public void show_dt_Popup(object sender, EventArgs e)
    {
        this.popup.ContentTemplate = (DataTemplate)this.Resources["popupDataTemplate"];
        this.popup.IsOpen = true;
    }

For more information on how Popup.IsOpen operates please go to the following link: https://docs.telerik.com/devtools/maui/controls/popup/content  

Let me know if I can provide any further assistance.

Regards,
Antoan
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Scofield
Top achievements
Rank 2
Iron
Iron
Iron
commented on 14 Apr 2022, 01:07 PM

Hi Antoan,

Thanks for your supports this is what I want:

this.popup.ContentTemplate = (DataTemplate)this.Resources["popupDataTemplate"];
2
Antoan
Telerik team
answered on 12 Apr 2022, 02:26 PM

Hello Scofield,

Thank you for your interest in Telerik UI for .NET MAUI.

To create an example which represents a result more accurate to the one expected, I would require more information about the scenario in which the control is used.

You can find a running sample Popup Content Template example inside the Examples/PopupControl/ContentTemplateCategory folder of the SDKMaui Demo App. How to set up the app - check the following link from our documentation: https://docs.telerik.com/devtools/maui/demos-and-sample-apps/maui-demo-app.

I hope the provided information proves to be useful and I am looking forward to your reply.

Regards,
Antoan
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Scofield
Top achievements
Rank 2
Iron
Iron
Iron
commented on 13 Apr 2022, 08:44 AM | edited

Hi Antoan, 

Thanks for your feedback and I did check the Popup Content Template example, and I just wonder if I can load the content template of popup dynamically like this way in my code-behind, I tried but this doesn't work... 

popup.ContentTemplate.LoadFromXaml(externalXaml);

NOTE: MS say: Loading XAML at runtime has a significant performance cost, and generally should be avoided. Loading XAML at Runtime in Xamarin.Forms - Xamarin | Microsoft Docs

I'm working with other way to make Popup load the content template dynamically, let's say we have two templates (DataTemplate1 and DataTemplate2) I want to change them by a binding property PopupContent, any suggestion of how we can make it works?

Dmitry
Top achievements
Rank 1
Iron
commented on 25 Apr 2022, 05:55 AM

How to bind this popup to control? E.g. to Button.
I have a button in xaml:
       <Button x:Name="popupButton" Text="{StaticResource ShareIconString}" FontFamily="FA6Solid" FontSize="14" WidthRequest="40" HeightRequest="40" CornerRadius="10"
            VerticalOptions="Center" Margin="0,0,10,0"/>
In code i create popup:
            Popup = new RadPopup();
            Popup.BindingContext = this;
            Popup.ContentTemplate = _sharePopupTemplate;
            Popup.Placement = PlacementMode.Relative;
            Popup.VerticalOffset = -30;
            Popup.HorizontalOffset = -700;
            Popup.IsModal = true;
            Popup.IsOpen = true;
I want that position was relative by 'popupButton'.
How do this?
Tags
Popup
Asked by
Scofield
Top achievements
Rank 2
Iron
Iron
Iron
Answers by
Antoan
Telerik team
Share this question
or