다중 페이지 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.

이 빠른 시작에서는 단일 페이지를 여러 개의 노트를 저장할 수 있는 다중 페이지 응용 프로그램에 저장할 수 있는 단일 페이지 플랫폼 간 Xamarin.ios 응용 프로그램을 설정 하는 방법을 안내 합니다.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:

PrerequisitesPrerequisites

이 빠른 시작을 시도 하기 전에 이전 퀵 스타트 를 성공적으로 완료 해야 합니다.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. 시작 창의 최근 프로젝트/솔루션 목록에서 참고 솔루션을 클릭 하거나, 프로젝트 또는솔루션 열기를 클릭 하 고, 프로젝트/솔루션 열기 대화 상자에서 notes 프로젝트에 대 한 솔루션 파일을 선택 합니다.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. 솔루션 탐색기에서 Notes 프로젝트를 마우스 오른쪽 단추로 클릭 하 고 추가 > 새 폴더를 선택 합니다.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# 클래스를 선택 하 고 새 파일의이름을로 표시 한 다음 추가 단추를 클릭 합니다.In the Add New Item dialog, select Visual C# Items > Class, name the new file Note, and click the Add button:

    그러면 Notes 프로젝트의 모델 폴더에 Note 라는 클래스가 추가 됩니다.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. 솔루션 탐색기에서 Notes 프로젝트를 마우스 오른쪽 단추로 클릭 하 고 > 새 항목 추가...를 선택 합니다. 새 항목 추가 대화 상자에서 NoteEntryPage > 콘텐츠 C# 페이지 > 시각적 항목을 선택 하 고, 새 파일의 이름을로, 추가 단추를 클릭 합니다.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. 이 페이지는 응용 프로그램의 두 번째 페이지가 됩니다.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 로 구성 되며, 응용 프로그램에서 파일을 저장 하거나 삭제 하도록 지시 하는 두 개의 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. 두 개의 Button 인스턴스는 Grid에서 가로로 배치 되며 EditorGridStackLayout에서 수직으로 배치 됩니다.The two Button instances are horizontally laid out in a Grid, with the Editor and Grid being vertically laid out in a StackLayout. 또한 Editor는 데이터 바인딩을 사용 하 여 Note 모델의 Text 속성에 바인딩합니다.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();
            }
        }
    }
    

    이 코드는 페이지의 BindingContext 에서 단일 메모를 나타내는 Note 인스턴스를 저장 합니다.This code stores a Note instance, which represents a single note, in the BindingContext of the page. 저장 Button 를 누르면 Editor 콘텐츠를 임의로 생성 된 파일 이름이 있는 새 파일에 저장 하거나 메모를 업데이트 하는 경우 기존 파일에 저장 하는 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. Delete 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. 솔루션 탐색기에서 Notes 프로젝트를 마우스 오른쪽 단추로 클릭 하 고 > 새 항목 추가...를 선택 합니다. 새 항목 추가 대화 상자에서 NotesPage > 콘텐츠 C# 페이지 > 시각적 항목을 선택 하 고, 새 파일의 이름을로, 추가 단추를 클릭 합니다.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.

    그러면 NotesPage 이라는 페이지가 프로젝트의 루트 폴더에 추가 됩니다.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. NotesPage에서 템플릿 코드를 모두 제거 하 고 다음 코드로 바꿉니다.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>
    

    이 코드는 ListViewToolbarItem으로 구성 된 페이지에 대 한 사용자 인터페이스를 선언적으로 정의 합니다.This code declaratively defines the user interface for the page, which consists of a ListView and a ToolbarItem. @No__t_0는 데이터 바인딩을 사용 하 여 응용 프로그램에서 검색 된 메모를 표시 하 고 메모를 선택 하면 메모를 수정할 수 있는 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를 눌러 변경 내용을 NotesPage 에 저장 하 고 파일을 닫습니다.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. @No__t_1 를 누르면 OnNoteAddedClicked 이벤트 처리기가 실행 됩니다.When the ToolbarItem is pressed the OnNoteAddedClicked event handler is executed. 이 메서드는 NoteEntryPage로 이동 하 여 NoteEntryPageBindingContext 를 새 Note 인스턴스로 설정 합니다.This method navigates to the NoteEntryPage, setting the BindingContext of the NoteEntryPage to a new Note instance. @No__t_0 항목을 선택 하면 OnListViewItemSelected 이벤트 처리기가 실행 됩니다.When an item in the ListView is selected the OnListViewItemSelected event handler is executed. 이 메서드는 NoteEntryPage로 이동 하 여 NoteEntryPageBindingContext 를 선택한 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. @No__t_0 속성은 메모 데이터가 저장 되는 장치에 경로를 저장 하는 데 사용 됩니다.The FolderPath property is used to store the path on the device where note data will be stored. 또한이 코드는 App 생성자에서 FolderPath 속성을 초기화 하 고 MainPage 속성을 NotesPage의 인스턴스를 호스트 하는 NavigationPage 로 초기화 합니다.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을 마우스 오른쪽 단추로 클릭 하 고 삭제를 선택 합니다.In Solution Explorer, in the Notes project, right-click MainPage.xaml, and select Delete. 표시 되는 대화 상자에서 확인 단추를 눌러 하드 디스크에서 파일을 제거 합니다.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.

    NotesPage 에서 + 단추를 눌러 NoteEntryPage 로 이동 하 고 메모를 입력 합니다.On the NotesPage press the + button to navigate to the NoteEntryPage and enter a note. 저장 한 후에 응용 프로그램은 NotesPage로 다시 이동 합니다.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.

Mac용 Visual Studio를 사용하여 앱 업데이트Update the app with Visual Studio for Mac

  1. Mac용 Visual Studio.Launch Visual Studio for Mac. 시작 창에서 열기를 클릭 하 고 대화 상자에서 Notes 프로젝트에 대 한 솔루션 파일을 선택 합니다.In the start window click Open, and in the dialog select the solution file for the Notes project:

  2. Solution Pad에서 Notes 프로젝트를 선택 하 고 마우스 오른쪽 단추를 클릭 한 다음 추가 > 새 폴더를 선택 합니다.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. 새 파일 대화 상자에서 일반 > 빈 클래스를 선택 하 고 새 파일의이름을로 입력 한 다음 새로 만들기 단추를 클릭 합니다.In the New File dialog, select General > Empty Class, name the new file Note, and click the New button:

    그러면 Notes 프로젝트의 모델 폴더에 Note 라는 클래스가 추가 됩니다.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에서 Notes 프로젝트를 선택 하 고 마우스 오른쪽 단추를 클릭 한 다음 새 파일 > 추가...를 선택 합니다. 새 파일 대화 상자에서 양식 > 양식 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. 이 페이지는 응용 프로그램의 두 번째 페이지가 됩니다.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 로 구성 되며, 응용 프로그램에서 파일을 저장 하거나 삭제 하도록 지시 하는 두 개의 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. 두 개의 Button 인스턴스는 Grid에서 가로로 배치 되며 EditorGridStackLayout에서 수직으로 배치 됩니다.The two Button instances are horizontally laid out in a Grid, with the Editor and Grid being vertically laid out in a StackLayout. 또한 Editor는 데이터 바인딩을 사용 하 여 Note 모델의 Text 속성에 바인딩합니다.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();
            }
        }
    }
    

    이 코드는 페이지의 BindingContext 에서 단일 메모를 나타내는 Note 인스턴스를 저장 합니다.This code stores a Note instance, which represents a single note, in the BindingContext of the page. 저장 Button 를 누르면 Editor 콘텐츠를 임의로 생성 된 파일 이름이 있는 새 파일에 저장 하거나 메모를 업데이트 하는 경우 기존 파일에 저장 하는 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. Delete 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에서 Notes 프로젝트를 선택 하 고 마우스 오른쪽 단추를 클릭 한 다음 새 파일 > 추가...를 선택 합니다. 새 파일 대화 상자에서 양식 > 양식 contentpage XAML을 선택 하 고, 새 파일의 이름을 NotesPage로, 새로 만들기 단추를 클릭 합니다.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.

    그러면 NotesPage 이라는 페이지가 프로젝트의 루트 폴더에 추가 됩니다.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. NotesPage에서 템플릿 코드를 모두 제거 하 고 다음 코드로 바꿉니다.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>
    

    이 코드는 ListViewToolbarItem으로 구성 된 페이지에 대 한 사용자 인터페이스를 선언적으로 정의 합니다.This code declaratively defines the user interface for the page, which consists of a ListView and a ToolbarItem. @No__t_0는 데이터 바인딩을 사용 하 여 응용 프로그램에서 검색 된 메모를 표시 하 고 메모를 선택 하면 메모를 수정할 수 있는 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를 눌러 변경 내용을 NotesPage 에 저장 하 고 파일을 닫습니다.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. @No__t_1 를 누르면 OnNoteAddedClicked 이벤트 처리기가 실행 됩니다.When the ToolbarItem is pressed the OnNoteAddedClicked event handler is executed. 이 메서드는 NoteEntryPage로 이동 하 여 NoteEntryPageBindingContext 를 새 Note 인스턴스로 설정 합니다.This method navigates to the NoteEntryPage, setting the BindingContext of the NoteEntryPage to a new Note instance. @No__t_0 항목을 선택 하면 OnListViewItemSelected 이벤트 처리기가 실행 됩니다.When an item in the ListView is selected the OnListViewItemSelected event handler is executed. 이 메서드는 NoteEntryPage로 이동 하 여 NoteEntryPageBindingContext 를 선택한 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. @No__t_0 속성은 메모 데이터가 저장 되는 장치에 경로를 저장 하는 데 사용 됩니다.The FolderPath property is used to store the path on the device where note data will be stored. 또한이 코드는 App 생성자에서 FolderPath 속성을 초기화 하 고 MainPage 속성을 NotesPage의 인스턴스를 호스트 하는 NavigationPage 로 초기화 합니다.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을 마우스 오른쪽 단추로 클릭 하 고 제거를 선택 합니다.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.

    NotesPage 에서 + 단추를 눌러 NoteEntryPage 로 이동 하 고 메모를 입력 합니다.On the NotesPage press the + button to navigate to the NoteEntryPage and enter a note. 저장 한 후에 응용 프로그램은 NotesPage로 다시 이동 합니다.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.