윈도우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 |
버튼 색상(비활성화시) |
원하는 색상으로 타이틀바를 작성해서 개성있는 앱을 개발할 수 있습니다.
'Programming > Windows App' 카테고리의 다른 글
[XAML] 윈도우10 앱 ListView에 헤더(Header) 추가하기 (0) | 2016.01.18 |
---|---|
[XAML] 아이콘으로 사용이 가능한 Segoe MDL2 Assets 폰트 (0) | 2015.10.20 |
[XAML] 윈도우10 앱에 햄버거 메뉴 추가 (0) | 2015.10.20 |
[XAML] 윈도우10 앱 크기별 UI 적용(VisualStateManager) (0) | 2015.10.18 |
[XAML] 윈도우10 앱(Universal Windows App)에 시스템 스타일 적용 (0) | 2015.10.12 |