[C++] 윈도우10 앱 타이틀바 커스터마이징

윈도우10 앱의 타이틀바는 기본적으로 색상이 정해져 있습니다.

윈도우10의 기본 앱인 스토어의 타이틀바는 흰 바탕에 검은색 글씨로 되어 있습니다.

간단한 코드를 추가해서 타이틀바를 수정할 수 있습니다.

먼저 간단하게 윈도우10 앱을 생성합니다.

Blank App으로 생성을 했으며 프로젝트는 TitleBarDemo라는 이름으로 작성했습니다.

MainPage.xaml 파일을 열고 <Grid> 태그 사이에 아래 코드를 추가합니다.

<CheckBox x:Name="checkBox" Content="CheckBox" HorizontalAlignment="Left" Margin="100,100,0,0" VerticalAlignment="Top" Height="60" Width="300" Click="checkBox_Click" />

MainPage.xaml.h 파일에 아래 코드를 추가합니다.

타이틀바는 Windows::UI::ViewManagement::ApplicationViewTitleBar^를 통해서 접근할 수 있습니다.

	private:
		Windows::UI::ViewManagement::ApplicationViewTitleBar^ titleBar;

	private:
		void checkBox_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e);

checkBox가 클릭될 때 처리할 이벤트 핸들러에 대한 선언도 추가했습니다.

MainPage.xaml.cpp에 다음과 using 구문을 추가합니다.

using namespace Windows::UI;
using namespace Windows::UI::ViewManagement;

MainPage.xaml.cpp의 MainPage 생성자의 InitializeComponent(); 아래에 다음 코드를 추가합니다.

titleBar = ApplicationView::GetForCurrentView()->TitleBar;

이제 titleBar에는 현재 앱의 타이틀바를 가지게 됩니다.

마지막으로 MainPage.xaml.cpp에 클릭 이벤트 핸들러 구현을 추가합니다.

void TitleBarDemo::MainPage::checkBox_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
{
	if (checkBox->IsChecked->Value)
	{
		titleBar->BackgroundColor = ColorHelper::FromArgb(0xFF, 0xCC, 0x00, 0xCC);
		titleBar->ForegroundColor = ColorHelper::FromArgb(0xFF, 0xFF, 0xCC, 0x00);
		titleBar->InactiveBackgroundColor = ColorHelper::FromArgb(0xFF, 0x00, 0x77, 0x00);
		titleBar->InactiveForegroundColor = ColorHelper::FromArgb(0xFF, 0xFF, 0x33, 0x33);

		titleBar->ButtonBackgroundColor = ColorHelper::FromArgb(0xFF, 0xCC, 0x00, 0xCC);
		titleBar->ButtonHoverBackgroundColor = ColorHelper::FromArgb(0xFF, 0x13, 0x15, 0x28);
		titleBar->ButtonPressedBackgroundColor = ColorHelper::FromArgb(0xFF, 0xE8, 0xD3, 0xA2);
		titleBar->ButtonInactiveBackgroundColor = ColorHelper::FromArgb(0xFF, 0x00, 0x77, 0x00);

		titleBar->ButtonForegroundColor = ColorHelper::FromArgb(0xFF, 0x00, 0x33, 0xFF);
		titleBar->ButtonHoverForegroundColor = ColorHelper::FromArgb(0xFF, 0xCC, 0xCC, 0xCC);
		titleBar->ButtonPressedForegroundColor = ColorHelper::FromArgb(0xFF, 0x36, 0x3C, 0x74);
		titleBar->ButtonInactiveForegroundColor = ColorHelper::FromArgb(0xFF, 0xE8, 0xD3, 0xA2);
	}
	else
	{
		titleBar->BackgroundColor = nullptr;
		titleBar->ForegroundColor = nullptr;
		titleBar->InactiveBackgroundColor = nullptr;
		titleBar->InactiveForegroundColor = nullptr;

		titleBar->ButtonBackgroundColor = nullptr;
		titleBar->ButtonHoverBackgroundColor = nullptr;
		titleBar->ButtonPressedBackgroundColor = nullptr;
		titleBar->ButtonInactiveBackgroundColor = nullptr;

		titleBar->ButtonForegroundColor = nullptr;
		titleBar->ButtonHoverForegroundColor = nullptr;
		titleBar->ButtonPressedForegroundColor = nullptr;
		titleBar->ButtonInactiveForegroundColor = nullptr;
	}
}

이제 체크될 경우 타이틀바의 색상에 변경됩니다.

색상이 조금 특이하지만 색상을 변경된 것을 확인할 수 있습니다.

각각의 Color에 대한 설명은 다음과 같습니다.

BackgroundColor	버튼 부분을 제외한 타이틀바의 백그라운드 색상(활성화시)
ForegroundColor	타이틀바 텍스트 색상(활성화시)
InactiveBackgroundColor	버튼 부분을 제외한 타이틀바의 백그라운드 색상(비활성화시)
InactiveForegroundColor	타이틀바 텍스트 색상(비활성화시)
ButtonBackgroundColor	버튼 부분 백그라운드 색상(기본)
ButtonHoverBackgroundColor	버튼 부분 백그라운드 색상(마우스 포인터 올렸을 때)
ButtonPressedBackgroundColor	버튼 부분 백그라운드 색상(마우스 눌렸을 때)
ButtonInactiveBackgroundColor	버튼 부분 백그라운드 색상(비활성화시)
ButtonForegroundColor	버튼 색상(일반)
ButtonHoverForegroundColor	버튼 색상(마우스 포인터 올렸을 때)
ButtonPressedForegroundColor	버튼 색상(마우스 눌렀을 때)
ButtonInactiveForegroundColor	버튼 색상(비활성화시)

원하는 색상으로 타이틀바를 작성해서 개성있는 앱을 개발할 수 있습니다.