[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();
	};
}

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

[Xamarin][CrossPlatform][Control] WebView

WebViewコントロールを使用すると、Webブラウザを実装することができます。

WebViewコントロールに表示するページ(URL)は、Sourceプロパティで指定します。

戻れるページがあるかどうかはCanGoBackプロパティ、進めるページがあるかどうかはCanGoForwardプロパティがTrueかどうかを確認します。

以下はWebViewコントロールを配置するXAMLの例です。

一番上にはSearchBarコントロール、次にWebViewコントロール、一番下にButtonコントロールを2つ(戻る、進む)配置しています。

[<]ボタンはWebViewのCanGoBackプロパティと、[>]はCanGoForwadプロパティをバインディングし、戻るページがある場合と、進むページがある場合に押せるようになります。

<StackLayout Margin="10,30,10,10">
  <SearchBar x:Name="searchBar" Placeholder="Enter url" />
  <WebView x:Name="webView" 
    VerticalOptions="FillAndExpand"
    Source="https://www.xamarin.com/" />

  <StackLayout Orientation="Horizontal" 
    BindingContext="{x:Reference webView}">
    <Button x:Name="btnBack" Text="&lt;" 
      IsEnabled="{Binding CanGoBack}" />
    <Button x:Name="btnForawd" Text="&gt;" 
      IsEnabled="{Binding CanGoForward}" />
  </StackLayout>
</StackLayout>

次に、それぞれのイベントを使用する例をみていきましょう。

検索用の入力エリアではSearchBarのボタンが押されたときのイベントで、入力されたURLへ移動できるようにしています。入力されたURLはWebViewコントロールのSourceプロパティに設定します。

ページが遷移するときは、Navigatingというイベントが発生します。ページ遷移中はSearchBarコントロールが使用できないようにIsEnabledプロパティにfalseを設定しています。ページ遷移が完了したときはNavigatedイベントが発生するのでIsEnabledイベントにtrueを設定して再び使用できるようにしています。

[<]ボタンがクリックされたときは、WebViewコントロールのGoBack()メソッドを実行し、[>]ボタンが句陸されたときはGoForward()メソッドを実行するようにしています。

public MainPage()
{
  InitializeComponent();

  // [検索]ボタンタップ時の処理
  searchBar.SearchButtonPressed += (sender, e) =>
  {
    // 指定されたURLを開く
    webView.Source = searchBar.Text;
  };

  // ページ遷移中の処理
  webView.Navigating += (sender, e) =>
  {
    searchBar.IsEnabled = false;  
  };

  // ページ遷移完了時の処理
  webView.Navigated += (sender, e) =>
  {
    searchBar.IsEnabled = true;
  };

  // [<]ボタンクリック時の処理
  btnBack.Clicked += (sender, e) =>
  {
    webView.GoBack();
  };

  // [>]ボタンクリック時の処理
  btnForawd.Clicked += (sender, e) =>
  {
    webView.GoForward();
  };
}

 

 

 

[Xamarin][CrossPlatform][Control] Stepper

Stepperコントロールは[+]と[-]のボタンが1つずつ付いているコントロールで、タップする毎に値を増減させることができます。

変更可能な値の範囲はMinimumプロパティとMaximumプロパティで設定します。

また、1回のタップによる値の増減値幅はIncrementプロパティで設定し、現在値の取得と設定はValueプロパティを使用します。

以下は、StepperとLabelボタンを1つずつ配置して、Stepperがタップされる毎に現在値を表示する例です。

最小値を-10、最大値を10に設定しています。

<StackLayout Margin="10,30,10,10"> 
  <Stepper x:Name="stepperRed"
    Minimum="-10" Maximum="10"
    Increment="1" Value="0" />

  <Label x:Name="label" Text="" />
</StackLayout>

Stepperは値が変化すると、ValueChangedイベントが発生します。

以下はValueChangedイベントが発生したときに、Labelに値を表示する例です。

public MainPage()
{
    InitializeComponent();

    stepper.ValueChanged += (sender, e) =>
    {
        label.Text = stepper.Value.ToString();
    };
}

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