Compartir a través de

Barra de título

El control TitleBar proporciona una manera simplificada de crear una barra de título personalizada para la aplicación. La barra de título es un componente fundamental de la interfaz de usuario de una aplicación de Windows que identifica la aplicación a través de su icono y título, aloja los botones de título del sistema que permiten al usuario cerrar, maximizar, minimizar y restaurar la ventana, y permite al usuario arrastrar la ventana alrededor de la pantalla.

Puedes usar una barra de título personalizada para integrar mejor el área de la barra de título con la interfaz de usuario de la aplicación. La barra de título se puede personalizar para que coincida con el estilo visual de la aplicación mediante el tema de Mica. Puede incluir otra información relevante, como un título de documento o el estado actual (por ejemplo, "Edición", "Visualización", etc.). También puede hospedar otros controles WinUI, como AutoSuggestBox y PersonPicture, lo que proporciona una experiencia de usuario coherente para la aplicación.

Captura de pantalla de una ventana de aplicación con una barra de título personalizada

¿Es este el control correcto?

Usa el control TitleBar cuando quieras integrar el área de la barra de título con la interfaz de usuario de la aplicación mediante personalizaciones como subtítulos, creación de tema de Mica e integraciones con controles WinUI.

Anatomía

De forma predeterminada, la barra de título solo muestra los botones de título del sistema. Otras partes de la barra de título se muestran u ocultas en función de la configuración de propiedades asociadas.

La barra de título se divide en estas áreas:

Captura de pantalla que muestra las partes de un control de barra de título.

  • Botón Atrás:IsBackButtonEnabled, IsBackButtonVisible, BackRequested : botón atrás integrado para la navegación.
  • Botón de conmutación de panel:IsPaneToggleButtonVisible, PaneToggleRequested - Este botón está diseñado para usarse junto con el control NavigationView.
  • Encabezado izquierdo:LeftHeader
  • Icon:IconSource
  • Title:Título
  • Subtítulo:Subtítulo
  • Contenido:Contenido
  • Encabezado derecho:RightHeader
  • Región de arrastre mínima: Este área está reservada junto a los botones de título del sistema para que el usuario siempre tenga un lugar para agarrar la ventana para arrastrar.
  • Botones de título del sistema: Estos botones no forman parte del control TitleBar: simplemente asigna espacio donde aparecen los botones de título, en función de la configuración rtL o LTR. Los botones de título y las personalizaciones se controlan mediante AppWindowTitleBar.

El diseño se invierte cuando FlowDirection es RightToLeft.

Crear una barra de título

Abra la aplicación Galería de WinUI 3 y vea titleBar en acción.

La aplicación WinUI 3 Gallery incluye ejemplos interactivos de la mayoría de los controles, características y funcionalidades de WinUI 3. Obtén la aplicación desde la Microsoft Store o consigue el código fuente en GitHub

En este ejemplo se crea una barra de título simple que reemplaza la barra de título del sistema. Tiene un título, un icono y un tema de Mica.

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

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <TitleBar x:Name="SimpleTitleBar"
                  Title="My App">
            <TitleBar.IconSource>
                <FontIconSource Glyph="&#xF4AA;"/>
            </TitleBar.IconSource>
        </TitleBar>

        <!-- App content -->
        <Frame x:Name="RootFrame" Grid.Row="1"/>
    </Grid>
</Window>

public MainWindow()
{
    this.InitializeComponent();

    // Hides the default system title bar.
    ExtendsContentIntoTitleBar = true;
    // Replace system title bar with the WinUI TitleBar control. 
    SetTitleBar(SimpleTitleBar); 
}

Integración con NavigationView

La vista Navegación tiene un botón atrás integrado y un botón de alternancia de panel. La guía de Fluent Design recomienda que estos controles se coloquen en la barra de título cuando se usa una barra de título personalizada.

En este ejemplo se muestra cómo integrar el control TitleBar con un control NavigationView ocultando el botón atrás y el botón de alternancia de panel en la vista de navegación y usando los botones correspondientes en la barra de título en su lugar.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <TitleBar Title="My App"
              IsBackButtonVisible="True"
              IsBackButtonEnabled="{x:Bind RootFrame.CanGoBack, Mode=OneWay}"
              BackRequested="TitleBar_BackRequested"
              IsPaneToggleButtonVisible="True"
              PaneToggleRequested="TitleBar_PaneToggleRequested">
    </TitleBar>

    <NavigationView x:Name="RootNavigationView" Grid.Row="1"
                    IsBackButtonVisible="Collapsed"
                    IsPaneToggleButtonVisible="False">
        <Frame x:Name="RootFrame" />
    </NavigationView>
</Grid>

private void TitleBar_BackRequested(TitleBar sender, object args)
{
    if (RootFrame.CanGoBack)
    {
        RootFrame.GoBack();
    }
}

private void TitleBar_PaneToggleRequested(TitleBar sender, object args)
{
    RootNavigationView.IsPaneOpen = !RootNavigationView.IsPaneOpen;
}

UWP y WinUI 2

El control TitleBar no está disponible para UWP y WinUI 2. En su lugar, consulta Personalización de la barra de título (aplicaciones para UWP).