複数ページの Xamarin.Forms アプリケーションでナビゲーションを実行するPerform Navigation in a Multi-Page Xamarin.Forms Application

サンプルのダウンロードサンプルをダウンロードします。Download Sample Download the sample

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

  • Xamarin.Forms ソリューションにページを追加します。Add additional pages to a Xamarin.Forms solution.
  • ページ間のナビゲーションを実行します。Perform navigation between pages.
  • ユーザーインターフェイス要素とそのデータソースとの間でデータを同期するには、データバインディングを使用します。Use data binding to synchronize data between user interface elements and their data source.

このクイックスタートでは、1つのノートを複数ページアプリケーションに格納できる単一ページクロスプラットフォーム Xamarin.Forms アプリケーションを、複数のメモを格納できるようにする方法について説明します。The quickstart walks through how to turn a single page cross-platform Xamarin.Forms application, capable of storing a single note, into a multi-page application, capable of storing multiple notes. 最終的なアプリケーションは、次のとおりです。The final application is shown below:

[メモ] ページ[ ![(multi-page-images/screenshots1-sml.png " ")]][(multi-page-images/screenshots1.png#lightbox "メモ] ページ")メモ入力ページの(multi-page-images/screenshots2.png#lightbox "メモ入力ページ") [ ![(multi-page-images/screenshots2-sml.png " ")]]

必須コンポーネントPrerequisites

このクイックスタートを試行する前に、前のクイックスタートを正常に完了している必要があります。You should successfully complete the previous quickstart before attempting this quickstart. または、前のクイックスタートサンプルをダウンロードし、このクイックスタートの出発点として使用してください。Alternatively, download the previous quickstart sample and use it as the starting point for this quickstart.

Visual Studio でアプリを更新するUpdate the app with Visual Studio

  1. Visual Studio を起動します。Launch Visual Studio. スタート ウィンドウで、最近使ったプロジェクト/ソリューション の一覧で note ソリューションをクリックするか、プロジェクトまたはソリューションを開く をクリックします。次に、プロジェクト/ソリューションを開く ダイアログで、メモプロジェクトのソリューションファイルを選択します。In the start window, click the Notes solution in the recent projects/solutions list, or click Open a project or solution, and in the Open Project/Solution dialog select the solution file for the Notes project:

  2. ソリューションエクスプローラーで、メモプロジェクトを右クリックし、 [> 新しいフォルダーの追加] を選択します。In Solution Explorer, right-click on the Notes project and select Add > New Folder:

  3. ソリューションエクスプローラーで、新しいフォルダーモデルにという名前を指定します。In Solution Explorer, name the new folder Models:

  4. ソリューションエクスプローラーで、 [モデル] フォルダーを選択し、右クリックして、 [新しい項目の追加 >] を選択します。In Solution Explorer, select the Models folder, right-click, and select Add > New Item...:

  5. [新しい項目の追加] ダイアログで、 [ビジュアルC#項目 > クラス] を選択し、新しいファイルに「 Note」という名前を指定して、 [追加] ボタンをクリックします。In the Add New Item dialog, select Visual C# Items > Class, name the new file Note, and click the Add button:

    これにより、 noteという名前のクラスがNotesプロジェクトの [モデル] フォルダーに追加されます。This will add a class named Note to the Models folder of the Notes project.

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

    using System;
    
    namespace Notes.Models
    {
        public class Note
        {
            public string Filename { get; set; }
            public string Text { get; set; }
            public DateTime Date { get; set; }
        }
    }
    

    このクラスは、 Noteアプリケーションの各メモに関するデータを格納するモデルを定義します。This class defines a Note model that will store data about each note in the application.

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

  7. ソリューションエクスプローラーで、メモプロジェクトを右クリックし、 [> 新しい項目の追加] を選択します。 [新しい項目の追加] ダイアログで、[ビジュアルC#項目 > Xamarin.Forms> コンテンツ] ページを選択し、新しいファイルにNoteEntryPageという名前を指定して、 [追加] ボタンをクリックします。In Solution Explorer, right-click on the Notes project and select Add > New Item... In the Add New Item dialog, select Visual C# Items > Xamarin.Forms > Content Page, name the new file NoteEntryPage, and click the Add button:

    これにより、 NoteEntryPageという名前の新しいページがプロジェクトのルートフォルダーに追加されます。This will add a new page named NoteEntryPage to the root folder of the project. このページは、アプリケーションの2番目のページになります。This page will be the second page in the application.

  8. NoteEntryPageで、すべてのテンプレートコードを削除し、次のコードに置き換えます。In NoteEntryPage.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.NoteEntryPage"
                 Title="Note Entry">
        <StackLayout Margin="20">
            <Editor Placeholder="Enter your note"
                    Text="{Binding Text}"
                    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>
    

    このコードは、ページのユーザーインターフェイスを宣言Editorによって定義します。これは、テキスト入力用のと、アプリケーションにファイルの保存または削除を指示する2つButtonのインスタンスで構成されます。This code declaratively defines the user interface for the page, which consists of an Editor for text input, and two Button instances that direct the application to save or delete a file. 2つButtonのインスタンスは、で水平方向GridにレイアウトEditor Gridされ、で水平方向StackLayoutにレイアウトされます。The two Button instances are horizontally laid out in a Grid, with the Editor and Grid being vertically laid out in a StackLayout. さらに、はEditor 、データバインディングを使用してTextNoteモデルのプロパティにバインドします。In addition, the Editor uses data binding to bind to the Text property of the Note model. データバインディングの詳細については、「 Xamarinの概要」の「データバインディング」を参照してください。For more information about data binding, see Data binding in the Xamarin.Forms Quickstart Deep Dive.

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

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

    using System;
    using System.IO;
    using Xamarin.Forms;
    using Notes.Models;
    
    namespace Notes
    {
        public partial class NoteEntryPage : ContentPage
        {
            public NoteEntryPage()
            {
                InitializeComponent();
            }
    
            async void OnSaveButtonClicked(object sender, EventArgs e)
            {
                var note = (Note)BindingContext;
    
                if (string.IsNullOrWhiteSpace(note.Filename))
                {
                    // Save
                    var filename = Path.Combine(App.FolderPath, $"{Path.GetRandomFileName()}.notes.txt");
                    File.WriteAllText(filename, note.Text);
                }
                else
                {
                    // Update
                    File.WriteAllText(note.Filename, note.Text);
                }
    
                await Navigation.PopAsync();
            }
    
            async void OnDeleteButtonClicked(object sender, EventArgs e)
            {
                var note = (Note)BindingContext;
    
                if (File.Exists(note.Filename))
                {
                    File.Delete(note.Filename);
                }
    
                await Navigation.PopAsync();
            }
        }
    }
    

    このコードは、 NoteページBindingContextの内に1つのノートを表すインスタンスを格納します。This code stores a Note instance, which represents a single note, in the BindingContext of the page. Editor 保存 Buttonを押すOnSaveButtonClickedと、イベントハンドラーが実行されます。これにより、の内容がランダムに生成されたファイル名を持つ新しいファイルに保存されるか、またはメモが更新されている場合は既存のファイルに保存されます。When the Save Button is pressed the OnSaveButtonClicked event handler is executed, which either saves the content of the Editor to a new file with a randomly generated filename, or to an existing file if a note is being updated. どちらの場合も、ファイルはアプリケーションのローカルアプリケーションデータフォルダーに格納されます。In both cases, the file is stored in the local application data folder for the application. 次に、メソッドは前のページに戻ります。Then the method navigates back to the previous page. 削除 Buttonが押さOnDeleteButtonClickedれると、イベントハンドラーが実行されます。これにより、ファイルが存在する場合は削除され、前のページに戻ります。When the Delete Button is pressed the OnDeleteButtonClicked event handler is executed, which deletes the file, provided that it exists, and navigates back to the previous page. ナビゲーションの詳細については、「 Xamarin のクイックスタートナビゲーション」を参照してください。For more information about navigation, see Navigation in the Xamarin.Forms Quickstart Deep Dive.

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

    警告

    この時点でアプリケーションをビルドしようとすると、後続の手順で修正されるエラーが発生します。Attempting to build the application at this point will result in errors that will be fixed in subsequent steps.

  10. ソリューションエクスプローラーで、メモプロジェクトを右クリックし、 [> 新しい項目の追加] を選択します。 [新しい項目の追加] ダイアログで、[ビジュアルC#項目 > Xamarin.Forms > コンテンツ] ページを選択し、新しいファイルに「ノート」という名前を指定して、 [追加] ボタンをクリックします。In Solution Explorer, right-click on the Notes project and select Add > New Item... In the Add New Item dialog, select Visual C# Items > Xamarin.Forms > Content Page, name the new file NotesPage, and click the Add button.

    これにより、プロジェクトのルートフォルダーに [ノート] ページという名前のページが追加されます。This will add a page named NotesPage to the root folder of the project. このページは、アプリケーションのルートページになります。This page will be the root page of the application.

  11. [ファイル ] [.xaml] で、すべてのテンプレートコードを削除し、次のコードに置き換えます。In NotesPage.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.NotesPage"
                 Title="Notes">
        <ContentPage.ToolbarItems>
            <ToolbarItem Text="+"
                         Clicked="OnNoteAddedClicked" />
        </ContentPage.ToolbarItems>
        <ListView x:Name="listView"
                  Margin="20"
                  ItemSelected="OnListViewItemSelected">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextCell Text="{Binding Text}"
                              Detail="{Binding Date}" />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </ContentPage>
    

    このコードは、 ListView ToolbarItemとで構成されるページのユーザーインターフェイスを宣言によって定義します。This code declaratively defines the user interface for the page, which consists of a ListView and a ToolbarItem. ListView 、データバインディングを使用して、アプリケーションによって取得されるすべてのメモを表示しますNoteEntryPage 。メモを選択すると、ノートを変更できる場所に移動します。The ListView uses data binding to display any notes that are retrieved by the application, and selecting a note will navigate to the NoteEntryPage where the note can be modified. または、 ToolbarItemを押して新しいメモを作成することもできます。Alternatively, a new note can be created by pressing the ToolbarItem. データバインディングの詳細については、「 Xamarinの概要」の「データバインディング」を参照してください。For more information about data binding, see Data binding in the Xamarin.Forms Quickstart Deep Dive.

    CTRL + Sキーを押して、変更内容を [ノート] ページに保存し、ファイルを閉じます。Save the changes to NotesPage.xaml by pressing CTRL+S, and close the file.

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

    using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Linq;
    using Xamarin.Forms;
    using Notes.Models;
    
    namespace Notes
    {
        public partial class NotesPage : ContentPage
        {
            public NotesPage()
            {
                InitializeComponent();
            }
    
            protected override void OnAppearing()
            {
                base.OnAppearing();
    
                var notes = new List<Note>();
    
                var files = Directory.EnumerateFiles(App.FolderPath, "*.notes.txt");
                foreach (var filename in files)
                {
                    notes.Add(new Note
                    {
                        Filename = filename,
                        Text = File.ReadAllText(filename),
                        Date = File.GetCreationTime(filename)
                    });
                }
    
                listView.ItemsSource = notes
                    .OrderBy(d => d.Date)
                    .ToList();
            }
    
            async void OnNoteAddedClicked(object sender, EventArgs e)
            {
                await Navigation.PushAsync(new NoteEntryPage
                {
                    BindingContext = new Note()
                });
            }
    
            async void OnListViewItemSelected(object sender, SelectedItemChangedEventArgs e)
            {
                if (e.SelectedItem != null)
                {
                    await Navigation.PushAsync(new NoteEntryPage
                    {
                        BindingContext = e.SelectedItem as Note
                    });
                }
            }
        }
    }
    

    このコードは、 NotesPageの機能を定義します。This code defines the functionality for the NotesPage. このページが表示さOnAppearingれると、メソッドが実行され、ローカルアプリケーションデータフォルダーから取得したすべてのListViewメモがに設定されます。When the page appears, the OnAppearing method is executed, which populates the ListView with any notes that have been retrieved from the local application data folder. が押されると、 OnNoteAddedClickedイベントハンドラーが実行されます。 ToolbarItemWhen the ToolbarItem is pressed the OnNoteAddedClicked event handler is executed. このメソッドは、にNoteEntryPage移動し、 BindingContextNoteEntryPageを新しいNoteインスタンスに設定します。This method navigates to the NoteEntryPage, setting the BindingContext of the NoteEntryPage to a new Note instance. ListView項目が選択されると、 OnListViewItemSelectedイベントハンドラーが実行されます。When an item in the ListView is selected the OnListViewItemSelected event handler is executed. このメソッドは、にNoteEntryPage移動し、 BindingContextNoteEntryPageを選択したNoteインスタンスに設定します。This method navigates to the NoteEntryPage, setting the BindingContext of the NoteEntryPage to the selected Note instance. ナビゲーションの詳細については、「 Xamarin のクイックスタートナビゲーション」を参照してください。For more information about navigation, see Navigation in the Xamarin.Forms Quickstart Deep Dive.

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

    警告

    この時点でアプリケーションをビルドしようとすると、後続の手順で修正されるエラーが発生します。Attempting to build the application at this point will result in errors that will be fixed in subsequent steps.

  13. ソリューションエクスプローラーで、 [App.xaml.cs] をダブルクリックして開きます。In Solution Explorer, double-click App.xaml.cs to open it. 次に、既存のコードを次のコードに置き換えます。Then replace the existing code with the following code:

    using System;
    using System.IO;
    using Xamarin.Forms;
    
    namespace Notes
    {
        public partial class App : Application
        {
            public static string FolderPath { get; private set; }
    
            public App()
            {
                InitializeComponent();
                FolderPath = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData));
                MainPage = new NavigationPage(new NotesPage());
            }
            // ...
        }
    }
    

    このコードは、 System.IO名前空間の名前空間宣言を追加し、型stringの静的FolderPathプロパティの宣言を追加します。This code adds a namespace declaration for the System.IO namespace, and adds a declaration for a static FolderPath property of type string. FolderPathプロパティは、ノートデータが格納されるデバイス上のパスを格納するために使用されます。The FolderPath property is used to store the path on the device where note data will be stored. さらに、このFolderPathコードはApp MainPageコンストラクターでプロパティを初期化し、プロパティを初期化して、 NavigationPageNotesPageインスタンスをホストするとします。In addition, the code initializes the FolderPath property in the App constructor, and initializes the MainPage property to be a NavigationPage that hosts an instance of NotesPage. ナビゲーションの詳細については、「 Xamarin のクイックスタートナビゲーション」を参照してください。For more information about navigation, see Navigation in the Xamarin.Forms Quickstart Deep Dive.

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

  14. ソリューションエクスプローラーNotesプロジェクトで、 mainpage.xamlを右クリックし、 [削除] を選択します。In Solution Explorer, in the Notes project, right-click MainPage.xaml, and select Delete. 表示されるダイアログで、 [OK ] をクリックして、ハードディスクからファイルを削除します。In the dialog that appears press the OK button to remove the file from your hard disk.

    これにより、使用されなくなったページが削除されます。This removes a page that's no longer used.

  15. 各プラットフォームでプロジェクトをビルドして実行します。Build and run the project on each platform. 詳細については、「クイックスタートのビルド」を参照してください。For more information, see Building the quickstart.

    [ノート] ページで、 + ボタンを押してNoteEntryPageに移動し、メモを入力します。On the NotesPage press the + button to navigate to the NoteEntryPage and enter a note. メモを保存すると、アプリケーションは [ノート ] ページに戻ります。After saving the note the application will navigate back to the NotesPage.

    さまざまな長さのメモを入力して、アプリケーションの動作を観察します。Enter a number of notes, of varying length, to observe the application behavior.

Visual Studio for Mac でアプリを更新するUpdate the app with Visual Studio for Mac

  1. Visual Studio for Mac を起動します。Launch Visual Studio for Mac. スタート ウィンドウで 開く をクリックし、ダイアログボックスで、メモプロジェクトのソリューションファイルを選択します。In the start window click Open, and in the dialog select the solution file for the Notes project:

  2. Solution Padで、メモプロジェクトを選択して右クリックし、 [> 新しいフォルダーの追加] を選択します。In the Solution Pad, select the Notes project, right-click, and select Add > New Folder:

  3. Solution Padで、新しいフォルダーモデルにという名前を指定します。In the Solution Pad, name the new folder Models:

  4. Solution Padで、 [モデル] フォルダーを選択し、右クリックして、 [新しいファイルを追加 >] を選択します。In the Solution Pad, select the Models folder, right-click, and select Add > New File...:

  5. [新しいファイル] ダイアログで、 [全般 > 空のクラス] を選択し、新しいファイルに「 Note」という名前を指定して、 [新規] ボタンをクリックします。In the New File dialog, select General > Empty Class, name the new file Note, and click the New button:

    これにより、 noteという名前のクラスがNotesプロジェクトの [モデル] フォルダーに追加されます。This will add a class named Note to the Models folder of the Notes project.

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

    using System;
    
    namespace Notes.Models
    {
        public class Note
        {
            public string Filename { get; set; }
            public string Text { get; set; }
            public DateTime Date { get; set; }
        }
    }
    

    このクラスは、 Noteアプリケーションの各メモに関するデータを格納するモデルを定義します。This class defines a Note model that will store data about each note in the application.

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

  7. Solution Padで、メモプロジェクトを選択し、右クリックして、 [> 新しいファイルの追加] を選択します。 [新しいファイル] ダイアログで、 [フォーム > フォーム ContentPage XAML] を選択し、新しいファイルにNoteEntryPageという名前を指定して、 [新規] ボタンをクリックします。In the Solution Pad, select the Notes project, right-click, and select Add > New File.... In the New File dialog, select Forms > Forms ContentPage XAML, name the new file NoteEntryPage, and click the New button:

    これにより、 NoteEntryPageという名前の新しいページがプロジェクトのルートフォルダーに追加されます。This will add a new page named NoteEntryPage to the root folder of the project. このページは、アプリケーションの2番目のページになります。This page will be the second page in the application.

  8. NoteEntryPageで、すべてのテンプレートコードを削除し、次のコードに置き換えます。In NoteEntryPage.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.NoteEntryPage"
                 Title="Note Entry">
        <StackLayout Margin="20">
            <Editor Placeholder="Enter your note"
                    Text="{Binding Text}"
                    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>
    

    このコードは、ページのユーザーインターフェイスを宣言Editorによって定義します。これは、テキスト入力用のと、アプリケーションにファイルの保存または削除を指示する2つButtonのインスタンスで構成されます。This code declaratively defines the user interface for the page, which consists of an Editor for text input, and two Button instances that direct the application to save or delete a file. 2つButtonのインスタンスは、で水平方向GridにレイアウトEditor Gridされ、で水平方向StackLayoutにレイアウトされます。The two Button instances are horizontally laid out in a Grid, with the Editor and Grid being vertically laid out in a StackLayout. さらに、はEditor 、データバインディングを使用してTextNoteモデルのプロパティにバインドします。In addition, the Editor uses data binding to bind to the Text property of the Note model. データバインディングの詳細については、「 Xamarinの概要」の「データバインディング」を参照してください。For more information about data binding, see Data binding in the Xamarin.Forms Quickstart Deep Dive.

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

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

    using System;
    using System.IO;
    using Xamarin.Forms;
    using Notes.Models;
    
    namespace Notes
    {
        public partial class NoteEntryPage : ContentPage
        {
            public NoteEntryPage()
            {
                InitializeComponent();
            }
    
            async void OnSaveButtonClicked(object sender, EventArgs e)
            {
                var note = (Note)BindingContext;
    
                if (string.IsNullOrWhiteSpace(note.Filename))
                {
                    // Save
                    var filename = Path.Combine(App.FolderPath, $"{Path.GetRandomFileName()}.notes.txt");
                    File.WriteAllText(filename, note.Text);
                }
                else
                {
                    // Update
                    File.WriteAllText(note.Filename, note.Text);
                }
    
                await Navigation.PopAsync();
            }
    
            async void OnDeleteButtonClicked(object sender, EventArgs e)
            {
                var note = (Note)BindingContext;
    
                if (File.Exists(note.Filename))
                {
                    File.Delete(note.Filename);
                }
    
                await Navigation.PopAsync();
            }
        }
    }
    

    このコードは、 NoteページBindingContextの内に1つのノートを表すインスタンスを格納します。This code stores a Note instance, which represents a single note, in the BindingContext of the page. Editor 保存 Buttonを押すOnSaveButtonClickedと、イベントハンドラーが実行されます。これにより、の内容がランダムに生成されたファイル名を持つ新しいファイルに保存されるか、またはメモが更新されている場合は既存のファイルに保存されます。When the Save Button is pressed the OnSaveButtonClicked event handler is executed, which either saves the content of the Editor to a new file with a randomly generated filename, or to an existing file if a note is being updated. どちらの場合も、ファイルはアプリケーションのローカルアプリケーションデータフォルダーに格納されます。In both cases, the file is stored in the local application data folder for the application. 次に、メソッドは前のページに戻ります。Then the method navigates back to the previous page. 削除 Buttonが押さOnDeleteButtonClickedれると、イベントハンドラーが実行されます。これにより、ファイルが存在する場合は削除され、前のページに戻ります。When the Delete Button is pressed the OnDeleteButtonClicked event handler is executed, which deletes the file, provided that it exists, and navigates back to the previous page. ナビゲーションの詳細については、「 Xamarin のクイックスタートナビゲーション」を参照してください。For more information about navigation, see Navigation in the Xamarin.Forms Quickstart Deep Dive.

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

    警告

    この時点でアプリケーションをビルドしようとすると、後続の手順で修正されるエラーが発生します。Attempting to build the application at this point will result in errors that will be fixed in subsequent steps.

  10. Solution Padで、メモプロジェクトを選択し、右クリックして、 [> 新しいファイルの追加] を選択します。 [新しいファイル] ダイアログで、 [フォーム > フォーム ContentPage XAML] を選択し、新しいファイルに「ノート」という名前を指定して、 [新規] 作成 ボタンをクリックします。In the Solution Pad, select the Notes project, right-click, and select Add > New File.... In the New File dialog, select Forms > Forms ContentPage XAML, name the new file NotesPage, and click the New button.

    これにより、プロジェクトのルートフォルダーに [ノート] ページという名前のページが追加されます。This will add a page named NotesPage to the root folder of the project. このページは、アプリケーションのルートページになります。This page will be the root page of the application.

  11. [ファイル ] [.xaml] で、すべてのテンプレートコードを削除し、次のコードに置き換えます。In NotesPage.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.NotesPage"
                 Title="Notes">
        <ContentPage.ToolbarItems>
            <ToolbarItem Text="+"
                         Clicked="OnNoteAddedClicked" />
        </ContentPage.ToolbarItems>
        <ListView x:Name="listView"
                  Margin="20"
                  ItemSelected="OnListViewItemSelected">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextCell Text="{Binding Text}"
                              Detail="{Binding Date}" />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </ContentPage>
    

    このコードは、 ListView ToolbarItemとで構成されるページのユーザーインターフェイスを宣言によって定義します。This code declaratively defines the user interface for the page, which consists of a ListView and a ToolbarItem. ListView 、データバインディングを使用して、アプリケーションによって取得されるすべてのメモを表示しますNoteEntryPage 。メモを選択すると、ノートを変更できる場所に移動します。The ListView uses data binding to display any notes that are retrieved by the application, and selecting a note will navigate to the NoteEntryPage where the note can be modified. または、 ToolbarItemを押して新しいメモを作成することもできます。Alternatively, a new note can be created by pressing the ToolbarItem. データバインディングの詳細については、「 Xamarinの概要」の「データバインディング」を参照してください。For more information about data binding, see Data binding in the Xamarin.Forms Quickstart Deep Dive.

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

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

    using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Linq;
    using Xamarin.Forms;
    using Notes.Models;
    
    namespace Notes
    {
        public partial class NotesPage : ContentPage
        {
            public NotesPage()
            {
                InitializeComponent();
            }
    
            protected override void OnAppearing()
            {
                base.OnAppearing();
    
                var notes = new List<Note>();
    
                var files = Directory.EnumerateFiles(App.FolderPath, "*.notes.txt");
                foreach (var filename in files)
                {
                    notes.Add(new Note
                    {
                        Filename = filename,
                        Text = File.ReadAllText(filename),
                        Date = File.GetCreationTime(filename)
                    });
                }
    
                listView.ItemsSource = notes
                    .OrderBy(d => d.Date)
                    .ToList();
            }
    
            async void OnNoteAddedClicked(object sender, EventArgs e)
            {
                await Navigation.PushAsync(new NoteEntryPage
                {
                    BindingContext = new Note()
                });
            }
    
            async void OnListViewItemSelected(object sender, SelectedItemChangedEventArgs e)
            {
                if (e.SelectedItem != null)
                {
                    await Navigation.PushAsync(new NoteEntryPage
                    {
                        BindingContext = e.SelectedItem as Note
                    });
                }
            }
        }
    }
    

    このコードは、 NotesPageの機能を定義します。This code defines the functionality for the NotesPage. このページが表示さOnAppearingれると、メソッドが実行され、ローカルアプリケーションデータフォルダーから取得したすべてのListViewメモがに設定されます。When the page appears, the OnAppearing method is executed, which populates the ListView with any notes that have been retrieved from the local application data folder. が押されると、 OnNoteAddedClickedイベントハンドラーが実行されます。 ToolbarItemWhen the ToolbarItem is pressed the OnNoteAddedClicked event handler is executed. このメソッドは、にNoteEntryPage移動し、 BindingContextNoteEntryPageを新しいNoteインスタンスに設定します。This method navigates to the NoteEntryPage, setting the BindingContext of the NoteEntryPage to a new Note instance. ListView項目が選択されると、 OnListViewItemSelectedイベントハンドラーが実行されます。When an item in the ListView is selected the OnListViewItemSelected event handler is executed. このメソッドは、にNoteEntryPage移動し、 BindingContextNoteEntryPageを選択したNoteインスタンスに設定します。This method navigates to the NoteEntryPage, setting the BindingContext of the NoteEntryPage to the selected Note instance. ナビゲーションの詳細については、「 Xamarin のクイックスタートナビゲーション」を参照してください。For more information about navigation, see Navigation in the Xamarin.Forms Quickstart Deep Dive.

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

    警告

    この時点でアプリケーションをビルドしようとすると、後続の手順で修正されるエラーが発生します。Attempting to build the application at this point will result in errors that will be fixed in subsequent steps.

  13. Solution Padで、 [App.xaml.cs] をダブルクリックして開きます。In the Solution Pad, double-click App.xaml.cs to open it. 次に、既存のコードを次のコードに置き換えます。Then replace the existing code with the following code:

    using System;
    using System.IO;
    using Xamarin.Forms;
    
    namespace Notes
    {
        public partial class App : Application
        {
            public static string FolderPath { get; private set; }
    
            public App()
            {
                InitializeComponent();
                FolderPath = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData));
                MainPage = new NavigationPage(new NotesPage());
            }
            // ...
        }
    }
    

    このコードは、 System.IO名前空間の名前空間宣言を追加し、型stringの静的FolderPathプロパティの宣言を追加します。This code adds a namespace declaration for the System.IO namespace, and adds a declaration for a static FolderPath property of type string. FolderPathプロパティは、ノートデータが格納されるデバイス上のパスを格納するために使用されます。The FolderPath property is used to store the path on the device where note data will be stored. さらに、このFolderPathコードはApp MainPageコンストラクターでプロパティを初期化し、プロパティを初期化して、 NavigationPageNotesPageインスタンスをホストするとします。In addition, the code initializes the FolderPath property in the App constructor, and initializes the MainPage property to be a NavigationPage that hosts an instance of NotesPage. ナビゲーションの詳細については、「 Xamarin のクイックスタートナビゲーション」を参照してください。For more information about navigation, see Navigation in the Xamarin.Forms Quickstart Deep Dive.

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

  14. Solution PadNotesプロジェクトで、 mainpage.xamlを右クリックし、 [削除] を選択します。In the Solution Pad, in the Notes project, right-click MainPage.xaml, and select Remove. 表示されたダイアログで、 [削除] ボタンを押して、ハードディスクからファイルを削除します。In the dialog that appears press the Delete button to remove the file from your hard disk.

    これにより、使用されなくなったページが削除されます。This removes a page that's no longer used.

  15. 各プラットフォームでプロジェクトをビルドして実行します。Build and run the project on each platform. 詳細については、「クイックスタートのビルド」を参照してください。For more information, see Building the quickstart.

    [ノート] ページで、 + ボタンを押してNoteEntryPageに移動し、メモを入力します。On the NotesPage press the + button to navigate to the NoteEntryPage and enter a note. メモを保存すると、アプリケーションは [ノート ] ページに戻ります。After saving the note the application will navigate back to the NotesPage.

    さまざまな長さのメモを入力して、アプリケーションの動作を観察します。Enter a number of notes, of varying length, to observe the application behavior.

次の手順Next steps

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

  • Xamarin.Forms ソリューションにページを追加します。Add additional pages to a Xamarin.Forms solution.
  • ページ間のナビゲーションを実行します。Perform navigation between pages.
  • ユーザーインターフェイス要素とそのデータソースとの間でデータを同期するには、データバインディングを使用します。Use data binding to synchronize data between user interface elements and their data source.

ローカルの SQLite.NET データベースにデータを格納するようにアプリケーションを変更するには、次のクイックスタートに進みます。To modify the application so that it stores its data in a local SQLite.NET database, continue to the next quickstart.