Is it possible to include a block of XAML in another block of XAML?

Question

I have XAML that looks like this:

Answer 1

Insert the code in a ContentView. Call this code in both the ContentPages.

https://forums.xamarin.com/discussion/87415/how-to-display-content-from-one-xaml-inside-another

Answer 2

In this case/dilemma, you can leverage Xamarin's ContentView class.

You can think of ContentView as a sub-class or child of a ContentPage. So, basically, if you have a Xamarin page that is a ContentPage. And a ContentView can be a view or sub-element within a ContentPage. Both of them can have their own structure:

A ContentPage XAML (ex. MainContentPage.xaml)

 <?xml version="1.0" encoding="utf-8" ?>
    <ContentPage>
       <ContentPage.Content>
          <StackLayout x:Name="MainLayout">
          ...
          </StackLayout>
       </ContentPage.Content>
    </ContentPage>

A ContentView XAML (ex. ChildContentView.xaml)

 <?xml version="1.0" encoding="utf-8" ?>
    <ContentView>
       <ContentView.Content>
          <StackLayout>
          ...
          </StackLayout>
       </ContentView.Content>
    </ContentView>

And the ContentPage class (ex. MainContentPage.cs) would look possibly like this:

 namespace Your.Package
 {
      public class MainContentPage : ContentPage
      {
          public MainContentPage()
          {
              //Some code here, binding, initialization etc.

              //Create an object of the ChildContentView code behind/class
              ChildContentView childView = new ChildContentView();

              //Add the childView to the MainLayout of the ContentPage
              this.MainLayout.Children.Add(childView);

              InitializeComponent();
          }
      }
 }

And in your ChildContentView.cs (code behind) you can basically do the same coding as what you can do in the code behind of any ContentPage class. You can add StackLayout, you can do binding, and you can use other inherited methods from the TemplatedView parent class. See this link for more information.

Answer 3

Create a directory called Templates, and then create a new View class, MyCustomGrid like so:

Templates/MyCustomGrid.xaml:

<?xml version="1.0" encoding="UTF-8"?>
<Grid xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="MyProject.Templates.MyCustomGrid">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Label Grid.Row="0" Grid.Column="0" HorizontalOptions="Start" Text="Exclude Hidden" Style="{StaticResource helpDetail}" />
    <Label Grid.Row="0" Grid.Column="1" HorizontalOptions="Start" Text="All cards except those tagged as hidden" Style="{StaticResource helpDetail}" />
    <Label Grid.Row="1" Grid.Column="0" HorizontalOptions="Start" Text="Include Hidden" Style="{StaticResource helpDetail}" />
    <Label Grid.Row="1" Grid.Column="1" HorizontalOptions="Start" Text="All cards including those tagged as hidden" Style="{StaticResource helpDetail}" />
    <Label Grid.Row="2" Grid.Column="0" HorizontalOptions="Start" Text="Favorites" Style="{StaticResource helpDetail}" />
    <Label Grid.Row="2" Grid.Column="1" HorizontalOptions="Start" Text="Only cards tagged as favorites" Style="{StaticResource helpDetail}" />
    <Label Grid.Row="3" Grid.Column="0" HorizontalOptions="Start" Text="Hidden" Style="{StaticResource helpDetail}" />
    <Label Grid.Row="3" Grid.Column="1" HorizontalOptions="Start" Text="Only those cards tagged as hidden" Style="{StaticResource helpDetail}" />
</Grid>

Templates/MyCustomGrid.xaml.cs

using Xamarin.Forms;

namespace MyProject.Templates
{
    public partial class MyCustomGrid : Grid
    {
        public MyCustomGrid()
        {
            InitializeComponent();
        }
    }
}

To use it in another page, ie MyPage.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:templates="clr-namespace:MyProject.Templates;assembly=MyProject"
    x:Class="MyProject.MyPage">

    <templates:MyCustomGrid />

</ContentPage>