5일차. PhotoLab 샘플 따라 만들기 (1/3)

PhotoLab 메인화면

   UWP의 사용자 인터페이스 만들기 자습서를 따라 해보겠습니다. GitHub에 올라온 예제는 C++/WinRT가 아닌 C#으로 된 예제입니다. PhotoLab이라는 프로그램이 어떤 구조이고 어떤 방식으로 동작하는지만 이해하시면 되겠습니다.

 

솔루션과 프로젝트

   먼저 프로젝트 구조를 보겠습니다. Assets 폴더 안에는 Samples 폴더가 있고, 그 안에 이미지가 저장되어 있습니다. UI는 MainPage XAML와 Detail Page XAML로 구성되어 있습니다. MainPage는 위의 메인 화면을 구성하고, DetailPage는 이미지를 클릭했을 때 나오는 페이지입니다. 메인 페이지의 맨 상단에는 페이지의 제목과, 우측의 명령(Command) 모음이 있습니다. 그 아래는 콘텐트가 있으며 사진과 제목, 이미지 포맷, 해상도, 그리고 평점을 보여주는 부분이 격자 형태로 배치되어 있습니다. 자습서를 따라하여 이 부분을 먼저 만들어 보겠습니다.

 

 

MainPage 구현

   먼저 프로젝트를 생성해 줍니다. 프로젝트명은 위와 동일하게 PhotoLab으로 하겠습니다. 저번과 마찬가지로 Blank APP (C++/WinRT)를 클릭해서 새 프로젝트를 생성한 후 MainPage.xaml을 수정해 주겠습니다. 그 다음에 솔루션 플랫폼이 ARM이 아닌 x86(혹은 x64)가 선택되어 있는지 확인합니다. 만약 자신의 CPU 아키텍처가 ARM 기반이시라면 ARM을 선택하시면 되겠습니다. 그 다음 XAML 디자이너 페이지에서 미리보기를 13.3" Desktop (1280x720) 100% 배율로 바꿔줍니다.

 

XAML 설정 완료

   다 설정하셨으면 위와 같이 됩니다. 저는 x86보다 x64를 선호하기 때문에 x64를 선택했습니다. 이제 본격적인 XAML 수정을 시작하겠습니다. 일단 MainPage.xaml 안의 StackPanel은 필요 없으니 삭제였습니다. 그 다음 맨 위의 Collection이라 써진 상단 탐색 바를 만들어 보겠습니다.

 

MainPage.xaml

   먼저 Page 안에 있는 태그를 지우고, 예제에 있는 태그를 복사하여 붙여넣겠습니다. RelativePanel은 명확한 종속성이 없이 부모 혹은 주변 개체들과의 제약 조건을 명시해 배치하고 정렬하는 패널입니다. 안드로이드의 RelativeLayout과 비슷하지만 그것보다는 더 간단할 것으로 보입니다. 먼저 RelativePanel과 그 안에 TextBlock을 넣습니다. TextBlock은 "Collection"이란 텍스트가 보이는 부분입니다.

    그리고 TextBlock 밑에 GridView 태그 내용을 복사하여  붙여넣어 줍니다. AlignLeftWithPanel과 AlignRightWithPanel이 눈에 띄는데, 이는 패널의 정렬 관계를 설정합니다. Left/Right/Top/Bottom이 있으며, True로 했을 경우 패널의 변에 해당 요소가 내접하게 됩니다. 이 예제에서는 Left와 Right를 설정했으므로 좌우로 내접하게 됩니다. 그 아래는 Below 속성이 있는데, 이는 해당 속성값의 아래에 배치하겠다는 뜻입니다. Below 말고도 Above/LeftOf/RightOf 속성값이 있으니 상황에 맞게 쓰시면 됩니다.

<RelativePanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
	<TextBlock x:Name="TitleTextBlock"
			Text="Collection"
			Margin="24,0,0,24"
			Style="{StaticResource TitleTextBlockStyle}" />
	<GridView x:Name="ImageGridView"
			Margin="0,0,0,8"
			RelativePanel.AlignLeftWithPanel="True"
			RelativePanel.AlignRightWithPanel="True"
			RelativePanel.Below="TitleTextBlock" />
</RelativePanel>

   XAML 코드입니다.

 

 

실행 결과

   실행해본 결과 상단 바가 생성이 되었습니다.

 

 

Assets 폴더에 이미지 샘플 폴더 추가

Samples 폴더 이동

   다음으로는 예제 프로젝트에 있는 Samples 이미지 폴더를 현재 프로젝트 폴더로 이동시키겠습니다. 예제 프로젝트로 들어가 Samples 폴더를 복사한 후, 자신의 프로젝트 폴더의 Assets 폴더에 붙여넣기를 합니다. 그 후 비주얼 스튜디오로 가서 '모든 파일 표시' 버튼을 누른 다음 Assets의 Samples 폴더에 있는 사진들을 전부 선택해 프로젝트에 포함시킵니다.

 

 

012

솔루션 탐색기

   다시 '모든 파일 표시' 버튼을 눌러 해당 옵션을 꺼주면 자신의 프로젝트에 포함된 이미지들이 루트 폴더에 있는 것을 볼 수가 있습니다. Assets 폴더를 우클릭해 새 필터를 추가해 주고, 이름을 Samples로 변경한 후 드래그 앤 드롭으로 이미지 파일들을 생성한 폴더에 집어넣으면 끝입니다. 

 

 

참고

docs.microsoft.com/ko-kr/windows/uwp/design/basics/xaml-basics-ui

사용자 인터페이스 만들기 자습서 - UWP applications

github.com/Microsoft/Windows-appsample-photo-lab

microsoft/Windows-appsample-photo-lab