Xamarin, custom control with layout with accepts bindable content at a specific location

Issue

I need to create a standard layout which I can use on a number of pages, but pass in content which is shown inside... I'm having limited success...

Here's how I'm calling the custom control...

<?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:control="clr-namespace:myApp"
             x:Class="myApp.MainPage">
    <StackLayout>

        <control:CustomPopupLayoutControl 
             BackgroundColor="LightGreen">

            <control:CustomPopupLayoutControl.Content>

                <Button Text="Hello"  />
                <!-- lots of other controls, buttons, labels etc, layout -->
            </control:CustomPopupLayoutControl.Content>

        </control:CustomPopupLayoutControl>

    </StackLayout>
</ContentPage>

So you can see here I wan't to display some content..

Here's my custom control...

<?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="myApp.CustomPopupLayoutControl"
             x:Name="CustomPopupLayouts">
    <ContentView.Content>
        <StackLayout BackgroundColor="LightBlue" Margin="30">

            <Button Text="Close" /><!-- important-->
            <!-- lots of other layout -->
            <StackLayout BackgroundColor="Red" x:Name="Inner">

            </StackLayout>
         </StackLayout>
    </ContentView.Content>
</ContentView>

So I'd like to show my hello button inside the Inner stack layout, I'll also need binding to work...

So the final page should look like...

<page>

  <StackLayout BackgroundColor="LightBlue" Margin="30">
    <Button Text="Close" /><!-- important-->

    <StackLayout BackgroundColor="Red">
      <button text="Hello">
    </StackLayout>
  <StackLayout>

</page>

Solution

I've found a solution :)

<?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="myapp.CustomPopupLayoutControl"
             x:Name="CustomPopupLayouts">
    <ContentView.ControlTemplate>
        <ControlTemplate>
            <StackLayout BackgroundColor="LightBlue" Margin="30">

                <Frame CornerRadius="5" Margin="20" HasShadow="False" 
                       BackgroundColor="Red">
                    <StackLayout>
                        <Button Text="Close" 
                           Command="{TemplateBinding 
                           Parent.BindingContext.NavigateCommand}" />
                        <!-- important-->

                        <ContentPresenter />
                    </StackLayout>
                </Frame>
            </StackLayout>
        </ControlTemplate>
    </ContentView.ControlTemplate>
</ContentView>

.

<?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:control="clr-namespace:myapp"
             x:Class="myapp.MainPage">
    <StackLayout>

        <control:CustomPopupLayoutControl BackgroundColor="LightGreen">

            <StackLayout>
                <Button Text="Hello" Command="{Binding NavigateCommand}" />

                <Button Text="Goodbye"  />
            </StackLayout>
        </control:CustomPopupLayoutControl>

    </StackLayout>
</ContentPage>

Answered By - Jules