[Xamarin][CrossPlatform][Deviceクラス] Device.Stylesを使用して組み込みスタイルを使用する

Device.Stylesを使用すると、あらかじめ決められた組み込みスタイルを使用することができます。

以下に例を示します。

はじめに書くスタイルをかくにんできるようにLabelを6つ配置しておきます。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:DevuceClassSapmle3"
             x:Class="DevuceClassSapmle3.MainPage">

  <StackLayout Padding="10, 30, 10, 10">
      <Label x:Name="label1" Text="Welcome Xamarin Forms!"
           VerticalOptions="Center" HorizontalOptions="Center" />
      <Label x:Name="label2" Text="Welcome Xamarin Forms!"
           VerticalOptions="Center" HorizontalOptions="Center" />
      <Label x:Name="label3" Text="Welcome Xamarin Forms!"
           VerticalOptions="Center" HorizontalOptions="Center" />
      <Label x:Name="label4" Text="Welcome Xamarin Forms!"
           VerticalOptions="Center" HorizontalOptions="Center" />
      <Label x:Name="label5" Text="Welcome Xamarin Forms!"
           VerticalOptions="Center" HorizontalOptions="Center" />
      <Label x:Name="label6" Text="Welcome Xamarin Forms!"
           VerticalOptions="Center" HorizontalOptions="Center" />
  </StackLayout>

</ContentPage>

つづいて、各LabelのStyleプロパティに組み込みスタイルの値を設定します。

public MainPage()
{
    InitializeComponent();

    label1.Style = Device.Styles.BodyStyle;
    label2.Style = Device.Styles.CaptionStyle;
    label3.Style = Device.Styles.ListItemDetailTextStyle;
    label4.Style = Device.Styles.ListItemTextStyle;
    label5.Style = Device.Styles.TitleStyle;
    label6.Style = Device.Styles.SubtitleStyle;
}

上記例のように、組み込みスタイルを使用すると、各プラットフォームで適切なスタイルが設定されるようになります。

実行例を以下に示します。

[Xamarin][CrossPlatform][Deviceクラス] Device.OnPlatformを使用してプラットフォーム毎にXAMLを記述する

XAML内でDevice.OnPlatformを使用すると、プラットフォーム毎に固有の値を記述することができます。

以下はDevice.OnPlatfomrを使用して、プラットフォーム別にLableのテキストカラーを設定する例を以下に示します。

<OnPlatform>のx:TypeArgumentには、コントロールのどの属性を設定するのかを指定します。ここではColotとしているので、テキストカラーをプラットフォーム別に設定することを意味します。

また、iOSやAndroidというプラットフォーム別のプロパティに各値を設定します。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:DevuceClassSapmle3"
             x:Class="DevuceClassSapmle3.MainPage">

  <Label Text="Welcome to Xamarin Forms!"
           VerticalOptions="Center"
           HorizontalOptions="Center" >
    <Label.TextColor>
      <OnPlatform x:TypeArguments="Color"
        iOS="Red"
        Android="Blue"
      />
    </Label.TextColor>
  </Label>

</ContentPage>

実行例を以下に示します。

[Xamarin][CrossPlatform][Deviceクラス] Device.OpenUriでブラウザを起動する

Device.OpenUriメソッドを使用すると、デバイスで既定のブラウザを起動して任意のページを表示することができます。

構文
Device.OpenUri(表示したいページのURL);

「表示したいページのURL」には new Url(“http://blog.hiros-dot.net”) のように記述し増す。

以下に例を示します。

public MainPage()
{
    InitializeComponent();

    Device.OpenUri(new Uri("http://blog.hiros-dot.net"));
}

実行結果を以下に示します。

[Xamarin][CrossPlatform][Deviceクラス] Device.Idiomでデバイス種類を判別する

DeviceクラスのIdiomプロパティを使用すると、現在起動しているデバイスがPhone, たブレッド, デスクトップのどれなのかを判別することができます。

Device.Idiomプロパティは、TargetIdiom列挙体(以下表)の値を示します。

説明
Phone デバイスがPhoneであることを示す
Tablet デバイスがタブレットであることを示す
Desktop デバイスがデスクトップであることを示す
Unknown デバイスが上記のいずれでもない

以下にDevice.Idiomの使用例を示します。この例では、Device.Idiomでデバイスを判別し、Labelにデバイス種別を表示します。

XAMLは以下の通りとします。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:DeviceClassSample2"
             x:Class="DeviceClassSample2.MainPage">

  <Label x:Name="lblIdiom"
         Text="Welcome to Xamarin Forms!"
         VerticalOptions="Center"
         HorizontalOptions="Center" />

</ContentPage>

コードは以下の通りとし、switchでデバイス種別を判断しています。

public MainPage()
{
    InitializeComponent();

    string strIdiom = string.Empty;

    switch (Device.Idiom)
    {
        case TargetIdiom.Phone:
            strIdiom = "Phone";
            break;
        case TargetIdiom.Tablet:
            strIdiom = "タブレット";
            break;
        case TargetIdiom.Desktop:
            strIdiom = "デスクトップ";
            break;
        case TargetIdiom.Unsupported:
            strIdiom = "サポート外";
            break;
    }

    lblIdiom.Text = strIdiom;
}

以下はiPhoneとiPadのシミュレータでの実行例です。iPhoneの場合は「Phone」が、iPadの場合は「タブレット」が表示されます。

[Xamarin][CrossPlatform][Deviceクラス] Device.OSでターゲットを判断する

今回から数回に分けて、Deviceクラスの使用方法を見ていきます。

Xamarin.Formsは1つのソリューションで、iOS, Android, Windows Phone, Windows向けのアプリケーションを作成できるのは、すでに皆さんご存じかと思います。

このソリューションには、全てのデバイスで共通となるPCL(ポータブルクラスライブラリ)がありますが、デバイス毎に処理を分けたい場合はどうしたらよいか、というのが本日のテーマです。

この問題を解決するには、タイトルにもあるとおりDevice.OSプロパティを使用し、OSを判別することができます。

Device.OSには、起動しているターゲットを表す値(TargetPlatform列挙体の値)が入っています。

説明
iOS 起動しているデバイスがiOSであることを示す
Android 起動しているデバイスがAndroidであることを示す
WinPhone 起動しているデバイスがWindows Phoneであることを示す
Windows 起動しているデバイスがWindwosであることを示す(Windows 8.1, Windows Phone 8.1, 全てのUWP/Windows 10 デバイス)

以下に使用例を示します。

メイン画面のXAMLにはLabelコントロールが1つ配置されていますので、はじめに以下のように編集します。x:Name=”lblDevice” の部分が変更箇所です。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:DeviceClassSample1"
             x:Class="DeviceClassSample1.MainPage">

  <Label x:Name="lblDevice"
         Text="Welcome to Xamarin Forms!"
         VerticalOptions="Center"
         HorizontalOptions="Center" />

</ContentPage>

以下は起動するデバイス毎に、Labelに表示する文字を変更する例です。

public MainPage()
{
    InitializeComponent();

    string myDevice = string.Empty;

    switch (Device.OS)
    {
        case TargetPlatform.iOS:
            myDevice = "iOS";
            break;
        case TargetPlatform.Android:
            myDevice = "Android";
            break;
        case TargetPlatform.Windows:
            myDevice = "Windows";
            break;
        case TargetPlatform.WinPhone:
            myDevice = "Windows Phone";
            break;
        case TargetPlatform.Other:
            myDevice = "その他";
            break;
    }

    lblDevice.Text = $"Hello {myDevice}";
}

以下にiOSとAndroidの実行例を示します。

[