Adicionar uma vista e um modelo para todas as notas

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

Várias notas e navegação

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

1. No painel do Gerenciador de Soluções, clique com o botão direito do mouse na pasta e selecione AdicionarNovo 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 Página em branco (WinUI 3). Nomeie o arquivo AllNotesPage.xaml e pressione Add.
3. No painel Gerenciador de Soluções , clique com o botão direito do mouse na pasta e selecione Adicionar Classe...
4. Nomeie a classe AllNotes.cs e pressione Add.

Sugestão

Você pode baixar ou visualizar o código para este tutorial no repositório GitHub. Para ver o código como está nesta etapa, consulte esta confirmação: exibição e modelo de todas as anotações.

Codifique o modelo AllNotes

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

1. No painel Gerenciador de Soluções , abra o arquivo Modelos\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, chamada Notes, e usa o LoadNotes método para carregar notas do armazenamento local do aplicativo.

A Notes coleção usa um ObservableCollection, que é uma coleção especializada que funciona bem com vinculação de dados. Quando um controle que lista vários itens, como um ItemsView, é vinculado a um ObservableCollection, os dois trabalham juntos para manter automaticamente a lista de itens sincronizada 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:

• StorageFolder classe, StorageFile classe, IStorageItem.IsOfType método
• Acesse 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 para AllNotesPage que a 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();
       }
   }
   

Criar 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 introduz alguns conceitos novos:

• O controle CommandBar contém um AppBarButton. Este 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 comandos 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á vinculado à propriedade do Notes modelo. A forma como os itens são apresentados pela vista de itens é definida através da ItemsView.Layout propriedade. Aqui, você usa um UniformGridLayout.

Agora que você criou AllNotesPageo , você precisa atualizar MainWindow.xaml uma última vez para que ele carregue 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 para views.AllNotesPage, como este:

   <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, ele é mostrado apenas como a representação de cadeia de caracteres do objeto. O ItemsView não sabe como este 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 ItemsView seu 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 tag de abertura <Page...> . Isso obtém o ResourceDictionary da Pagepropriedade Resources do , para que você possa adicionar recursos XAML a ele.

   <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 a aplicação.

Quando você usa a x:Bind extensão de marcação em um DataTemplate, você precisa especificar o x:DataType no DataTemplate. Nesse caso, trata-se de um indivíduo Note (portanto, você precisa adicionar uma referência de namespace XAML para Models). O modelo para a nota usa dois TextBlock controles Text , que são vinculados às propriedades e Date da nota. O elemento Grid é usado para layout e para fornecer uma cor de plano de fundo. Um elemento Border é usado para o plano de fundo da data. (O elemento XAML Border pode fornecer uma estrutura de tópicos e um 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 Luz:

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

Esta não é a aparência pretendida para o aplicativo. Isso aconteceu porque há valores de cores codificados no modelo de dados para a nota. Por padrão, os elementos WinUI se adaptam à preferência de cores Escura ou Clara do usuário. Ao definir seus próprios elementos, como um modelo de dados, você precisa ter cuidado para fazer o mesmo.

Ao definir um recurso em um XAML ResourceDictionary, você precisa atribuir um x:Key valor para identificar o recurso. Em seguida, você pode usar isso x:Key para recuperar o recurso em XAML usando a extensão de marcação ou {StaticResource} extensão de {ThemeResource} marcação.

• A {StaticResource} é o mesmo, independentemente do tema da cor, por isso é usado para coisas como Font ou Style configurações.
• Um {ThemeResource} altera com base no tema de cor selecionado, por isso é usado para Foreground, Backgrounde outras propriedades relacionadas à cor.

A WinUI inclui uma variedade de recursos internos que você pode usar para fazer com que seu aplicativo siga as diretrizes de estilo Fluent, 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ê executa o aplicativo com uma configuração de cor escura, ele terá esta aparência:

Saiba mais nos documentos:

• Recipientes e modelos de itens
• Referências de recursos do ResourceDictionary e XAML

Sugestão

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 a Orientação de cores. 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 no da Microsoft Store ou obtenha o código-fonte em do GitHub

Continue para a etapa 5 - Adicionar navegação entre páginas