単一ページの :::no-loc(Xamarin.Forms)::: アプリケーションを作成するCreate a Single Page :::no-loc(Xamarin.Forms)::: Application
サンプルのダウンロード
Download the sample
このクイックスタートでは、次の方法について学習します。In this quickstart, you will learn how to:
- クロスプラットフォーム :::no-loc(Xamarin.Forms)::: インターフェイスを作成する。Create a cross-platform :::no-loc(Xamarin.Forms)::: application.
- Extensible Application Markup Language (XAML) を使用して、ページのユーザー インターフェイスを定義する。Define the user interface for a page using eXtensible Application Markup Language (XAML).
- コードから XAML ユーザー インターフェイス要素を操作する。Interact with XAML user interface elements from code.
このクイックスタートでは、クロスプラットフォーム :::no-loc(Xamarin.Forms)::: アプリケーションを作成する方法について説明します。このアプリにより、メモを入力し、デバイス ストレージに保持できるようになります。The quickstart walks through how to create a cross-platform :::no-loc(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#.
- (必要に応じて) iOS 上でアプリケーションをビルドするためのペアリング済みの 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
Visual Studio 2019 を起動し、スタート ウィンドウで [新しいプロジェクトを作成する] をクリックして新しいプロジェクトを作成します。Launch Visual Studio 2019, and in the start window click Create a new project to create a new project:
[新しいプロジェクトを作成する] ウィンドウの [プロジェクト タイプ] ドロップ ダウンで [モバイル] を選択し、 [モバイル アプリ (:::no-loc(Xamarin.Forms):::] テンプレートを選択して、 [次へ] ボタンをクリックします。In the Create a new project window, select Mobile in the Project type drop down, select the Mobile App (:::no-loc(Xamarin.Forms):::) template, and click the Next button:
[新しいプロジェクトを構成します] ウィンドウで、 [プロジェクト名] を [Notes] に設定し、プロジェクトに適切な場所を選択し、 [作成] ボタンをクリックします。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.
[新しいクロス プラットフォーム アプリ] ダイアログで、 [空のアプリケーション] をクリックし、 [OK] ボタンをクリックします。In the New Cross Platform App dialog, click Blank App , and click the OK button:
作成される .NET Standard ライブラリの詳細については、:::no-loc(Xamarin.Forms)::: クイック スタート Deep Dive の「:::no-loc(Xamarin.Forms)::: アプリケーションの構造」を参照してください。For more information about the .NET Standard library that gets created, see Anatomy of a :::no-loc(Xamarin.Forms)::: application in the :::no-loc(Xamarin.Forms)::: Quickstart Deep Dive.
ソリューション エクスプローラー の Notes プロジェクトで、 [MainPage.xaml] をダブルクリックして開きます。In Solution Explorer , in the Notes project, double-click MainPage.xaml to open it:
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 aLabel
to display text, anEditor
for text input, and twoButton
instances that direct the application to save or delete a file. この 2 つのButton
インスタンスは、StackLayout
に垂直に配置されているLabel
、Editor
、Grid
と共に、Grid
に水平に配置されます。The twoButton
instances are horizontally laid out in aGrid
, with theLabel
,Editor
, andGrid
being vertically laid out in aStackLayout
. ユーザー インターフェイスの作成の詳細については、「:::no-loc(Xamarin.Forms)::: クイック スタート Deep Dive」の「ユーザー インターフェイス」を参照してください。For more information about creating the user interface, see User interface in the :::no-loc(Xamarin.Forms)::: Quickstart Deep Dive.CTRL + S を押し、 MainPage.xaml への変更内容を保存してから、ファイルを閉じます。Save the changes to MainPage.xaml by pressing CTRL+S , and close the file.
ソリューション エクスプローラー の 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:
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 :::no-loc(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 namednotes.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 theEditor
. [保存]Button
が押されると、OnSaveButtonClicked
イベント ハンドラーが実行されます。これにより、Editor
のコンテンツがファイルに保存されます。When the SaveButton
is pressed theOnSaveButtonClicked
event handler is executed, which saves the content of theEditor
to the file. [削除]Button
が押されると、OnDeleteButtonClicked
イベント ハンドラーが実行されます。これにより、ファイルが存在する場合は削除され、Editor
から任意のテキストが削除されます。When the DeleteButton
is pressed theOnDeleteButtonClicked
event handler is executed, which deletes the file, provided that it exists, and removes any text from theEditor
. ユーザーの操作の詳細については、「:::no-loc(Xamarin.Forms)::: クイック スタート Deep Dive」の「ユーザー操作に対する応答」を参照してください。For more information about user interaction, see Responding to user interaction in the :::no-loc(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
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.
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.
各プラットフォームでアプリケーションを起動する方法の詳細については、「:::no-loc(Xamarin.Forms)::: クイック スタート Deep Dive」の「各プラットフォームでアプリケーションを起動する」を参照してください。For more information about how the application is launched on each platform, see Launching the application on each platform in the :::no-loc(Xamarin.Forms)::: Quickstart Deep Dive.
注意
次の手順は、 開発のシステム要件を満たしている、ペアリングされた Mac:::no-loc(Xamarin.Forms)::: がある場合にのみ実行する必要があります。The following steps should only be carried out if you have a paired Mac that meets the system requirements for :::no-loc(Xamarin.Forms)::: development.
Visual Studio ツール バーで、 [Notes.iOS] プロジェクトを右クリックして、 [スタートアップ プロジェクトに設定] を選択します。In the Visual Studio toolbar, right-click on the Notes.iOS project, and select Set as StartUp Project.
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.
各プラットフォームでアプリケーションを起動する方法の詳細については、「:::no-loc(Xamarin.Forms)::: クイック スタート Deep Dive」の「各プラットフォームでアプリケーションを起動する」を参照してください。For more information about how the application is launched on each platform, see Launching the application on each platform in the :::no-loc(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#.
- (必要に応じて) iOS 上でアプリケーションをビルドするためのペアリング済みの 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
Visual Studio 2017 を起動し、スタート ページで [新しいプロジェクトの作成] をクリックして新しいプロジェクトを作成します。Launch Visual Studio 2017, and on the start page click Create new project... to create a new project:
[新しいプロジェクト] ダイアログで、 [クロスプラットフォーム] をクリックして、 [モバイル アプリ (:::no-loc(Xamarin.Forms):::)] テンプレートを選択し、[名前] を " Notes " に設定し、プロジェクトの適切な場所を選んで [OK] ボタンをクリックします。In the New Project dialog, click Cross-Platform , select the Mobile App (:::no-loc(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.
[新しいクロスプラットフォーム アプリ] ダイアログで、 [空のアプリケーション] をクリックして、コード共有方法として [.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 ライブラリの詳細については、:::no-loc(Xamarin.Forms)::: クイック スタート Deep Dive の「:::no-loc(Xamarin.Forms)::: アプリケーションの構造」を参照してください。For more information about the .NET Standard library that gets created, see Anatomy of a :::no-loc(Xamarin.Forms)::: application in the :::no-loc(Xamarin.Forms)::: Quickstart Deep Dive.
ソリューション エクスプローラー の Notes プロジェクトで、 [MainPage.xaml] をダブルクリックして開きます。In Solution Explorer , in the Notes project, double-click MainPage.xaml to open it:
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 aLabel
to display text, anEditor
for text input, and twoButton
instances that direct the application to save or delete a file. この 2 つのButton
インスタンスは、StackLayout
に垂直に配置されているLabel
、Editor
、Grid
と共に、Grid
に水平に配置されます。The twoButton
instances are horizontally laid out in aGrid
, with theLabel
,Editor
, andGrid
being vertically laid out in aStackLayout
. ユーザー インターフェイスの作成の詳細については、「:::no-loc(Xamarin.Forms)::: クイック スタート Deep Dive」の「ユーザー インターフェイス」を参照してください。For more information about creating the user interface, see User interface in the :::no-loc(Xamarin.Forms)::: Quickstart Deep Dive.CTRL + S を押し、 MainPage.xaml への変更内容を保存してから、ファイルを閉じます。Save the changes to MainPage.xaml by pressing CTRL+S , and close the file.
ソリューション エクスプローラー の 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:
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 :::no-loc(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 namednotes.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 theEditor
. [保存]Button
が押されると、OnSaveButtonClicked
イベント ハンドラーが実行されます。これにより、Editor
のコンテンツがファイルに保存されます。When the SaveButton
is pressed theOnSaveButtonClicked
event handler is executed, which saves the content of theEditor
to the file. [削除]Button
が押されると、OnDeleteButtonClicked
イベント ハンドラーが実行されます。これにより、ファイルが存在する場合は削除され、Editor
から任意のテキストが削除されます。When the DeleteButton
is pressed theOnDeleteButtonClicked
event handler is executed, which deletes the file, provided that it exists, and removes any text from theEditor
. ユーザーの操作の詳細については、「:::no-loc(Xamarin.Forms)::: クイック スタート Deep Dive」の「ユーザー操作に対する応答」を参照してください。For more information about user interaction, see Responding to user interaction in the :::no-loc(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
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.
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.
各プラットフォームでアプリケーションを起動する方法の詳細については、「:::no-loc(Xamarin.Forms)::: クイック スタート Deep Dive」の「各プラットフォームでアプリケーションを起動する」を参照してください。For more information about how the application is launched on each platform, see Launching the application on each platform in the :::no-loc(Xamarin.Forms)::: Quickstart Deep Dive.
注意
次の手順は、 開発のシステム要件を満たしている、ペアリングされた Mac:::no-loc(Xamarin.Forms)::: がある場合にのみ実行する必要があります。The following steps should only be carried out if you have a paired Mac that meets the system requirements for :::no-loc(Xamarin.Forms)::: development.
Visual Studio ツール バーで、 [Notes.iOS] プロジェクトを右クリックして、 [スタートアップ プロジェクトに設定] を選択します。In the Visual Studio toolbar, right-click on the Notes.iOS project, and select Set as StartUp Project.
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.
各プラットフォームでアプリケーションを起動する方法の詳細については、「:::no-loc(Xamarin.Forms)::: クイック スタート Deep Dive」の「各プラットフォームでアプリケーションを起動する」を参照してください。For more information about how the application is launched on each platform, see Launching the application on each platform in the :::no-loc(Xamarin.Forms)::: Quickstart Deep Dive.
必須コンポーネントPrerequisites
- Visual Studio for Mac (最新リリース) と、iOS と Android プラットフォームのサポートがインストールされている。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
Visual Studio for Mac を起動し、スタート ウィンドウで [新規] をクリックして新しいプロジェクトを作成します。Launch Visual Studio for Mac, and in the start window click New to create a new project:
[新しいプロジェクト用のテンプレートを選びます] ダイアログで、 [マルチプラットフォーム]、[アプリ] の順にクリックし、 [空白フォームのアプリ] テンプレートを選択して、 [次へ] ボタンをクリックします。In the Choose a template for your new project dialog, click Multiplatform > App , select the Blank Forms App template, and click the Next button:
[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:
[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 ライブラリの詳細については、:::no-loc(Xamarin.Forms)::: クイック スタート Deep Dive の「:::no-loc(Xamarin.Forms)::: アプリケーションの構造」を参照してください。For more information about the .NET Standard library that gets created, see Anatomy of a :::no-loc(Xamarin.Forms)::: application in the :::no-loc(Xamarin.Forms)::: Quickstart Deep Dive.
Solution Pad の Notes プロジェクトで、 [MainPage.xaml] をダブルクリックして開きます。In the Solution Pad , in the Notes project, double-click MainPage.xaml to open it:
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 aLabel
to display text, anEditor
for text input, and twoButton
instances that direct the application to save or delete a file. この 2 つのButton
インスタンスは、StackLayout
に垂直に配置されているLabel
、Editor
、Grid
と共に、Grid
に水平に配置されます。The twoButton
instances are horizontally laid out in aGrid
, with theLabel
,Editor
, andGrid
being vertically laid out in aStackLayout
. ユーザー インターフェイスの作成の詳細については、「:::no-loc(Xamarin.Forms)::: クイック スタート Deep Dive」の「ユーザー インターフェイス」を参照してください。For more information about creating the user interface, see User interface in the :::no-loc(Xamarin.Forms)::: Quickstart Deep Dive.[ファイル]、[保存] の順に選択し (または ⌘ + S キーを押し)、 MainPage.xaml への変更内容を保存してから、ファイルを閉じます。Save the changes to MainPage.xaml by choosing File > Save (or by pressing ⌘ + S ), and close the file.
Solution Pad の Notes プロジェクトで、 [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:
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 :::no-loc(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 namednotes.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 theEditor
. [保存]Button
が押されると、OnSaveButtonClicked
イベント ハンドラーが実行されます。これにより、Editor
のコンテンツがファイルに保存されます。When the SaveButton
is pressed theOnSaveButtonClicked
event handler is executed, which saves the content of theEditor
to the file. [削除]Button
が押されると、OnDeleteButtonClicked
イベント ハンドラーが実行されます。これにより、ファイルが存在する場合は削除され、Editor
から任意のテキストが削除されます。When the DeleteButton
is pressed theOnDeleteButtonClicked
event handler is executed, which deletes the file, provided that it exists, and removes any text from theEditor
. ユーザーの操作の詳細については、「:::no-loc(Xamarin.Forms)::: クイック スタート Deep Dive」の「ユーザー操作に対する応答」を参照してください。For more information about user interaction, see Responding to user interaction in the :::no-loc(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
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.
Solution Pad で [Notes.iOS] プロジェクトを選択して右クリックし、 [スタートアップ プロジェクトに設定] を選択します。In the Solution Pad , select the Notes.iOS project, right-click, and select Set As Startup Project :
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.
各プラットフォームでアプリケーションを起動する方法の詳細については、「:::no-loc(Xamarin.Forms)::: クイック スタート Deep Dive」の「各プラットフォームでアプリケーションを起動する」を参照してください。For more information about how the application is launched on each platform, see Launching the application on each platform in the :::no-loc(Xamarin.Forms)::: Quickstart Deep Dive.
Solution Pad で [Notes.Droid] プロジェクトを選択して右クリックし、 [スタートアップ プロジェクトに設定] を選択します。In the Solution Pad , select the Notes.Droid project, right-click, and select Set As Startup Project :
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.
各プラットフォームでアプリケーションを起動する方法の詳細については、「:::no-loc(Xamarin.Forms)::: クイック スタート Deep Dive」の「各プラットフォームでアプリケーションを起動する」を参照してください。For more information about how the application is launched on each platform, see Launching the application on each platform in the :::no-loc(Xamarin.Forms)::: Quickstart Deep Dive.
次の手順Next steps
このクイックスタートでは、次の方法について学習しました。In this quickstart, you learned how to:
- クロスプラットフォーム :::no-loc(Xamarin.Forms)::: インターフェイスを作成する。Create a cross-platform :::no-loc(Xamarin.Forms)::: application.
- Extensible Application Markup Language (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.