TitleBar

Обзор примера

TitleBar многоплатформенного пользовательского интерфейса приложений .NET (.NET MAUI) — это представление, позволяющее добавить настраиваемую строку заголовка в Window для соответствия стилю вашего приложения. На следующей TitleBarсхеме показаны компоненты следующих компонентов:

TitleBar определяет следующие свойства:

• Content IViewТип , который задает элемент управления для содержимого, в центре которого находится в строке заголовка, и выделяется пространство между начальным и конечным содержимым.
• DefaultTemplateТип ControlTemplate, представляющий шаблон по умолчанию для строки заголовка.
• ForegroundColor Colorтип , который задает цвет переднего плана заголовка строки заголовка и используется в качестве цвета для текста заголовка и субтитров.
• Icon ImageSourceтип , представляющий необязательный значок 16x16px для заголовка строки заголовка.
• LeadingContentтипа IView, который задает элемент управления для содержимого, предшествующего значку.
• PassthroughElements IList<IView>Тип , представляющий список элементов, которые должны предотвратить перетаскивание в область строки заголовка и напрямую обрабатывать входные данные.
• SubtitleТип , который задает текст субтитров stringзаголовка строки заголовка. Обычно это вторичные сведения о приложении или окне.
• Titleтип string, который задает текст заголовка строки заголовка. Обычно это имя приложения или указывает назначение окна.
• TrailingContentТип IView, который указывает элемент управления, следующий за элементом Content управления.

Эти свойства, за исключением DefaultTemplate объектов, PassthroughElementsподдерживаются BindableProperty объектами, что означает, что они могут быть стили и быть целевыми объектами привязки данных.

Высота стандартной строки заголовка составляет 32px, но может быть задано большее значение. Сведения о проектировании заголовков в Windows см . в строке заголовка.

Создание панели заголовков

Чтобы добавить строку заголовка в окно, задайте Window.TitleBar для TitleBar свойства объект.

В следующем примере XAML показано, как добавить в TitleBarWindow:

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

Можно также определить в TitleBar C# и добавить в :Window

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

A TitleBar очень настраивается с помощью его Contentсвойств LeadingContentи 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>

На следующем снимок экрана показан полученный внешний вид:

Визуальные состояния TitleBar

TitleBarопределяет следующие визуальные состояния, которые можно использовать для запуска визуального изменения в :TitleBar

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

В следующем примере XAML показано, как определить визуальное состояние для состояний и TitleBarTitleActive состояний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>

В этом примере визуальное состояние задает BackgroundColor и ForegroundColor свойства определенным цветам в зависимости от того, активна ли строка заголовка или неактивна.

Дополнительные сведения о визуальных состояниях см. в разделе "Визуальные состояния".