TitleBar

Examinar el ejemplo

La interfaz de usuario de aplicación multiplataforma de .NET (.NET MAUI) TitleBar es una vista que permite agregar una barra de título personalizada a un Window para que coincida con la personalidad de la aplicación. En el diagrama siguiente se muestran los componentes de TitleBar:

Importante

TitleBar solo está disponible en Windows. La compatibilidad con Mac Catalyst se agregará en una versión futura.

TitleBar define las siguientes propiedades:

• Content, de tipo IView, que especifica el control del contenido centrado en la barra de título y se asigna el espacio entre el contenido inicial y final.
• DefaultTemplate, de tipo ControlTemplate, que representa la plantilla predeterminada para la barra de título.
• ForegroundColor, de tipo Color, que especifica el color de primer plano de la barra de título y se usa como color para el título y el texto del subtítulo.
• Icon, de tipo ImageSource, que representa una imagen de icono opcional de 16x16px para la barra de título.
• LeadingContent, de tipo IView, que especifica el control del contenido que precede al icono.
• PassthroughElements, de tipo IList<IView>, que representa una lista de elementos que deben evitar arrastrarse en la región de la barra de título y, en su lugar, controlar directamente la entrada.
• Subtitle, de tipo string, que especifica el texto del subtítulo de la barra de título. Normalmente, se trata de información secundaria sobre la aplicación o la ventana.
• Title, de tipo string, que especifica el texto de título de la barra de título. Este suele ser el nombre de la aplicación o indica el propósito de la ventana.
• TrailingContent, de tipo IView, que especifica el control que sigue al Content control .

Estas propiedades, con la excepción de DefaultTemplate y PassthroughElements, están respaldadas por BindableProperty objetos, lo que significa que se pueden aplicar estilos y ser el destino de los enlaces de datos.

Importante

Las vistas establecidas como el valor de las Contentpropiedades , LeadingContenty TrailingContent bloquearán toda la entrada en la región de la barra de título y controlarán directamente la entrada.

El alto de la barra de título estándar es de 32 píxeles, pero se puede establecer en un valor mayor. Para obtener información sobre cómo diseñar la barra de título en Windows, vea Barra de título.

Crear una barra de título

Para agregar una barra de título a una ventana, establezca la Window.TitleBar propiedad en un TitleBar objeto .

En el ejemplo XAML siguiente se muestra cómo agregar un TitleBar elemento a :Window

<Window xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:local="clr-namespace:TitleBarDemo"
        x:Class="TitleBarDemo.MainWindow">
    ...
    <Window.TitleBar>
        <TitleBar Title="{Binding Title}"
                  Subtitle="{Binding Subtitle}"
                  IsVisible="{Binding ShowTitleBar}"
                  BackgroundColor="#512BD4"
                  ForegroundColor="White"                  
                  HeightRequest="48">
            <TitleBar.Content>
                <SearchBar Placeholder="Search"
                           PlaceholderColor="White"
                           MaximumWidthRequest="300"
                           HorizontalOptions="Fill"
                           VerticalOptions="Center" />
            </TitleBar.Content>            
        </TitleBar>
    </Window.TitleBar>
</Window>

También TitleBar se puede definir en C# y agregarse a :Window

Window window = new Window
{
    TitleBar = new TitleBar
    {
        Icon = "titlebar_icon.png"
        Title = "My App",
        Subtitle = "Demo"
        Content = new SearchBar { ... }      
    }
};

Una TitleBar es altamente personalizable a través de las propiedades del Content, el LeadingContent y el TrailingContent :

<TitleBar Title="My App"
          BackgroundColor="#512BD4"
          HeightRequest="48">
    <TitleBar.Content>
        <SearchBar Placeholder="Search"
                   MaximumWidthRequest="300"
                   HorizontalOptions="FillAndExpand"
                   VerticalOptions="Center" />
    </TitleBar.Content>
    <TitleBar.TrailingContent>
        <ImageButton HeightRequest="36"
                     WidthRequest="36"
                     BorderWidth="0"
                     Background="Transparent">
            <ImageButton.Source>
                <FontImageSource Size="16"
                                 Glyph="&#xE713;"
                                 FontFamily="SegoeMDL2"/>
            </ImageButton.Source>
        </ImageButton>
    </TitleBar.TrailingContent>
</TitleBar>

En la captura de pantalla siguiente se muestra el resultado de la apariencia:

Nota:

La barra de título se puede ocultar estableciendo la IsVisible propiedad , lo que hace que el contenido de la ventana se muestre en la región de la barra de título.

Estados visuales titleBar

TitleBardefine los siguientes estados visuales que se pueden usar para iniciar un cambio visual en :TitleBar

• IconVisible
• IconCollapsed
• TitleVisible
• TitleCollapsed
• SubtitleVisible
• SubtitleCollapsed
• LeadingContentVisible
• LeadingContentCollapsed
• ContentVisible
• ContentCollapsed
• TrailingContentVisible
• TrailingContentCollapsed
• TitleBarTitleActive
• TitleBarTitleInactive

En el ejemplo de XAML siguiente se muestra cómo definir un estado visual para los estados TitleBarTitleActive y TitleBarTitleInactive:

<TitleBar ...>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroupList>
            <VisualStateGroup x:Name="TitleActiveStates">
                <VisualState x:Name="TitleBarTitleActive">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="Transparent" />
                        <Setter Property="ForegroundColor" Value="Black" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="TitleBarTitleInactive">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="White" />
                        <Setter Property="ForegroundColor" Value="Gray" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </VisualStateManager.VisualStateGroups>
</TitleBar>

En este ejemplo, el estado visual establece las BackgroundColor propiedades y ForegroundColor en colores específicos en función de si la barra de título está activa o inactiva.

Para más información sobre los estados visuales, consulta Estados visuales.