Can I redefine a ContentPage to add some elements to it? - xamarin

Question

My application uses many ContentPages like this:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Japanese;assembly=Japanese"
xmlns:template="clr-namespace:Japanese.Templates"
x:Class="Japanese.Views.HelpTab.SettingsPage"
Title="Settings Screen Help"
BackgroundColor="{DynamicResource PageBackgroundColor}">
<ContentPage.Content>
<ScrollView>
<StackLayout Spacing="0">
<Content goes here/>
</StackLayout>
</ScrollView>
</ContentPage.Content>
Is there a way that I could create a new type of page called ScrollableContentPage that already has the <ScrollView> and <StackLayout Spacing="0"> elements?
Something like this:
<ScrollableContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Japanese;assembly=Japanese"
xmlns:template="clr-namespace:Japanese.Templates"
x:Class="Japanese.Views.HelpTab.SettingsPage"
Title="Settings Screen Help"
BackgroundColor="{DynamicResource PageBackgroundColor}">
<ContentPage.Content>
<Content goes here/>
</ContentPage.Content>

Answer 1

I believe that there are several possibilities. We are using a nested ContentView that is bound to the inner content. Just add the ContentView the XAML of the page you'd like to reuse
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Japanese;assembly=Japanese"
xmlns:template="clr-namespace:Japanese.Templates"
x:Class="Japanese.Templates.ScrollableContentPage"
BackgroundColor="{DynamicResource PageBackgroundColor}"
x:Name="ContentPage">
<ContentPage.Content>
<ScrollView>
<ContentView Content="{Binding Source={x:Reference ContentPage}, Path=InnerContent}" />
</ScrollView>
</ContentPage.Content>
</ContentPage>
And in the code behind you'll have to define a bindable property (actually I don't know if it has to be a bindable property, but you'll need the change notification anyway, hence a BindableProperty should be fine)
public static readonly BindableProperty InnerContentProperty = BindableProperty.Create(nameof(InnerContent), typeof(View), typeof(ScrollableContentPage));
public View InnerContent
{
get => (View)this.GetValue(InnerContentProperty);
set => this.SetValue(InnerContentProperty, value);
}
Now you can use the ScrollableContentPage as you would use any other page (well, you need the namespace imports, but ...)
<template:ScrollableContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Japanese;assembly=Japanese"
xmlns:template="clr-namespace:Japanese.Templates"
x:Class="Japanese.Views.HelpTab.SettingsPage"
Title="Settings Screen Help">
<template:ScrollableContentPage.InnerContent>
<!-- You content goes here -->
</template:ScrollableContentPage.InnerContent>
</template:ScrollableContentPage>
You can even simplify this, by adding the attribute to ScrollableContentPage.
[ContentProperty(nameof(InnerContent))]
public class ScrollableContentPage : ContentPage
{
// ...
}
This way you can omit specifiing InnerContent explicitly and use your ScrollableContentPage like this:
<template:ScrollableContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Japanese;assembly=Japanese"
xmlns:template="clr-namespace:Japanese.Templates"
x:Class="Japanese.Views.HelpTab.SettingsPage"
Title="Settings Screen Help">
<!-- You content goes here -->
</template:ScrollableContentPage>