Configuração do projeto

Antes de começar a codificar o aplicativo, vamos dar uma olhada rápida no projeto do Visual Studio e cuidar de algumas configurações do projeto. Quando o Visual Studio cria um projeto WinUI 3, várias pastas importantes e arquivos de código são gerados. Eles podem ser vistos no painel Gerenciador de Soluções do Visual Studio:

Os itens listados aqui são aqueles com os quais você interagirá principalmente. Esses arquivos ajudam a configurar e executar o aplicativo WinUI 3. 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

  Esse arquivo de manifesto do pacote permite configurar informações do editor, logotipos, arquiteturas de processador e outros detalhes que determinam como seu aplicativo 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 arquivos com qualquer arquivo XAML, o .xaml próprio arquivo e um arquivo code-behind correspondente que é um item filho dele no Gerenciador de Soluções.

• 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 classarquivo .

Quando você cria seu projeto, o InitializeComponent método é chamado para analisar o arquivo e gerar código .xaml que é unido com o 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 MainWindow classe incluída com o projeto é uma subclasse da classe XAML Window , que é usada para definir o shell do aplicativo. A janela do aplicativo tem duas partes:

• A parte do cliente da janela é para onde o seu conteúdo vai.
• 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 tema e papel de parede de mesa para pintar 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

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: página de nota - inicial.

1. Clique duas vezes em MainWindow.xaml no Explorador de Soluções para abri-lo.

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 MainPage.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 code-behind para MainWindow.xaml (ou qualquer arquivo XAML) de três maneiras:

   • 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 o Gerenciador de Soluções para expandir a MainWindow.xaml entrada, revelando o MainWindow.xaml.cs arquivo. 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. Crie e execute o projeto pressionando F5, clicando no botão Depurar "Iniciar" na barra de ferramentas ou selecionando o menu Executar>Iniciar Depuração.

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