Reuse large quantity of Xaml interface elements - xaml

Question

I have made a very similar post about this earlier where I asked how to reuse a part of some Xaml code. Although that worked for the small element I had, it does not quite work on the current scale.
Using Xamarin, I have a tabbed layout with two pages. A page consists of a grid with three layers, two of which are the same on both pages. The third layer needs to be different on both pages. Both pages are currently in the same file. This means that a large portion of the code is simply a copy-paste, and it makes it more difficult to edit values of certain labels in those first two rows since they can't have similar IDs / Names.
I currently set a string variable in the codebehind with a setter.
string _vesselCode;
public string VesselCode
{
get
{
return _vesselCode;
}
set
{
_vesselCode = value;
currentVessel.Text = _vesselCode;
currentVesselClone.Text = currentVessel.Text;
}
}
Although this works, I still have a lot of duped code (as shown below).
This is the content of each page. The only page-specific content is at the bottom. The rest is literately copy-pasted to the second page. Code below is without any IDs.
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<!-- first row from top {0} - app name, vessel. -->
<RowDefinition Height="Auto"/>
<!-- second row {1} - originele freq // nieuwe frequentie. -->
<RowDefinition Height="Auto"/>
<!-- third row {2} - tablayout. -->
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- header contents -->
<Grid Grid.Row="0" StyleClass="headerBar">
<StackLayout Grid.Column="0" HorizontalOptions="Start" StyleClass="inGrid">
<Label StyleClass="header"
Text="OV Frequentie"/>
<Label StyleClass="headerSub"
Text="huidig voertuig:"/>
</StackLayout>
</Grid>
<!-- freq bar contents -->
<Grid Grid.Row="1" StyleClass="subHeaderBar">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<BoxView Grid.ColumnSpan="2"
BackgroundColor="#2d313a"
WidthRequest="2"
HeightRequest="2"
Margin="5,0,5,-3"/>
<StackLayout Grid.Column="0" HorizontalOptions="Start" StyleClass="inGrid">
<Label StyleClass="generalSmallText"
Text="originele freq: 10"/>
</StackLayout>
<StackLayout Grid.Column="1" HorizontalOptions="End" StyleClass="inGrid">
<Label StyleClass="generalSmallText"
Text="nieuwe freq: 10"/>
</StackLayout>
</Grid>
<!-- info page content -->
<Grid Grid.Row="2">
<StackLayout StyleClass="infoDisplayPage">
<!-- page unique stuff -->
</StackLayout>
</Grid>
</Grid>
Like I said, this sort of works, but is incredibly bad code. There are multiple Labels I want to be able to change the value of, but I can't give them the same ID. This means I have to either always set those values twice, or get some set attribute on one of the Labels, automatically setting the other one / have attributes in the code behind with such setter.
I got told that for using bigger area's of code, I could use a ContentView. However, I can't seem to reuse them across two ContentPages.
How do I make it so I can reuse the code of the first two grid rows on both pages, and be able to have different contents of the third grid layout? I'm OK with having to possibly set both Labels using the codebehind as above if that is needed.
I'm quite new to app development, so any extra source of explenation of the code below is appriciated.