Xamarin.Forms - show content of one page into another page

Question

Hey!

I saw a couple of examples online, but I cannot figure out why it's not working here.

I have a Xamarin.Forms app (now only developing for Android) where I have two pages: MainPage and Ticket. I want to add more pages along the way.
The MainPage consists of some basic items which I want to see at all times (weather, time..etc.) The only thing that changes are the pages itself, based on the user input. I was thinking that the best solution to achieve a nice app was to show all the things I want to see on the MainPage and show the pages that will change inside this MainPage as a view. I cannot get this to work somehow.

So first, I have the page Tickets (screen is empty here, but I have filled it in my source code without any errors):

<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="App.Tickets">

      [CODE]

</ContentView>

Then I want to view this page in my MainPage, which I try to do like this (the page Ticket is located in the folder 'Pages'):

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="App.MainPage"
             xmlns:pages="clr-namespace:App.Pages>

     <Grid>

        <pages:Tickets

    </Grid>

</ContentPage>

This gives the error: A value of type 'Tickets' cannot be added to a collection or dictionary of type 'IGridList'.

The error is clear, but how to do it right is not very clear to me. What am I missing here?

Hope someone can help.

Best

Answer 1

Hi

In a project I have used a BasePage which have a CustomView inside it, and I set the customview differently.
For example

namespace XXX.Page
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class BaseFunctionalityPage : ContentPage
    {

        public static readonly BindableProperty CustomViewProperty = BindableProperty.Create(nameof(CustomView), typeof(ContentView), typeof(BaseFunctionalityPage));

        public ContentView CustomView
        {
            get { return (ContentView)GetValue(CustomViewProperty); }
            set { SetValue(CustomViewProperty, value); }
        }

        public BaseFunctionalityPage()
        {
            InitializeComponent();
        }

        public BaseFunctionalityPage(ContentView customView, object viewModel, RowDefinitionCollection rowDefinitions = null)
        {
            InitializeComponent();
            CustomView = customView;
            BindingContext = viewModel;


        }

    }
}

int the xml I have this:

        <ContentView
            Grid.Row="1"
            Grid.Column="0"
            Margin="0"
            Padding="0"
            Content="{Binding Source={x:Reference this}, Path=CustomView}" />

Then I have my ContentView, for example your tickets:

<?xml version="1.0" encoding="UTF-8" ?>
<ContentView
    x:Class="TesiBoom.View.Functionality.Inventario.InventarioView"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:customview="clr-namespace:TesiBoom.CustomView"
    xmlns:viewmodel="clr-namespace:TesiBoom.ViewModel.Functionality.Inventario"
    xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
    x:DataType="viewmodel:InventarioViewModel">

    <ContentView.Content>
        <Grid
            ColumnDefinitions="*,*"
            IsEnabled="{Binding BarcodeData, Converter={StaticResource IsNotNullOrEmptyConverter}}"
            Opacity="{Binding BarcodeData, Converter={StaticResource IsNullToOpacityConverter}}"
            RowDefinitions="*,*">

            <customview:QuantityView
                Title="{xct:Translate Colli}"
                Grid.Row="{Binding ColliRow}"
                Grid.Column="{Binding ColliColumn}"
                IsEnabled="{Binding IsColliEnabled}"
                IsVisible="{Binding IsColliVisibile}"
                Quantity="{Binding QtaColli}" />

            <customview:QuantityView
                Title="{Binding CurrentBarcodeData.Data.PesoVariabile, Converter={StaticResource PesoVariabileToStringConverter}}"
                Grid.Row="{Binding PzKgRow}"
                Grid.Column="{Binding PzKgColumn}"
                IsVisible="{Binding IsPzKgVisibile}"
                Quantity="{Binding QtaPzKg}" />

            <customview:LabelView
                Title="{xct:Translate QtaTotaleRilevata}"
                Grid.Row="{Binding QtaTotaleRilevataRow}"
                Grid.Column="{Binding QtaTotaleRilevataColumn}"
                Text="{Binding QtaTotaleRilevata}" />

            <customview:LabelView
                Title="{xct:Translate TotaleContato}"
                Grid.Row="{Binding TotaleContatoRow}"
                Grid.Column="{Binding TotaleContatoColumn}"
                IsVisible="{Binding IsTotaleContatoVisibile}"
                Text="{Binding TotaleContato}" />

        </Grid>

    </ContentView.Content>
</ContentView>

then, I add programmatically the content to the page and push it in the stack like this

            await Display.PushAsync(new BaseFunctionalityPage(new InventarioView(), new InventarioViewModel(SelectedIndexZona, SelectedTipoRilevazione, NumeroZona, Corsia, Scaffale)));

Answer 2

Hi GaneshGebhard-8778,

Welcome to our Microsoft Q&A platform!

You can create a ContentPresenter to achieve it. Here is the documentation you can refer to: Substitute content into a ContentPresenter.

First, create a ControlTemplate in Application.Resources.
App.xaml

<Application.Resources>  
    <ControlTemplate x:Key="TealTemplate">  
        <Grid>  
            <Grid.RowDefinitions>  
                <RowDefinition Height="0.1*" />  
                <RowDefinition Height="0.8*" />  
                <RowDefinition Height="0.1*" />  
            </Grid.RowDefinitions>  
            <BoxView Color="Teal" />  
            <Label Text="Header"/>  
            <ContentPresenter Grid.Row="1" />  
            <BoxView Grid.Row="2" Color="Teal" />  
            <Label Grid.Row="2" Text="Footer"/>  
        </Grid>  
    </ControlTemplate>  
</Application.Resources>  

Create a new ContentView for "Ticket".
View1.xaml

<ContentView xmlns="http://xamarin.com/schemas/2014/forms"   
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
             x:Class="AllInOnePage.View1">  
  <ContentView.Content>  
      <StackLayout>  
            <Label Text="Hello Xamarin.Forms!" />  
        </StackLayout>  
  </ContentView.Content>  
</ContentView>  

Then set ControlTemplate for MainPage.
MainPage.xaml

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
             x:Class="AllInOnePage.MainPage"  
             ControlTemplate="{StaticResource TealTemplate}">  
  
</ContentPage>  

Last, set the Page Content.
MainPage.xaml.cs

public partial class MainPage : ContentPage  
{  
    public MainPage()  
    {  
        InitializeComponent();  
        this.Content = new View1();  
    }  
}  

Regards,
Kyle

---

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.