다음을 통해 공유

노트에 대한 페이지 만들기

이제 사용자가 노트를 편집할 수 있는 페이지를 만든 다음 메모를 저장하거나 삭제하는 코드를 작성합니다.

팁 (조언)

GitHub 리포지토리에서 이 자습서의 코드를 다운로드하거나 볼 수 있습니다. 이 단계에서 코드를 보려면 이 커밋을 참조하세요. 참고 페이지 - 초기입니다.

먼저 프로젝트에 새 페이지를 추가합니다.

  1. Visual Studio의 솔루션 탐색기 창에서 WinUINotes 프로젝트 >새 항목 추가...를 마우스 오른쪽 단추> 클릭합니다.

  2. 새 항목 추가 대화 상자의 창 왼쪽에 있는 템플릿 목록에서 WinUI를 선택합니다. 다음으로 빈 페이지(WinUI 3) 템플릿을 선택합니다. 파일 NotePage.xaml이름을 지정한 다음 추가를 선택합니다.

  3. NotePage.xaml 파일이 새 탭에서 열리고 페이지의 UI를 나타내는 모든 XAML 태그가 표시됩니다. XAML의 <Grid> ... </Grid> 요소를 다음 태그로 바꿉다.

    <Grid Padding="16" RowSpacing="8">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="400"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <TextBox x:Name="NoteEditor"
         AcceptsReturn="True"
         TextWrapping="Wrap"
         PlaceholderText="Enter your note"
         Header="New note"
         ScrollViewer.VerticalScrollBarVisibility="Auto"
         Width="400"
         Grid.Column="1"/>

    <StackPanel Orientation="Horizontal"
            HorizontalAlignment="Right"
            Spacing="4"
            Grid.Row="1" Grid.Column="1">
        <Button Content="Save" Style="{StaticResource AccentButtonStyle}"/>
        <Button Content="Delete"/>
    </StackPanel>
</Grid>

  4. Ctrl +S를 누르거나 도구 모음에서 저장 아이콘을 클릭하거나 파일 저장 메뉴를 선택하여 파일을>저장NotePage.xaml합니다.

    지금 앱을 실행하면 방금 만든 메모 페이지가 표시되지 않습니다. 이는 여전히 컨트롤의 Frame 콘텐츠로 설정해야 하기 때문입니다 MainWindow.

  5. 다음과 같이 MainWindow.xaml을 NotePage열고 설정합니다Frame.

    <Frame x:Name="rootFrame" Grid.Row="1"
       SourcePageType="local:NotePage"/>

    이제 앱을 실행하면 인스턴스 Frame 가 NotePage 로드되어 사용자에게 표시됩니다.

중요합니다

XAML 네임스페이스(xmlns) 매핑 은 C# using 문에 대응하는 XAML 매핑입니다. local: 는 앱 프로젝트(xmlns:local="using:WinUINotes")의 XAML 페이지 내에서 매핑되는 접두사입니다. 을 비롯한 x:Class모든 XAML 파일에 대한 특성 및 코드를 포함 App.xaml 하도록 만들어진 동일한 네임스페이스를 참조하도록 매핑됩니다. 이 동일한 네임스페이스의 XAML에서 사용하려는 사용자 지정 클래스를 정의하는 한 접두사를 사용하여 local: XAML에서 사용자 지정 형식을 참조할 수 있습니다.

페이지에 배치된 XAML 제어의 주요 부분을 하나씩 살펴봅시다.

Visual Studio에서 강조 표시된 그리드가 있는 새 노트 페이지 UI입니다.

  • Grid.RowDefinitions 및 Grid.ColumnDefinitions는 2개의 행과 3개의 열이 있는 그리드를 정의합니다(제목 표시줄 아래에 배치됨).

    • 아래쪽 행은 콘텐츠에 맞게 크기가 자동으로 조정Auto됩니다( 두 단추). 맨 위 행은 나머지 세로 공간(*)을 모두 사용합니다.
    • 가운데 열은 400epx 너비이며 메모 편집기가 있는 위치입니다. 양쪽의 열은 비어 있고 나머지 가로 공간을 모두 분할합니다(*).

    비고

    크기 조정 시스템의 작동 방식 때문에 XAML 앱을 디자인할 때 실제 물리적 픽셀이 아닌 유효 픽셀로 디자인합니다. 유효 픽셀(epx)은 측정의 가상 단위이며 화면 밀도와 관계없이 레이아웃 차원과 간격을 표현하는 데 사용됩니다.

  • <TextBox x:Name="NoteEditor" ... > ... </TextBox>는 여러 줄 텍스트 항목에 대해 구성된 텍스트 입력 컨트롤(TextBox)이며 (Grid)의 위쪽 가운데 셀에 Grid.Column="1" 배치됩니다. 행 및 열 인덱스는 0부터 시작하고, 기본적으로 컨트롤은 부모의 Grid행 0과 열 0에 배치됩니다. 따라서 이는 행 0, 열 1을 지정하는 것과 같습니다.

  • <StackPanel Orientation="Horizontal" ... > ... </StackPanel> 는 자식을 세로(기본값) 또는 가로로 쌓는 레이아웃 컨트롤(StackPanel)을 정의합니다. ()의 아래쪽 가운데 셀에 GridGrid.Row="1" Grid.Column="1"배치됩니다.

    비고

    Grid.Row="1" Grid.Column="1" 는 XAML 연결된 속성의 예입니다. 연결된 속성을 사용하면 하나의 XAML 개체가 다른 XAML 개체에 속하는 속성을 설정할 수 있습니다. 이 경우와 마찬가지로 자식 요소는 연결된 속성을 사용하여 부모 요소에 UI에 표시되는 방법을 알릴 수 있습니다.

  • 두 개의 <Button> 컨트롤이 내부에 <StackPanel> 있고 가로로 정렬됩니다. 다음 섹션에서 단추의 Click 이벤트를 처리하는 코드를 추가합니다.

다음 문서에서 자세히 알아보세요.

메모 로드 및 저장

코드 숨김 NotePage.xaml.cs 파일을 엽니다. 새 XAML 파일을 추가하면 코드 숨김에는 생성자에 한 줄, 메서드에 대한 호출이 InitializeComponent 포함됩니다.

namespace WinUINotes
{
    public sealed partial class NotePage : Page
    {
        public NotePage()
        {
            this.InitializeComponent();
        }
    }
}

이 메서드는 InitializeComponent XAML 태그를 읽고 태그로 정의된 모든 개체를 초기화합니다. 개체는 부모-자식 관계에 연결되고 코드에 정의된 이벤트 처리기는 XAML에서 설정된 이벤트에 연결됩니다.

이제 코드 숨김 파일에 코드를 NotePage.xaml.cs 추가하여 노트 로드 및 저장을 처리합니다.

  1. 클래스에 다음 변수 선언을 NotePage 추가합니다.

    public sealed partial class NotePage : Page
{
    private StorageFolder storageFolder = ApplicationData.Current.LocalFolder;
    private StorageFile? noteFile = null;
    private string fileName = "note.txt";

    메모가 저장되면 앱의 로컬 스토리지에 텍스트 파일로 저장됩니다.

    StorageFolder 클래스를 사용하여 앱의 로컬 데이터 폴더에 액세스합니다. 이 폴더는 앱과 관련이 있으므로 여기에 저장된 노트는 다른 앱에서 액세스할 수 없습니다. StorageFile 클래스를 사용하여 이 폴더에 저장된 텍스트 파일에 액세스합니다. 파일의 이름은 변수로 fileName 표시됩니다. 지금은 "fileName"로 설정합니다.

  2. 메모 페이지의 Loaded 이벤트에 대한 이벤트 처리기를 만듭니다.

    public NotePage()
{
    this.InitializeComponent();
    // ↓ Add this. ↓
    Loaded += NotePage_Loaded;
}

// ↓ Add this event handler method. ↓
private async void NotePage_Loaded(object sender, RoutedEventArgs e)
{
    noteFile = (StorageFile)await storageFolder.TryGetItemAsync(fileName);
    if (noteFile is not null)
    {
        NoteEditor.Text = await FileIO.ReadTextAsync(noteFile);
    }
}

    이 메서드에서는 TryGetItemAsync 를 호출하여 폴더에서 텍스트 파일을 검색합니다. 파일이 없으면 반환됩니다 null. 파일이 있는 경우 ReadTextAsync를 호출하여 파일의 텍스트를 컨트롤의 NoteEditor 속성으로 읽습니다. (XAML NoteEditor 파일에서 만든 컨트롤입니다 TextBox . 할당한 코드를 사용하여 코드 숨김 파일에서 x:Name 참조합니다.)

    중요합니다

    파일 액세스 호출이 비동기적이므로 이 메서드를 키워드로 async 표시해야 합니다. 즉, 종료 ...Async 되는 메서드(예: TryGetItemAsync)를 호출하는 경우 await 연산자를 호출에 추가할 수 있습니다. 이렇게 하면 대기 중인 호출이 완료될 때까지 후속 코드가 실행되지 않고 UI 응답성이 유지됩니다. 사용하는 await경우 호출하는 메서드를 비동 기 키워드로 표시해야 합니다. 자세한 내용은 C#의 비동기 API 호출을 참조하세요.

다음 문서에서 자세히 알아보세요.

이벤트 처리기 추가

다음으로 저장 및 삭제 단추에 대한 Click 이벤트 처리기를 추가합니다. 이벤트 처리기를 추가하는 것은 앱을 만드는 동안 자주 수행하는 작업이므로 Visual Studio는 보다 쉽게 수행할 수 있는 몇 가지 기능을 제공합니다.

  1. 파일에서 NotePage.xamlContent 컨트롤의 Button 특성 뒤에 커서를 놓습니다. Click=를 입력하십시오. 이 시점에서 Visual Studio는 다음과 같은 자동 완성 UI를 팝업해야 합니다.

    XAML 편집기의 Visual Studio 새 이벤트 처리기 자동 완성 UI 스크린샷

    • 아래쪽 화살표 키를 눌러 새 이벤트 처리기를< 선택한> 다음 Tab 키를 누릅니다. Visual Studio는 특성을 Click="Button_Click" 완료하고 코드 숨김 파일에 명명된 Button_Click 이벤트 처리기 메서드를 NotePage.xaml.cs 추가합니다.

    이제 메서드의 Button_Click 이름을 좀 더 의미 있는 것으로 바꿔야 합니다. 다음 단계에서 이 작업을 수행합니다.

  2. 에서 NotePage.xaml.cs추가된 메서드를 찾습니다.

    private void Button_Click(object sender, RoutedEventArgs e)
{

}

    팁 (조언)

    앱에서 코드를 찾으려면 Visual Studio 제목 표시줄에서 검색 을 클릭하고 코드 검색 옵션을 사용합니다. 검색 결과를 두 번 클릭하여 코드 편집기에서 코드를 엽니다.

    Visual Studio에서 검색 기능

  3. 커서를 "B" Button 앞에 놓고 입력 Save합니다. 잠시 기다리면 메서드 이름이 녹색으로 강조 표시됩니다.

  4. 메서드 이름을 마우스로 가리키면 Visual Studio에 드라이버 또는 전구 아이콘이 있는 도구 설명이 표시됩니다. 아이콘 옆의 아래쪽 화살표 단추를 클릭한 다음 'Button_Click' 이름을 'SaveButton_Click'으로 바꿉니다.

    Visual Studio 메서드는 팝업 UI의 이름을 바꿉니다.

    Visual Studio는 처음 추가한 XAML 파일을 포함하여 앱의 모든 위치에서 메서드의 Button이름을 바꿉니다.

  5. 삭제 단추에 대해 다음 단계를 반복하고 메서드 이름을 .로 DeleteButton_Click바꿉니다.

이제 이벤트 처리기가 연결되었으므로 코드를 추가하여 메모 파일을 저장하고 삭제할 수 있습니다.

  1. 이 코드를 메서드에 SaveButton_Click 추가하여 파일을 저장합니다. 또한 메서드 서명을 키워드로 async 업데이트해야 합니다.

    private async void SaveButton_Click(object sender, RoutedEventArgs e)
{
    if (noteFile is null)
    {
        noteFile = await storageFolder.CreateFileAsync(fileName, CreationCollisionOption.ReplaceExisting);
    }
    await FileIO.WriteTextAsync(noteFile, NoteEditor.Text);
}

    SaveButton_Click 메서드에서 먼저 만들어졌는지 noteFile 확인합니다. null이 경우 변수가 나타내는 fileName 이름으로 로컬 스토리지 폴더에 새 파일을 만들고 변수에 파일을 할당해야 합니다noteFile. 그런 다음 컨트롤의 텍스트를 TextBox 나타내는 noteFile파일에 씁니다.

  2. 이 코드를 메서드에 DeleteButton_Click 추가하여 파일을 삭제합니다. 여기에서 키워드로 async 메서드 서명을 업데이트해야 합니다.

    private async void DeleteButton_Click(object sender, RoutedEventArgs e)
{
    if (noteFile is not null)
    {
        await noteFile.DeleteAsync();
        noteFile = null;
        NoteEditor.Text = string.Empty;
    }
}

    메서드에서 DeleteButton_Click 먼저 존재하는지 noteFile 확인합니다. 이 경우 로컬 스토리지 폴더에서 나타내는 noteFile 파일을 삭제하고 .로 noteFile설정합니다null. 그런 다음 컨트롤의 텍스트를 TextBox 빈 문자열로 다시 설정합니다.

    중요합니다

    파일 시스템에서 텍스트 파일을 삭제한 후에는 다음으로 설정하는 noteFile 것이 중요합니다 null. noteFile 앱의 시스템 파일에 대한 액세스를 제공하는 StorageFile입니다. 시스템 파일이 삭제된 noteFile 후에도 시스템 파일이 있는 위치를 가리키지만 더 이상 존재하지 않는다는 것을 알지 못합니다. 지금 시스템 파일을 읽거나 쓰거나 삭제하려고 하면 오류가 발생합니다.

  3. Ctrl +S를 누르거나 도구 모음에서 저장 아이콘을 클릭하거나 파일 저장 메뉴를 선택하여 파일을>저장NotePage.xaml.cs합니다.

코드 숨김 파일의 최종 코드는 다음과 같습니다.

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using System;
using Windows.Storage;

namespace WinUINotes
{
    public sealed partial class NotePage : Page
    {
        private StorageFolder storageFolder = ApplicationData.Current.LocalFolder;
        private StorageFile? noteFile = null;
        private string fileName = "note.txt";

        public NotePage()
        {
            this.InitializeComponent();
            Loaded += NotePage_Loaded;
        }

        private async void NotePage_Loaded(object sender, RoutedEventArgs e)
        {
            noteFile = (StorageFile)await storageFolder.TryGetItemAsync(fileName);
            if (noteFile is not null)
            {
                NoteEditor.Text = await FileIO.ReadTextAsync(noteFile);
            }
        }

        private async void SaveButton_Click(object sender, RoutedEventArgs e)
        {
            if (noteFile is null)
            {
                noteFile = await storageFolder.CreateFileAsync(fileName, CreationCollisionOption.ReplaceExisting);
            }
            await FileIO.WriteTextAsync(noteFile, NoteEditor.Text);
        }

        private async void DeleteButton_Click(object sender, RoutedEventArgs e)
        {
            if (noteFile is not null)
            {
                await noteFile.DeleteAsync();
                noteFile = null;
                NoteEditor.Text = string.Empty;
            }
        }
    }
}

메모 테스트

이 코드를 사용하면 앱을 테스트하여 메모가 올바르게 저장되고 로드되는지 확인할 수 있습니다.

  1. F5 키를 누르거나, 도구 모음에서 "시작" 디버그 단추를 클릭하거나, 시작디버깅 실행 메뉴를 선택하여 프로젝트를 빌드하고 >합니다.
  2. 텍스트 입력란에 입력하고 저장 단추를 누릅니다.
  3. 앱을 닫은 다음 다시 시작합니다. 입력한 메모는 디바이스의 스토리지에서 로드해야 합니다.
  4. 삭제 단추를 누릅니 다 .
  5. 앱을 닫고 다시 시작합니다. 새 빈 메모가 표시됩니다.

중요합니다

메모 저장 및 삭제가 제대로 작동하는지 확인한 후 새 메모를 만들고 다시 저장합니다. 저장된 메모를 사용하여 이후 단계에서 앱을 테스트하려고 합니다.

3단계 계속 - 메모에 대한 보기 및 모델 추가

  • Last updated on