Titelbalk

Blader door het voorbeeld

De .NET Multi-platform App UI (.NET MAUI) TitleBar is een weergave waarmee u een aangepaste titelbalk kunt toevoegen aan een Window dat overeenkomt met de uitstraling van uw app. In het volgende diagram ziet u de onderdelen van de TitleBar:

overzicht van

Belangrijk

TitleBar is alleen beschikbaar in Windows. Mac Catalyst-ondersteuning wordt toegevoegd in een toekomstige release.

TitleBar definieert de volgende eigenschappen:

• Content, van het type IView, waarmee het besturingselement wordt opgegeven voor de inhoud die is gecentreerd in de titelbalk en de ruimte tussen de voorloop- en volginhoud wordt toegewezen.
• DefaultTemplate, van het type ControlTemplate, dat de standaardsjabloon voor de titelbalk vertegenwoordigt.
• ForegroundColor, van het type Color, waarmee de voorgrondkleur van de titelbalk wordt opgegeven en wordt gebruikt als de kleur voor de titel- en ondertiteltekst.
• Icon, van het type ImageSource, dat een optionele 16x16px pictogram afbeelding voor de titelbalk weergeeft.
• LeadingContent, van het type IView, dat de besturing specificeert voor de inhoud die voorafgaat aan het pictogram.
• PassthroughElements, van het type IList<IView>, dat een lijst met elementen vertegenwoordigt die moeten voorkomen dat ze in het gebied van de titelbalk worden gesleept en in plaats daarvan rechtstreeks invoer verwerken.
• Subtitle, van het type string, waarmee de ondertiteltekst van de titelbalk wordt opgegeven. Dit is meestal secundaire informatie over de app of het venster.
• Title, van het type string, waarmee de titeltekst van de titelbalk wordt opgegeven. Dit is meestal de naam van de app of geeft het doel van het venster aan.
• TrailingContent, van het type IView, waarmee het besturingselement wordt opgegeven dat volgt op het Content besturingselement.

Deze eigenschappen, met uitzondering van DefaultTemplate en PassthroughElements, worden ondersteund door BindableProperty objecten, wat betekent dat ze kunnen worden gestijld en het doel van gegevensbindingen zijn.

Belangrijk

Weergaven die zijn ingesteld als de waarde van de Content-, LeadingContent- en TrailingContent-eigenschappen blokkeren alle invoer in de titelbalk en verwerken de invoer rechtstreeks.

De standaardhoogte van de titelbalk is 32 pixels, maar kan worden ingesteld op een grotere waarde. Zie Titelbalkvoor meer informatie over het ontwerpen van uw titelbalk in Windows.

Een titelbalk maken

Als u een titelbalk wilt toevoegen aan een venster, stelt u de eigenschap Window.TitleBar in op een TitleBar-object.

In het volgende XAML-voorbeeld ziet u hoe u een TitleBar toevoegt aan een 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>

Een TitleBar kan ook worden gedefinieerd in C# en worden toegevoegd aan een Window:

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

Een TitleBar is zeer aanpasbaar via de eigenschappen Content, LeadingContenten 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>

In de volgende schermopname ziet u het resultaat:

Notitie

De titelbalk kan worden verborgen door de eigenschap IsVisible in te stellen, waardoor de inhoud van het venster wordt weergegeven in de titelbalkregio.

Visuele staten van de titelbalk

TitleBar definieert de volgende visualstatussen die kunnen worden gebruikt om een visuele wijziging in de TitleBarte initiëren:

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

In het volgende XAML-voorbeeld ziet u hoe u een visuele status definieert voor de TitleBarTitleActive- en TitleBarTitleInactive statussen:

<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>

In dit voorbeeld stelt de visuele status de eigenschappen BackgroundColor en ForegroundColor in op specifieke kleuren op basis van of de titelbalk actief of inactief is.

Voor meer informatie over visuele staten, zie visuele staten.