[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.OnPlatformで様々なサイズを微調整する

Device.OnPlatformメソッドを使用するとターゲット(iOS, Android, Windows Phone)の微調整を行うことができます。

構文は以下の通りで引数は3つあります。

構文:
Device.OnPlatform(iOS用の値, Android用の値, Windows Phone用の値)

このメソッドは、実行時にターゲットを判断します。現在起動しているターゲットがiOSである場合には第1引数の値を、Androidである場合は第2引数の値を、Windows Phoneである場合は第3引数の値を返します。

以下はターゲット毎にパディングの値を変更する例です。Thicknessのそれぞれの引数は、順に左、上、右、下を表しており、この例では第2引数の「上」のパディング値をターゲット毎に変更できるようにしています。

layout.Padding = new Thickness (5, Device.OnPlatform(30,0,0), 5, 0);

また、以下のように記述することで、ターゲット毎に処理を実行させることもできます。

Device.OnPlatform(
    Android: () =>
    {
        lblIdiom.BackgroundColor = Color.Black;
    },
    iOS:() =>
    {
        lblIdiom.BackgroundColor = Color.Red;
    },
    WinPhone: () =>
    {
        lblIdiom.BackgroundColor = Color.Purple;
    }
);

[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][Control] ListView

ListViewはDatePickerやTimePickerのような外観を持つコントロールで、複数の値から任意の値を選択することができます。

ListViewには任意の複数の値を表示することができます。

以下はListViewとその下にLabelコントロールを配置するXAMLの例です。

<StackLayout Margin="10,30,10,10">
  <ListView x:Name="lsvItems" SeparatorColor="Fuchsia"/>
  <Label x:Name="lblItem" />
</StackLayout>

以下は、ListViewに大吉、中吉、小吉という文字を表示し、選択された文字をLabelに表示する例です。

ListViewに表示する項目はItemSourceプロパティで設定することができます。項目が選択されるとItemSelectedというイベントが発生します。選択された項目はSelectedItemで取得することができます。

public ListViewSample3Page()
{
	InitializeComponent();

	string[] strItems = new string[] { "大吉", "中吉", "小吉" };

	// ListViewに表示する選択肢を設定
	lsvItems.ItemsSource = strItems;

	// ListViewでアイテムが洗濯されたときの処理
	lsvItems.ItemSelected += (sender, e) => {
		// 選択された値をラベルに表示
		lblItem.Text = lsvItems.SelectedItem.ToString();
	};
}

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