Content in a complex Xamarin Forms custom control

Question

I'm creating a custom control by deriving from ContentView. My goal is to have a user consume the class as you would expect to consume any control with a single piece of content:

<local:NewControl>
  <Image source="..." />
</local:NewControl>

However, I would like the control to contain a grid and then have the content placed in the grid. Conceptually (i.e. ignoring the fact that ContentPresenter cannot be used in this way), I'd like NewControl.xaml to look like this:

<ContentView ...>
  <Grid x:Name="HiddenGrid">
    <ContentPresenter />
  </Grid>
</ContentView>

Doing what I detailed above results in HiddenGrid being replaced by the Image, rather than the image being inserted in the visual tree as a child of the ContentPresenter.

At the moment, I'm achieving my goal by deriving from Grid instead of ContentView, but I'd like to hide this implementation detail so consumers cannot interfere with the Grid and have a control to which they can assign only a single piece of content.

This seems like it should be straightforward (and widely applicable to all sorts of scenarios where content needs to be embellished in some way), but I can't see a way of doing it. Am I missing something obvious, is it not possible, or is it just tricky to do and I need to read up on something (like control templates)?

score 5 · Accepted Answer · answered Nov 26 '20 at 17:37

We can use ControlTemplate. Xamarin.Forms control templates enable to define the visual structure of ContentView derived custom controls, and ContentPage derived pages.

<ContentView.ControlTemplate>
        <ControlTemplate>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"></RowDefinition>
                    <RowDefinition Height="*"></RowDefinition>
                </Grid.RowDefinitions>
                <Label Text="Test" Grid.Row="0"></Label>
                <ContentPresenter Grid.Row="1"></ContentPresenter>

            </Grid>
        </ControlTemplate>
        
    </ContentView.ControlTemplate>

Xaml

<local:NewControl>
  <Label Text= "Test"/>
</local:NewControl>

Thanks - this is exactly what I wanted. It's worth noting that the controls in the Template aren't visible in the usual way within the control's cs file and to access `HiddenGrid` in my example, something like the following is necessary: `Grid HiddenGrid => (Grid)GetTemplateChild("HiddenGrid");` — Bob Sammers, Nov 27 '20 at 11:47

deczaloth · Answer 2 · 2020-11-26T22:32:36.300

One way i can think of is overriding the ContentProperty of your NewControl: by doing this you can control exactly what happens with the "Content" of the NewControl.

To do this follow the next steps:

Define your control's appearance in Xaml

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="HiddenGridTest.NewControl">
    <ContentView.Content>
        <Grid x:Name="HiddenGrid" Padding="20">
            <Grid.RowDefinitions>
                <RowDefinition Height="2*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="100" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

        </Grid>
    </ContentView.Content>
</ContentView>

Very important here is that you put your Grid inside the Content property explicitly!

<ContentView.Content>
</ContentView.Content>

Override the ContentProperty of your control and link it to the Children of the HiddenGrid

using System.Collections.Generic;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace HiddenGridTest
{
    [ContentProperty("Contents")]
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class NewControl : ContentView
    {

        public IList<View> Contents { get => HiddenGrid.Children; }

        public NewControl()
        {
            InitializeComponent();
        }
    }
}

Consume your NewControl

<?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:local="clr-namespace:HiddenGridTest"
             x:Class="HiddenGridTest.MainPage">

    <local:NewControl>
        <Label  Text="Inside grid"
               BackgroundColor="Red"/>
    </local:NewControl>
    
</ContentPage>

The result is shown in the image below. Note that the image is set as content of the Grid (occupying the first row and first column!):

Interestingly enough, i also answered a couple of questions this week where also overriding the ContentProperty was useful. Since they could complete the information posted in this answer, i leave the links here:

Not quite the right fit for my use case, but +1 for the knowledge about the `ContentProperty` attribute - I didn't know that existed (although it obviously makes sense there is some mechanism for determining which property XAML children are assigned to). It could be useful in future! — Bob Sammers, Nov 27 '20 at 11:58

Content in a complex Xamarin Forms custom control

2 Answers2