Visual Studio での Xamarin Froms を使用したアプリ作成の基本事項Learn app-building basics with Xamarin.Forms in Visual Studio

Setup and installVerify your Xamarin environmentの手順を完了すると、このチュートリアルでは、Xamarin.Forms を使用して基本アプリ (下図) を構築する方法を示します。Once you've done the steps in Setup and install and Verify your Xamarin environment, this walkthrough shows you how to build a basic app (shown below) with Xamarin.Forms. Xamarin.Forms を使用して、すべての UI コードをポータブル クラス ライブラリ (PCL) に一度記述します。With Xamarin.Forms you'll write all of your UI code once in a portable class library (PCL). そうすると、Xamarin では、ネイティブ UI コントロールが iOS、Android、Windows プラットフォームに対して自動的にレンダリングされます。Xamarin will then automatically render the native UI controls for the iOS, Android, and Windows platforms. PCL オプションはすべてのターゲット プラットフォームでサポートされる特定の .NET API のみの使用を最も適切にサポートし、Xamarin.Forms ではプラットフォーム間で UI コードを共有できるため、この方法をお勧めします。We recommend this approach because the PCL option best supports using only those .NET APIs that are supported across all target platforms, and because Xamarin.Forms lets you share UI code across platforms.

Android、iOS、Windows Phone でのお天気アプリのサンプルThe Weather App sample on Android, iOS, and Windows Phone

作成するには次の作業を行います。You'll do these things to build it:

ヒント

このプロジェクトの完全なソース コードは GitHub の xamarin-forms-samples リポジトリにあります。You can find the complete source code for this project in the xamarin-forms-samples repository on GitHub.

ソリューションの設定Set up your solution

次の手順では、共有コードの PCL と 2 つの追加された NuGet パッケージを含む Xamarin.Forms ソリューションを作成します。These steps create a Xamarin.Forms solution that contains a PCL for shared code and two added NuGet packages.

  1. Visual Studio では、新しい [空のアプリケーション (Xamarin.Forms ポータブル)] ソリューションを作成し、名前を「 WeatherApp」とします。In Visual Studio, create a new Blank App (Xamarin.Forms Portable) solution and name it WeatherApp. このテンプレートは、検索フィールドに「 Xamarin.Forms 」と入力することによって、最も簡単に見つけることができます。You can find this template most easily by entering Xamarin.Forms into the search field.

    これがない場合は、Xamarin をインストールするか、Visual Studio 2015 の機能を有効にする必要があります。「セットアップとインストール」を参照してください。If it's not there, you might have to install Xamarin or enable the Visual Studio 2015 feature, see Setup and install.

    新しい空のアプリ (Xamarin.Forms Portable) プロジェクトを作成するCreating a new Blank App (Xamarin.Forms Portable) project

  2. ソリューションを作成するために [OK] をクリックすると、いくつかの個別のプロジェクトが表示されます。After clicking OK to create the solution, you'll have a number of individual projects:

    • WeatherApp (ポータブル): Xamarin.Forms を使用している共通のビジネス ロジックと UI コードを含む、プラットフォームで共有されるコードの記述先である PCL。WeatherApp (Portable): the PCL where you'll write code that is shared across platforms, including common business logic and UI code using with Xamarin.Forms.

    • WeatherApp.Droid: ネイティブの Android コードを含むプロジェクト。WeatherApp.Droid: the project that contains the native Android code. これは、既定のスタートアップ プロジェクトとして設定されます。This is set as the default startup project.

    • WeatherApp.iOS: ネイティブの iOS コードを含むプロジェクト。WeatherApp.iOS: the project that contains the native iOS code.

    • WeatherApp.UWP: Windows 10 UWP コードを含むプロジェクト。WeatherApp.UWP: the project that contains Windows 10 UWP code.

    • WeatherApp.Windows (Windows 8.1): ネイティブの Windows 8.1 コードを含むプロジェクト。WeatherApp.Windows (Windows 8.1): the project that contains native Windows 8.1 code.

    • WeatherApp.WinPhone (Windows Phone 8.1): ネイティブの Windows Phone コードを含むプロジェクト。WeatherApp.WinPhone (Windows Phone 8.1): the project that contains the native Windows Phone code.

    注意

    対象としていないプラットフォーム向けのプロジェクトは、自由に削除できます。You're free to delete any of the projects for a platform that you're not targeting. このチュートリアルでは、Android、iOS、Windows Phone 8.1 のプロジェクトを対象とします。For the purposes of this walkthrough, we'll be referring to the Android, iOS, and Windows Phone 8.1 projects. UWP および Windows 8.1 プロジェクトの操作は、Windows Phone 8.1 プロジェクトの操作とよく似ています。Working with the UWP and Windows 8.1 projects is very similar to working with the Windows Phone 8.1 project.

    各ネイティブ プロジェクト内では、対応するプラットフォームのネイティブ デザイナーにアクセスでき、必要に応じてプラットフォーム固有の画面と機能を実装できます。Within each native project you have access to the native designer for the corresponding platform and can implement platform specific screens and functionality as needed.

  3. 次の方法で、ソリューション内の Xamarin.Forms NuGet パッケージを最新の安定したバージョンにアップグレードします。Upgrade the Xamarin.Forms NuGet package in your solution to the latest stable version as follows. 新しい Xamarin ソリューションを作成するたびに、これを行うことをお勧めします。We recommend doing this whenever you create a new Xamarin solution:

    • [ツール] > [NuGet パッケージ マネージャー] > [ソリューションの NuGet パッケージの管理] の順に選択します。Select Tools > NuGet Package Manager > Manage NuGet Packages for Solution.

    • [更新] タブで、 Xamarin.Forms の更新プログラムを確認し、ソリューション内のすべてのプロジェクトをチェックして更新します。Under the Updates tab, check the Xamarin.Forms update and check to update all the projects in your solution. (注: Xamarin.Android.Support については、すべての更新をオフのままにします。)(Note: leave any updates for Xamarin.Android.Support unchecked.)

    • [バージョン] フィールドを利用可能な 最新の安定した バージョンに更新します。Update the Version field to the Latest stable version that is available.

    • [更新]をクリックします。Click Update.

      Xamarin.Forms NuGet パッケージの更新Updating the Xamarin.Forms NuGet package

  4. 気象データ サービスから取得した情報を処理するのに使用する Newtonsoft.Json と NuGet パッケージを PCL プロジェクトに追加します。Add the Newtonsoft.Json and NuGet package to the PCL project, which you'll use to process information retrieved from a weather data service:

    • NuGet パッケージ マネージャー (手順 3 で開かれたままのもの) で、 [参照] タブを選択し、 Newtonsoftを検索します。In the NuGet Package Manager (still open from step 3), select the Browse tab and search for Newtonsoft.

    • Newtonsoft.Jsonを選択します。Select Newtonsoft.Json.

    • WeatherApp プロジェクト (パッケージをインストールするのに唯一必要なプロジェクト) をチェックします。Check the WeatherApp project (this is the only project in which you need to install the package).

    • [バージョン] フィールドが 最新の安定した バージョンに設定されていることを確認してください。Ensure the Version field is set to the Latest stable version.

    • [インストール]をクリックします。Click Install.

    • Newtonsoft.Json NuGet パッケージの検索とインストールLocating and installing the Newtonsoft.Json NuGet package

  5. 手順 4 を繰り返して、 Microsoft.Net.Http パッケージを検索し、インストールします。Repeat step 4 to find and install the Microsoft.Net.Http package.

  6. ソリューションをビルドし、ビルド エラーがないことを確認します。Build your solution and verify that there are no build errors.

共有データ サービス コードの記述Write shared data service code

WeatherApp (ポータブル) プロジェクトは、すべてのプラットフォームで共有されているポータブル クラス ライブラリ (PCL) 用のコードを記述する場所です。The WeatherApp (Portable) project is where you'll write code for the portable class library (PCL) that's shared across all platforms. PCL は、iOS、Android、Windows Phone 用のプロジェクトでビルドされたアプリ パッケージに自動的に含まれます。The PCL is automatically included in the app packages build by the iOS, Android, and Windows Phone projects.

このサンプルを実行するには、まず http://openweathermap.org/appidで無料 API キーを申し込む必要があります。To run this sample you must first sign up for a free API key at http://openweathermap.org/appid.

次の手順では、PCL にコードを追加して、気象サービスからのデータにアクセスし、格納します。The following steps add then code to the PCL to access and store data from that weather service:

  1. WeatherApp プロジェクトを右クリックし、[追加]、[クラス...] の順に選択します。[新しい項目の追加] ダイアログで、ファイルに Weather.csという名前を指定します。Right-click the WeatherApp project and select Add > Class.... In the Add New Item dialog, name the file Weather.cs. このクラスは、気象データ サービスからのデータを保存するときに使用します。You'll use this class to store data from the weather data service.

  2. Weather.cs の内容全体を次のコードで置き換えます。Replace the entire contents of Weather.cs with the following:

    namespace WeatherApp  
    {  
        public class Weather  
        {  
            public string Title { get; set; }  
            public string Temperature { get; set; }  
            public string Wind { get; set; }  
            public string Humidity { get; set; }  
            public string Visibility { get; set; }  
            public string Sunrise { get; set; }  
            public string Sunset { get; set; }  
    
            public Weather()  
            {  
                //Because labels bind to these values, set them to an empty string to  
                //ensure that the label appears on all platforms by default.  
                this.Title = " ";  
                this.Temperature = " ";  
                this.Wind = " ";  
                this.Humidity = " ";  
                this.Visibility = " ";  
                this.Sunrise = " ";  
                this.Sunset = " ";  
            }  
        }  
    }  
    
  3. 別のクラスを DataService.cs という名前の PCL プロジェクトに追加します。これは、気象データ サービスからの JSON データを処理するのに使用します。Add another class to the PCL project named DataService.cs in which you'll use to process JSON data from the weather data service.

  4. DataService.cs の内容全体を次のコードで置き換えます。Replace the entire contents of DataService.cs with the following code:

    using System.Threading.Tasks;  
    using Newtonsoft.Json;  
    using System.Net.Http;  
    
    namespace WeatherApp  
    {  
        public class DataService  
        {  
            public static async Task<dynamic> getDataFromService(string queryString)  
            {  
                HttpClient client = new HttpClient();  
                var response = await client.GetAsync(queryString);  
    
                dynamic data = null;  
                if (response != null)  
                {  
                    string json = response.Content.ReadAsStringAsync().Result;  
                    data = JsonConvert.DeserializeObject(json);  
                }  
    
                return data;  
            }  
        }  
    }  
    
  5. 3 番目のクラスを、Core という名前の PCL に追加します。ここには、郵便番号を使用してクエリ文字列を生成し、気象データ サービスを呼び出した後に、Weather クラスのインスタンスを取り込むロジックなどの共有ビジネス ロジックを配置します。Add a third class to the PCL named Core where you'll put shared business logic, such as logic that forms a query string with a zip code, calls the weather data service, and populates an instance of the Weather class.

  6. Core.cs の内容を次のコードで置き換えます。Replace the contents of Core.cs with the following:

    using System;  
    using System.Threading.Tasks;  
    
    namespace WeatherApp  
    {  
        public class Core  
        {  
            public static async Task<Weather> GetWeather(string zipCode)  
            {  
                //Sign up for a free API key at http://openweathermap.org/appid  
                string key = "YOUR KEY HERE";  
                string queryString = "http://api.openweathermap.org/data/2.5/weather?zip="  
                    + zipCode + ",us&appid=" + key + "&units=imperial";  
    
                dynamic results = await DataService.getDataFromService(queryString).ConfigureAwait(false);  
    
                if (results["weather"] != null)  
                {  
                    Weather weather = new Weather();  
                    weather.Title = (string)results["name"];                  
                    weather.Temperature = (string)results["main"]["temp"] + " F";  
                    weather.Wind = (string)results["wind"]["speed"] + " mph";                  
                    weather.Humidity = (string)results["main"]["humidity"] + " %";  
                    weather.Visibility = (string)results["weather"][0]["main"];  
    
                    DateTime time = new System.DateTime(1970, 1, 1, 0, 0, 0, 0);  
                    DateTime sunrise = time.AddSeconds((double)results["sys"]["sunrise"]);  
                    DateTime sunset = time.AddSeconds((double)results["sys"]["sunset"]);  
                    weather.Sunrise = sunrise.ToString() + " UTC";  
                    weather.Sunset = sunset.ToString() + " UTC";  
                    return weather;  
                }  
                else  
                {  
                    return null;  
                }  
            }  
        }  
    }  
    
  7. WeatherApp PCL プロジェクトをビルドし、コードが正しいことを確認します。Build the WeatherApp PCL project to make sure the code is correct.

共有 UI コードの記述の開始Begin writing shared UI code

Xamarin.Forms を使用すると、共有 UI コードを PCL に実装できます。Xamarin.Forms let you implement shared UI code in the PCL. 次の手順では、前のセクションで追加した気象データ サービス コードで返されたデータによってボタンのテキストが更新され、そのボタンを使用して PCL に画面を追加します。In these steps you'll add a screen to the PCL with a button that updates its text with data returned by the weather data service code added in the previous section:

  1. WeatherApp プロジェクトを右クリックし、[追加] > [新しい項目] の順にクリックして、WeatherPage.cs という名前の Forms Xaml Page を追加します。[新しい項目の追加] ダイアログで、"Forms" を検索し、Forms Xaml ページを選択してから、WeatherPage.cs という名前を付けます。Add a Forms Xaml Page named WeatherPage.cs by right-clicking the WeatherApp project and selecting Add > New Item.... In the Add New Item dialog, search on "Forms," select Forms Xaml Page, and name it WeatherPage.cs.

    Xamarin.Forms は XAML ベースのため、この手順では、入れ子にされた分離コード ファイル WeatherPage.xaml.cs と共に WeatherPage.xamlファイルを作成します。Xamarin.Forms is XAML-based, so this step creates a WeatherPage.xaml file along with the nested code-behind file WeatherPage.xaml.cs. これにより、XAML またはコードで UI を生成することができます。This allows you to generate UI through either XAML or code. このチュートリアルでは、両方の一部を実行します。You'll do some of both in this walkthrough.

    新しい Xamarin.Forms XAML ページを追加するAdding a new Xamarin.Forms XAML page

  2. WeatherPage 画面にボタンを追加するには、WeatherPage.xaml の内容を次のコードで置き換えます。To add a button to the WeatherPage screen, replace the contents of WeatherPage.xaml with the following:

    <?xml version="1.0" encoding="utf-8" ?>  
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
           xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
           x:Class="WeatherApp.WeatherPage">  
      <Button x:Name="getWeatherBtn" Text="Get Weather"/>  
    </ContentPage>  
    

    ボタンの名前は x:Name 属性を使用して定義する必要があることに注意してください。そうすると、分離コード ファイルでこのボタンを名前で参照することができます。Notice that the name of the button must be defined using the x:Name attribute so that you can reference this button by name from within the code-behind file.

  3. ボタンの Clicked イベントにイベント ハンドラーを追加してボタン テキストを更新するには、WeatherPage.xaml.cs の内容を次のコードで置き換えます To add an event handler for the button's Clicked event to update the button text, replace the contents of WeatherPage.xaml.cs with the code below. (自由に "60601" を別の郵便番号に変更することができます)。(Feel free to change "60601" to another zip code.)

    using System;  
    using Xamarin.Forms;  
    
    namespace WeatherApp  
    {  
        public partial class WeatherPage: ContentPage  
        {  
            public WeatherPage()  
            {  
                InitializeComponent();  
                this.Title = "Sample Weather App";  
                getWeatherBtn.Clicked += GetWeatherBtn_Clicked;  
    
                //Set the default binding to a default object for now  
                this.BindingContext = new Weather();  
            }  
    
            private async void GetWeatherBtn_Clicked(object sender, EventArgs e)  
            {  
                Weather weather = await Core.GetWeather("60601");  
                getWeatherBtn.Text = weather.Title;  
            }  
        }  
    }  
    
  4. アプリの起動時に WeatherPage を最初の画面として開くには、 App.cs の既定のコンストラクターを次のコードで置き換えます。To open WeatherPage as the first screen when the app launches, replace the default constructor in App.cs with the following code:

    public App()  
    {  
        MainPage = new NavigationPage(new WeatherPage());  
    }  
    
  5. WeatherApp PCL プロジェクトをビルドし、コードが正しいことを確認します。Build the WeatherApp PCL project to make sure the code is correct.

Visual Studio Emulator for Android を使用してアプリをテストします。Test your app using the Visual Studio Emulator for Android

これで、アプリを実行する準備ができました。Now you're ready to run the app! アプリが気象サービスからデータを取得していることを確認するには、今回は Android バージョンのみを実行します。Let's run just the Android version for now to verify that the app is getting data from the weather service. さらに UI 要素を追加した後で、iOS と Windows Phone のバージョンも実行します Later you'll also run the iOS and Windows Phone versions after you've added more UI elements. (注: Windows 7 で Visual Studio を実行している場合は、これらと同じ手順を実行しますが、Xamarin Player が代わりに実行します)。(Note: if you're running Visual Studio on Windows 7, you'll follow these same steps but will the Xamarin Player instead.)

  1. WeatherApp.Droid プロジェクトをスタートアップ プロジェクトに設定するには、そのプロジェクトを右クリックし、 [スタートアップ プロジェクトに設定]を選択します。Set the WeatherApp.Droid project as the startup project by right-clicking it and selecting Set as Startup Project.

  2. Visual Studio ツールバーには、WeatherApp.Droid がターゲット プロジェクトとして一覧表示されます。In the Visual Studio toolbar, you'll see WeatherApp.Droid listed as the target project. デバッグ用の Android エミュレーターの 1 つを選択し、 F5キーをクリックします。Select one of the Android emulators for debugging and hit F5. Visual Studio Emulator for Android でアプリを実行するための VS Emulator オプションの 1 つを使用することをお勧めします。We recommend using one of the VS Emulator options that will run the app in the Visual Studio Emulator for Android options.

    VS エミュレーター デバッグのターゲットを選択するSelecting a VS Emulator debug target

  3. エミュレーターでアプリが起動されたら、 [Get Weather] ボタンをクリックします。When the app launches in the emulator, click the Get Weather button. ボタンのテキストが Chicago, IL に更新されました。データの Title プロパティは気象サービスから取得されたものです。You should see the button's text updated to Chicago, IL, which is the Title property of the data retrieved from the weather service.

    ボタンのタップ前後のお天気アプリWeather App before and after tapping the button

UI の外観をすべてのプラットフォームについてネイティブなものにするFinish the UI with a native look and feel across platforms

Xamarin.Forms は各プラットフォームのネイティブ UI コントロールをレンダリングして、アプリが自動的にネイティブな外観を持つようにします。Xamarin.Forms renders native UI controls for each platform so that your app automatically has a native look and feel. これをさらに見やすくするには、郵便番号用の入力フィールドで UI を終了し、サービスから返された気象データを表示します。To see this more clearly, let's finish the UI with an input field for a zip code and then display the weather data that's returned from the service.

  1. WeatherPage.xaml の内容を次のコードで置き換えます。Replace the contents of WeatherPage.xaml with the code below. すべての要素は、前述のとおり x:Name 属性を使用して名前を付けられ、それらの要素がコードから参照できるようになっていることに注意してください。Note that every element is named using the x:Name attribute as described earlier so that the element can be referenced from code. Xamarin.Forms は、さまざまな レイアウト オプション (xamarin.com) も提供します。ここで、WeatherPage は StackLayout (xamarin.com) を使用しています。Xamarin.Forms also provides a number of layout options (xamarin.com); here, WeatherPage is using StackLayout (xamarin.com).

    <?xml version="1.0" encoding="utf-8" ?>  
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
           xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
           x:Class="WeatherApp.WeatherPage">  
    
      <ContentPage.Resources>  
        <ResourceDictionary>  
          <Style x:Key="labelStyle" TargetType="Label">  
            <Setter Property="TextColor" Value="#a8a8a8" />  
            <Setter Property="FontSize" Value="Small" />  
          </Style>  
          <Style x:Key="fieldStyle" TargetType="Label">  
            <Setter Property="TextColor">  
              <OnPlatform x:TypeArguments="Color" iOS="Black" Android="White" WinPhone="White" />  
            </Setter>  
            <Setter Property="FontSize" Value="Medium" />  
          </Style>  
          <Style x:Key="fieldView" TargetType="ContentView">  
            <Setter Property="Padding" Value="10,0,0,0" />  
          </Style>  
        </ResourceDictionary>  
      </ContentPage.Resources>  
    
      <ContentPage.Content>  
        <ScrollView>  
          <StackLayout>  
            <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand"  
                  BackgroundColor="#545454">  
              <StackLayout Padding="10,10,10,10" HorizontalOptions="Start">  
                <Label Text="Search by Zip Code" TextColor="White" FontAttributes="Bold"  
                    FontSize="Medium" />  
                <Label x:Name="zipCodeLabel" Text="Zip Code" Style="{StaticResource labelStyle}" />  
                <Entry x:Name="zipCodeEntry" />  
              </StackLayout>  
              <StackLayout Padding="0,0,0,10" VerticalOptions="End">  
                <Button x:Name="getWeatherBtn" Text="Get Weather" WidthRequest="185" BorderWidth="1" >  
                  <!-- Set iOS colors; use defaults on other platforms -->  
                  <Button.TextColor>  
                    <OnPlatform x:TypeArguments="Color" iOS="White"/>  
                  </Button.TextColor>  
                  <Button.BorderColor>  
                    <OnPlatform x:TypeArguments="Color" iOS="White"/>  
                  </Button.BorderColor>  
                </Button>  
              </StackLayout>  
            </StackLayout>  
            <StackLayout Padding="10,10,10,10" HorizontalOptions="Start">  
              <Label Text="Location" Style="{StaticResource labelStyle}" />  
              <ContentView Style="{StaticResource fieldView}">  
                <Label Text="{Binding Title}" Style="{StaticResource fieldStyle}" />  
              </ContentView>  
              <Label Text="Temperature" Style="{StaticResource labelStyle}" />  
              <ContentView Style="{StaticResource fieldView}">  
                <Label x:Name="tempLabel" Text="{Binding Temperature}"  
                    Style="{StaticResource fieldStyle}" />  
              </ContentView>  
              <Label Text="Wind Speed" Style="{StaticResource labelStyle}" />  
              <ContentView Style="{StaticResource fieldView}">  
                <Label x:Name="windLabel" Text="{Binding Wind}" Style="{StaticResource fieldStyle}" />  
              </ContentView>  
              <Label Text="Humidity" Style="{StaticResource labelStyle}" />  
              <ContentView Style="{StaticResource fieldView}">  
                <Label x:Name="humidityLabel" Text="{Binding Humidity}"  
                    Style="{StaticResource fieldStyle}" />  
              </ContentView>  
              <Label Text="Visibility" Style="{StaticResource labelStyle}" />  
              <ContentView Style="{StaticResource fieldView}">  
                <Label x:Name="visibilitylabel" Text="{Binding Visibility}"  
                    Style="{StaticResource fieldStyle}" />  
              </ContentView>  
              <Label Text="Time of Sunrise" Style="{StaticResource labelStyle}" />  
              <ContentView Style="{StaticResource fieldView}">  
                <Label x:Name="sunriseLabel" Text="{Binding Sunrise}"  
                    Style="{StaticResource fieldStyle}" />  
              </ContentView>  
              <Label Text="Time of Sunset" Style="{StaticResource labelStyle}" />  
              <ContentView Style="{StaticResource fieldView}">  
                <Label x:Name="sunsetLabel" Text="{Binding Sunset}"  
                    Style="{StaticResource fieldStyle}" />  
              </ContentView>  
            </StackLayout>  
          </StackLayout>  
        </ScrollView>  
      </ContentPage.Content>  
    </ContentPage>  
    

    Xamarin.Forms の OnPlatform タグの使用に注意してください。Note the use of the OnPlatform tag in Xamarin.Forms. OnPlatform により、アプリが実行されている現在のプラットフォーム固有のプロパティ値が選択されます (外部 XAML 構文 (xamarin.com) を参照)。OnPlatform selects a property value that's specific to the current platform on which the app is running (see External XAML Syntax (xamarin.com). このタグは、個々のデータ フィールドにテキストの色を設定するために使用します。Android と Windows Phone には白、iOS には黒を指定します。We're using it here to set a different text color for the data fields: White on Android and Windows Phone, Black on iOS. OnPlatform を任意のプロパティおよび任意のデータ型に対して使用し、プラットフォーム固有の調整を XAML の任意の場所に行うことができます。You can use OnPlatform for any properties and any data types to make platform-specific adjustments anywhere in your XAML. 分離コード ファイルで、 Device.OnPlatform API を同じ目的のために使用することができます。In the code-behind file, you can use the Device.OnPlatform API for the same purpose.

  2. WeatherPage.xaml.csで、 GetWeatherBtn_Clicked イベント ハンドラーを次のコードで置き換えます。In WeatherPage.xaml.cs, replace the GetWeatherBtn_Clicked event handler with the code below. このコードは、入力フィールドに郵便番号があることを確認し、その郵便番号のデータを取得し、全画面のバインド コンテキストを結果の Weather インスタンスに設定してから、ボタン テキストを "再検索" に設定します。This code verifies that there's a zip code in the entry field, retrieves data for that zip code, sets the whole screen's binding context to the resulting Weather instance, then sets the button text to "Search Again." UI の各ラベルが Weather クラスのプロパティにバインドされるため、画面のバインド コンテキストを Weather インスタンスに設定すると、それらのラベルが自動的に更新されることに注意してください。Note that each label in the UI binds to a property of the Weather class, so when you set the screen's binding context to a Weather instance, those labels update automatically.

    private async void GetWeatherBtn_Clicked(object sender, EventArgs e)  
    {  
        if (!String.IsNullOrEmpty(zipCodeEntry.Text))  
        {  
            Weather weather = await Core.GetWeather(zipCodeEntry.Text);  
            this.BindingContext = weather;  
            getWeatherBtn.Text = "Search Again";  
        }  
    }  
    
  3. 適切なプロジェクトを右クリックし、[スタートアップ プロジェクトに設定] を選択し、デバイスまたはエミュレーターかシミュレーターのいずれかでアプリを開始して、3 つのすべてのプラットフォーム (Android、iOS、Windows Phone) 上でアプリを実行します。Run the app on all three platforms—Android, iOS, and Windows Phone—by right-clicking the appropriate project, selecting Set as startup project, and starting the app either on a device or in the emulator or simulator. 有効な米国の郵便番号 (60601 など) を入力し、[Get Weather] ボタンを押してその地域の気象データを次のように表示します。Enter a valid United States zip code (such as 60601) and press the Get Weather button to display weather data for that region as shown below. もちろん、iOS プロジェクトのネットワーク上で Visual Studio が Mac OS X コンピューターに接続されている必要があります。You'll of course need to have Visual Studio connected to a Mac OS X computer on your network for the iOS project.

    Android、iOS、Windows Phone でのお天気アプリのサンプルThe Weather App sample on Android, iOS, and Windows Phone

    このプロジェクトの完全なソース コードは GitHub の xamarin-forms-samples リポジトリにあります。The complete source code for this project is in the xamarin-forms-samples repository on GitHub.