Configuração do Project

Antes de começares a codificar a aplicação, vamos dar uma vista de olhos rápida pelo projeto do Visual Studio e tratar de alguma configuração do projeto. Quando o Visual Studio cria um project WinUI 3, são geradas várias pastas e ficheiros de código importantes. Estes podem ser vistos no painel Solution Explorer da Visual Studio:

Os itens listados aqui são aqueles com os quais você interagirá principalmente. Estes ficheiros ajudam a configurar e executar a aplicação WinUI. Cada ficheiro tem uma finalidade diferente, descrita abaixo:

• Pasta de ativos

  Esta pasta contém o logótipo, imagens e outros ativos multimédia da aplicação. Ele começa preenchido com arquivos de espaço reservado para o logotipo do seu aplicativo. Este logotipo representa seu aplicativo no Menu Iniciar do Windows, na barra de tarefas do Windows e na Microsoft Store quando seu aplicativo é publicado lá.

• App.xaml e App.xaml.cs

  O App.xaml arquivo contém recursos XAML em todo o aplicativo, como cores, estilos ou modelos. O App.xaml.cs arquivo geralmente contém código que instancia e ativa a janela do aplicativo. Neste projeto, aponta para a classe MainWindow.

• MainWindow.xaml e MainWindow.xaml.cs

  Esses arquivos representam a janela do seu aplicativo.

• Package.appxmanifest

  Este ficheiro manifesto de pacote permite-lhe configurar informações do publicador, logótipos, arquiteturas de processadores e outros detalhes que determinam como a sua aplicação (app) aparece na Microsoft Store.

Arquivos XAML e classes parciais

Extensible Application Markup Language (XAML) é uma linguagem declarativa que pode inicializar objetos e definir propriedades de objetos. Você pode criar elementos visíveis da interface do usuário na marcação XAML declarativa. Em seguida, você pode associar um arquivo de código separado para cada arquivo XAML (normalmente chamado de arquivo code-behind ) que pode responder a eventos e manipular os objetos que você declara originalmente em XAML.

Geralmente, há dois ficheiros associados a qualquer ficheiro XAML: o próprio ficheiro .xaml e um ficheiro de código subjacente correspondente, que é um item filho dele no Solution Explorer.

• O .xaml arquivo contém marcação XAML que define a interface do usuário do aplicativo. O nome da classe é declarado com o x:Class atributo.
• O arquivo de código contém o código que você cria para interagir com a marcação XAML e uma chamada para o InitializeComponent método. A classe é definida como um partial class.

Quando constróis o teu project, o método InitializeComponent é chamado para analisar o ficheiro .xaml e gerar código que é unido ao código partial class para criar a classe completa.

Saiba mais nos documentos:

• Visão geral do XAML
• Classes e métodos parciais (Guia de Programação em C#)
• x:Atributo de classe, x:Diretiva de classe

Atualizar MainWindow

A classe MainWindow incluída com o project é uma subclasse da classe XAML Window, que é usada para definir o shell da aplicação. A janela do aplicativo tem duas partes:

• A parte do cliente da janela é onde o seu conteúdo é exibido.
• A parte não-cliente é a parte controlada pelo sistema operacional Windows. Ele inclui a barra de título, onde estão os controles de legenda (botões Mín/Máx/Fechar), ícone do aplicativo, título e área de arrasto. Ele também inclui a moldura ao redor da parte externa da janela.

Para tornar o aplicativo WinUI Notes consistente com as diretrizes do Fluent Design, você fará algumas modificações no MainWindow. Primeiro, você aplicará o material Mica como pano de fundo da janela. Mica é um material opaco e dinâmico que incorpora o tema visual e o papel de parede do ambiente de trabalho para criar o fundo da janela. Em seguida, você estenderá o conteúdo do aplicativo para a área da barra de título e substituirá a barra de título do sistema por um controle TitleBar XAML. Isto aproveita melhor o espaço e dá-lhe mais controlo sobre o design, ao mesmo tempo que fornece todas as funcionalidades exigidas da barra de título.

Você também adicionará um quadro como o conteúdo da janela. A Frame classe funciona com a classe Page para permitir que você navegue entre páginas de conteúdo em seu aplicativo. Você adicionará as páginas em uma etapa posterior.

Sugestão

Pode descarregar ou ver o código deste tutorial no repositório GitHub. Para ver o código tal como está neste passo, consulte este commit: note page - initial.

1. Clique duas vezes em MainWindow.xaml em Solution Explorer para a abrir.

2. Entre as tags de abertura e fechamento<Window.. > , substitua qualquer XAML existente pelo seguinte:

   <Window.SystemBackdrop>
       <MicaBackdrop Kind="Base"/>
   </Window.SystemBackdrop>
   
   <Grid>
       <Grid.RowDefinitions>
           <!-- Title Bar -->
           <RowDefinition Height="Auto" />
           <!-- App Content -->
           <RowDefinition Height="*" />     
       </Grid.RowDefinitions>
       <TitleBar x:Name="AppTitleBar"
                 Title="WinUI Notes">
           <TitleBar.IconSource>
               <FontIconSource Glyph="&#xF4AA;"/>
           </TitleBar.IconSource>
       </TitleBar>
   
       <!-- App content -->
       <Frame x:Name="rootFrame" Grid.Row="1"/>
   </Grid>
   

3. Salve o arquivo pressionando CTRL + S, clicando no ícone Salvar na barra de ferramentas ou selecionando o menu Arquivo>Salvar MainWindow.xaml.

Não se preocupe se você não entender o que toda essa marcação XAML faz agora. À medida que você cria o restante da interface do usuário do aplicativo, explicaremos os conceitos de XAML com mais detalhes.

Observação

Nesta marcação, você vê duas maneiras diferentes de definir propriedades em XAML. A primeira e mais curta maneira é usar a sintaxe de atributo XAML, como esta: <object attribute="value">. Isso funciona muito bem para valores simples, como <MicaBackdrop Kind="Base"/>. Mas só funciona para valores em que o analisador XAML sabe como converter a cadeia de caracteres para o tipo de valor esperado.

Se o valor da propriedade for mais complexo ou se o analisador XAML não souber como convertê-lo, você deverá usar a sintaxe do elemento de propriedade para criar o objeto. Assim:

<object ... >
    <object.property>
        value
    </object.property>
</object>

Por exemplo, para definir a propriedade, você precisa usar a sintaxe do Window.SystemBackdrop elemento de propriedade e criar explicitamente o MicaBackdrop elemento . Mas você pode usar sintaxe de atributo simples para definir a MicaBackdrop.Kind propriedade.

<Window ... >
   <Window.SystemBackdrop>
       <MicaBackdrop Kind="Base"/>
   </Window.SystemBackdrop>
    ...
</Window>

Em MainWindow.xaml, <Window.SystemBackdrop>, <Grid.RowDefinitions>, e <TitleBar.IconSource> contêm valores complexos que devem ser definidos com sintaxe de elemento de propriedade.

Saiba mais nos documentos:

• guia de sintaxe XAML

Se você executar o aplicativo agora, verá o elemento XAML TitleBar adicionado, mas ele estará abaixo da barra de título do sistema, que ainda está aparecendo.

Você precisa escrever um pouco de código para terminar de substituir a barra de título do sistema.

1. Abra MainWindow.xaml.cs. Você pode abrir o arquivo de código subjacente para MainWindow.xaml (ou qualquer outro arquivo XAML) de três formas:

   • Se o MainWindow.xaml arquivo estiver aberto e for o documento ativo que está sendo editado, pressione F7.
   • Se o MainWindow.xaml arquivo estiver aberto e for o documento ativo que está sendo editado, clique com o botão direito do mouse no editor de texto e selecione Exibir código.
   • Use Solution Explorer para expandir a entrada MainWindow.xaml, revelando o ficheiro MainWindow.xaml.cs. Clique duas vezes no arquivo para abri-lo.

2. No construtor de MainWindow, adicione este código após a chamada para InitializeComponent:

   public MainWindow()
   {
       this.InitializeComponent();
   
       // ↓ Add this. ↓
       // Hide the default system title bar.
       ExtendsContentIntoTitleBar = true;
       // Replace system title bar with the WinUI TitleBar.
       SetTitleBar(AppTitleBar);
       // ↑ Add this. ↑
   }
   

   A propriedade ExtendsContentIntoTitleBar oculta a barra de título padrão do sistema e estende o XAML do aplicativo para essa área. Em seguida, a chamada para SetTitleBar diz ao sistema para tratar o elemento XAML especificado (AppTitleBar) como a barra de título do aplicativo.

3. Construa e execute o projeto pressionando F5, clicando no botão "Debug" "Start" na barra de ferramentas, ou selecionando o menu Executar>Start Debugging.

Ao executar o aplicativo agora, você verá uma janela vazia com um plano de fundo mica e a barra de título XAML que substituiu a barra de título do sistema.

Continue para a etapa 2 - Adicionar uma página de anotação