2일차. UWP "Hello, World!" 앱 만들기 (3/3)

테마 선택

App.xaml 수정

결과 확인

   먼저 특정 테마색으로 고정하는 방법입니다. 윈도우 10의 테마는 Light와 Dark가 있고 저는 다크 모드를 사용중이기에 지금까지 프로그램의 색은 검정색이었습니다. 여기서 App.xaml에 RequestedTheme 속성을 Light로 주면 응용 프로그램의 테마가 밝은 테마로 변경됩니다.

 

 

시스템 스타일 사용

Main.xaml 수정

실행 결과

   MainPagexaml의 TextBlock에 Style="{ThemeResource BaseTextBlockStyle}" 속성을 추가해주었습니다. 이 BaseTextBlockStyle 스타일은 ResourceDirctionary에 정의되는 리소스 키입니다. 스타일을 지정해준 TextBlock의 글꼴이 더 굵어진 것을 확인할 수 있습니다. 더 자세한 내용은 문서를 참고하세요. (링크)

 

 

UI 레이아웃 조정

Main.xaml 수정

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="wideState">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="641" />
                    </VisualState.StateTriggers>
                </VisualState>
                <VisualState x:Name="narrowState">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="contentPanel.Margin" Value="20,30,0,0" />
                        <Setter Target="inputPanel.Orientation" Value="Vertical" />
                        <Setter Target="inputButton.Margin" Value="0,4,0,0" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

   루트 StackPanel의 첫 번째 자식 요소로 위 블록를 추가해 줍니다. VisualStateManager.VisualStateGroups를 만들고 그 안에 그룹을 하나 추가한 후, 두가지 VisualState를 정의하는 XAML 블록입니다. 먼저 첫 번째 VisualState를 보면 AdaptiveTrigger(반응형 트리거)에 MinWindowWidth(최소 윈도우 넓이)가 641 DIP (장치 독립적인 픽셀) 이상일 때 동작합니다. Setters가 없기 때문에 이경우는 기존의 UI 그대로 표시하게 됩니다. 두번째 VisualState는 0 DIP일때, 그러니까 0이상 641 DIP 미만일 때 이 VisualState가 적용됩니다. 따라서 해당 넓이일 때 contentPanel의 Margin을 20,30,0,0으로 설정하고 inputPanel의 Orientation을 Vertical로 설정하며 inputButton의 Margin을 0,4,0,0으로 설정하게 됩니다.

 

01

실행 결과

   따라서 창의 넓이가 줄어들면 위와 같이 동작하게 됩니다. 

 

 

참고

docs.microsoft.com/ko-kr/windows/uwp/get-started/create-a-basic-windows-10-app-in-cppwinrt

C++/WinRT를 사용하여 'Hello, World!' 앱 만들기 - UWP applications