모든 노트에 대한 보기 및 모델 추가

자습서의 이 부분에서는 이전에 만든 모든 노트를 표시하는 보기인 새 페이지를 앱에 추가합니다.

여러 노트 및 탐색

현재 메모 보기에는 단일 메모가 표시됩니다. 저장된 모든 노트를 표시하려면 새 보기 및 모델인 AllNotes를 만듭니다.

1. 솔루션 탐색기 창에서 폴더를 Views 마우스 오른쪽 단추로 클릭하고 새 항목 추가
2. 새 항목 추가 대화 상자의 창 왼쪽에 있는 템플릿 목록에서 WinUI를 선택합니다. 다음으로 빈 페이지(WinUI 3) 템플릿을 선택합니다. 파일 AllNotesPage.xaml 이름을 지정하고 Add 키를 누릅니다.
3. 솔루션 탐색기 창에서 폴더를 마우스 오른쪽 단추로 클릭하고 Models 클래스 추가
4. 클래스 AllNotes.cs 이름을 지정하고 Add 키를 누릅니다.

AllNotes 모델 코딩

새 데이터 모델은 여러 노트를 표시하는 데 필요한 데이터를 나타냅니다. 여기서는 앱의 로컬 스토리지에서 모든 노트를 가져와서 표시Note할 개체 컬렉션을 AllNotesPage 만듭니다.

1. 솔루션 탐색기 창에서 Models\AllNotes.cs 파일을 엽니다.

2. 파일의 코드를 AllNotes.cs 다음 코드로 바꿉다.

   using System;
   using System.Collections.Generic;
   using System.Collections.ObjectModel;
   using System.Threading.Tasks;
   using Windows.Storage;
   
   namespace WinUINotes.Models
   {
       public class AllNotes
       {
           public ObservableCollection<Note> Notes { get; set; } = 
                                       new ObservableCollection<Note>();
   
           public AllNotes()
           {
               LoadNotes();
           }
   
           public async void LoadNotes()
           {
               Notes.Clear();
               // Get the folder where the notes are stored.
               StorageFolder storageFolder = 
                             ApplicationData.Current.LocalFolder;
               await GetFilesInFolderAsync(storageFolder);
           }
   
           private async Task GetFilesInFolderAsync(StorageFolder folder)
           {
               // Each StorageItem can be either a folder or a file.
               IReadOnlyList<IStorageItem> storageItems = 
                                           await folder.GetItemsAsync();
               foreach (IStorageItem item in storageItems)
               {
                   if (item.IsOfType(StorageItemTypes.Folder))
                   {
                       // Recursively get items from subfolders.
                       await GetFilesInFolderAsync((StorageFolder)item);
                   }
                   else if (item.IsOfType(StorageItemTypes.File))
                   {
                       StorageFile file = (StorageFile)item ;
                       Note note = new Note()
                       {
                           Filename = file.Name,
                           Text = await FileIO.ReadTextAsync(file),
                           Date = file.DateCreated.DateTime
                       };
                       Notes.Add(note);
                   }
               }
           }
       }
   }
   

이전 코드는 명명Note된 항목 컬렉션을 Notes 선언하고 이 메서드를 LoadNotes 사용하여 앱의 로컬 스토리지에서 노트를 로드합니다.

이 컬렉션은 Notes 데이터 바인딩과 잘 작동하는 특수 컬렉션인 ObservableCollection을 사용합니다. ItemsView와 같은 여러 항목을 나열하는 컨트롤이 바인딩ObservableCollection되면 두 항목이 함께 작동하여 컬렉션과 동기화된 항목 목록을 자동으로 유지합니다. 항목이 컬렉션에 추가되면 컨트롤이 새 항목으로 자동으로 업데이트됩니다. 항목이 목록에 추가되면 컬렉션이 업데이트됩니다.

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

• StorageFolder 클래스, StorageFile 클래스, IStorageItem.IsOfType 메서드
• Windows App SDK 및 WinRT API를 사용하여 파일 및 폴더에 액세스

이제 모델이 뷰에 AllNotes 대한 데이터를 제공할 준비가 되었으므로 보기에서 AllNotesPage 모델에 액세스할 수 있도록 모델의 인스턴스를 만들어야 합니다.

1. 솔루션 탐색기 창에서 Views\AllNotesPage.xaml.cs 파일을 엽니다.

2. AllNotesPage 클래스에서 이 코드를 추가하여 AllNotes이라는 모델을 만듭니 다.

   public sealed partial class AllNotesPage : Page
   {
       // ↓ Add this. ↓
       private AllNotes notesModel = new AllNotes();
       // ↑ Add this. ↑
   
       public AllNotesPage()
       {
           this.InitializeComponent();
       }
   }
   

AllNotes 페이지 디자인

다음으로, 모델을 지원 AllNotes 하도록 뷰를 디자인해야 합니다.

1. 솔루션 탐색기 창에서 Views\AllNotesPage.xaml 파일을 엽니다.

2. <Grid> ... </Grid> 요소를 다음 태그로 바꿉다.

   <Grid>
       <Grid.RowDefinitions>
           <RowDefinition Height="Auto"/>
           <RowDefinition Height="*"/>
       </Grid.RowDefinitions>
   
       <CommandBar DefaultLabelPosition="Right">
           <AppBarButton Icon="Add" Label="New note"/>
           <CommandBar.Content>
               <TextBlock Text="Quick notes" Margin="16,8" 
                      Style="{ThemeResource SubtitleTextBlockStyle}"/>
           </CommandBar.Content>
       </CommandBar>
   
       <ItemsView ItemsSource="{x:Bind notesModel.Notes}" 
              Grid.Row="1" Padding="16" >
           <ItemsView.Layout>
               <UniformGridLayout MinItemWidth="200"
                              MinColumnSpacing="12"
                              MinRowSpacing="12"
                              ItemsJustification="Start"/>
           </ItemsView.Layout>
       </ItemsView>
   </Grid>
   

이전 XAML에는 다음과 같은 몇 가지 새로운 개념이 도입되었습니다.

• CommandBar 컨트롤에는 AppBarButton이 포함되어 있습니다. 이 단추에는 a Label 및 Icon, 및 이 단추가 포함된 단추의 CommandBar 영향을 받습니다. 예를 들어 CommandBar 단추의 레이블 위치를 .로 설정합니다.Right 명령 모음은 일반적으로 페이지 제목과 함께 앱의 맨 위에 표시됩니다.
• ItemsView 컨트롤은 항목 컬렉션을 표시하며, 이 경우 모델의 Notes 속성에 바인딩됩니다. 항목 보기에서 항목을 표시하는 방법은 속성을 통해 ItemsView.Layout 설정됩니다. 여기서 UniformGridLayout을 사용합니다.

이제 만든 AllNotesPage후에는 개인 MainWindow.xaml대신 로드 AllNotesPage 되도록 마지막으로 한 번 업데이트 NotePage 해야 합니다.

1. 솔루션 탐색기 창에서 MainWindow.xaml 파일을 엽니다.

2. rootFrame 다음과 같이 요소가 가리키도록 SourcePageType 요소를 업데이트합니다views.AllNotesPage.

   <Frame x:Name="rootFrame" Grid.Row="1"
          SourcePageType="views:AllNotesPage"/>
   

지금 앱을 실행하면 이전에 만든 메모가 컨트롤에 ItemsView 로드되는 것을 볼 수 있습니다. 그러나 개체의 문자열 표현으로만 표시됩니다. 이 ItemsView 항목을 표시하는 방법을 모릅니다. 다음 섹션에서 이 문제를 해결합니다.

데이터 템플릿 추가

데이터 항목을 표시하는 방법을 알려려면 DataTemplate 을 ItemsView 지정해야 합니다. 의 DataTemplateItemsTemplate 속성에 ItemsView할당됩니다. 컬렉션 ItemsView.ItemTemplate 의 각 항목에 대해 선언된 XAML을 생성합니다.

1. 솔루션 탐색기 창에서 항목을 두 번 클릭하여 AllNotesPage.xaml XAML 편집기에서 엽니다.

2. 다음의 매핑 아래 줄에 이 새 네임스페이스 매핑을 추가합니다 local.

   xmlns:models="using:WinUINotes.Models"
   

3. 여 <Page.Resources> 는 <Page...> 태그 뒤의 요소를 추가합니다. XAML 리소스를 추가할 수 있도록 '의 Resources 속성에서 PageResourceDictionary를 가져옵니다.

   <Page
       x:Class="WinUINotes.Views.AllNotesPage"
       ... >
   <!-- ↓ Add this. ↓ -->
   <Page.Resources>
   
   </Page.Resources>
   

4. 요소 내부에 <Page.Resources> 항목을 표시하는 DataTemplate 방법을 설명하는 항목을 추가 Note 합니다.

   <Page.Resources>
       <!-- ↓ Add this. ↓ -->
       <DataTemplate x:Key="NoteItemTemplate" 
                     x:DataType="models:Note">
           <ItemContainer>
               <Grid Background="LightGray">
                   <Grid.RowDefinitions>
                       <RowDefinition Height="120"/>
                       <RowDefinition Height="Auto"/>
                   </Grid.RowDefinitions>
                   <TextBlock Text="{x:Bind Text}" Margin="12,8"
                              TextWrapping="Wrap"
                              TextTrimming="WordEllipsis"/>
                   <Border Grid.Row="1" Padding="8,6,0,6"
                           Background="Gray">
                       <TextBlock Text="{x:Bind Date}"
                                  Foreground="White"/>
                   </Border>
               </Grid>
           </ItemContainer>
       </DataTemplate>
       <!-- ↑ Add this. ↑ -->
   </Page.Resources>
   

5. XAML for ItemsView에서 방금 만든 데이터 템플릿에 속성을 할당 ItemTemplate 합니다.

   <ItemsView ItemsSource="{x:Bind notesModel.Notes}"
              Grid.Row="1" Margin="24"
              <!-- ↓ Add this. ↓ -->
              ItemTemplate="{StaticResource NoteItemTemplate}">
   

6. 앱을 빌드하고 실행합니다.

태그 확장을 x:Bind사용할 DataTemplate 때는 에 x:DataType대해 DataTemplate 지정해야 합니다. 이 경우 개인 Note 입니다(따라서 XAML 네임스페이스 참조 Models를 추가해야 합니다). 노트의 템플릿은 메모 TextBlock 및 Text 속성에 바인딩된 두 개의 Date 컨트롤을 사용합니다. Grid 요소는 레이아웃에 사용되며 배경색을 제공합니다. Border 요소는 날짜의 배경에 사용됩니다. (XAML Border 요소는 윤곽선과 배경을 모두 제공할 수 있습니다.)

앱을 실행하면 데이터 템플릿이 항목에 Note 적용되며 Windows 개인 설정 > 색 설정에서 조명 모드를 사용하는 경우 다음과 같이 표시됩니다.

그러나 Windows 개인 설정 > 색 설정이 어둡게 모드를 사용하는 경우 다음과 같이 표시됩니다.

이는 앱에 대한 의도된 모양이 아닙니다. 데이터 템플릿에 노트에 하드 코딩된 색 값이 있기 때문에 발생합니다. 기본적으로 WinUI 요소는 사용자의 어둡거나 밝은 색 기본 설정에 맞게 조정됩니다. 데이터 템플릿과 같은 고유한 요소를 정의할 때는 주의를 기울여야 합니다.

XAML ResourceDictionary에서 리소스를 정의할 때 리소스를 식별하는 값을 할당 x:Key 해야 합니다. 그런 다음 태그 확장 또는 x:Key 태그 확장을 사용하여 XAML에서 리소스를 {StaticResource} 검색하는 데 사용할 {ThemeResource} 수 있습니다.

• A {StaticResource} 는 색 테마에 관계없이 동일하므로 같은 Font 항목이나 Style 설정에 사용됩니다.
• {ThemeResource} 선택한 색 테마에 따라 변경되므로 , Foreground및 기타 색 관련 속성에 Background사용됩니다.

WinUI에는 앱이 Fluent 스타일 지침과 접근성 지침을 따르도록 하는 데 사용할 수 있는 다양한 기본 제공 리소스가 포함되어 있습니다. 데이터 템플릿의 하드 코딩된 색을 기본 제공 테마 리소스로 바꾸고 Fluent 디자인 지침에 맞게 몇 가지 다른 리소스를 적용합니다.

1. 이전에 추가한 데이터 템플릿에서 여기에 표시된 섹션을 업데이트하여 기본 제공 리소스를 사용합니다.

   <DataTemplate x:Key="NoteItemTemplate" 
                 x:DataType="models:Note">
   
   <!-- ↓ Update this. ↓ -->
       <ItemContainer CornerRadius="{StaticResource OverlayCornerRadius}">
           <Grid Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                 BorderThickness="1" 
                 BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                 CornerRadius="{StaticResource OverlayCornerRadius}">
   <!-- ↑ Update this. ↑ -->
   
               <Grid.RowDefinitions>
                   <RowDefinition Height="120"/>
                   <RowDefinition Height="Auto"/>
               </Grid.RowDefinitions>
               <TextBlock Text="{x:Bind Text}" Margin="12,8"
                          TextWrapping="Wrap"
                          TextTrimming="WordEllipsis"/>
   
   <!-- ↓ Update this. ↓ -->
               <Border Grid.Row="1" Padding="8,6,0,6"
                       Background="{ThemeResource SubtleFillColorSecondaryBrush}">
                   <TextBlock Text="{x:Bind Date}"
                       Style="{StaticResource CaptionTextBlockStyle}"
                       Foreground="{ThemeResource TextFillColorSecondaryBrush}"/>
   <!-- ↑ Update this. ↑ -->
   
               </Border>
           </Grid>
       </ItemContainer>
   </DataTemplate>
   

이제 밝은 색 설정으로 앱을 실행하면 다음과 같이 표시됩니다.

어두운 색 설정으로 앱을 실행하면 다음과 같이 표시됩니다.

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

• 항목 컨테이너 및 템플릿
• 리소스 사전 및 XAML 리소스 참조

앱에는 WinUI 3 Gallery 대부분의 WinUI 3 컨트롤, 기능 및 기능의 대화형 예제가 포함되어 있습니다. Microsoft Store에서 앱을 가져오거나 GitHub에서 소스 코드를 가져옵니다.