Hello World Universal App

지난 Microsoft 컨퍼런스에서 발표한 Universal App에 대해서 내용 확인 하는 과정을 하나하나 정리해서 포스트를 할 예정인데, 우선 가장 처음으로 만드는 Hello World를 만들어보자.

 

참고

Building Apps for Windows Phone 8.1: (22) Universal Apps for Windows

http://channel9.msdn.com/Series/Building-Apps-for-Windows-Phone-8-1/22

 

1. 준비물

Visual Studio 2013 Update 2 RC

Hyper-V를 지원하는 PC or Windows Phone 8.1 device

Windows 8.1

 

2. 프로젝트 생성

File -> New -> Project -> Templates -> Visual C# -> Store Apps -> Universal Apps -> Blank App(Universal Apps)

Name : UniversalSample

OK

 

여기까지 작업을 하면 3개의 프로젝트가 생성된다.

UniversalSample.Windows (Windows 8.1)

UniversalSample.WindowsPhone (Windows Phone 8.1)

UniversalSample.Shared

각 프로젝트에 대해서는 대충 보면 사용용도를 알 수 있는데, xaml코드를 공유하는 방법에 대해서 살펴 보려고 한다.

 

3. UniversalSample.Windows (Windows 8.1)

MainPage.xaml을 열고 아래 코드를 추가한다.

 

...

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock Text="Hello World! Universal App" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource HeaderTextBlockStyle}" FontFamily="Global User Interface" />
    </Grid>
...

 

4. 앱을 실행하기 전에 솔루션에서 오늘쪽 마우스 버튼을 눌러서 프로퍼티 화면으로 이동한다.

 

 

Startup Project를 Crrent selection으로 변경한다. 그렇게하면 현재 선택한 프로젝트가 실행된다.

OK를 누른 후 F5를 눌러 실행한다.

 

 

일단 Windows 8.1 앱은 실행됐다. 그럼 이제 Windows Phone 8.1을 실행해보자. 아마 빈 화면이 보일 것이다. 이는 MainPage.xaml이 각 각의 프로젝트에 존재하기 때문에 서로 다른 MainPage.xaml을 실행하기 때문이다.

 

5. Shared 프로젝트 사용하기

Windows 8.1 프로젝트에 있던 MainPage.xaml을 솔루션 탐색기에서 자르기 한 후에 Shared 프로젝트에 붙여 넣고 Windows Phone 8.1 프로젝트에 있던 MainPage.xaml을 삭제한다.

 

최종 결과는 아래와 같다.

 

 

이렇게 수정 한 후 Windows Phone 8.1 프로젝트를 선택 하고 F5를 눌러서 실행한다.

 

 

 

Hello World라는 글씨가 보인다.

그래서, Shared 프로젝트에 xaml 코드는 2개의 프로젝트가 동시에 사용이 가능하다는 것을 알 수 있다.

 

6. 차이점에 대한 처리

그런데 윈8에서는 글씨가 전부 표시가 되었는데 윈폰8에서는 글씨가 오른쪽 왼쪽이 잘려서 보인다. 표시되는 영역 보다 내용이 더 클 경우에 TextBlock에는 TextWrapping이라는 프로퍼티에서 Wrap이라고 지정이 되어있으면 자동 줄 바꿈을 실행하고, NoWrap이라고 하면 자동 줄 바꿈을 실행하지 않는다.

 

 

위의 내용을 잘 보면 현재 화면은 윈8용 디자인 화면으로 TextBlock를 선택한 상태이다. 오른쪽 프로퍼티를 보면 TextWrapping이라는 프로퍼티가 Wrap으로 표시되어있다. 이렇게 되었다면, 윈폰8에서도 자동 줄 바꿈이 일어나야하는 것이 아닐까?라는 생각을 해봤지만 확인을 다시 해야한다.

 

왼쪽 상단 빨간 테두리에 있는 UniversalSample.Windows를 UniversalSample.WindowsPhone로 변경한다.

 

 

윈폰8 디자인 상태로 변경 후 TextBlock을 선택해 보면 TextWrapping이 NoWrap이라는 것을 확인 할 수 있다.

그래서 윈폰8일 때는 자동 줄 바꿈이 발생하지 않은 것이다.

 

이 TextBlock은 무조건 자동 줄 바꿈이 가능하도록 TextWrapping을 Wrap으로 변경한다.

최종 결과를 확인한다.

 

 

 

UniversalSample.zip