[XAML] 윈도우10 앱 크기별 UI 적용(VisualStateManager)

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

2015/10/05 - [Programming/Windows App] - [XAML] 윈도우10 앱(Universal Windows App) 기본 테마 변경

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

먼저 위에 있는 글을 따라서 HelloWorld 프로젝트를 작성합니다.

Windows Universal App은 하나의 프로젝트를 통해서 모든 플랫폼에 작동하는 앱을 작성합니다.

그렇기 때문에 일반 PC를 위해 작성한 앱의 UI는 스마트폰에서는 적합하지 않을 수 있습니다.

먼저 HelloWorld를 PC에서 실행하면 다음과 같이 표시됩니다.

Visual Studio 상단에 보이는 Local Machine 부분을 클릭하면 다음과 같이 메뉴가 표시됩니다.

Mobile Emulator 10.0.10240.0 WVGA 4 inch 512MB를 선택합니다.

저사양과 낮은 해상도에서 돌아가는지 확인하기 위해서 가장 낮은 사양을 선택합니다.

에뮬레이터를 구동하기 위해서는 Hyper-V가 설치되어 있어야 합니다.

각 디바이스의 디스플레이 크기에 맞게 UI를 설정하기 위해 VisualStateManager를 사용합니다.

<Grid>의 열리는 태그의 앞부분에 다음과 같은 태그를 추가합니다.

<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>

wideState와 narrowState라는 속성을 각각 생성합니다.

먼저 폭이 641픽셀 이상인 경우(wideState)에는 아무 것도 하지 않습니다.

PC 환경을 기반으로 UI를 구성했기 때문에 따로 작업이 필요하지 않습니다.

에뮬레이터로 선택된 상태에서 실행하면 윈도폰 에뮬레이터가 먼저 실행됩니다.

만약 권한을 요청할 경우 관리자 권한을 승인하면 됩니다.

OS가 부팅될 때까지 약간의 시간이 소요됩니다.

앱이 실행되면 VisualStateManager가 추가 되기 전과는 다르게 표시가 되는 것을 확인할 수 있습니다.

Margin값을 조정해서 작은 해상도에서는 다른 Margin값이 적용되도록 수정했습니다.

그리고 inputPanel의 방향을 Vertical로 변경한 것입니다.

이제 윈도폰과 PC, 태블릿 모두에서 적절하게 UI가 표시됩니다.