Xamarin Forms Custom Content View (Composite Control) Implicit Style Error - xamarin.forms

Question

This seems like something that should be simple but I have been unable to locate a solution for it.
I have the following defined in my sample project:
ReadOnlyField.xaml
<?xml version="1.0" encoding="UTF-8"?>
<ContentView x:Name="ReadOnlyFieldContentView" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="TabbedPageDemo.Views.ReadOnlyField">
<StackLayout Spacing="4">
<Label FontSize="{Binding Source={x:Reference ReadOnlyFieldContentView}, Path=HeaderFontSize}" Text="{Binding Source={x:Reference ReadOnlyFieldContentView}, Path=HeaderText}" />
<Label FontSize="{Binding Source={x:Reference ReadOnlyFieldContentView}, Path=DetailFontSize}" Text="{Binding Source={x:Reference ReadOnlyFieldContentView}, Path=DetailText}" />
</StackLayout>
</ContentView>
ReadOnlyField.xaml.cs
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace TabbedPageDemo.Views
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class ReadOnlyField : ContentView
{
#region Fields
private static readonly BindableProperty DetailFontSizeProperty;
private static readonly BindableProperty DetailTextProperty;
private static readonly BindableProperty HeaderFontSizeProperty;
private static readonly BindableProperty HeaderTextProperty;
#endregion
#region Constructors
static ReadOnlyField()
{
DetailFontSizeProperty = BindableProperty.Create("DetailFontSize", typeof(double), typeof(ContentView), 12.0);
DetailTextProperty = BindableProperty.Create("DetailText", typeof(string), typeof(ContentView), null);
HeaderFontSizeProperty = BindableProperty.Create("HeaderFontSize", typeof(double), typeof(ContentView), 14.0);
HeaderTextProperty = BindableProperty.Create("HeaderText", typeof(string), typeof(ContentView), null);
}
public ReadOnlyField()
{
InitializeComponent();
}
#endregion
#region Properties
public double DetailFontSize
{
get => (double) GetValue(DetailFontSizeProperty);
set => SetValue(DetailFontSizeProperty, value);
}
public string DetailText
{
get => (string) GetValue(DetailTextProperty);
set => SetValue(DetailTextProperty, value);
}
public double HeaderFontSize
{
get => (double) GetValue(HeaderFontSizeProperty);
set => SetValue(HeaderFontSizeProperty, value);
}
public string HeaderText
{
get => (string) GetValue(HeaderTextProperty);
set => SetValue(HeaderTextProperty, value);
}
#endregion
}
}
Page2.xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:v="clr-namespace:TabbedPageDemo.Views" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="TabbedPageDemo.Views.Page2">
<ContentPage.Resources>
<Style TargetType="v:ReadOnlyField">
<!-- <Setter Property="HeaderFontSize" Value="14" /> -->
<!-- <Setter Property="DetailFontSize" Value="12" /> -->
</Style>
</ContentPage.Resources>
<ScrollView x:Name="ScrollView1" Padding="4">
<StackLayout x:Name="StackLayout0">
<v:ReadOnlyField HeaderFontSize="14" DetailFontSize="12" HeaderText="Header 1" DetailText="Detail 1" />
<v:ReadOnlyField HeaderFontSize="14" DetailFontSize="12" HeaderText="Header 2" DetailText="Detail 2" />
<v:ReadOnlyField HeaderFontSize="14" DetailFontSize="12" HeaderText="Header 3" DetailText="Detail 3" />
<v:ReadOnlyField HeaderFontSize="14" DetailFontSize="12" HeaderText="Header 4" DetailText="Detail 4" />
<v:ReadOnlyField HeaderFontSize="14" DetailFontSize="12" HeaderText="Header 5" DetailText="Detail 5" />
<v:ReadOnlyField HeaderFontSize="14" DetailFontSize="12" HeaderText="Header 6" DetailText="Detail 6" />
<v:ReadOnlyField HeaderFontSize="14" DetailFontSize="12" HeaderText="Header 7" DetailText="Detail 7" />
<v:ReadOnlyField HeaderFontSize="14" DetailFontSize="12" HeaderText="Header 8" DetailText="Detail 8" />
<v:ReadOnlyField HeaderFontSize="14" DetailFontSize="12" HeaderText="Header 9" DetailText="Detail 9" />
<v:ReadOnlyField HeaderFontSize="14" DetailFontSize="12" HeaderText="Header 10" DetailText="Detail 10" />
<v:ReadOnlyField HeaderFontSize="14" DetailFontSize="12" HeaderText="Header 11" DetailText="Detail 11" />
<v:ReadOnlyField HeaderFontSize="14" DetailFontSize="12" HeaderText="Header 12" DetailText="Detail 12" />
<v:ReadOnlyField HeaderFontSize="14" DetailFontSize="12" HeaderText="Header 13" DetailText="Detail 13" />
<v:ReadOnlyField HeaderFontSize="14" DetailFontSize="12" HeaderText="Header 14" DetailText="Detail 14" />
<v:ReadOnlyField HeaderFontSize="14" DetailFontSize="12" HeaderText="Header 15" DetailText="Detail 15" />
<v:ReadOnlyField HeaderFontSize="14" DetailFontSize="12" HeaderText="Header 16" DetailText="Detail 16" />
<v:ReadOnlyField HeaderFontSize="14" DetailFontSize="12" HeaderText="Header 17" DetailText="Detail 17" />
<v:ReadOnlyField HeaderFontSize="14" DetailFontSize="12" HeaderText="Header 18" DetailText="Detail 18" />
<v:ReadOnlyField HeaderFontSize="14" DetailFontSize="12" HeaderText="Header 19" DetailText="Detail 19" />
<v:ReadOnlyField HeaderFontSize="14" DetailFontSize="12" HeaderText="Header 20" DetailText="Detail 20" />
</StackLayout>
</ScrollView>
</ContentPage>
If I uncomment either of the two lines in the <Style> element, I get the following error:
Can't resolve *propertyName* on ReadOnlyField
What I would like to do is use an implicit style such as the one I am attempting to define so that I don't have to specify property values many times over.
What am I missing / doing wrong?

Answer 1

The error is caused by the Access Modifiers.
Please change private to public.
Change:
private static readonly BindableProperty DetailFontSizeProperty;
private static readonly BindableProperty DetailTextProperty;
private static readonly BindableProperty HeaderFontSizeProperty;
private static readonly BindableProperty HeaderTextProperty;
To:
public static readonly BindableProperty DetailFontSizeProperty;
public static readonly BindableProperty DetailTextProperty;
public static readonly BindableProperty HeaderFontSizeProperty;
public static readonly BindableProperty HeaderTextProperty;
And you could define an style using the x:Key attribute like below. The property should match the BindableProperty you defined.
<ContentPage.Resources>
<Style x:Key="ReadOnlyFieldStyle" TargetType="v:ReadOnlyField">
<Setter Property="HeaderFontSize" Value="14" />
<Setter Property="DetailFontSize" Value="12" />
<!--<Setter Property="HeaderText" Value="Header1"></Setter>
<Setter Property="DetailText" Value="Detail"></Setter>-->
</Style>
And use the style.
<v:ReadOnlyField Style="{Binding StaticResource ReadOnlyFieldStyle}" HeaderText="Header 1" DetailText="Detail 1"></v:ReadOnlyField>
<v:ReadOnlyField Style="{Binding StaticResource ReadOnlyFieldStyle}" HeaderText="Header 2" DetailText="Detail 2"></v:ReadOnlyField>
Result: