Command RelativeSource not working in Xamarin - xamarin.forms

Question

I have Binding Data problem in subpages. I have a Page that shows a list of products. When clicking on the product it will go to the Product Details subpage. Everything works fine:
Product.xaml
<RefreshView x:DataType="locals:DashboardViewModel" Padding="0" Command="{Binding LoadDashboardCommand}" IsRefreshing="{Binding IsBusy, Mode=OneWay}">
<StackLayout BindableLayout.ItemsSource="{Binding ProductNew}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Frame x:DataType="model:Product">
<StackLayout>
<Label FontSize="14" MaxLines="2" LineBreakMode="TailTruncation" HeightRequest="40" Text="{Binding Name}"/>
</StackLayout>
<Frame.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="1"
Command="{Binding Source={RelativeSource AncestorType={x:Type locals:DashboardViewModel}}, Path=ProductTappedView}"
CommandParameter="{Binding .}" />
</Frame.GestureRecognizers>
</Frame>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</RefreshView>
Product.xaml.cs
DashboardViewModel dashboardViewModel;
public Product()
{
BindingContext = dashboardViewModel = new DashboardViewModel(Navigation);
dashboardViewModel.OnAppearing();
}
DashboardViewModel.cs
public class DashboardViewModel : BaseDashboardViewModel
{
public Command LoadDashboardCommand { get; }
public Command ProductTappedView { get; }
public ObservableCollection<Product> ProductNew { get; }
public DashboardViewModel(INavigation _navigation)
{
LoadDashboardCommand = new Command(async () => await ExecuteLoadDashboardCommand());
ProductNew = new ObservableCollection<Product>();
ProductTappedView = new Command<Product>(OnViewDetailProduct);
Navigation = _navigation;
}
private async void OnViewDetailProduct(Product detailProduct)
{
await Navigation.PushAsync(new ProductDetail(detailProduct));
}
............
}
Next in my Productdetail page show product details. I have Read more. When clicked it will redirect to another subpage: ContentDetailProd.xaml
ProductDetail.xaml
<ContentPage.BindingContext>
<locals:ViewDetailProductViewModel/>
</ContentPage.BindingContext>
<ContentPage.Content>
<StackLayout Padding="15">
<Label Text="{Binding ProductNews.Name}" FontFamily="RobotoMedium" FontSize="18" TextTransform="Uppercase"/>
<Label Text="Read more"/>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="1" Command="{Binding Source={RelativeSource AncestorType={x:Type locals:ViewDetailProductViewModel}}, Path=ContentProductTappedView}" CommandParameter="{Binding .}" />
</StackLayout.GestureRecognizers>
</StackLayout>
</ContentPage.Content>
ViewDetailProductViewModel.cs
public class ViewDetailProductViewModel : BaseDashboardViewModel
{
public Command ContentProductTappedView { get;}
public ViewDetailProductViewModel()
{
ProductNews = new Product();
ContentProductTappedView = new Command<Product>(OnViewContentDetailProduct);
}
private async void OnViewContentDetailProduct(Product detailProduct)
{
await Navigation.PushAsync(new ContentDetailProd(detailProduct));
}
}
ContentDetailProd.xaml.cs
public ContentDetailProd(Product detailProduct)
{
InitializeComponent();
//Load Readmore
}
However when I Debug it actually doesn't run on the event: ContentProductTappedView and as a result it doesn't redirect to the ContentDetailProd.xaml page. I've tried everything but still can't solve the problem.
Looking forward to everyone's help. Thanks

Answer 1

If you want to pass the data through a Page Constructor, you could refer to the link below. https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/hierarchical#passing-data-when-navigating

Answer 2

I changed like this based on the documentation #Wendy Zang - MSFT provided. Everything looks good.
ProductDetail.xaml
<StackLayout x:Name="_readmore" Padding="15">
<Label Text="{Binding ProductNews.Name}" FontFamily="RobotoMedium" FontSize="18" TextTransform="Uppercase"/>
<Label x:Name="_content" MaxLines="2" LineBreakMode="TailTruncation" Text="{Binding ProductNews.Contents}" FontFamily="RobotoMedium" FontSize="18" TextTransform="Uppercase"/>
<Label Text="Read more"/>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="_readmore_Tapped" />
</StackLayout.GestureRecognizers>
</StackLayout>
ProductDetail.xaml.cs
private async void _readmore_Tapped(object sender, EventArgs e)
{
var contentget = _content.Text;
var detailProduct = new Product
{
Contents = contentget,
};
var detailContentPage = new ContentDetailProd(detailProduct);
detailContentPage.BindingContext = detailProduct;
await Navigation.PushAsync(detailContentPage);
}
ContentDetailProd.xaml.cs
public ContentDetailProd(Product detailProduct)
{
InitializeComponent();
//Load Readmore
if (detailProduct != null)
{
_contentmore.Text = detailProduct.Contents;
}
}