그동안 WinUI 3에서 디자인적으로 상당히 난감했던 점 중 하나가 타이틀 바 사용자 지정이 번거로웠다는 것인데요.
이전까지 타이틀 바를 커스터마이징 하기 위해서는 1) 타이틀 바로 쓸 View를 만들고, 2) 테마 변경에 대한 처리를 해주고, 3) 내가 만든 View를 윈도우의 타이틀 바로 설정해줬어야 했습니다.
이제 Windows App SDK 1.7에는 TitleBar 컨트롤이 추가되어, 1번 과정 일부와 2번 과정을 생략할 수 있습니다.
1.7은 Nuget에서 미리보기로 제공되고 있기 때문에 바로 적용해보는 것도 가능합니다.
먼저 WinUI 3 앱을 만들고, Nuget 패키지 관리에서 시험판 포함을 체크하신 후 Windows App SDK를 최신 버전으로 업데이트 해줍니다.
그 다음으로 XAML에서 TitleBar 컨트롤을 추가해주면 되는데, 타이틀 바와 Content 영역을 분리하면 타이틀 바와 Content의 테마 변경을 각각 처리해줘야 하기 때문에, Shell로 쓸 View를 추가하고 그 안에 TitleBar를 추가해줍니다. 이렇게 하면 ShellView의 RequestedTheme를 변경하면 타이틀 바와 Content의 테마가 모두 변경됩니다.
<UserControl x:Class="WinUI3App.ShellView">
<!-- 네임스페이스 생략 -->
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TitleBar x:Name="AppTitleBar"
Title="WinUI 3 App"/>
<Grid Grid.Row="1">
<!-- Content Area -->
</Grid>
</Grid>
</UserControl>
XAML을 위와 같이 구성해 주고, Window에서 타이틀바 컨트롤 객체에 접근할 수 있도록 ShellView의 코드 비하인드에서 AppTitleBar를 공개 속성으로 정의합니다.
public sealed partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
ExtendsContentIntoTitleBar = true;
SetTitleBar(ShellView.TitleBar);
}
}
그리고 윈도우의 코드 비하인드에서 위와 같이 타이틀바를 설정해주면,
이렇게 타이틀 바가 설정됩니다.
XAML 펼치기/접기
<UserControl x:Class="WinUI3App.ShellView">
<!-- 네임스페이스 생략 -->
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TitleBar x:Name="AppTitleBar"
Title="WinUI 3 App">
<TitleBar.IconSource>
<SymbolIconSource Symbol="Home"/>
</TitleBar.IconSource>
<TitleBar.Content>
<Button Content="테마 변경"
Click="Button_Click"/>
</TitleBar.Content>
</TitleBar>
<Grid Grid.Row="1">
<!-- Content Area -->
</Grid>
</Grid>
</UserControl>
이렇게 아이콘을 추가하거나, 타이틀 바에 Content를 삽입할 수도 있습니다. (Footer 설정도 가능합니다.)
다크 테마에도 반응합니다. 단, Window의 Backdrop이 DesktopAcrylicBackdrop이나 MicaBackdrop이 아니라면 런타임에 테마를 바꿀 땐 별도의 처리가 필요합니다.
현재는 시스템 테마와 앱 테마가 다를 경우 위와 같이 타이틀 바 캡션 영역의 색상이 제대로 표시되지 않습니다. 코드에서 테마 변경 시 리소스를 탐색해 색상을 캡션 버튼에 덮어 씌우는데, 정의된 리소스를 찾지 못하고 앱 리소스에서 기본값을 참조하는 것으로 보입니다.
타이틀 바 컨트롤에 관련된 자세한 내용은 mux의 스펙에 정리되어 있습니다. 스펙에서는 Teams 앱 스타일로 예쁘게 만들 수 있는 것처럼 돼 있는데, 별도의 추가 처리 없이 그렇게 되지는 않네요.
