単一ページの Xamarin. Forms アプリケーションを作成するCreate a Single Page Xamarin.Forms Application

サンプルのダウンロードサンプルのダウンロードDownload Sample Download the sample

このクイックスタートでは、次の方法について説明します。In this quickstart, you will learn how to:

  • クロスプラットフォームの Xamarin. フォームアプリケーションを作成します。Create a cross-platform Xamarin.Forms application.
  • 拡張可能なアプリケーションマークアップ言語 (XAML) を使用して、ページのユーザーインターフェイスを定義します。Define the user interface for a page using eXtensible Application Markup Language (XAML).
  • コードから XAML ユーザーインターフェイス要素を操作します。Interact with XAML user interface elements from code.

このクイックスタートでは、クロスプラットフォームの Xamarin. フォームアプリケーションを作成する方法について説明します。これにより、ノートを入力してデバイスストレージに保存できます。The quickstart walks through how to create a cross-platform Xamarin.Forms application, which enables you to enter a note and persist it to device storage. 最終的なアプリケーションは、次のとおりです。The final application is shown below:

必要条件Prerequisites

  • Visual Studio 2019 (最新リリース)。 .NET ワークロードを使用したモバイル開発がインストールされています。Visual Studio 2019 (latest release), with the Mobile development with .NET workload installed.
  • のC#知識。Knowledge of C#.
  • optionalIOS でアプリケーションをビルドするための、ペアリングされた Mac。(optional) A paired Mac to build the application on iOS.

これらの前提条件の詳細については、「 Xamarin のインストール」を参照してください。For more information about these prerequisites, see Installing Xamarin. Mac ビルド ホストへの Visual Studio 2019 の接続については、「Xamarin.iOS 開発のために Mac とペアリングする」を参照してください。For information about connecting Visual Studio 2019 to a Mac build host, see Pair to Mac for Xamarin.iOS development.

Visual Studio 2019 を使ってみるGet started with Visual Studio 2019

  1. Visual Studio 2019 を起動し、スタート ウィンドウで 新しいプロジェクトの作成 をクリックして、新しいプロジェクトを作成します。Launch Visual Studio 2019, and in the start window click Create a new project to create a new project:

  2. [新しいプロジェクトの作成] ウィンドウで、プロジェクトの [種類] ボックスの一覧の [mobile] を選択し、 [モバイルアプリ (Xamarin)] テンプレートを選択して、 [次へ] ボタンをクリックします。In the Create a new project window, select Mobile in the Project type drop down, select the Mobile App (Xamarin.Forms) template, and click the Next button:

  3. [新しいプロジェクトの構成] ウィンドウで、プロジェクト名[メモ] に設定し、プロジェクトの適切な場所を選択し、 [作成] ボタンをクリックします。In the Configure your new project window, set the Project name to Notes, choose a suitable location for the project, and click the Create button:

    重要

    このクイックスタートの C# スニペットと XAML スニペットでは、Notes という名前のソリューションが必要です。The C# and XAML snippets in this quickstart requires that the solution is named Notes. 別の名前を使用すると、コードをこのクイック スタートからソリューションにコピーするときに、ビルド エラーが発生します。Using a different name will result in build errors when you copy code from this quickstart into the solution.

  4. [新しいクロスプラットフォームアプリ] ダイアログで、 [空のアプリ] をクリックし、 [OK] ボタンをクリックします。In the New Cross Platform App dialog, click Blank App, and click the OK button:

    作成される .NET Standard ライブラリの詳細については、Xamarin.Forms クイック スタート Deep DiveXamarin.Forms アプリケーションの構造に関するページを参照してください。For more information about the .NET Standard library that gets created, see Anatomy of a Xamarin.Forms application in the Xamarin.Forms Quickstart Deep Dive.

  5. ソリューション エクスプローラーNotes プロジェクトで、 [MainPage.xaml] をダブルクリックして開きます。In Solution Explorer, in the Notes project, double-click MainPage.xaml to open it:

  6. MainPage.xaml のテンプレート コードをすべて削除し、次のコードに置き換えます。In MainPage.xaml, remove all of the template code and replace it with the following code:

    <?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="Notes.MainPage">
        <StackLayout Margin="10,35,10,10">
            <Label Text="Notes"
                   HorizontalOptions="Center"
                   FontAttributes="Bold" />
            <Editor x:Name="editor"
                    Placeholder="Enter your note"
                    HeightRequest="100" />
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Button Text="Save"
                        Clicked="OnSaveButtonClicked" />
                <Button Grid.Column="1"
                        Text="Delete"
                        Clicked="OnDeleteButtonClicked"/>
            </Grid>
        </StackLayout>
    </ContentPage>
    

    このコードは、ページのユーザーインターフェイスを宣言によって定義します。これは、テキストを表示するためのLabel 、テキスト入力のEditor 、およびファイルを保存または削除するようにアプリケーションに指示する2つのButtonインスタンスで構成されます。This code declaratively defines the user interface for the page, which consists of a Label to display text, an Editor for text input, and two Button instances that direct the application to save or delete a file. この 2 つの Button インスタンスは、StackLayout に垂直に配置されている LabelEditorGrid と共に、Grid に水平に配置されます。The two Button instances are horizontally laid out in a Grid, with the Label, Editor, and Grid being vertically laid out in a StackLayout. ユーザーインターフェイスの作成の詳細については、「 Xamarin. フォームのクイックスタート」の「ユーザーインターフェイス」を参照してください。For more information about creating the user interface, see User interface in the Xamarin.Forms Quickstart Deep Dive.

    CTRL + S を押し、MainPage.xaml への変更内容を保存してから、ファイルを閉じます。Save the changes to MainPage.xaml by pressing CTRL+S, and close the file.

  7. ソリューション エクスプローラーNotes プロジェクトで [MainPage.xaml] を展開し、 [MainPage.xaml.cs] をダブルクリックして開きます。In Solution Explorer, in the Notes project, expand MainPage.xaml and double-click MainPage.xaml.cs to open it:

  8. MainPage.xaml.cs で、テンプレート コードをすべて削除し、次のコードに置き換えます。In MainPage.xaml.cs, remove all of the template code and replace it with the following code:

    using System;
    using System.IO;
    using Xamarin.Forms;
    
    namespace Notes
    {
        public partial class MainPage : ContentPage
        {
            string _fileName = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData), "notes.txt");
    
            public MainPage()
            {
                InitializeComponent();
    
                if (File.Exists(_fileName))
                {
                    editor.Text = File.ReadAllText(_fileName);
                }
            }
    
            void OnSaveButtonClicked(object sender, EventArgs e)
            {
                File.WriteAllText(_fileName, editor.Text);
            }
    
            void OnDeleteButtonClicked(object sender, EventArgs e)
            {
                if (File.Exists(_fileName))
                {
                    File.Delete(_fileName);
                }
                editor.Text = string.Empty;
            }
        }
    }
    

    このコードでは、notes.txt という名前のファイルを参照する _fileName フィールドを定義します。このファイルで、アプリケーション用のローカル アプリケーション データ フォルダーにメモ データが保存されます。This code defines a _fileName field, which references a file named notes.txt that will store note data in the local application data folder for the application. ページ コンストラクターが実行されると、ファイルが存在する場合は読み取られ、Editor に表示されます。When the page constructor is executed the file is read, if it exists, and displayed in the Editor. [保存] Button が押されると、OnSaveButtonClicked イベント ハンドラーが実行されます。これにより、Editor のコンテンツがファイルに保存されます。When the Save Button is pressed the OnSaveButtonClicked event handler is executed, which saves the content of the Editor to the file. [削除] Button が押されると、OnDeleteButtonClicked イベント ハンドラーが実行されます。これにより、ファイルが存在する場合は削除され、Editor から任意のテキストが削除されます。When the Delete Button is pressed the OnDeleteButtonClicked event handler is executed, which deletes the file, provided that it exists, and removes any text from the Editor. ユーザーの操作の詳細については、「 Xamarinの概要」の「ユーザー操作への応答」を参照してください。For more information about user interaction, see Responding to user interaction in the Xamarin.Forms Quickstart Deep Dive.

    CTRL + S を押し、MainPage.xaml.cs への変更内容を保存してから、ファイルを閉じます。Save the changes to MainPage.xaml.cs by pressing CTRL+S, and close the file.

クイック スタートのビルドBuilding the quickstart

  1. Visual Studio で、 [ビルド]、[ソリューションのビルド] メニュー項目の順に選択します (または F6 キーを押します)。In Visual Studio, select the Build > Build Solution menu item (or press F6). ソリューションがビルドされ、Visual Studio のステータス バーに成功のメッセージが表示されます。The solution will build and a success message will appear in the Visual Studio status bar:

    エラーがある場合は、ソリューションが正常にビルドされるまで、前の手順を繰り返して誤りを修正します。If there are errors, repeat the previous steps and correct any mistakes until the solution builds successfully.

  2. Visual Studio ツール バーで、 [開始] ボタン ([再生] ボタンのような三角形のボタン) を押し、選択した Android エミュレーターでアプリケーションを起動します。In the Visual Studio toolbar, press the Start button (the triangular button that resembles a Play button) to launch the application in your chosen Android emulator:

    メモを入力して [保存] ボタンを押します。Enter a note and press the Save button.

    各プラットフォームでアプリケーションを起動する方法の詳細については、「 Xamarinの概要」の「各プラットフォームでのアプリケーションの起動」を参照してください。For more information about how the application is launched on each platform, see Launching the application on each platform in the Xamarin.Forms Quickstart Deep Dive.

    注意

    次の手順は、Xamarin.Forms 開発のシステム要件を満たしている、ペアリングされた Mac がある場合にのみ実行する必要があります。The following steps should only be carried out if you have a paired Mac that meets the system requirements for Xamarin.Forms development.

  3. Visual Studio ツール バーで、 [Notes.iOS] プロジェクトを右クリックして、 [スタートアップ プロジェクトに設定] を選択します。In the Visual Studio toolbar, right-click on the Notes.iOS project, and select Set as StartUp Project.

  4. Visual Studio ツール バーで、 [開始] ボタン ([再生] ボタンのような三角形のボタン) を押し、選択した iOS リモート シミュレーターでアプリケーションを起動します。In the Visual Studio toolbar, press the Start button (the triangular button that resembles a Play button) to launch the application in your chosen iOS remote simulator:

    メモを入力して [保存] ボタンを押します。Enter a note and press the Save button.

    各プラットフォームでアプリケーションを起動する方法の詳細については、「 Xamarinの概要」の「各プラットフォームでのアプリケーションの起動」を参照してください。For more information about how the application is launched on each platform, see Launching the application on each platform in the Xamarin.Forms Quickstart Deep Dive.

必要条件Prerequisites

  • Visual Studio 2017。 .NET ワークロードを使用したモバイル開発がインストールされています。Visual Studio 2017, with the Mobile development with .NET workload installed.
  • のC#知識。Knowledge of C#.
  • optionalIOS でアプリケーションをビルドするための、ペアリングされた Mac。(optional) A paired Mac to build the application on iOS.

これらの前提条件の詳細については、「 Xamarin のインストール」を参照してください。For more information about these prerequisites, see Installing Xamarin. Mac ビルド ホストへの Visual Studio 2019 の接続については、「Xamarin.iOS 開発のために Mac とペアリングする」を参照してください。For information about connecting Visual Studio 2019 to a Mac build host, see Pair to Mac for Xamarin.iOS development.

Visual Studio 2017 を使ってみるGet started with Visual Studio 2017

  1. Visual Studio 2017 を起動し、スタートページで [新しいプロジェクトの作成] をクリックして、新しいプロジェクトを作成します。Launch Visual Studio 2017, and on the start page click Create new project... to create a new project:

  2. [新しいプロジェクト] ダイアログで、 [クロスプラットフォーム] をクリックして、 [モバイル アプリ (Xamarin.Forms)] テンプレートを選択し、[名前] を「Notes」に設定し、プロジェクトの適切な場所を選んで [OK] ボタンをクリックします。In the New Project dialog, click Cross-Platform, select the Mobile App (Xamarin.Forms) template, set the Name to Notes, choose a suitable location for the project and click the OK button:

    重要

    このクイックスタートの C# スニペットと XAML スニペットでは、Notes という名前のソリューションが必要です。The C# and XAML snippets in this quickstart requires that the solution is named Notes. 別の名前を使用すると、コードをこのクイック スタートからソリューションにコピーするときに、ビルド エラーが発生します。Using a different name will result in build errors when you copy code from this quickstart into the solution.

  3. [新しいクロスプラットフォーム アプリ] ダイアログで、 [空のアプリケーション] をクリックして、コード共有方法として [.NET Standard] を選択し、 [OK] ボタンをクリックします。In the New Cross Platform App dialog, click Blank App, select .NET Standard as the Code Sharing Strategy, and click the OK button:

    作成される .NET Standard ライブラリの詳細については、Xamarin.Forms クイック スタート Deep DiveXamarin.Forms アプリケーションの構造に関するページを参照してください。For more information about the .NET Standard library that gets created, see Anatomy of a Xamarin.Forms application in the Xamarin.Forms Quickstart Deep Dive.

  4. ソリューション エクスプローラーNotes プロジェクトで、 [MainPage.xaml] をダブルクリックして開きます。In Solution Explorer, in the Notes project, double-click MainPage.xaml to open it:

  5. MainPage.xaml のテンプレート コードをすべて削除し、次のコードに置き換えます。In MainPage.xaml, remove all of the template code and replace it with the following code:

    <?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="Notes.MainPage">
        <StackLayout Margin="10,35,10,10">
            <Label Text="Notes"
                   HorizontalOptions="Center"
                   FontAttributes="Bold" />
            <Editor x:Name="editor"
                    Placeholder="Enter your note"
                    HeightRequest="100" />
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Button Text="Save"
                        Clicked="OnSaveButtonClicked" />
                <Button Grid.Column="1"
                        Text="Delete"
                        Clicked="OnDeleteButtonClicked"/>
            </Grid>
        </StackLayout>
    </ContentPage>
    

    このコードは、ページのユーザーインターフェイスを宣言によって定義します。これは、テキストを表示するためのLabel 、テキスト入力のEditor 、およびファイルを保存または削除するようにアプリケーションに指示する2つのButtonインスタンスで構成されます。This code declaratively defines the user interface for the page, which consists of a Label to display text, an Editor for text input, and two Button instances that direct the application to save or delete a file. この 2 つの Button インスタンスは、StackLayout に垂直に配置されている LabelEditorGrid と共に、Grid に水平に配置されます。The two Button instances are horizontally laid out in a Grid, with the Label, Editor, and Grid being vertically laid out in a StackLayout. ユーザーインターフェイスの作成の詳細については、「 Xamarin. フォームのクイックスタート」の「ユーザーインターフェイス」を参照してください。For more information about creating the user interface, see User interface in the Xamarin.Forms Quickstart Deep Dive.

    CTRL + S を押し、MainPage.xaml への変更内容を保存してから、ファイルを閉じます。Save the changes to MainPage.xaml by pressing CTRL+S, and close the file.

  6. ソリューション エクスプローラーNotes プロジェクトで [MainPage.xaml] を展開し、 [MainPage.xaml.cs] をダブルクリックして開きます。In Solution Explorer, in the Notes project, expand MainPage.xaml and double-click MainPage.xaml.cs to open it:

  7. MainPage.xaml.cs で、テンプレート コードをすべて削除し、次のコードに置き換えます。In MainPage.xaml.cs, remove all of the template code and replace it with the following code:

    using System;
    using System.IO;
    using Xamarin.Forms;
    
    namespace Notes
    {
        public partial class MainPage : ContentPage
        {
            string _fileName = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData), "notes.txt");
    
            public MainPage()
            {
                InitializeComponent();
    
                if (File.Exists(_fileName))
                {
                    editor.Text = File.ReadAllText(_fileName);
                }
            }
    
            void OnSaveButtonClicked(object sender, EventArgs e)
            {
                File.WriteAllText(_fileName, editor.Text);
            }
    
            void OnDeleteButtonClicked(object sender, EventArgs e)
            {
                if (File.Exists(_fileName))
                {
                    File.Delete(_fileName);
                }
                editor.Text = string.Empty;
            }
        }
    }
    

    このコードでは、notes.txt という名前のファイルを参照する _fileName フィールドを定義します。このファイルで、アプリケーション用のローカル アプリケーション データ フォルダーにメモ データが保存されます。This code defines a _fileName field, which references a file named notes.txt that will store note data in the local application data folder for the application. ページ コンストラクターが実行されると、ファイルが存在する場合は読み取られ、Editor に表示されます。When the page constructor is executed the file is read, if it exists, and displayed in the Editor. [保存] Button が押されると、OnSaveButtonClicked イベント ハンドラーが実行されます。これにより、Editor のコンテンツがファイルに保存されます。When the Save Button is pressed the OnSaveButtonClicked event handler is executed, which saves the content of the Editor to the file. [削除] Button が押されると、OnDeleteButtonClicked イベント ハンドラーが実行されます。これにより、ファイルが存在する場合は削除され、Editor から任意のテキストが削除されます。When the Delete Button is pressed the OnDeleteButtonClicked event handler is executed, which deletes the file, provided that it exists, and removes any text from the Editor. ユーザーの操作の詳細については、「 Xamarinの概要」の「ユーザー操作への応答」を参照してください。For more information about user interaction, see Responding to user interaction in the Xamarin.Forms Quickstart Deep Dive.

    CTRL + S を押し、MainPage.xaml.cs への変更内容を保存してから、ファイルを閉じます。Save the changes to MainPage.xaml.cs by pressing CTRL+S, and close the file.

クイック スタートのビルドBuilding the quickstart

  1. Visual Studio で、 [ビルド]、[ソリューションのビルド] メニュー項目の順に選択します (または F6 キーを押します)。In Visual Studio, select the Build > Build Solution menu item (or press F6). ソリューションがビルドされ、Visual Studio のステータス バーに成功のメッセージが表示されます。The solution will build and a success message will appear in the Visual Studio status bar:

    エラーがある場合は、ソリューションが正常にビルドされるまで、前の手順を繰り返して誤りを修正します。If there are errors, repeat the previous steps and correct any mistakes until the solution builds successfully.

  2. Visual Studio ツール バーで、 [開始] ボタン ([再生] ボタンのような三角形のボタン) を押し、選択した Android エミュレーターでアプリケーションを起動します。In the Visual Studio toolbar, press the Start button (the triangular button that resembles a Play button) to launch the application in your chosen Android emulator:

    メモを入力して [保存] ボタンを押します。Enter a note and press the Save button.

    各プラットフォームでアプリケーションを起動する方法の詳細については、「 Xamarinの概要」の「各プラットフォームでのアプリケーションの起動」を参照してください。For more information about how the application is launched on each platform, see Launching the application on each platform in the Xamarin.Forms Quickstart Deep Dive.

    注意

    次の手順は、Xamarin.Forms 開発のシステム要件を満たしている、ペアリングされた Mac がある場合にのみ実行する必要があります。The following steps should only be carried out if you have a paired Mac that meets the system requirements for Xamarin.Forms development.

  3. Visual Studio ツール バーで、 [Notes.iOS] プロジェクトを右クリックして、 [スタートアップ プロジェクトに設定] を選択します。In the Visual Studio toolbar, right-click on the Notes.iOS project, and select Set as StartUp Project.

  4. Visual Studio ツール バーで、 [開始] ボタン ([再生] ボタンのような三角形のボタン) を押し、選択した iOS リモート シミュレーターでアプリケーションを起動します。In the Visual Studio toolbar, press the Start button (the triangular button that resembles a Play button) to launch the application in your chosen iOS remote simulator:

    メモを入力して [保存] ボタンを押します。Enter a note and press the Save button.

    各プラットフォームでアプリケーションを起動する方法の詳細については、「 Xamarinの概要」の「各プラットフォームでのアプリケーションの起動」を参照してください。For more information about how the application is launched on each platform, see Launching the application on each platform in the Xamarin.Forms Quickstart Deep Dive.

必要条件Prerequisites

  • IOS と Android プラットフォームのサポートがインストールされている Visual Studio for Mac (最新リリース)。Visual Studio for Mac (latest release), with iOS and Android platform support installed.
  • Xcode (最新リリース)。Xcode (latest release).
  • のC#知識。Knowledge of C#.

これらの前提条件の詳細については、「 Xamarin のインストール」を参照してください。For more information about these prerequisites, see Installing Xamarin.

Visual Studio for Mac の概要Get started with Visual Studio for Mac

  1. Visual Studio for Mac を起動し、スタート ウィンドウで 新規 をクリックして新しいプロジェクトを作成します。Launch Visual Studio for Mac, and in the start window click New to create a new project:

  2. [新しいプロジェクト用のテンプレートを選びます] ダイアログで、 [マルチプラットフォーム]、[アプリ] の順にクリックし、 [空白フォームのアプリ] テンプレートを選択して、 [次へ] ボタンをクリックします。In the Choose a template for your new project dialog, click Multiplatform > App, select the Blank Forms App template, and click the Next button:

  3. [Configure your Blank Forms app](空白フォームのアプリの構成) ダイアログで、新しいアプリに Notes という名前を付け、 [.NET Standard を使用する] ラジオ ボタンがオンになっていることを確認し、 [次へ] ボタンをクリックします。In the Configure your Blank Forms app dialog, name the new app Notes, ensure that the Use .NET Standard radio button is selected, and click the Next button:

  4. [Configure your new Blank Forms app](新しい空白フォームのアプリの構成) ダイアログでは、ソリューションとプロジェクトの名前は Notes に設定したままにし、プロジェクトに適切な場所を選択し、 [作成] をクリックしてプロジェクトを作成します。In the Configure your new Blank Forms app dialog, leave the Solution and Project names set to Notes, choose a suitable location for the project, and click the Create button to create the project:

    重要

    このクイックスタートの C# スニペットと XAML スニペットでは、ソリューションとプロジェクトの両方の名前が Notes である必要があります。The C# and XAML snippets in this quickstart requires that the solution and project are both named Notes. 別の名前を使用すると、コードをこのクイック スタートからプロジェクトにコピーするときに、ビルド エラーが発生します。Using a different name will result in build errors when you copy code from this quickstart into the project.

    作成される .NET Standard ライブラリの詳細については、Xamarin.Forms クイック スタート Deep DiveXamarin.Forms アプリケーションの構造に関するページを参照してください。For more information about the .NET Standard library that gets created, see Anatomy of a Xamarin.Forms application in the Xamarin.Forms Quickstart Deep Dive.

  5. Solution PadNotes プロジェクトで、 [MainPage.xaml] をダブルクリックして開きます。In the Solution Pad, in the Notes project, double-click MainPage.xaml to open it:

  6. MainPage.xaml のテンプレート コードをすべて削除し、次のコードに置き換えます。In MainPage.xaml, remove all of the template code and replace it with the following code:

    <?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="Notes.MainPage">
        <StackLayout Margin="10,35,10,10">
            <Label Text="Notes"
                   HorizontalOptions="Center"
                   FontAttributes="Bold" />
            <Editor x:Name="editor"
                    Placeholder="Enter your note"
                    HeightRequest="100" />
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Button Text="Save"
                        Clicked="OnSaveButtonClicked" />
                <Button Grid.Column="1"
                        Text="Delete"
                        Clicked="OnDeleteButtonClicked"/>
            </Grid>
        </StackLayout>
    </ContentPage>
    

    このコードは、ページのユーザーインターフェイスを宣言によって定義します。これは、テキストを表示するためのLabel 、テキスト入力のEditor 、およびファイルを保存または削除するようにアプリケーションに指示する2つのButtonインスタンスで構成されます。This code declaratively defines the user interface for the page, which consists of a Label to display text, an Editor for text input, and two Button instances that direct the application to save or delete a file. この 2 つの Button インスタンスは、StackLayout に垂直に配置されている LabelEditorGrid と共に、Grid に水平に配置されます。The two Button instances are horizontally laid out in a Grid, with the Label, Editor, and Grid being vertically laid out in a StackLayout. ユーザーインターフェイスの作成の詳細については、「 Xamarin. フォームのクイックスタート」の「ユーザーインターフェイス」を参照してください。For more information about creating the user interface, see User interface in the Xamarin.Forms Quickstart Deep Dive.

    [ファイル]、[保存] の順に選択し (または & #8984; + S キーを押し)、MainPage.xaml への変更内容を保存してから、ファイルを閉じます。Save the changes to MainPage.xaml by choosing File > Save (or by pressing ⌘ + S), and close the file.

  7. Solution PadNotes プロジェクトで、 [MainPage.xaml] を展開し、 [MainPage.xaml.cs] をダブルクリックして開きます。In the Solution Pad, in the Notes project, expand MainPage.xaml and double-click MainPage.xaml.cs to open it:

  8. MainPage.xaml.cs で、テンプレート コードをすべて削除し、次のコードに置き換えます。In MainPage.xaml.cs, remove all of the template code and replace it with the following code:

    using System;
    using System.IO;
    using Xamarin.Forms;
    
    namespace Notes
    {
        public partial class MainPage : ContentPage
        {
            string _fileName = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData), "notes.txt");
    
            public MainPage()
            {
                InitializeComponent();
    
                if (File.Exists(_fileName))
                {
                    editor.Text = File.ReadAllText(_fileName);
                }
            }
    
            void OnSaveButtonClicked(object sender, EventArgs e)
            {
                File.WriteAllText(_fileName, editor.Text);
            }
    
            void OnDeleteButtonClicked(object sender, EventArgs e)
            {
                if (File.Exists(_fileName))
                {
                    File.Delete(_fileName);
                }
                editor.Text = string.Empty;
            }
        }
    }
    

    このコードでは、notes.txt という名前のファイルを参照する _fileName フィールドを定義します。このファイルで、アプリケーション用のローカル アプリケーション データ フォルダーにメモ データが保存されます。This code defines a _fileName field, which references a file named notes.txt that will store note data in the local application data folder for the application. ページ コンストラクターが実行されると、ファイルが存在する場合は読み取られ、Editor に表示されます。When the page constructor is executed the file is read, if it exists, and displayed in the Editor. [保存] Button が押されると、OnSaveButtonClicked イベント ハンドラーが実行されます。これにより、Editor のコンテンツがファイルに保存されます。When the Save Button is pressed the OnSaveButtonClicked event handler is executed, which saves the content of the Editor to the file. [削除] Button が押されると、OnDeleteButtonClicked イベント ハンドラーが実行されます。これにより、ファイルが存在する場合は削除され、Editor から任意のテキストが削除されます。When the Delete Button is pressed the OnDeleteButtonClicked event handler is executed, which deletes the file, provided that it exists, and removes any text from the Editor. ユーザーの操作の詳細については、「 Xamarinの概要」の「ユーザー操作への応答」を参照してください。For more information about user interaction, see Responding to user interaction in the Xamarin.Forms Quickstart Deep Dive.

    [ファイル]、[保存] の順に選択し (または ⌘ + S キーを押し)、MainPage.xaml.cs への変更内容を保存してから、ファイルを閉じます。Save the changes to MainPage.xaml.cs by choosing File > Save (or by pressing ⌘ + S), and close the file.

クイック スタートのビルドBuilding the quickstart

  1. Visual Studio for Mac で、 [ビルド]、[すべてビルド] の順にメニュー項目を選択します (または ⌘ + B キーを押します)。In Visual Studio for Mac, select the Build > Build All menu item (or press ⌘ + B). プロジェクトがビルドされ、Visual Studio for Mac のツール バーに成功のメッセージが表示されます。The projects will build and a success message will appear in the Visual Studio for Mac toolbar.

    エラーがある場合は、プロジェクトが正常にビルドされるまで、前の手順を繰り返して誤りを修正します。If there are errors, repeat the previous steps and correct any mistakes until the projects build successfully.

  2. Solution Padで、 [Notes] プロジェクトを選択し、右クリックして [スタートアッププロジェクトに設定] を選択します。In the Solution Pad, select the Notes.iOS project, right-click, and select Set As Startup Project:

  3. Visual Studio for Mac ツール バーで、 [開始] ボタン ([再生] ボタンのような三角形のボタン) を押し、選択した iOS シミュレーター内でアプリケーションを起動します。In the Visual Studio for Mac toolbar, press the Start button (the triangular button that resembles a Play button) to launch the application inside your chosen iOS Simulator:

    メモを入力して [保存] ボタンを押します。Enter a note and press the Save button.

    各プラットフォームでアプリケーションを起動する方法の詳細については、「 Xamarinの概要」の「各プラットフォームでのアプリケーションの起動」を参照してください。For more information about how the application is launched on each platform, see Launching the application on each platform in the Xamarin.Forms Quickstart Deep Dive.

  4. Solution Pad[Notes id] プロジェクトを選択し、右クリックして [スタートアッププロジェクトに設定] を選択します。In the Solution Pad, select the Notes.Droid project, right-click, and select Set As Startup Project:

  5. Visual Studio for Mac ツール バーで、 [開始] ボタン ([再生] ボタンのような三角形のボタン) を押し、選択した Android エミュレーター内でアプリケーションを起動します。In the Visual Studio for Mac toolbar, press the Start button (the triangular button that resembles a Play button) to launch the application inside your chosen Android emulator:

    メモを入力して [保存] ボタンを押します。Enter a note and press the Save button.

    各プラットフォームでアプリケーションを起動する方法の詳細については、「 Xamarinの概要」の「各プラットフォームでのアプリケーションの起動」を参照してください。For more information about how the application is launched on each platform, see Launching the application on each platform in the Xamarin.Forms Quickstart Deep Dive.

次のステップNext steps

このクイックスタートでは、次の方法について学習しました。In this quickstart, you learned how to:

  • クロスプラットフォームの Xamarin. フォームアプリケーションを作成します。Create a cross-platform Xamarin.Forms application.
  • 拡張可能なアプリケーションマークアップ言語 (XAML) を使用して、ページのユーザーインターフェイスを定義します。Define the user interface for a page using eXtensible Application Markup Language (XAML).
  • コードから XAML ユーザーインターフェイス要素を操作します。Interact with XAML user interface elements from code.

このシングルページアプリケーションをマルチページアプリケーションにするには、次のクイックスタートに進んでください。To turn this single page application into a multi-page application, continue to the next quickstart.