본문 바로가기

Programming/Windows App

[XAML] 윈도우10 앱(Universal Windows App)에 시스템 스타일 적용

반응형

이전 글을 통해서 기본적인 Hello World를 작성하는 방법을 확인할 수 있었습니다.

아래 글을 통해서 Hello World를 작성하는 방법을 확인할 수 있습니다.

2015/10/02 - [Programming/Windows App] - [C++] 윈도우10 앱(Universal Windows App) 개발 시작하기

여기에 시스템 스타일을 적용하는 방법입니다.

먼저 기본적으로 Hello World를 실행하면 다음과 같이 실행됩니다.

MainPage.xaml 파일을 열고 What's your name? 부분을 선택합니다.

Properties Window(Alt + Enter)를 누르고 우측 상단의 스패너 모양의 아이콘을 클릭합니다.

Text 그룹을 확장하고 크기를 12로 조절합니다.

Miscellaneous 그룹을 확장하고 Style 속성의 오른쪽에 보이는 작은 네모 박스를 클릭합니다.

System Resource의 BaseTextBlockStyle을 선택합니다.

아래와 같이 설정하면 됩니다.

스타일이 적용되면 글씨가 달라지는 것을 확인할 수 있습니다.

이것은 시스템에 미리 정의된 스타일이기 때문에 바로 불러와서 사용하면 됩니다.

MainPage.xaml 파일의 코드가 다음과 같이 변경됩니다.

<TextBlock Text="What's your name?" FontSize="16" Style="{StaticResource BaseTextBlockStyle}"/>

동일한 방법으로 greetingOutput도 동일하게 수정합니다.

greetingOutput은 텍스트가 없는 상태인데 디자인 뷰에서 마우스 커서를 이동시키면 파란색으로 표시됩니다.

이제 greetingOutput 역시 다음과 같이 수정됩니다.

<TextBlock x:Name="greetingOutput" FontSize="16" Style="{StaticResource BaseTextBlockStyle}"/>

이제 실행해보면 다음과 같이 출력됩니다.

폰트 크기를 수정하면 좀 더 명확하게 볼 수 있습니다.

시스템 스타일을 통해서 간단하게 스타일을 수정하는 방법이었습니다.

반응형