CODEWITHSUNDEEP
xamlmaui
blas
blas

Reputation: 13

Insert XAML into another XAML MAUI

I'm building a MAUI app, the main page is stored in a file called MainPage.xaml. I also created a popup with the CommunityToolkit package. I was wondering if there is a way to include this PopUpPage inside my MainPage when a button is clicked. the PopupPage.xaml looks like this:

<toolkit:Popup xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Myproject.PopupPage"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             >
    <VerticalStackLayout>
        <Label 
            Text="Welcome to .NET MAUI!"
            VerticalOptions="Center" 
            HorizontalOptions="Center" />
    </VerticalStackLayout>
</toolkit:Popup>

I tried with this xaml code but it didn't compile

<toolkit:Popup x:Name="MyPopup" IsVisible="{Binding IsPickerVisible}">
            <local:PopupPage />    
</toolkit:Popup>

Upvotes: 1

Views: 1253

Answers (1)

Gerald Versluis
Gerald Versluis

Reputation: 34083

There definitely it a way to do that! But in your code something doesn't look right, preventing this to work. Let's take a step back and see what you are trying to do.

In the PopupPage, you are defining a toolkit:Popup so a complete popup, that is needed to actually show the popup in your application. So far, so good.

However, in your second snippet you're now trying to wrap the PopupPage in another popup. That is not supported.

I don't have all the details on what you are trying to do, but assuming that you want to reuse this part underneath in both of these places:

<VerticalStackLayout>
    <Label 
        Text="Welcome to .NET MAUI!"
        VerticalOptions="Center" 
        HorizontalOptions="Center" />
</VerticalStackLayout>

What you want to do, is put only this piece in a separate XAML file. Let's say that we name this PopupContent.xaml. As a template you might want to choose the ContentView (XAML) although it doesn't really matter as long as it's a XAML file. Make sure the content looks like this:

<?xml version="1.0" encoding="utf-8" ?>
<VerticalStackLayout xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Myproject.PopupContent">
    <Label 
        Text="Welcome to .NET MAUI!"
        VerticalOptions="Center" 
        HorizontalOptions="Center" />
</VerticalStackLayout>

Don't forget to update the base class in the code-behind (pro-tip: you can even remove the inheritance there altogether as that is already inferred from the XAML).

Now update your XAML snippets from your questions like this:

<toolkit:Popup xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Myproject.PopupPage"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             xmlns:local="clr-namespace:Myproject">
    <local:PopupContent />
</toolkit:Popup>

Note how I added the xmlns:local in the root, make sure that it reflects the namespace of your app, and then you add the <local:PopupContent /> as a component, if you will.

Now do the same for your second XAML snippet and you can share it between both!

Upvotes: 1

Related Questions