다음을 통해 공유

제목 표시줄

TitleBar 컨트롤은 앱에 대한 사용자 지정 제목 표시줄을 만드는 간소화된 방법을 제공합니다. 제목 표시줄은 아이콘과 제목을 통해 앱을 식별하는 Windows 앱의 사용자 인터페이스의 기본 구성 요소이며, 사용자가 창을 닫고, 최대화하고, 최소화하고, 복원할 수 있도록 하는 시스템 캡션 단추를 포함하며, 사용자가 창을 화면 주위로 끌 수 있도록 합니다.

사용자 지정 제목 표시줄을 사용하여 제목 표시줄 영역을 앱 UI와 더 잘 통합할 수 있습니다. 제목 표시줄은 Mica 테마를 사용하여 앱의 비주얼 스타일과 일치하도록 사용자 지정할 수 있습니다. 문서 제목 또는 현재 상태(예: "편집 중", "보기" 등)와 같은 기타 관련 정보를 포함할 수 있습니다. AutoSuggestBox 및 PersonPicture와 같은 다른 WinUI 컨트롤을 호스트하여 앱에 대한 응집력 있는 사용자 환경을 제공할 수도 있습니다.

사용자 지정 제목 표시줄이 있는 앱 창의 스크린샷

이것이 올바른 컨트롤인가요?

제목, Mica 테마 지정 및 WinUI 컨트롤과의 통합과 같은 사용자 지정을 사용하여 제목 표시줄 영역을 앱 UI와 통합하려는 경우 TitleBar 컨트롤을 사용합니다.

해부학

기본적으로 제목 표시줄에는 시스템 캡션 단추만 표시됩니다. 제목 표시줄의 다른 부분은 연결된 속성 설정에 따라 표시되거나 숨겨집니다.

제목 표시줄은 다음 영역으로 나뉩니다.

제목 표시줄 컨트롤의 부분을 보여 주는 스크린샷

FlowDirection이 RightToLeft인 경우 레이아웃이 반전됩니다.

제목 표시줄 만들기

WinUI 3 갤러리 앱을 열고 작업 중인 TitleBar를 확인합니다.

WinUI 3 갤러리 앱에는 대부분의 WinUI 3 컨트롤, 특징, 기능의 대화형 예제가 포함되어 있습니다. Microsoft Store에서 앱을 가져오거나 GitHub에서 소스 코드를 가져옵니다.

이 예제에서는 시스템 제목 표시줄을 대체하는 간단한 제목 표시줄을 만듭니다. 제목, 아이콘 및 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); 
}

NavigationView와 통합

탐색 보기에는 기본 제공 뒤로 단추와 창 토글 단추가 있습니다. Fluent 디자인 지침에서는 사용자 지정 제목 표시줄을 사용할 때 이러한 컨트롤을 제목 표시줄에 배치하는 것이 좋습니다.

이 예제에서는 탐색 보기에서 뒤로 단추 및 창 토글 단추를 숨기고 제목 표시줄에서 해당 단추를 대신 사용하여 TitleBar 컨트롤을 NavigationView 컨트롤과 통합하는 방법을 보여 줍니다.

<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 및 WinUI 2

UWP 및 WinUI 2에는 TitleBar 컨트롤을 사용할 수 없습니다. 대신 제목 표시줄 사용자 지정(UWP 앱)을 참조하세요.

  • Last updated on