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 alguma configuração do projeto. Quando o Visual Studio cria um projeto WinUI 3, várias pastas importantes e arquivos de código são gerados. Elas podem ser vistas no painel Gerenciador de Soluções do Visual Studio:

Os itens listados aqui são os com os quais você interagirá principalmente. Esses arquivos ajudam a configurar e executar o aplicativo WinUI 3. Cada arquivo serve a uma finalidade diferente, descrita abaixo:

• Pasta Ativos

  Essa pasta contém o logotipo do aplicativo, as imagens e outros ativos de mídia. Ele começa preenchido com arquivos de espaço reservado para o logotipo do aplicativo. Esse 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 cria uma instância e ativa a janela do aplicativo. Neste projeto, ele aponta para a classe MainWindow.

• MainWindow.xaml e MainWindow.xaml.cs

  Esses arquivos representam a janela do 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

XAML (Extensible Application Markup Language ) é uma linguagem declarativa que pode inicializar objetos e definir propriedades de objetos. Você pode criar elementos de interface do usuário visíveis 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 a 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 você cria seu projeto, o InitializeComponent método é chamado para analisar o .xaml arquivo e gerar o código associado 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#)
• Atributo x:Class, diretiva x:Class

Atualizar MainWindow

A MainWindow classe incluída no projeto é uma sub-classe 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 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 Min/Max/Close), ícone do aplicativo, título e área de arrastar. Ele também inclui o quadro 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 em MainWindow. Primeiro, você aplicará o material Mica como o pano de fundo da janela. O Mica é um material dinâmico e opaco que incorpora o tema e o papel de parede da área de trabalho para pintar a tela de 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 XAML TitleBar . Isso faz melhor uso do espaço e oferece mais controle sobre o design, ao mesmo tempo em que fornece toda a funcionalidade necessária 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.

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: página de observação – inicial.

1. Clique duas vezes no MainWindow.xaml para abri-lo.

2. Entre as marcas de abertura e fechamento<Window.. > , substitua qualquer XAML existente por isso:

   <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 Salvar Arquivo>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 XAML com mais detalhes.

Observação

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

Se o valor da propriedade for mais complexo ou 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 Window.SystemBackdrop propriedade, você precisa usar a sintaxe do elemento de propriedade e criar explicitamente o MicaBackdrop elemento. Mas você pode usar a sintaxe de atributo simples para definir a MicaBackdrop.Kind propriedade.

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

In MainWindow.xaml, <Window.SystemBackdrop>, <Grid.RowDefinitions>and <TitleBar.IconSource> contain complex values that must be set with property element syntax.

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á sendo exibida.

Você precisa escrever um pouco de código para concluir a substituição da barra de título do sistema.

1. Abra o 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 para 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 do sistema padrão e estende o XAML do aplicativo para essa área. A chamada para SetTitleBar informa 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 "Iniciar" de depuração 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 de mica e a barra de título XAML que substituiu a barra de título do sistema.

Continuar para a etapa 2 – Adicionar uma página de anotação