제목 표시줄

샘플 찾아보기

.NET 다중 플랫폼 앱 UI(.NET MAUI) TitleBar는 앱의 성격에 맞게 사용자 지정 제목 표시줄을 Window에 추가할 수 있게 해주는 뷰입니다. 다음 다이어그램은 다음의 구성 요소를 보여 줍니다 TitleBar.

TitleBar는 다음 속성을 정의합니다.

• Content제목 표시줄의 가운데에 있는 콘텐츠의 컨트롤을 지정하고 선행 콘텐츠와 후행 콘텐츠 사이의 공간을 할당하는 형식 IView의 입니다.
• DefaultTemplate제목 표시줄의 기본 템플릿을 나타내는 형식 ControlTemplate의 입니다.
• ForegroundColor제목 표시줄의 전경색을 지정하고 제목 및 부제목 텍스트의 색으로 사용되는 형식 Color의 입니다.
• Icon- 제목 표시줄에 대한 선택적 16x16px 아이콘 이미지를 나타내는 형식 ImageSource입니다.
• LeadingContent은 IView유형으로, 아이콘 앞에 있는 콘텐츠의 컨트롤을 지정합니다.
• PassthroughElements- 제목 표시줄 영역에서 끌기를 방지하고 대신 입력을 직접 처리해야 하는 요소 목록을 나타내는 형식 IList<IView>입니다.
• Subtitle제목 표시줄의 부제목 텍스트를 지정하는 형식 string의 입니다. 일반적으로 앱 또는 창에 대한 보조 정보입니다.
• Title제목 표시줄의 제목 텍스트를 지정하는 형식 string의 입니다. 일반적으로 앱의 이름이거나 창의 용도를 나타냅니다.
• TrailingContent형식의 IView이고, 컨트롤 뒤에 있는 컨트롤을 Content 지정합니다.

이러한 속성은 개체 DefaultTemplatePassthroughElements에 의해 BindableProperty 지원됩니다. 즉, 스타일을 지정하고 데이터 바인딩의 대상이 될 수 있습니다.

표준 제목 표시줄 높이는 32px이지만 더 큰 값으로 설정할 수 있습니다. Windows에서 제목 표시줄을 디자인하는 방법에 대한 자세한 내용은 제목 표시줄을 참조하세요.

TitleBar 만들기

창에 제목 표시줄을 추가하려면 속성을 개체로 Window.TitleBar 설정합니다TitleBar.

다음 XAML 예제에서는 다음을 추가하는 TitleBar 방법을 보여줍니다.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>

A는 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 속성을 특정 색으로 설정합니다.

시각적 상태에 대한 자세한 내용은 시각적 상태를 참조 하세요.