Adicionar uma exibição e um modelo para todas as anotações

Esta parte do tutorial adiciona uma nova página ao aplicativo, uma exibição que exibe todas as anotações criadas anteriormente.

Várias anotações e navegação

Atualmente, o modo de exibição de anotação exibe uma única anotação. Para exibir todas as anotações salvas, crie um novo modo de exibição e modelo: AllNotes.

1. No painel Gerenciador de Soluções, clique com o botão direito do mouse na pasta Views e selecione Adicionar>Novo Item....
2. Na caixa de diálogo Adicionar Novo Item , selecione WinUI na lista de modelos no lado esquerdo da janela. Em seguida, selecione o modelo de Página em Branco (WinUI 3 ). Nomeie o arquivo AllNotesPage.xaml e pressione Adicionar.
3. No painel Gerenciador de Soluções, clique com o botão direito do mouse na pasta Models e selecione Adicionar>Classe...
4. Nomeie a classe AllNotes.cs e pressione Adicionar.

Dica

Você pode baixar ou exibir o código deste tutorial no repositório do GitHub. Para ver o código como ele está nesta etapa, consulte esta confirmação: todas as notas de exibição e modelo.

Codificar o modelo do AllNotes

O novo modelo de dados representa os dados necessários para exibir várias anotações. Aqui, você obterá todas as anotações do armazenamento local do aplicativo e criará uma coleção de Note objetos que você exibirá no AllNotesPage.

1. No painel Gerenciador de Soluções , abra o arquivo Models\AllNotes.cs .

2. Substitua o código no AllNotes.cs arquivo por este código:

   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);
                   }
               }
           }
       }
   }
   

O código anterior declara uma coleção de Note itens, nomeada Notese usa o LoadNotes método para carregar anotações do armazenamento local do aplicativo.

A Notes coleção usa um ObservableCollection, que é uma coleção especializada que funciona bem com a associação de dados. Quando um controle que lista vários itens, como um ItemsView, é associado a um ObservableCollection, os dois trabalham juntos para manter automaticamente a lista de itens em sincronia com a coleção. Se um item for adicionado à coleção, o controle será atualizado automaticamente com o novo item. Se um item for adicionado à lista, a coleção será atualizada.

Saiba mais nos documentos:

• Classe StorageFolder, classe StorageFile, método IStorageItem.IsOfType
• Acessar arquivos e pastas com o SDK do Windows App e APIs do WinRT

Agora que o AllNotes modelo está pronto para fornecer dados para a exibição, você precisa criar uma instância do modelo AllNotesPage para que o modo de exibição possa acessar o modelo.

1. No painel Gerenciador de Soluções , abra o arquivo Views\AllNotesPage.xaml.cs .

2. AllNotesPage Na classe, adicione este código para criar um AllNotes modelo chamado notesModel:

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

Projetar a página AllNotes

Em seguida, você precisa projetar a exibição para dar suporte ao AllNotes modelo.

1. No painel Gerenciador de Soluções , abra o arquivo Views\AllNotesPage.xaml .

2. Substitua o <Grid> ... </Grid> elemento pela seguinte marcação:

   <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>
   

O XAML anterior apresenta alguns novos conceitos:

• O controle CommandBar contém um AppBarButton. Esse botão tem um Label e Icon, e é influenciado pelo que o CommandBar contém. Por exemplo, isso CommandBar define a posição do rótulo de seus botões como Right. As barras de comando geralmente são exibidas na parte superior do aplicativo, juntamente com o título da página.
• O controle ItemsView exibe uma coleção de itens e, nesse caso, está associado à propriedade do Notes modelo. A maneira como os itens são apresentados pela exibição de itens é definida por meio da ItemsView.Layout propriedade. Aqui, você usa um UniformGridLayout.

Agora que você criou AllNotesPage, você precisa atualizar MainWindow.xaml uma última vez para que ela seja carregada AllNotesPage em vez de um indivíduo NotePage.

1. No painel Gerenciador de Soluções , abra o arquivo MainWindow.xaml .

2. Atualize o rootFrame elemento para que os SourcePageType pontos se apontem para views.AllNotesPage, desta forma:

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

Se você executar o aplicativo agora, verá que a nota criada anteriormente é carregada no ItemsView controle. No entanto, ela é mostrada apenas como a representação de cadeia de caracteres do objeto. O ItemsView item não sabe como esse item deve ser exibido. Você corrigirá isso na próxima seção.

Adicionar um modelo de dados

Você precisa especificar um DataTemplate para informar como seu ItemsView item de dados deve ser mostrado. O DataTemplate é atribuído à propriedade ItemsTemplate do ItemsView. Para cada item da coleção, o ItemsView.ItemTemplate gera o XAML declarado.

1. No painel Gerenciador de Soluções , clique duas vezes na AllNotesPage.xaml entrada para abri-la no editor XAML.

2. Adicione este novo mapeamento de namespace na linha abaixo do mapeamento para local:

   xmlns:models="using:WinUINotes.Models"
   

3. Adicione um <Page.Resources> elemento após a marca de abertura <Page...> . Isso obtém o ResourceDictionary da Pagepropriedade 's Resources para que você possa adicionar recursos XAML a ela.

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

4. Dentro do <Page.Resources> elemento, adicione o DataTemplate que descreve como exibir um Note item.

   <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. No XAML para ItemsView, atribua a ItemTemplate propriedade ao modelo de dados que você acabou de criar:

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

6. Compile e execute o aplicativo.

Quando você usa a x:Bind extensão de marcação em umDataTemplate, você precisa especificar o x:DataType .DataTemplate Nesse caso, esse é um indivíduo Note (portanto, você precisa adicionar uma referência de namespace XAML para Models). O modelo da anotação usa dois TextBlock controles, que são associados às propriedades e Text à anotaçãoDate. O elemento Grid é usado para layout e para fornecer uma cor de plano de fundo. Um elemento Border é usado para a tela de fundo da data. (O elemento XAML Border pode fornecer uma estrutura de tópicos e plano de fundo.)

Quando você executa o aplicativo, o modelo de dados é aplicado aos seus Note itens e tem esta aparência se as configurações de Cores de Personalização > do Windows usarem o modo Light:

No entanto, se as configurações de Cores de Personalização > do Windows usarem o modo Escuro, ele terá esta aparência:

Essa não é a aparência pretendida para o aplicativo. Isso ocorreu porque há valores de cor codificados em código no modelo de dados da anotação. Por padrão, os elementos WinUI se adaptam à preferência de cor Escura ou Clara do usuário. Quando você define seus próprios elementos, como um modelo de dados, precisa ter cuidado para fazer o mesmo.

Quando você define um recurso em um XAML ResourceDictionary, você precisa atribuir um x:Key valor para identificar o recurso. Em seguida, você pode usá-lo x:Key para recuperar o recurso em XAML usando a {StaticResource} extensão de marcação ou {ThemeResource} a extensão de marcação.

• Um {StaticResource} é o mesmo, independentemente do tema de cor, portanto, ele é usado para itens como Font ou Style configurações.
• Uma {ThemeResource} alteração com base no tema de cores selecionado, portanto, ele é usado para Foreground, Backgrounde outras propriedades relacionadas à cor.

O WinUI inclui uma variedade de recursos internos que você pode usar para fazer seu aplicativo seguir as diretrizes de estilo fluente, bem como diretrizes de acessibilidade. Você substituirá as cores codificadas no modelo de dados por recursos de tema internos e aplicará alguns outros recursos para corresponder às diretrizes do Fluent Design.

1. No modelo de dados que você adicionou anteriormente, atualize as seções indicadas aqui para usar recursos internos:

   <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>
   

Agora, quando você executar o aplicativo com uma configuração de cor clara, ele terá esta aparência:

E quando você executar o aplicativo com uma configuração de cor escura, ele terá esta aparência:

Saiba mais nos documentos:

• Contêineres e Modelos de Item
• ResourceDictionary e referências de recursos do XAML

Dica

O WinUI 3 Gallery aplicativo é uma ótima maneira de aprender sobre diferentes controles WinUI e diretrizes de design. Para ver os recursos de tema usados no modelo de dados, abra o WinUI 3 Gallery aplicativo para as diretrizes de Cor. A partir daí, você pode ver a aparência dos recursos e copiar os valores necessários diretamente do aplicativo.

Você também pode abrir a página Tipografia e a página Geometria para ver outros recursos internos usados neste modelo de dados.

O WinUI 3 Gallery aplicativo inclui exemplos interativos da maioria dos controles, recursos e funcionalidades do WinUI 3. Obtenha o aplicativo na Microsoft Store ou obtenha o código-fonte no GitHub

Continuar para a etapa 5 – Adicionar navegação entre páginas