Visual Studio で Xamarin を使用してネイティブ UI を備えたアプリを作成する

Visual Studio 2015
 

Visual Studio 2017 RC の最新のドキュメントの詳細については、Visual Studio 2017 RC ドキュメントをご参照ください。

セットアップとインストールXamarin 環境を検証する の手順を完了したら、このチュートリアルで、ネイティブ UI レイヤーを使用して Android と Windows Phone で動作する基本的な Xamarin アプリを作成できるようになります。

Android と Windows Phone 用 Xamarin アプリ

作成するには次の作業を行います。

System_CAPS_ICON_note.jpg メモ

Xamarin の開発者向けドキュメントには、以下の一覧に示すクイック スタートと詳細情報の両方のセクションで、いくつかのチュートリアルも用意されています。 これらのすべてのページで Visual Studio 固有のチュートリアルを表示するには、必ずページの右上で "Visual Studio" を選びます。

Android、Windows Phone、および共有プロジェクトを作成してから、ソリューションを若干調整します。

Android プロジェクトを作成する

  1. Visual Studio で、新しい [空のアプリケーション (Android)] プロジェクトを作成し、名前を「WeatherApp」とします。

    このテンプレートは、[新しいプロジェクト] ダイアログ ボックスの [Visual C#] -> [Android] にあります。

    これがない場合は、Xamarin をインストールするか、Visual Studio 2015 の機能を有効にする必要があります。「セットアップとインストール」をご覧ください。

  2. プロジェクトの名前を「WeatherApp (Android)」に変更する

Windows Phone プロジェクトを追加する

  1. Blank App (Windows Phone)」プロジェクトをソリューションに追加して、名前を「WeatherAppWindows」とします。

    このテンプレートは、[新しいプロジェクト] ダイアログ ボックスの [Visual C#] -> [Windows] > [Windows 8] -> [Windows Phone] にあります。

    これがない場合は、Windows 8.1 アプリを開発するツールのインストールが必要となる場合があります。 これを行うには、[プログラムと機能] を開いて Visual Studio のセットアップを変更します。

共有プロジェクトを作成する

  1. ソリューションに [共有プロジェクト] を追加し、名前を「共有」とします。

    このテンプレートは、[新しいプロジェクト] ダイアログ ボックスの [Visual C#] -> [Windows] にあります。

  2. [WeatherApp (Android)] プロジェクトのショートカット メニューを開いてから、[追加] -> [参照] を選びます。

  3. 開いたダイアログ ボックスから、[共有] プロジェクトを選択して [OK] をクリックします。

    共有プロジェクト参照

  4. このプロセスを Windows Phone プロジェクトでも繰り返します。

ソリューションを若干調整する

  1. [ツール] -> [NuGet Package Manager] -> [Manage NuGet Packages for Solution] を選び、[Newtonsoft.Json] NuGet パッケージをソリューションに追加します。

    Newtonsoft.JSON Nuget パッケージ

    このパッケージのクラスを使用して、気象サービスから取得する情報を処理します。

  2. [WeatherApp (Android)] プロジェクトのショートカット メニューを開いてから、[追加] -> [参照] を選びます。

  3. [参照マネージャー] ダイアログ ボックスで、[Microsoft.CSharp] アセンブリへの参照を追加します。

ソリューションの構成が完了しました。 これで、アプリを実行して動作を確認することができます。

Android アプリを実行する

  1. Visual Studio で、[デバッグ] -> [デバッグの開始] を選びます。

    Visual Studio Emulator for Android が起動します。

    System_CAPS_ICON_tip.jpg ヒント

    Visual Studio Emulator for Android の代わりに、Xamarin Android Player を使用することもできます。

    アプリが Android エミュレーターに表示されます。 アプリには、「Hello World, Click Me!」というテキストが付いたボタンが表示されます。 これでアプリが動作することが確認できました。

  2. デバッガーを停止します。

Windows アプリを実行する

  1. WeatherAppWindows (Windows Phone 8.1) プロジェクトのショートカット メニューを開き、[スタートアップ プロジェクトに設定] をクリックします。

  2. [標準] ツールバーで、エミュレーター オプションの 1 つを選択します。

    Windows Phone エミュレータのイメージのリスト

  3. キーボードの F5 キーを押して、Windows Phone エミュレーターでアプリを実行します。

    エミュレーターでアプリが実行されますが、既定で [Blank App (Windows Phone)] テンプレートには UI がないので、コントロールは表示されません。

  4. デバッガーを停止します。

アプリ間で共有したいコードを [共有] プロジェクトに追加します。 共有プロジェクトは、基本的には両方のプラットフォームで実行されるコードのコンテナーです。 このプロジェクトに追加したものは、自動的に Android プロジェクトおよび Windows Phone プロジェクトの両方に含まれます。

  1. [共有] プロジェクトにクラスを追加し、名前を「Weather」とします。

    [共有] プロジェクトのショートカット メニューで、[追加] -> [新しい項目] の順に選びます。 次に、[新しい項目の追加] ダイアログ ボックスで、[クラス] 項目を選択して名前を「Weather」とします。

  2. Weather.cs ファイルを開き、クラスの宣言を次のコードに置き換えます。

    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; }  
    
    }  
    
    

    このクラスは、気象サービスからのデータを保存するときに使用します。

  3. [共有] プロジェクトに新たにクラスを追加して、そのファイルの名前を「DataService」とします。

  4. DataService.cs ファイルを開き、先頭に次のステートメントを追加します。

    using System.Threading.Tasks;  
    using System.Net;  
    using System.IO;  
    using Newtonsoft.Json;  
    
    
  5. クラスの宣言を次のコードに置き換えます。

    public class DataService  
    {  
        public static async Task<dynamic> getDataFromService(string queryString)  
        {  
            HttpWebRequest request = (HttpWebRequest)WebRequest.Create(queryString);  
    
            var response = await request.GetResponseAsync().ConfigureAwait(false);  
            var stream = response.GetResponseStream();  
    
            var streamReader = new StreamReader(stream);  
            string responseText = streamReader.ReadToEnd();  
    
            dynamic data = JsonConvert.DeserializeObject(responseText);  
    
            return data;  
         }  
    }  
    
    

    このコードは、サービスから取得した JSON データを処理する 1 つの方法を示しています。

  6. [共有] プロジェクトに別のクラスを追加して、名前を「Core」とします。

    この Core という名前は任意です。 このクラスは、単に共有ビジネス ロジックを配置する場所に過ぎません。 ここでは、郵便番号を使用してクエリ文字列を生成するロジックが、気象サービスを呼び出した後に、Weather クラスのインスタンスにデータを取り込んでいます。

  7. Core.cs を開いて、先頭に次のステートメントを追加します。

    using System.Threading.Tasks;  
    
    
  8. クラスの宣言を次のコードに置き換えます。

    public class Core  
    {  
        public static async Task<Weather> GetWeather(string zipCode)  
        {  
            string queryString =   
                "https://query.yahooapis.com/v1/public/yql?q=select+*+from+weather.forecast+where+location=" +  
                 zipCode + "&format=json";  
    
            dynamic results = await DataService.getDataFromService(queryString).ConfigureAwait(false);  
    
            dynamic weatherOverview = results["query"]["results"]["channel"];  
    
            if ((string)weatherOverview["description"] != "Yahoo! Weather Error")  
            {  
                Weather weather = new Weather();  
    
                weather.Title = (string)weatherOverview["description"];  
    
                dynamic wind = weatherOverview["wind"];  
                weather.Temperature = (string)wind["chill"];  
                weather.Wind = (string)wind["speed"];  
    
                dynamic atmosphere = weatherOverview["atmosphere"];  
                weather.Humidity = (string)atmosphere["humidity"];  
                weather.Visibility = (string)atmosphere["visibility"];  
    
                dynamic astronomy = weatherOverview["astronomy"];  
                weather.Sunrise = (string)astronomy["sunrise"];  
                weather.Sunset = (string)astronomy["sunset"];  
    
                return weather;  
            }  
            else  
            {  
                return null;  
            }  
        }  
    }  
    
    

次に、ユーザー インターフェイスを設計して共有コードに接続してから、アプリを実行します。

アプリの外観を設計する

  1. ソリューション エクスプローラーで、[WeatherApp (Android)] -> [リソース] -> [レイアウト] フォルダーを展開し、Main.axml ファイルを選んでから、Enter キーを押します。

    [Main.axml] が、ビジュアル デザイナーで開かれます。 Java 関連のエラーが表示される場合、このブログの投稿を参照してください。

    System_CAPS_ICON_tip.jpg ヒント

    このプロジェクトには、他にも多くのファイルがあります。 それらの説明はこのトピックの範囲を超えていますが、Android プロジェクトの構造を詳細に知りたい場合は、「Part 2 Deep Dive」を参照してください。

  2. デザイナーで表示される既定のボタンを削除します。

  3. [ツールボックス]から、[相対レイアウト] コントロールをデザイナーにドラッグします。

    このコントロールは、他のコントロールの親コンテナーとして使用できます。

  4. [ツールボックス]から、[TextView] コントロールを [相対レイアウト] コントロールにドラッグします。

  5. [プロパティ] ウィンドウで、次のプロパティを設定します。

    プロパティ
    テキスト郵便番号:
    ID@+id/ZipCodeLabel
    layout_centerVerticalTRUE
    layout_marginLeft10dp
    textSize20sp
    System_CAPS_ICON_tip.jpg ヒント

    選択可能な値のドロップダウン リストが表示されないプロパティが多いことに注意してください。 特定のプロパティにどのような文字列値を使用すべきなのか、推測しにくい場合があります。 情報が必要な場合は、R.attr クラスのページでプロパティの名前を検索してみてください。

    また、クイック Web 検索を実行すると、他のユーザーが同じプロパティを使ったページ「http://stackoverflow.com/」が表示されることもよくあります。

  6. [ツールボックス]から[番号] コントロールを [相対レイアウト] にドラッグし、[郵便番号] ラベルの隣に配置します。

    数字をデザイナー上にドラッグ

  7. [プロパティ] ウィンドウで、次のプロパティを設定します。

    プロパティ
    ID@+id/ZipCodeEdit
    layout_centerVerticalTRUE
    layout_marginLeft10dp
    textSize20sp
    layout_width100sp
    textColor#9933FF
  8. [背景] プロパティの隣のボタンをクリックします。

  9. [フレームワーク リソース] タブで [background_light] 色をクリックしてから、[OK] ボタンをクリックします。

  10. [ツールボックス] から [ボタン][相対レイアウト] コントロールにドラッグし、郵便番号編集ボックスの隣に配置します。

  11. [プロパティ] ウィンドウで、次のプロパティを設定します。

    プロパティ
    ID@+id/GetWeatherButton
    テキストGet Weather
    layout_marginLeft10dp
    textSize20sp
  12. 郵便番号編集ボックスをクリックします。 編集ボックスの下に表示される小さな丸を選択してドラッグすることで、[Get Weather] ボタンと高さが揃うようにサイズを変更します。

    デザイナーでのエディット ボックスのサイズ変更

    以上で、Android デザイナーを使用して基本的な UI を構築するための知識は十分です。 ただし、ページの .asxml ファイルにタグを直接追加することで UI を構築することもできます。 この方法で残りの UI を構築してみましょう。

  13. デザイナーの下側で、[ソース] タブを選択します。

    ソース ビューのタブ

  14. [ソース] ビューで、次のマークアップを </RelativeLayout> タグの下に貼り付けます。

    <TextView  
        android:text="Current Weather"  
        android:textAppearance="?android:attr/textAppearanceLarge"  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:id="@+id/ResultsTitle"  
        android:textColor="#FFFF4D"  
        android:visibility="visible"  
        android:layout_marginLeft="25px" />  
    <TableLayout  
        android:minWidth="25px"  
        android:minHeight="25px"  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:id="@+id/ResultsTable"  
        android:padding="10dp"  
        android:visibility="visible">  
        <TableRow  
            android:id="@+id/tableRow1">  
            <TextView  
                android:text="Temp:"  
                android:textAppearance="?android:attr/textAppearanceMedium"  
                android:layout_column="0"  
                android:id="@+id/textView21" />  
            <TextView  
                android:textAppearance="?android:attr/textAppearanceMedium"  
                android:layout_column="1"  
                android:id="@+id/TempText"  
                android:text="70"  
                android:textColor="#FFFF4D"  
                android:layout_height="wrap_content" />  
            <TextView  
                android:text="F"  
                android:textAppearance="?android:attr/textAppearanceMedium"  
                android:layout_column="2"  
                android:id="@+id/textView26" />  
        </TableRow>  
        <TableRow  
            android:id="@+id/tableRow2">  
            <TextView  
                android:text="Wind:"  
                android:textAppearance="?android:attr/textAppearanceMedium"  
                android:layout_column="0"  
                android:id="@+id/textView22" />  
            <TextView  
                android:textAppearance="?android:attr/textAppearanceMedium"  
                android:layout_column="1"  
                android:id="@+id/WindText"  
                android:text="10"  
                android:textColor="#FFFF4D" />  
            <TextView  
                android:text="mph"  
                android:textAppearance="?android:attr/textAppearanceMedium"  
                android:layout_column="2"  
                android:id="@+id/textView27"  
                android:layout_height="wrap_content" />  
        </TableRow>  
        <TableRow  
            android:id="@+id/tableRow3">  
            <TextView  
                android:text="Humidity:"  
                android:textAppearance="?android:attr/textAppearanceMedium"  
                android:layout_column="0"  
                android:id="@+id/textView23"  
                android:layout_width="107.0dp" />  
            <TextView  
                android:textAppearance="?android:attr/textAppearanceMedium"  
                android:layout_column="1"  
                android:id="@+id/HumidityText"  
                android:text="70"  
                android:textColor="#FFFF4D"  
                android:layout_height="wrap_content" />  
            <TextView  
                android:text="%"  
                android:textAppearance="?android:attr/textAppearanceMedium"  
                android:layout_column="2"  
                android:id="@+id/textView28" />  
        </TableRow>  
        <TableRow  
            android:id="@+id/tableRow4">  
            <TextView  
                android:text="Visibility:"  
                android:textAppearance="?android:attr/textAppearanceMedium"  
                android:layout_column="0"  
                android:id="@+id/textView34" />  
            <TextView  
                android:textAppearance="?android:attr/textAppearanceMedium"  
                android:layout_column="1"  
                android:id="@+id/VisibilityText"  
                android:text="10"  
                android:textColor="#FFFF4D"  
                android:layout_height="wrap_content" />  
            <TextView  
                android:text="miles"  
                android:textAppearance="?android:attr/textAppearanceMedium"  
                android:layout_column="2"  
                android:id="@+id/textView50" />  
        </TableRow>  
        <TableRow  
            android:id="@+id/tableRow5">  
            <TextView  
                android:text="Sunrise:"  
                android:textAppearance="?android:attr/textAppearanceMedium"  
                android:layout_column="0"  
                android:id="@+id/textView40" />  
            <TextView  
                android:textAppearance="?android:attr/textAppearanceMedium"  
                android:layout_column="1"  
                android:id="@+id/SunriseText"  
                android:text="7:46 am"  
                android:textColor="#FFFF4D" />  
        </TableRow>  
        <TableRow  
            android:id="@+id/tableRow6">  
            <TextView  
                android:text="Sunset:"  
                android:textAppearance="?android:attr/textAppearanceMedium"  
                android:layout_column="0"  
                android:id="@+id/textView46" />  
            <TextView  
                android:textAppearance="?android:attr/textAppearanceMedium"  
                android:layout_column="1"  
                android:id="@+id/SunsetText"  
                android:text="5:58 PM"  
                android:textColor="#FFFF4D" />  
        </TableRow>  
    </TableLayout>  
    
    
    
  15. もう一度 [設計] ビューを開きます。

    次のような UI が表示されます。

    Android アプリ用 UI

  16. ソリューションをビルドします。

    これにより、Resource.Designer.cs ファイルにコントロール ID が追加されるため、コード中で名前を指定してコントロールを参照できるようになります。

共有コードを使用する

  1. コード エディターで WeatherApp プロジェクトの MainActivity.cs ファイルを開きます。

  2. 次のステートメントをファイルの先頭に追加します。

    
    using Shared;  
    
    
  3. OnCreate メソッドをこのコードに置き換えます。

    protected override void OnCreate(Bundle bundle)  
    {  
        base.OnCreate(bundle);  
    
        SetContentView(Resource.Layout.Main);  
    
        Button button = FindViewById<Button>(Resource.Id.GetWeatherButton);  
    
        button.Click += delegate  
        {  
            EditText ZipCodeEditText = FindViewById<EditText>(Resource.Id.ZipCodeEdit);  
    
            Weather weather = Core.GetWeather(ZipCodeEditText.Text).Result;  
    
            if (weather != null)  
            {  
                FindViewById<TextView>(Resource.Id.ResultsTitle).Text = weather.Title;  
                FindViewById<TextView>(Resource.Id.TempText).Text = weather.Temperature;  
                FindViewById<TextView>(Resource.Id.WindText).Text = weather.Wind;  
                FindViewById<TextView>(Resource.Id.VisibilityText).Text = weather.Visibility;  
                FindViewById<TextView>(Resource.Id.HumidityText).Text = weather.Humidity;  
                FindViewById<TextView>(Resource.Id.SunriseText).Text = weather.Sunrise;  
                FindViewById<TextView>(Resource.Id.SunsetText).Text = weather.Sunset;  
    
                button.Text = "Search Again";  
            }  
            else  
            {  
                FindViewById<TextView>(Resource.Id.ResultsTitle).Text = "Couldn't find any results";  
            }  
    
        };  
    }  
    
    

    このコードは、共有コードで定義した GetWeather メソッドを呼び出します。 そして、そのメソッドから取得したデータをアプリの UI に表示します。

アプリを実行して結果を確認してください。

  1. ソリューション エクスプローラーで、WeatherApp プロジェクトをスタートアップ プロジェクトに設定します。

  2. F5 キーを押すとアプリが起動します。

  3. Android エミュレーターで、米国の有効な郵便番号を編集ボックスに入力 (例: 98052) してから、[Get Weather] をクリックします。

    該当する地域の気象データがコントロールに表示されます。

    Android および Windows Phone 用お天気アプリ

次に、ユーザー インターフェイスを設計して共有コードに接続してから、アプリを実行します。

アプリの外観を設計する

  1. ソリューション エクスプローラーで、WeatherAppWindows (WinPhone) プロジェクトの MainPage.xaml ファイルを選択して Enter キーを押します。

    MainPage.xaml ファイルがデザイナーで開きます。

  2. [ツールボックス]から、[TextBlock] をデザイナーへドラッグして、ページの先頭近くに配置します。

  3. [プロパティ] ウィンドウで、プロパティの [共通] セクションを展開し、[Text] プロパティを Weather App に設定します。

    タイトルのテキスト プロパティ

  4. [Text] セクションを展開し、フォント サイズを 30 pt に設定します。

  5. [ツールボックス]から [TextBlock] をデザイナーへドラッグして、[Weather App] タイトルの下に配置します。

  6. [Text] プロパティを郵便番号に設定して、フォント サイズを 15 pt に設定します。

  7. [ツールボックス]から [TextBox]をデザイナーへドラッグして、[郵便番号] ラベルの隣に配置します。

  8. [名前] プロパティを ZipCodeEdit に設定します。

  9. テキスト ボックスにテキストが表示されないように、[Text] プロパティを削除します。

  10. デザイナーで、テキストボックスの端をドラッグしてサイズを広げます。

    5 桁を表示できる幅が必要です。

  11. [プロパティ] ウィンドウで [ブラシ] セクションを展開し、[前景] プロパティをクリックします。 紫のような特徴的な色を選択します。

    [プロパティ] ウィンドウの前景色プロパティ

    ユーザーが郵便番号を入力すると、テキストがこの色で表示されます。

  12. [ツールボックス]からデザイナーへボタンをドラッグし、テキスト ボックスの隣に配置します。

  13. [プロパティ] ウィンドウでプロパティの [共通] セクションを展開し、[コンテンツ] プロパティを Get Weather に設定します。

  14. [名前] プロパティを GetWeatherButton に設定します。

    コントロールの名前プロパティ

  15. 以上で、Windows デザイナーを使用して基本的な UI を構築するための知識は十分です。 ただし、ページの xaml ファイルにタグを直接追加することで UI を構築することもできます。 この方法で残りの UI を構築してみましょう。

  16. XAML ビユーで、次のマークアップをボタンの下に貼り付けます。

    
    <TextBlock x:Name="ResultsTitle" HorizontalAlignment="Left" Margin="13,130,0,0" TextWrapping="Wrap" Text="Current Weather" VerticalAlignment="Top" FontSize="25" Foreground="#FFFBF400"/>  
    <StackPanel x:Name="ResultsStackPanel" HorizontalAlignment="Left" Height="198" Margin="13,223,0,0" VerticalAlignment="Top" Width="335" Orientation="Horizontal">  
        <StackPanel Width="100">  
            <TextBlock TextWrapping="Wrap" Text="Temp:" FontSize="20" Padding="0,0,0,5"/>  
            <TextBlock TextWrapping="Wrap" Text="Wind:" FontSize="20" Padding="0,0,0,5"/>  
            <TextBlock TextWrapping="Wrap" Text="Humidity:" FontSize="20" Padding="0,0,0,5"/>  
            <TextBlock TextWrapping="Wrap" Text="Visibility:" FontSize="20" Padding="0,0,0,5"/>  
            <TextBlock TextWrapping="Wrap" Text="Sunrise:" FontSize="20" Padding="0,0,0,5"/>  
             <TextBlock TextWrapping="Wrap" Text="Sunset:" FontSize="20" Padding="0,0,0,5"/>  
        </StackPanel>  
        <StackPanel Width="100">  
            <TextBlock x:Name="TempText" TextWrapping="Wrap" Text="70" FontSize="20" Margin="0,0,-17,5" HorizontalAlignment="Right" Width="117" Foreground="#FFF2FF00"/>  
            <TextBlock x:Name="WindText" TextWrapping="Wrap" Text="10" FontSize="20" Margin="0,0,-17,5" Foreground="#FFEEFB00"/>  
            <TextBlock x:Name="HumidityText" TextWrapping="Wrap" Text="70" FontSize="20" Margin="0,0,-17,5" Foreground="#FFF0FD00"/>  
            <TextBlock x:Name="VisibilityText" TextWrapping="Wrap" Text="10" FontSize="20" Margin="0,0,-17,5" Foreground="#FFE8F400"/>  
            <TextBlock x:Name="SunriseText" TextWrapping="Wrap" Text="7:46 AM" FontSize="20" Margin="0,0,-17,5" Foreground="#FFF0FD00"/>  
            <TextBlock x:Name="SunsetText" TextWrapping="Wrap" Text="5:58 PM" FontSize="20" Margin="0,0,-17,5" Foreground="#FFEDF900"/>  
        </StackPanel>  
        <StackPanel Width="100">  
            <TextBlock TextWrapping="Wrap" Text="F" FontSize="20" Padding="0,0,0,5"/>  
            <TextBlock TextWrapping="Wrap" Text="mph" FontSize="20" Padding="0,0,0,5"/>  
            <TextBlock TextWrapping="Wrap" Text="%" FontSize="20" Padding="0,0,0,5"/>  
            <TextBlock TextWrapping="Wrap" Text="miles" FontSize="20" Padding="0,0,0,5"/>  
        </StackPanel>  
    </StackPanel>  
    
    

    デザイン ビユーでは、UI は次のように表示されます。

    Windows Phone アプリ UI

共有コードを使用する

  1. デザイナーで、[Get Weather] ボタンをクリックします。

  2. [プロパティ] ウィンドウで、イベント ハンドラー ボタン (Visual Studio の [イベント ハンドラー] アイコン) をクリックします。

    このアイコンは [プロパティ] ウィンドウの上隅に表示されます。

  3. [クリック] イベントの隣に「GetWeatherButton_Click」と入力し、ENTER キーを押します。

    GetWeatherButton_Click という名前のイベント ハンドラーが生成されます。 コード エディターが開き、カーソルがイベント ハンドラーのコード ブロック内に配置されます。

  4. イベント ハンドラーを次のコードで置き換えます。

    private void GetWeatherButton_Click(object sender, RoutedEventArgs e)  
    {  
        Weather weather = Core.GetWeather(ZipCodeEdit.Text).Result;  
        if (weather != null)  
        {  
            ResultsTitle.Text = weather.Title;  
            TempText.Text = weather.Temperature;  
            WindText.Text = weather.Wind;  
            VisibilityText.Text = weather.Visibility;  
            HumidityText.Text = weather.Humidity;  
            SunriseText.Text = weather.Sunrise;  
            SunsetText.Text = weather.Sunset;  
    
            GetWeatherButton.Content = "Search Again";  
    
            }  
            else  
            {  
                ResultsTitle.Text = "Couldn't find any results";  
            }  
        }  
    }  
    
    

    このコードは、共有コードで定義した GetWeather メソッドを呼び出します。 このメソッドは、Android アプリで呼び出したものと同じです。 このコードは、アプリの UI コントロールのメソッドから取得したデータも表示します。

  5. 次のステートメントをファイルの先頭に追加します。

    
    using Shared;  
    
    

アプリを実行して結果を確認してください。

  1. ソリューション エクスプローラーで、WeatherAppWindows (WinPhone) プロジェクトをスタートアップ プロジェクトに設定します。

  2. F5 キーを押すとアプリが起動します。

  3. Windows Phone エミュレーターで、米国の有効な郵便番号を編集ボックスに入力 (例: 98052) してから、[Get Weather] ボタンをクリックします。

    該当する地域の気象データがコントロールに表示されます。

    実行中のアプリの Windows バージョン

クロスプラットフォームのモバイル アプリを初めて構築できました。おめでとうございます。 このトピックは入門編として役立ちますが、学ぶべきことはまだたくさんあります。

C# および Visual Studio を使用してすばらしいネイティブ モバイル アプリを構築するために次に学ぶべき内容として、いくつかアイデアを以下に示します。

ソリューションに iOS プロジェクトを追加する

iOS にプロジェクトを追加することで、このサンプルを拡張します。 そのアプリを構築して実行するためには、Xcode と Xamarin がインストールされているローカル ネットワーク上の Mac に接続する必要があります。

Hello, iOS」(xamarin.com) をご覧ください。 注意: このページで正しい手順のセットを表示するには、必ず xamarin.com 上のページの右上で "Visual Studio" を選びます。

共有プロジェクトにプラットフォーム固有のコードを追加する

共有コードはすべて両方のプラットフォームで動作しなければならないわけではありません。 条件付きコンパイル定数を使用して、プラットフォーム固有のコードを分離することができます。 部分クラスを作成すると、ファイル内で使用する定数の数を削減できます。 プラットフォーム固有のコードを独立したファイルに取り出し、さらにそのファイルにコンパイル定数を適用します。

Windows と Windows Phone を対象とするユニバーサル Windows アプリの構築」(MSDN) を参照してください。 定数を適用する方法の例については、ページの最後へスクロールしてください。

コードを共有する他の方法を検討する

ポータブル クラス ライブラリを使用して、コードを共有することも可能です。 ポータブル クラス ライブラリと共有プロジェクトの違いについて学習し、プロジェクトに最適なアプローチを選択してください。

コード共有のオプション」(xamarin.com) を参照してください。

すべてのプラットフォームで動作する 1 つのユーザー インターフェイスを設計する

UI にリストや詳細ビューなどの一般的なパターンを使用する場合は、Xamarin.Forms を使用してそれを実装することを検討してください。 Xamarin.Forms は XAML を使用するため、宣言によってプロパティとメソッドを UI にバインドすることができます。 これは、UI 層のコード量を削減することが目的の場合に非常に魅力的です。

Xamarin.Forms」(xamarin.com) を参照してください。

Xamarin の開発者向けサイト
Windows デベロッパー センター
Swift および C# のクイック リファレンス ポスター

表示: