Ao desenvolver aplicações de desktop com WinFormedge e Blazor, é comum necessitar de uma tela de inicialização personlaizada, como um formulário de login, que possua um layout diferente do restante da aplicação. Além disso, pode ser útil alternar o estado da janela (tela cheia versus modo normal) com base na rota atual. Este guia demonstra como configurar um layout minimalista para a autenticação e gerenciar o redimensionamento da janela principal usando WebView2 e Fluent UI.

1. Criando um Layout Minimalista

Primeiro, crie um novo arquivo de layout chamado MinimalLayout.razor dentro do diretório de layouts do seu projeto. Este layout não terá barras laterais ou cabeçalhos complexos, servindo apenas como um container limpo para a tela de login.

@inherits LayoutComponentBase

<main class="minimal-container">
    @Body
</main>
<FluentToastProvider />

2. Desenvolvendo a Página de Inicialização (Login)

Crie o componente Login.razor. Defina a rota como / para que seja a página inicial e aplique o layout minimalista criado anteriormente.

@page "/"
@layout MinimalLayout

<section class="login-panel">
    <FluentButton OnClick="HandleExit" Appearance="Appearance.Accent">Fechar Aplicativo</FluentButton>
    <FluentSpacer Width="40" />
    <FluentButton OnClick="HandleAuthentication" Appearance="Appearance.Filled">Entrar</FluentButton>
</section>

@code {
    private void HandleAuthentication()
    {
        try
        {
            // Navega para o painel principal
            NavManager.NavigateTo("/painel");
            // A chamada de atualização é crucial para recalcular o estado da janela no backend
            NavManager.Refresh(); 
        }
        catch (Exception error)
        {
            NotificationService.ShowWarning("Falha na conexão com o servidor.", 4000);
        }
    }

    private void HandleExit()
    {
        Environment.Exit(0);
    }
}

3. Gerenciando o Estado da Janela no Backend

No arquivo MainWindow.cs, intercepte o evento de carregamento do DOM do WebView2. A lógica verificará a URL atual para decidir se a janela deve ser exibida em tamanho normal (para o login) ou maximizada (para o painel principal).

public MainWindow()
{
    Url = "https://app.local/";
    StartPosition = FormStartPosition.CenterScreen;
    
    DOMContentLoaded += HandleDomLoaded;
}

private void HandleDomLoaded(object? sender, CoreWebView2DOMContentLoadedEventArgs args)
{
    if (CoreWebView2 == null) return;

    var currentUrl = CoreWebView2.Source;
    
    // Verifica se a URL atual corresponde à raiz (tela de login)
    bool isLoginScreen = currentUrl.Equals("https://app.local/") || currentUrl.EndsWith("/");
    
    WindowState = isLoginScreen 
        ? FormWindowState.Normal 
        : FormWindowState.Maximized;
}

4. Adicionando a Funcionalidade de Logout no Layout Principle

No layout principal da aplicação (MainLayout.razor), adicione um mecanismo para retornar à tela de login. O método de navegação deve ser seguido por uma atualização para garatnir que o evento DOMContentLoaded seja disparado novamente.

<header class="app-header">
    <FluentButton OnClick="PerformLogout" Icon="Icons.Regular.Size20.ArrowExit">Sair</FluentButton>
</header>

<main>
    @Body
</main>

@code {
    private void PerformLogout()
    {
        NavManager.NavigateTo("/");
        NavManager.Refresh(); // Atualiza para disparar o redimensionamento da janela
    }
}

5. Configurando Injeções Globais

Para manter os componentes limpos, mova as diretivas @using e @inject para o arquivo _Imports.razor na raiz do projeto.

@using MyAppNamespace
@using MyAppNamespace.Components
@using MyAppNamespace.Components.Layout

@inject NavigationManager NavManager
@inject IToastService NotificationService
@inject IDialogService ModalService

6. Habilitando Provedores de Interface

Para que componentes de sobreposição como notificações e caixas de diálogo funcionem corretamente em toda a aplicação, certifique-se de que os provedores do Fluent UI estejam declarados no final do seu layout principal.

<FluentToastProvider />
<FluentDialogProvider />