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

セットアップとインストール」と「Xamarin 環境を検証する」の手順を完了しましたが、このチュートリアルでは、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 with Xamarin.Forms. Xamarin.Forms を使用し、すべての UI コードを .NET Standard クラス ライブラリに一度記述します。With Xamarin.Forms, you'll write all of your UI code once in a .NET Standard class library. そうすると、Xamarin は、iOS、Android、およびユニバーサル Windows プラットフォームのネイティブ UI コントロールを自動的にレンダリングします。Xamarin will then automatically render the native UI controls for the iOS, Android, and Universal Windows platforms.

通常、この共通コードには共有プロジェクトではなく、.NET Standard ライブラリを使用することをお勧めします。It's usually better to use a .NET Standard library rather than a Shared project for this common code. .NET Standard ライブラリには、あらゆるターゲット プラットフォームで実行できる .NET API が含まれています。The .NET Standard library includes those .NET APIs that can run on all target platforms.

下の画像のようなアプリケーションが作成されます。Here's the application that you'll build. (左から右へ) iOS フォン、Android フォン、Windows 10 のユニバーサル Windows プラットフォーム (UWP) で実行されています。It's running (from left to right) on iOS and Android phones, and the Universal Windows Platform (UWP) of Windows 10:

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

このアプリケーションは次の手順で作成します。You'll do these steps to build this application:

ヒント

このプロジェクトの完全なソース コードは 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

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

  1. Visual Studio で、新しいクロスプラットフォーム アプリ (Xamarin.Forms) ソリューションを作成し、名前を WeatherApp とします。In Visual Studio, create a new Cross-Platform App (Xamarin.Forms) solution and name it WeatherApp. 左側にある一覧から [Visual C#][クロスプラットフォーム] を選択して、テンプレートを探します。Look for the template by selecting Visual C# and Cross-Platform from the list at the left.

    新しいクロスプラットフォーム Xamarin.Forms アプリ プロジェクトを作成するCreating a new Cross-Platform Xamarin.Forms App project

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

  2. [OK] をクリックした後、オプションをいくつか選択することがあります。After clicking OK, you'll have the opportunity to select some options. [空のアプリ][.NET Standard] を選択します。Pick Blank App and .NET Standard:

    クロスプラットフォーム アプリ プロジェクトの新規作成Creating a new Cross Platform App project

  3. [OK] をクリックしてソリューションを作成すると、4 つのプロジェクトを含むソリューションが与えられます。After clicking OK to create the solution, you'll have a solution with four projects:

    • WeatherApp: Xamarin.Forms を使用する共通のビジネス ロジックと UI コードを含む、プラットフォーム間で共有されるコードの記述先である .NET Standard ライブラリ。WeatherApp: the .NET Standard library where you'll write code that is shared across platforms, including common business logic and UI code using Xamarin.Forms.

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

    • 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.

    注意

    対象としていないプラットフォーム向けのプロジェクトは、自由に削除できます。You're free to delete any of the projects for a platform that you're not targeting.

    各ネイティブ プロジェクト内では、対応するプラットフォームのネイティブ デザイナーにアクセスでき、必要に応じてプラットフォーム固有の画面と機能を実装できます。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.

  4. 次の方法で、ソリューション内の Xamarin.Forms NuGet パッケージを最新の安定したバージョンにアップグレードします。Upgrade the Xamarin.Forms NuGet package in your solution to the latest stable version as follows:

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

    • [更新] タブで、Xamarin.Forms のパッケージを確認し、ソリューション内のすべてのプロジェクトを確認して更新します。Under the Updates tab, check the Xamarin.Forms package and check to update all the projects in your solution. (Xamarin Android サポート ライブラリの更新プログラムを選択しないでください。)(Do not select updates for the Xamarin Android support libraries.)

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

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

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

    新しい Xamarin.Forms ソリューションを作成するときは常に Xamarin.Forms バージョンをアップグレードする習慣をつけてください。You should get into the habit of upgrading the Xamarin.Forms version whenever you create a new Xamarin.Forms solution. Android サポート ライブラリは更新しないでください。Do not update any Android support libraries. Android サポート ライブラリは、Xamarin.Forms バージョンを更新するときに必要に応じて更新されます。If necessary, these libraries will be updated when you update the Xamarin.Forms version.

  5. Newtonsoft.Json NuGet パッケージを WeatherApp プロジェクトに追加します。Add the Newtonsoft.Json NuGet package to the WeatherApp project. このライブラリは、気象データ サービスから取得された情報の処理に使用されます。This libary is used to process information retrieved from a weather data service:

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

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

    • パッケージをインストールするのに唯一必要なプロジェクトである WeatherApp プロジェクトを選択します。Check the WeatherApp project, which 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

  6. 手順 5 を繰り返し、Microsoft.CSharp パッケージを見つけ、.NET Standard プロジェクトにインストールします。Repeat step 5 to find and install the Microsoft.CSharp package in the .NET Standard project. このライブラリは、.NET Standard ライブラリの C# dynamic データ型を使用するために必要です。This library is necessary to use the C# dynamic data type in a .NET Standard library.

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

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

WeatherApp .NET Standard ライブラリ プロジェクトは、すべてのプラットフォームで共有されるコードを記述する場所です。The WeatherApp .NET Standard library project is where you'll write code that's shared across all platforms. このライブラリは、iOS、Android、Windows 用のプロジェクトによってビルドされたアプリ パッケージに参照されます。This library is referenced by the app packages build by the iOS, Android, and Windows 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.

次の手順では、.NET Standard ライブラリにコードを追加して、気象サービスからのデータにアクセスし、そのデータを格納します。The following steps then add code to the .NET Standard library 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 code:

    namespace WeatherApp
    {
        public class Weather
        {
            // Because labels bind to these values, set them to an empty string to
            // ensure that the label appears on all platforms by default.
            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; } = " ";
        }
    }
    
  3. WeatherApp プロジェクト (DataService.cs) に別のクラスを追加します。これは、気象データ サービスからの JSON データを処理するのに使用します。Add another class to the WeatherApp project named DataService.cs that 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.Net.Http;
    using System.Threading.Tasks;
    using Newtonsoft.Json;
    
    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. Core.cs という名前の WeatherApp プロジェクトは共有のビジネス ロジックを配置する場所です。ここに 3 番目のクラスを追加します。Add a third class to the WeatherApp project named Core.cs where you'll put shared business logic. このコードは、郵便番号を使用してクエリ文字列を生成し、気象データ サービスを呼び出し、Weather クラスのインスタンスにデータを取り込みます。This code 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 code:

    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 API 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. YOUR API KEY HERE を取得した API キーで置き換えます。Replace YOUR API KEY HERE with the API key you obtained. ここでも引用符で囲む必要があります。It still needs quotes around it!

  8. WeatherApp ライブラリ プロジェクトをビルドし、コードが正しいことを確認します。Build the WeatherApp library project to make sure the code is correct.

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

Xamarin.Forms を使用すると、.NET Standard ライブラリに共有 UI コードを実装できます。Xamarin.Forms lets you implement shared UI code in the .NET Standard library. 次の手順では、ボタンを含むページをプロジェクトに追加します。In these steps, you'll add a page to the project with a button. このボタンを押すと、前のセクションで紹介した気象サービスによって返されたデータを利用し、ページ上のテキストが更新されます。This button updates the text on the page with data returned by the weather service that you saw in the previous section:

  1. WeatherApp プロジェクトを右クリックし、[追加]、[新しい項目] の順に選択し、WeatherPage という名前のコンテンツ ページを追加します。[新しい項目の追加] ダイアログ ボックスで [コンテンツ ページ] を選択します。Add a Content Page named WeatherPage by right-clicking the WeatherApp project and selecting Add > New Item.... In the Add New Item dialog, select Content Page. [コンテンツ ページ (C#)][コンテンツ ビュー] を選択しないように注意してください。Be careful not to select Content Page (C#) or Content View. これに WeatherPage.xaml という名前を付けます。Name it WeatherPage.xaml.

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

    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 またはコードで記述できます。You can write user-interface logic in either XAML or code. このチュートリアルでは、両方の一部を実行します。You'll do some of both in this walkthrough.

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

    <?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"
           Title="Sample Weather App">
      <Button x:Name="getWeatherBtn"
              Text="Get Weather"
              Clicked="GetWeatherBtn_Clicked" />
    </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();
    
                //Set the default binding to a default object for now
                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.xaml.cs の既定のコンストラクターを次のコードで置き換えます。To open WeatherPage as the first screen when the app launches, replace the default constructor in App.xaml.cs with the following code:

    public App()
    {
        InitializeComponent();
    
        MainPage = new NavigationPage(new WeatherPage());
    }
    
  5. WeatherApp プロジェクトをビルドし、コードが正しいことを確認します。Build the WeatherApp 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 と UWP のバージョンも実行します。Later you'll also run the iOS and UWP versions after you've added more UI elements.

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

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

    Android Emulator のデバッグ ターゲットを選択するSelecting an Android Emulator debug target

    注意

    Android プロジェクトで Newtonsoft.Json ファイルが見つからないことが Visual Studio で示された場合、その NuGet パッケージを Android プロジェクトに追加します。If Visual Studio indicates that the Android project cannot find the Newtonsoft.Json file, add that NuGet package to the Android project.

  3. エミュレーターでアプリが起動されたら、 [Get Weather] ボタンをクリックします。When the app launches in the emulator, click the Get Weather button. ボタンのテキストが Chicago に更新されました。これは、気象サービスから取得されたデータの Title プロパティです。You should see the button's text updated to Chicago, 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 が完成し、郵便番号の入力フィールドと気象データを表示するためのコントロールが含まれると、ネイティブの外観がよりはっきり伝わります。You can see this native look and feel more clearly by finishing the UI to include an input field for a zip code and controls to display weather data.

  1. WeatherPage.xaml の内容を次のマークアップで置き換えます。Replace the contents of WeatherPage.xaml with the markup below. 前述のように x:Name 属性を使用して名前が付けられた要素は、コードから参照できます。Elements that are named using the x:Name attribute as described earlier can be referenced from code. Xamarin.Forms では多数のレイアウト オプションも提供しています。Xamarin.Forms also provides a number of layout options. ここでは、WeatherPage では、GridStackLayout が使用されています。Here, WeatherPage is using Grid and StackLayout.

    <?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"
                 Title="Sample Weather App">
    
        <ContentPage.Resources>
            <ResourceDictionary>
                <Style x:Key="labelStyle" TargetType="Label">
                    <Setter Property="FontSize" Value="Small" />
                    <Setter Property="TextColor" Value="#404040" />
                </Style>
                <Style x:Key="fieldStyle" TargetType="Label">
                    <Setter Property="FontSize" Value="Medium" />
                    <Setter Property="Margin" Value="10,0,0,0" />
                </Style>
            </ResourceDictionary>
        </ContentPage.Resources>
    
        <StackLayout>
            <Grid BackgroundColor="#545454" Padding="10, 10, 10, 10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
    
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
    
                <Label Text="Search by Zip Code"
                       Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3"
                       HorizontalOptions="Center"
                       TextColor="White" FontAttributes="Bold" FontSize="Medium" />
    
                <Label x:Name="zipCodeLabel" Text="Zip Code:"
                       Grid.Row="1" Grid.Column="0"
                       VerticalOptions="Center"
                       Style="{StaticResource labelStyle}"
                       TextColor="#C0C0C0" />
    
                <Entry x:Name="zipCodeEntry"
                       Grid.Row="1" Grid.Column="1"
                       VerticalOptions="Center"
                       Margin="5,0"
                       BackgroundColor="DarkGray"
                       TextColor="White" />
    
                <Button x:Name="getWeatherBtn" Text="Get Weather"
                        Grid.Row="1" Grid.Column="2"
                        HorizontalOptions="Center"
                        VerticalOptions="Center"
                        BorderWidth="1"
                        BorderColor="White"
                        BackgroundColor="DarkGray"
                        TextColor="White"
                        Clicked="GetWeatherBtn_Clicked" />
            </Grid>
    
            <ScrollView VerticalOptions="FillAndExpand">
                <StackLayout Padding="10,10,10,10" HorizontalOptions="Start">
                    <Label Text="Location" Style="{StaticResource labelStyle}" />
                    <Label Text="{Binding Title}" Style="{StaticResource fieldStyle}" />
    
                    <Label Text="Temperature" Style="{StaticResource labelStyle}" />
                    <Label Text="{Binding Temperature}" Style="{StaticResource fieldStyle}" />
    
                    <Label Text="Wind Speed" Style="{StaticResource labelStyle}" />
                    <Label Text="{Binding Wind}" Style="{StaticResource fieldStyle}" />
    
                    <Label Text="Humidity" Style="{StaticResource labelStyle}" />
                    <Label Text="{Binding Humidity}" Style="{StaticResource fieldStyle}" />
    
                    <Label Text="Visibility" Style="{StaticResource labelStyle}" />
                    <Label Text="{Binding Visibility}" Style="{StaticResource fieldStyle}" />
    
                    <Label Text="Time of Sunrise" Style="{StaticResource labelStyle}" />
                    <Label Text="{Binding Sunrise}" Style="{StaticResource fieldStyle}" />
    
                    <Label Text="Time of Sunset" Style="{StaticResource labelStyle}" />
                    <Label Text="{Binding Sunset}" Style="{StaticResource fieldStyle}" />
                </StackLayout>
            </ScrollView>
        </StackLayout>
    </ContentPage>
    

    ここでは示されていませんが、XAML ファイルの OnPlatform タグを使用すると、アプリが実行されている現在のプラットフォームに固有のプロパティ値を選択できます (基本的な XAML 構文に関するページを参照してください)。分離コード ファイルでは、Device.iOSDevice.AndroidDevice.UWP という名前で Device クラスに定義されている定数と、Device.RuntimePlatform プロパティを比較することで、アプリケーションが実行されているプラットフォームを判断できます。Although not shown here, you can use the OnPlatform tag in XAML files to select a property value that's specific to the current platform on which the app is running (see Essential XAML Syntax.) In the code-behind file, you can determine what platform the application is running on by comparing the Device.RuntimePlatform property with constants defined in the Device class named Device.iOS, Device.Android, and Device.UWP.

  2. WeatherPage.xaml.cs で、GetWeatherBtn_Clicked イベント ハンドラーを次のコードで置き換えます。In WeatherPage.xaml.cs, replace the GetWeatherBtn_Clicked event handler with the code below. このコードによって、入力フィールドに郵便番号が入っていることが確認され、その郵便番号を対象とするデータが取得されます。This code verifies that there's a zip code in the entry field and retrieves data for that zip code. 次に、結果的に生成された Weather インスタンスにページ全体のバインディング コンテキストが設定されます。It then sets the whole page's binding context to the resulting Weather instance. 最後にボタンのテキストが "Search Again" に設定されます。The code concludes by setting the button text to "Search Again." UI の各ラベルは、Weather クラスのプロパティにバインドされます。Each label in the UI binds to a property of the Weather class. 画面のバインディング コンテンツを Weather インスタンスに設定すると、バインドされているラベルが自動的に更新されます。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);
            BindingContext = weather;
            getWeatherBtn.Text = "Search Again";
        }
    }
    
  3. 適切なプロジェクトを右クリックし、[スタートアップ プロジェクトに設定] を選択し、デバイスかエミュレーターでアプリを開始し、3 つのすべてのプラットフォーム上でアプリを実行します。Run the app on all three platforms by right-clicking the appropriate project, selecting Set as startup project, and starting the app on either a device or emulator. 有効な 5 桁の米国の郵便番号を入力し、[Get Weather] ボタンを押すと、その地域の気象データが表示されます。Enter a valid United States five-digit zip code and press the Get Weather button to display weather data for that region. iOS プロジェクトのネットワーク上で Visual Studio が Mac コンピューターに接続されている必要があります。You'll need to have Visual Studio connected to a Mac computer on your network for the iOS project.

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

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