Xamarin.Forms
プラットフォーム固有の視覚的調整

イディオムの調整

たとえば、ビューが表示されているかどうか、または電話機やタブレットのどちらのレイアウトの向きを変更するかなど、C＃コードからイディオム固有の調整を行うことができます。

if (Device.Idiom == TargetIdiom.Phone) 
{
    this.panel.Orientation = StackOrientation.Vertical;
} 
else 
{
    this.panel.Orientation = StackOrientation.Horizontal;
}

これらの機能は、XAMLコードから直接入手することもできます。

<StackLayout x:Name="panel">
  <StackLayout.Orientation>
    <OnIdiom x:TypeArguments="StackOrientation">
      <OnIdiom.Phone>Vertical</OnIdiom.Phone>
      <OnIdiom.Tablet>Horizontal</OnIdiom.Tablet>
    </OnIdiom>
  </StackLayout.Orientation>
</StackLayout>

プラットフォームの調整

C＃コードから特定のプラットフォームの調整を行うことができます。たとえば、すべての対象プラットフォームのパディングを変更することができます。

if (Device.OS == TargetPlatform.iOS) 
{
    panel.Padding = new Thickness (10);
}
else
{
    panel.Padding = new Thickness (20);
}

ヘルパーメソッドは、短縮されたC＃宣言でも利用できます。

panel.Padding = new Thickness (Device.OnPlatform(10,20,0));

これらの機能は、XAMLコードから直接入手することもできます。

<StackLayout x:Name="panel">
  <StackLayout.Padding>
    <OnPlatform x:TypeArguments="Thickness"
      iOS="10"
      Android="20" />
  </StackLayout.Padding>
</StackLayout>

スタイルの使用

XAMLを使用する場合、集中Style使用すると、一連のスタイル付きビューを1か所から更新できます。すべてのイディオムとプラットフォームの調整をスタイルに統合することもできます。

<Style TargetType="StackLayout">
  <Setter Property="Padding">
    <Setter.Value>
      <OnPlatform x:TypeArguments="Thickness" 
                  iOS="10" 
                  Android="20"/>
    </Setter.Value>
  </Setter>
</Style>

カスタムビューの使用

それらの調整ツールのおかげで、あなたのページに統合できるカスタムビューを作成することができます。

選択File > New > File... > Forms > Forms ContentView (Xaml)と各特定のレイアウトのためのビューを作成： TabletHome.xamlとPhoneHome.xaml 。

次に、「 File > New > File... > Forms > Forms ContentPageを選択し、次の内容を含むHomePage.csを作成しHomePage.cs 。

using Xamarin.Forms;

public class HomePage : ContentPage
{
    public HomePage()
    {
        if (Device.Idiom == TargetIdiom.Phone)
        {
            Content = new PhoneHome();
        }
        else
        {
            Content = new TabletHome();
        }

    }
}

これで、 PhoneとTabletイディオムのビュー階層が異なるHomePageが作成されました。