Xamarin.Forms Different View Per Platform and Device - xamarin.forms

Question

I have a project in Xamarin.Forms, and i'm trying to create 4 views: Android phone, Android tablet, iPhone and iPad. I've tried a little example, something like this in the XAML:
<ContentPage.Content>
<ContentView>
<OnPlatform x:TypeArguments="View">
<On Platform="iOS">
<!-- Use view for iOS here -->
<OnIdiom x:TypeArguments="View">
<OnIdiom.Phone>
<Frame x:Name="MainFrameiPhone">
<StackLayout BackgroundColor="#FF00FF">
</StackLayout>
</Frame>
</OnIdiom.Phone>
<OnIdiom.Tablet>
<Frame x:Name="MainFrameiPad">
<StackLayout BackgroundColor="#00FF00">
</StackLayout>
</Frame>
</OnIdiom.Tablet>
</OnIdiom>
</On>
<!--Same for android -->
<On Platform="Android">
...
</On>
</OnPlatform>
</ContentView>
</ContentPage.Content>
But i don't want to rename each frame and component i use in the 4 views (For example MainFrameiPhone and MainFrameiPad).
I'm doing it right? or can i create 4 views and call each one from the code behind?
What's the better way to do this?
Thanks!

Answer 1

You could use ControlTemplate .
public class MainFrameiPhone: Frame
{
public TealTemplate ()
{
...
// set the content here
}
}
public class MainFrameiPad: Frame
{
...
}
in content page
ControlTemplate mainFrameiPhone= new ControlTemplate(typeof(MainFrameiPhone));
ControlTemplate mainFrameiPad= new ControlTemplate(typeof(MainFrameiPad));
//...
public MainPage()
{
//...
ContentView content = new ContentView() {
Content = {
//...
}
};
if(Device.RuntimePlatform=="iOS")
{
if(Device.Idiom==TargetIdiom.Phone)
{
content.ControlTemplate = mainFrameiPhone;
}
else if(Device.Idiom == TargetIdiom.Phone)
{
content.ControlTemplate = mainFrameiPad;
}
}
else if(Device.RuntimePlatform == "Android")
{
if (Device.Idiom == TargetIdiom.Phone)
{
content.ControlTemplate = xxx;
}
else if (Device.Idiom == TargetIdiom.Phone)
{
content.ControlTemplate = xxx;
}
}
else
{
content.ControlTemplate = xxx;
}
Content = content;
}