Blend를 사용하여 첫 Windows 스토어 앱 만들기, 2부: 세부 정보 페이지(XAML 및 C#)

아티클
06/05/2015

Blend for Visual Studio에서 XAML 디자인 도구의 컬렉션을 사용하여 Windows 스토어 앱을 더 빠르고 효율적으로 개발할 수 있습니다. 이 자습서를 살펴보면서 PickaFlick라는 간단한 응용 프로그램을 빌드합니다. 이 응용 프로그램에서는 Rotten Tomatoes의 API를 통해 생성된 목록에서 새 동영상을 찾아볼 수 있습니다.

Blend PickaFlick 응용 프로그램

샘플 갤러리에서 이 프로젝트를 다운로드하면 함께 진행할 때 프로젝트를 빌드할 수 있도록 코드뿐만 아니라 해당 자산을 모두 검토할 수 있습니다.

참고

이 앱을 실행하려면 Rotten Tomatoes에 등록하여 키를 가져와 코드에 붙여넣어야 합니다.

이 자습서의 1단계에서 PickaFlick 홈 페이지를 만들었습니다. 2부에서는 다음 작업을 수행합니다.

프로젝트에 항목 템플릿 추가

프로젝트 템플릿 외에도 Blend와 Visual Studio 모두에서 자주 사용하는 코드가 포함된 항목 템플릿을 제공합니다. 신속하게 응용 프로그램을 개발할 수 있도록 간단하게 프로젝트에 템플릿을 추가할 수 있습니다. 앱 개발 속도 향상을 위한 템플릿을 참조하세요.

PickaFlick 응용 프로그램의 경우 빈 페이지에 대한 항목 템플릿을 기존 프로젝트에 추가합니다. 이 페이지는 응용 프로그램의 영화 표시 페이지입니다.

빈 페이지 항목 템플릿을 추가하려면

프로젝트 패널에서 프로젝트 파일을 마우스 오른쪽 단추로 클릭하고 새 항목을 클릭합니다.

새 항목 대화 상자가 열립니다.
항목 템플릿 목록에서 빈 페이지를 클릭합니다.
이름 텍스트 상자에 MovieDisplay.xaml을 입력한 다음 확인을 클릭하여 항목 템플릿을 추가합니다.

이제 MovieDisplay.xaml의 배경을 변경합니다.

MovieDisplay.xaml의 배경을 변경하려면

개체 및 타임라인 패널에서 모눈을 클릭합니다.
속성 패널의 브러시 범주에서 단색 브러시 아이콘 을 클릭합니다.
16진수 값 텍스트 상자에 #D5BF9A을 입력한 다음 Enter 키를 누릅니다.

이제 코드 뷰의 Grid 태그에는 특성Background="#FFD5BF9A"(Alpha의 기본값은 100% 또는 FF)이 포함되고 새 배경 색은 디자인 화면에 표시됩니다.

Visual Studio로 전환 및 복귀

PickaFlick 앱은 JSON serializer가 있어야 JSON을 C#을 사용하여 빌드된 Windows 스토어 앱에서 사용할 수 있는 .NET 개체로 변환할 수 있습니다. 사용자 고유 JSON serializer를 작성하거나 Microsoft Visual Studio에서 NuGet 패키지 관리자를 사용하여 다운로드할 수 있습니다. Blend 내에서 Visual Studio로 쉽게 전환하여 이 작업을 수행할 수 있습니다.

이 절차에서 Visual Studio로 전환하여 Json.NET, JSON serializer를 다운로드한 다음 변경 사항을 저장하고 Blend로 다시 전환하여 작업을 계속합니다.

NuGet 패키지 관리자를 사용하여 Json.NET을 설치하려면

프로젝트 패널에서 PickaFlick를 마우스 오른쪽 단추로 클릭한 다음 Visual Studio에서 편집을 클릭합니다.

PickaFlick 프로젝트가 열립니다. 파일을 다시 로드할지 묻는 메시지가 나타나면 모두 다시 로드를 클릭합니다.

팁

이 자습서의 1부에서 이미 Visual Studio를 열었기 때문에 Visual Studio는 Visual Studio에서 편집을 클릭한 후 Blend 뒤에 숨겨질 수 있습니다.
솔루션 탐색기에서 프로젝트 파일을 마우스 오른쪽 단추로 클릭한 다음 NuGet 패키지 관리를 클릭합니다.
NuGet 패키지 대화 상자에서 검색 텍스트 상자에 Json.Net을 입력합니다. Enter 키를 누릅니다.
결과 목록에서 Json.NET의 오른쪽에 있는 설치 단추를 클릭합니다.
패키지 설치가 완료되면 닫기를 선택합니다.

Json.NET 홈 페이지가 문서 창에 나타나고 Newtonsoft.Json에 대한 참조가 솔루션 탐색기의 References 폴더에 나타납니다.

프로젝트에 PickaFlick 코드 추가

PickaFlick 앱에 대한 코드가 앱에서 직접 사용할 수 있도록 Rotten Tomatoes 웹 사이트에서 데이터를 가져와서 검색된 데이터에서 .NET 개체를 빌드합니다.

프로젝트에 코드를 추가하려면

솔루션 탐색기를 마우스 오른쪽 단추로 클릭하고 추가를 클릭한 다음 새 폴더를 클릭합니다.
솔루션 탐색기에서 새 폴더를 클릭한 다음 DataModel을 입력합니다.
DataModel 폴더를 마우스 오른쪽 단추로 클릭하고 추가를 가리킨 다음 새 항목을 클릭하거나 Ctrl+Shift+A를 누릅니다.
새 항목 추가 대화 상자에서 클래스를 클릭한 다음 MovieData.cs를 입력합니다. 추가를 클릭합니다.

MovieData.cs에서 class MovieData {}를 다음과 같이 바꿉니다.

// This class represents a movie. It contains properties the describe the movie.
    public class MovieData
    {
        public MovieData(string title, string summary, string image)
        {
            this.Title = title;
            this.Summary = summary;
            this.Image = image;

        }
        public string Title { get; set; }
        public string Summary { get; set; }
        public string Image { get; set; }
    }

Ctrl+Shift+A를 누릅니다. 클래스가 선택되어 있는지 확인합니다. 새 항목 추가 대화 상자에서 클래스를 클릭한 다음 PickaFlickQuery.cs를 입력합니다. 추가를 클릭합니다.

PickaFlickQuery.cs에서 using System.Threading.Tasks; 뒤에 다음을 추가합니다.

using System.IO;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using System.Collections.ObjectModel;
using System.Net;
using System.Net.Http;
using Newtonsoft.Json;
using System.IO.Compression;

class PickaFlickQuery {}를 다음 코드로 바꿉니다.

    public class PickaFlickQuery
    {
        protected Uri Uri { get; private set; }
        // A collection class used to store a list of MovieData objects.
        public ObservableCollection<MovieData> results = new ObservableCollection<MovieData>();
        private bool hasExecutedQuery;

        public PickaFlickQuery(Uri uri)
        {
            this.Uri = uri;
        }

        // Executes a query to obtain information about movies.
        // This property also stores the movies in a collection class.
        public ObservableCollection<MovieData> Results
        {
            get
            {
                if (!hasExecutedQuery)
                {
                    this.ExecuteQuery();
                }

                return this.results;
            }
        }

        // Calls a service to obtain a list of movies. This method stores each movie
        // in a collection object.
        private async void ExecuteQuery()
        {
            try
            {          
                HttpClient httpClient = new HttpClient();

                var response = await httpClient.GetAsync(this.Uri);

                string responseText = "";

                IEnumerable<string> headerValues = Enumerable.Empty<string>();

                if (response.Content.Headers.TryGetValues("Content-Encoding", out headerValues))
                {
                    foreach (string headerValue in response.Content.Headers.GetValues("Content-Encoding"))
                    {
                        if (headerValue == "gzip")
                        {
                            using (var responseStream = await response.Content.ReadAsStreamAsync())
                            using (var decompressedStream = new GZipStream(responseStream, CompressionMode.Decompress))
                            using (var streamReader = new StreamReader(decompressedStream))
                            {
                                responseText = streamReader.ReadToEnd();
                            }
                        }
                    }   
                }
                if (responseText == "")
                {
                    var stream = await response.Content.ReadAsStreamAsync();
                    var streamReader = new StreamReader(stream);
                    responseText = streamReader.ReadToEnd();
                }

            
                // Convert the stream to JSON so that it is easier to iterate through
                // each item in the stream.
                dynamic myObj = JsonConvert.DeserializeObject(responseText);
                dynamic movies = myObj.movies;

                // Iterate through the collection of JSON objects to obtain information
                // each movie in the collection.
                foreach (dynamic movie in movies)
                {
                    string title = movie.title;
                    string summary = movie.synopsis;
                    string image = movie.posters.detailed;

                    // Create a Moviedata object by using movie information and add 
                    // that object to a collection.
                    results.Add(new MovieData(title, summary, image));
                 }
             
                hasExecutedQuery = true;
            }
            catch (Exception)
            {
                hasExecutedQuery = false;
                showErrorMessage();
            }
        }
        private async void showErrorMessage()
        {
            var msg = new Windows.UI.Popups.MessageDialog
                ("The service is unavailable or there was a problem with the service.");

            msg.Commands.Add(new Windows.UI.Popups.UICommand("Try again?"));

            msg.Commands.Add(new Windows.UI.Popups.UICommand("I'll try again later."));

            msg.DefaultCommandIndex = 0;
            msg.CancelCommandIndex = 1;

            var results = await msg.ShowAsync();

            if (results.Label == "I'll try again later.")
            {
                hasExecutedQuery = true;
                this.Results.Clear();
            }
            else
            {
                hasExecutedQuery = false;
                this.Results.Clear();
            }


        }

    }

Ctrl+Shift+A를 누릅니다. 클래스가 선택되어 있는지 확인합니다. 새 항목 추가 대화 상자에서 클래스를 클릭한 다음 PickaFlickViewModel.cs를 입력합니다. 추가를 클릭합니다.

PickaFlickViewModel.cs에서 class PickaFlickViewModel {}를 다음과 같이 바꿉니다.

// Provides an object that returns movie data. You can bind to this class in the designer.
    // For example, by referencing this class in the ItemSource property of a GridView control. 
    public class PickaFlickViewModel
    {
// A Rotten Tomatoes API key is required. See https://go.microsoft.com/fwlink/?LinkId=313841 
        private static readonly string apikey = "Insert API Key Here";
        private static readonly string baseUrl = "http://api.rottentomatoes.com/api/public/v1.0";
        private static readonly string moviesSearchUrl = baseUrl + "/lists/movies/box_office.json?apikey=" + apikey;

        private static readonly Uri uri = new Uri(moviesSearchUrl);

        private readonly PickaFlickQuery query = new PickaFlickQuery(uri);
        
        // Property that returns a collection of MovieData objects. 
        public PickaFlickQuery Query
        {
            get
            {
                return this.query;
            }
        }
    }

중요

Rotten Tomatoes API 키가 있으면 "Insert API Key Here" 텍스트 자리에 키를 입력합니다.앱은 키 없이는 예상대로 실행되지 않습니다.

Ctrl+Shift+S를 눌러 모든 변경 내용을 저장한 다음 Blend로 다시 전환합니다.
Blend에서 프로젝트를 다시 로드할지 묻는 메시지가 표시됩니다. 예를 클릭합니다.

DataContext 설정

DataContext를 설정하면 앱에 표시되는 개체에 대한 소스 데이터를 지정하는 것입니다.

DataContext를 설정하려면

Ctrl+B를 눌러 프로젝트를 빌드하면 Visual Studio에서 변경한 내용을 Blend에서 사용할 수 있습니다.
문서 창의 맨 위에 있는 MovieDisplay.xaml 탭을 클릭하여 MovieDisplay.xaml이 열리는지 확인합니다. 개체 및 타임라인 패널에서 모눈을 클릭합니다.
속성 패널의 DataContext 오른쪽에 있는 새로 만들기를 클릭합니다.
개체 선택 대화 상자에서 PickaFlickViewModel을 클릭합니다. 확인을 클릭합니다.

팁

목록이 너무 길어 쉽게 볼 수 없다면 대화 상자의 왼쪽 아래 모퉁이에 있는 모든 어셈블리 표시 확인란의 선택을 취소합니다.

데이터 뷰 만들기

데이터 패널의 DataContext 섹션에서 Results 노드를 끌어 디자인 화면에 놓으면 영화 앱의 데이터를 표시하는 데이터 바인딩된 GridView를 쉽게 만들 수 있습니다. GridView 및 연결된 DataTemplate이 자동으로 만들어지고 데이터가 디자인 화면에 표시됩니다.

PickaFlick 앱은 GridView 컨트롤을 사용하지 않습니다. 목록의 항목을 쉽게 넘길 수 있는 FlipView 컨트롤을 사용합니다. 프로젝트에 FlipView를 추가하고 결과 노드를 개체 및 타임라인 패널의 FlipView에 직접 끌어다 놓아 이 뷰를 신속하게 만들 수 있습니다.

참고

데이터의 표 뷰를 만든 다음 삭제하면 원래 DataTemplate이 XAML에 그대로 유지됩니다.데이터의 추가 표 뷰를 만들면 x:Key 값에 숫자가 연결된 다른 DataTemplate이 만들어집니다.예를 들어 첫 번째 DataTemplate x:Key 특성이 MovieTemplate이면 두 번째 DataTemplate x:Key는 MovieTemplate1입니다.

FlipView 컨트롤을 사용하여 데이터 뷰를 만들려면

자산 패널에서 컨트롤을 클릭한 후 FlipView를 두 번 클릭합니다.
데이터 패널의 데이터 컨텍스트 섹션에서 **결과 : (MovieData)**를 클릭한 다음 끌어다 개체 및 타임라인 패널의 FlipView 컨트롤에 놓습니다.

팁

결과 노드가 표시되지 않으면 찾을 때까지 데이터 컨텍스트 섹션의 노드를 확장합니다.

이제 데이터가 FlipView 컨트롤 내의 디자인 화면에 나타납니다. 이제 데이터의 레이아웃을 사용자 지정할 준비가 되었습니다.

팁

무단 액세스 예외가 트리거되어 디자인 화면에 표시되면 API를 다시 한 번 확인하고 코드에 정확히 입력되었는지 확인합니다.

데이터 뷰 스타일 지정

Flipview가 준비되어 있고, 데이터가 로드되지만 영화 표시는 정상적으로 보이지 않습니다. 생성된 데이터 템플릿이 원하는 대로 나타나도록 스타일을 지정한 다음 표시되는 데이터가 원하는 데이터가 되도록 데이터를 구체화할 수 있습니다.

데이터 템플릿 사용자 지정

결과 패널을 FlipView로 끌었을 때 데이터 템플릿이 자동으로 생성되었습니다. 템플릿을 수정하고 사용자 지정하여 완성된 샘플 앱에 표시되는 데이터와 더 비슷하게 보이게 만들 수 있습니다.

생성된 템플릿을 편집하려면

개체 및 타임라인 패널의 FlipView를 마우스 오른쪽 단추로 클릭하고 추가 템플릿 편집을 가리킨 다음 생성된 항목(ItemTemplate) 편집을 가리킨 다음 현재 항목 편집을 클릭합니다.
Ctrl 키를 누르고 개체 및 타임라인 패널에서 테두리 및 StackPanel을 클릭합니다. 마우스 오른쪽 단추로 클릭하고 삭제를 클릭합니다.
개체 및 타임라인 패널에서 모눈을 클릭합니다. 속성 패널의 레이아웃 범주에서 너비 오른쪽에 있는 자동으로 설정 을 클릭합니다. 높이에 대해 이 작업을 반복합니다.
여백의 오른쪽에 있는 고급 속성 을 클릭한 다음 다시 설정을 클릭합니다.

이제 사용자 지정 템플릿을 디자인할 준비가 되었습니다.

레이아웃 모눈 만들기

Grid 레이아웃 패널은 Blend 프로젝트의 기본 패널입니다. Windows 스토어 앱의 디자인 지침과 Grid 레이아웃 패널을 함께 준수하면 Windows 8 스타일 지정 지침을 준수하는 앱에 스타일을 지정할 수 있습니다. 지침에 대한 자세한 내용은 앱 페이지 레이아웃을 참조하세요.

지침에 따르면 Windows 스토어 앱의 기본 측정 단위는 20 x 20픽셀이고 각 단위는 다시 5 x 5픽셀의 하위 단위로 나뉩니다. 레이아웃은 머리글, 왼쪽 여백, 콘텐츠 영역으로 정의되는 모눈을 기반으로 합니다. 지침에 따르면 모눈의 주요 요소는 다음과 같습니다.

페이지 머리글 페이지 머리글의 기준선은 맨 위에서 5단위 또는 100픽셀에 있어야 합니다.
왼쪽 여백 왼쪽 여백은 왼쪽 가장자리에서 6단위 또는 120픽셀에 있어야 합니다.
콘텐츠 영역 맨 위 여백은 맨 위에서 7단위 또는 140픽셀에 있어야 합니다.

나타나는 핸들인 표시기를 사용하여 개체를 수정할 수 있습니다. 개체 표시기는 모퉁이 및 개체 윤곽선 가운데에 표시됩니다. 표시기는 눈금선 및 모눈선 끝에도 표시됩니다. 모눈을 만들 때 삽입 표시기를 사용하여 모눈선을 위하는 위치에 배치할 수 있습니다.

모눈의 행과 열 크기를 조정하는 옵션은 세 가지이며 이러한 옵션은 모눈의 개체 정렬에도 영향을 줍니다. 크기 조정 옵션은 다음과 같습니다.

픽셀 픽셀 값을 사용하여 고정 크기를 설정합니다.
별표(*) 별표 값을 사용하고 백분율 너비와 비슷합니다.
자동 상대 너비를 사용하므로 모눈 내의 개체가 부모 개체의 크기가 조정될 때 크기가 조정된다는 의미입니다.

레이아웃 모눈은 픽셀 너비와 별표 너비 열을 모두 사용합니다.

레이아웃 모눈 열을 만들려면

원래 템플릿은 두 개의 열(모눈 열 표시기로 식별)과 한 개의 행으로 구성되었습니다. 모눈 열 표시기를 클릭하여 오른쪽으로 끕니다.
값 편집기가 나타나면 드롭다운 화살표를 클릭하여 목록을 연 다음 픽셀을 클릭합니다.
숫자 값 편집기에서 120을 입력합니다.
처음 만든 표시기의 왼쪽에 있는 모눈의 맨 위를 가리킨 다음 주황색 삽입 표시기를 클릭합니다. 두 번 더 반복합니다.

이제 열이 다섯 개가 됩니다.
두 번째 열의 값 편집기에서 1을 입력합니다. 크기 조정 옵션은 별표(*)로 설정된 상태로 둡니다.
세 번째 열의 값 편집기에서 40을 입력합니다. 크기 조정 옵션은 픽셀로 설정합니다.
네 번째 열의 값 편집기에서 1을 입력합니다. 크기 조정 옵션은 별표(*)로 설정된 상태로 둡니다.
다섯 번째 열의 값 편집기에서 120을 입력합니다. 크기 조정 옵션은 픽셀로 설정합니다.

레이아웃 행을 만들려면

디자인 화면에서 모눈의 왼쪽에 있는 파란색 점선을 가리킨 다음 나타나는 주황색 삽입 표시기를 클릭합니다.
값 편집기가 나타나면 드롭다운 화살표를 클릭하여 목록을 연 다음 픽셀을 클릭합니다. 숫자 값 편집기에서 100을 입력합니다.
방금 만든 모눈선 아래의 위치를 가리킨 다음 나타나는 주황색 삽입 표시기를 클릭합니다.
값 편집기 목록을 연 다음 픽셀을 클릭합니다. 숫자 값 편집기에서 40을 입력합니다.

이 설정은 두 번째 모눈선을 첫 번째 모눈선에서 40픽셀 아래 140픽셀 표시에 배치합니다.

이제 열이 다섯 개, 행이 세 개가 됩니다.

Blend - PickaFlick의 레이아웃 모눈

이제 모눈에 콘텐츠를 추가하기 시작할 준비가 되었습니다. 추가할 첫 번째 개체는 로고입니다.

로고를 추가하고 스타일을 지정하려면

개체 및 타임라인 패널에서 모눈이 선택되었는지 확인합니다. 프로젝트 패널의 Assets 폴더에서 SmallLogo-Chicken.png를 두 번 클릭하여 디자인 화면에 추가합니다.
속성 패널의 레이아웃 범주에서 HorizontalAlignment를 가운데 맞춤 으로, VerticalAlignment를 아래쪽 맞춤 으로 설정합니다.
여백의 오른쪽에 있는 고급 속성 을 클릭한 다음 다시 설정을 클릭합니다.
공용 범주에서 늘이기를 없음으로 설정합니다.

데이터 바인딩 만들기 및 스타일 지정

템플릿을 완성하려면 템플릿에 개체를 계속 추가한 다음 데이터를 그러한 개체에 바인딩합니다. 그런 다음 데이터가 원하는 대로 나타나도록 개체의 표시를 수정할 수 있습니다. 사용하는 개체의 형식은 바인딩하려는 데이터의 종류로 결정됩니다. 예를 들어 영화 포스터 이미지는 Image 컨트롤에 바인딩되고 영화 제목 및 요약은 TextBlock 컨트롤에 바인딩됩니다.

영화 제목을 추가하고 배치하려면

개체 및 타임라인 패널, 자산 패널에서 모눈을 선택한 상태에서 TextBlock을 두 번 클릭하여 디자인 화면에 추가합니다.

새 Textblock 개체가 디자인 화면의 왼쪽 위 모퉁이에 추가됩니다. Esc 키를 눌러 텍스트 편집 모드를 끝냅니다.
모눈의 원하는 열과 행에 Textblock을 배치하려면 속성 패널의 레이아웃 범주에서 다음과 같이 설정합니다.
- 행 0
  
  이렇게 하면 Textblock이 맨 위 행에 배치됩니다.
- RowSpan 1
  
  제목이 하나의 행 이상으로 확장되지 않습니다.
- 열 1
  
  열과 행 번호가 0부터 매겨지기 때문에 이 설정을 사용하면 Textblock을 두 번째 열에 배치합니다.
- ColumnSpan 3
  
  여러 개의 열을 확장하면 긴 제목이 하나의 행에 표시되도록 할 수 있습니다.
이제 TextBlock이 두 번째 열의 오른쪽 맨 위에 나타납니다.
TextBlock을 원하는 행 내에 배치하려면 VerticalAlignement를 아래쪽 맞춤 으로 설정합니다.

이제 TextBlock의 텍스트에 스타일을 지정할 준비가 되었습니다. 다음 절차에서는 텍스트의 글꼴과 크기를 설정한 다음 텍스트의 색을 변경합니다.

TextBlock의 텍스트에 스타일을 지정하려면

글꼴에 대한 지침(Windows 스토어 앱)에 따라 Windows 8 앱의 머리글은 42포인트 Segoe UI Light를 사용해야 합니다.

속성 패널의 텍스트 범주에 있는 글꼴 목록에서 Segoe UI Light를 선택합니다.
크기의 경우 글꼴 목록의 오른쪽에 있는 목록에서 선택하거나 값 편집기에 직접 입력할 수 있습니다. 머리글의 경우 42pt를 입력한 다음 Enter 키를 누릅니다.
문자의 아래쪽이 텍스트 블록의 기준선 위에 배치됩니다.

이 여분의 공간은 하강 문자(예: 소문자 g의 꼬리 부분)가 들어가는 부분입니다. 기본 텍스트의 밑이 기준선에 놓여야 하고 제목 일부분이 기준선 아래로 내려올 수 있는 하강 문자에 대한 공간이 있어야 합니다. 기준선을 조정하려면 레이아웃 범주에서 아래쪽 여백을 -18로 설정합니다.

이제 텍스트가 기준선에 놓였습니다.
속성 패널의 브러시 범주에서 색 스포이트 를 클릭합니다.

디자인 화면의 왼쪽 위에 있는 닭 이미지를 가리킵니다. 닭 이미지에서 가리키고 있는 부분에 따라 TextBlock의 텍스트 색이 변경됩니다. 원하는 빨간색 음영을 찾으면 이미지를 클릭하여 글꼴 색을 설정합니다.

이제 영화 제목 데이터를 TextBlock에 바인딩할 준비가 되었습니다.

영화 제목 데이터를 TextBlock 개체에 바인딩하려면

텍스트의 오른쪽에 있는 공용 범주에서 고급 속성 을 클릭한 다음 데이터 바인딩 만들기를 클릭합니다.
[TextBlock].Text에 대한 데이터 바인딩 만들기 대화 상자에서 제목을 클릭한 다음 확인을 클릭합니다.

다음으로 영화 아트를 추가하고 스타일을 지정합니다.

영화 아트를 추가하고 배치하려면

개체 및 타임라인 패널, 프로젝트 패널, Assets 폴더에서 모눈을 선택한 상태에서 Temp.png를 두 번 클릭하여 디자인 화면에 추가합니다.

Temp.png가 소스인 새 Image 개체가 디자인 화면에 추가됩니다.
속성 패널의 레이아웃 범주에서 다음과 같이 설정합니다.
- 행 3
- RowSpan 1
- 열 1
- ColumnSpan 1
HorizontalAlignment를 가운데 맞춤 으로, VerticalAlignment를 위쪽 맞춤으로 설정합니다.
여백의 오른쪽에 있는 고급 속성 을 클릭한 다음 다시 설정을 클릭합니다.

임시 이미지의 가로 세로 비율에 대해서는 걱정하지 마십시오. 영화 이미지를 Image 개체에 바인딩한 후 표시를 수정합니다.

영화 아트를 이미지 개체에 바인딩하려면

소스의 오른쪽에 있는 공용 범주에서 고급 속성 을 클릭한 다음 데이터 바인딩 만들기를 클릭합니다.
[Image].Source에 대한 데이터 바인딩 만들기 대화 상자에서 이미지를 클릭한 다음 확인을 클릭합니다.
공용 범주, 늘이기 목록에서 균일을 클릭합니다.

다음으로 요약을 추가하고 스타일을 지정합니다. 일부 영화 요약은 상당히 길어져 화면의 높이 이상으로 확장될 수 있습니다. 요약 스크롤을 사용하도록 설정하려면 ScrollViewer 개체를 템플릿에 추가한 다음 TextBlock을 ScrollViewer에 추가하여 텍스트를 표시합니다.

영화 요약을 추가하고 배치하려면

개체 및 타임라인 패널, 자산 패널에서 모눈을 선택한 상태에서 ScrollViewer를 두 번 클릭하여 디자인 화면에 추가합니다.

새 ScrollViewer 개체가 디자인 화면의 왼쪽 위 모퉁이에 추가됩니다.
너비 오른쪽에 있는 개체 및 타임라인 패널, 레이아웃 범주에서 ScrollViewer를 선택한 상태에서 자동으로 설정 을 클릭합니다. 높이에 대해 이 작업을 반복합니다.
속성 패널의 레이아웃 범주에 Textblock을 배치하려면 다음과 같이 설정합니다.
- 행 2
- RowSpan 1
- 열 3
- ColumnSpan 1
이제 ScrollViewer가 세 번째 행, 네 번째 열의 왼쪽 맨 위에 나타납니다.
개체 및 타임라인 패널, 자산 패널에서 ScrollViewer를 선택한 상태에서 TextBlock을 두 번 클릭하여 디자인 화면에 두 번째 TextBlock을 추가합니다.

새 Textblock 개체가 ScrollViewer 개체에 추가됩니다. Esc 키를 눌러 텍스트 편집 모드를 끝냅니다.

영화 요약 데이터에 TextBlock 요소를 바인딩한 후 텍스트에 스타일을 지정하기가 더 쉬워집니다.

영화 요약 데이터를 TextBlock 개체에 바인딩하려면

텍스트의 오른쪽에 있는 공용 범주에서 고급 속성 을 클릭한 다음 데이터 바인딩 만들기를 클릭합니다.
[TextBlock].Text에 대한 데이터 바인딩 만들기 대화 상자에서 요약을 클릭한 다음 확인을 클릭합니다.

이제 요약 텍스트에 스타일을 지정할 준비가 되었습니다.

TextBlock의 텍스트에 스타일을 지정하려면

글꼴에 대한 지침(Windows 스토어 앱)에서는 Windows 8 앱의 본문 글꼴에 Segoe UI Semilight를 권장합니다.

속성 패널의 텍스트 범주에 있는 글꼴 목록에서 Segoe UI Semilight를 선택합니다.
크기의 경우 글꼴 목록의 오른쪽에 있는 목록에서 선택하거나 값 편집기 안쪽을 클릭한 다음 위쪽 화살표와 아래쪽 화살표를 사용하여 글꼴 크기를 선택할 수 있습니다. Enter 키를 누릅니다. 디자인 화면의 표시를 검토하여 원하는 글꼴 크기를 선택합니다.
속성 패널의 브러시 범주에서 색 스포이트 를 클릭하여 디스플레이에서 색을 선택하거나 색 편집기 안쪽을 클릭하여 색상표에서 색을 선택합니다.

다른 장치 표시 미리 보기

Blend은 앱의 라이브 뷰를 표시하므로 실행하지 않고도 원하는 대로 나타나는지 확인할 수 있습니다. 장치 패널을 사용하여 앱이 여러 디스플레이에서 어떻게 나타나는지 미리 볼 수도 있습니다.

장치 패널에서 표시를 사용하도록 설정하려면

표시 옵션을 사용하도록 설정하려면 범위를 {0}(으)로 되돌립니다. 를 클릭하여 템플릿 편집 모드를 끝냅니다.

팁

모든 옵션이 모든 프로젝트 또는 항목 템플릿에서 사용하도록 설정된 것은 아닙니다.예를 들어 고대비 및 테마 설정은 표 형태 앱, 허브 앱, 분할 앱 프로젝트 템플릿 및 분할 페이지, 항목 페이지, 허브 페이지 항목 템플릿 등 선택된 프로젝트 및 항목 템플릿에 적용됩니다.

일부 옵션은 매니페스트 디자이너에서 사용하도록 설정되어야 합니다.예를 들어 최소 너비를 320px로 설정하면 이 옵션을 응용 프로그램 매니페스트에서 사용하도록 설정해야 함을 경고하는 메시지가 나타납니다.자세한 내용은 매니페스트 디자이너를 사용하여 앱 패키지 구성을 참조하십시오.

Blend 장치 패널

기본 제공 동작 추가

앱을 실행하면 기본 페이지가 표시되고 포인터를 위로 이동하면 닭 단추 이미지가 변경됩니다. 컨트롤에 대해 클릭 이벤트 트리거를 정의하지 않았으므로 단추를 클릭해도 아무것도 나타나지 않습니다. 기본 제공 동작을 사용하여 NavigateToPageAction 동작을 아래쪽에 추가하면 영화 표시 페이지로 연결됩니다.

NavigateToPageAction 동작을 단추 컨트롤에 추가

MainPage.xaml로 전환합니다. 개체 및 타임라인 패널, 자산 패널, 동작 범주에서 단추를 선택한 상태에서 NavigateToPageAction을 두 번 클릭하여 단추에 추가합니다.

EventTriggerBehavior 및 NavigateToPageAction이 개체 및 타임라인 패널에 나타납니다.
속성 패널에 공용 범주가 나타납니다. TargetPage 드롭다운 목록에서 MovieDisplay.xaml을 클릭합니다.

팁

또는 개체 및 타임라인 패널에서 EventTriggerBehavior를 클릭한 다음 속성 패널에서 작업(컬렉션) 단추를 클릭할 수 있습니다.DependencyObjectCollection 편집기: 작업 대화 상자, 속성 섹션에서 TargetPage 드롭다운 목록의 MovieDisplay를 클릭합니다.

F5 키를 눌러 응용 프로그램을 빌드하고 실행합니다. 닭 단추를 클릭하여 영화 세부 정보 페이지를 엽니다. 화면의 오른쪽 및 왼쪽에 있는 화살표를 사용하여 신작 릴리스를 클릭합니다.

Alt+F4를 눌러 응용 프로그램을 닫습니다.

다음 단계

실제 앱인 경우 다음 단계는 앱을 게시하는 것입니다. Windows 스토어에 앱을 게시하는 방법은 Windows 스토어에 앱 게시 개요를 참조하세요.

Blend를 사용하여 첫 Windows 스토어 앱 만들기, 2부: 세부 정보 페이지(XAML 및 C#)

프로젝트에 항목 템플릿 추가

빈 페이지 항목 템플릿을 추가하려면

MovieDisplay.xaml의 배경을 변경하려면

Visual Studio로 전환 및 복귀

NuGet 패키지 관리자를 사용하여 Json.NET을 설치하려면

프로젝트에 PickaFlick 코드 추가

프로젝트에 코드를 추가하려면

DataContext 설정

DataContext를 설정하려면

데이터 뷰 만들기

FlipView 컨트롤을 사용하여 데이터 뷰를 만들려면

데이터 뷰 스타일 지정

데이터 템플릿 사용자 지정

생성된 템플릿을 편집하려면

레이아웃 모눈 만들기

레이아웃 모눈 열을 만들려면

레이아웃 행을 만들려면

로고를 추가하고 스타일을 지정하려면

데이터 바인딩 만들기 및 스타일 지정

영화 제목을 추가하고 배치하려면

TextBlock의 텍스트에 스타일을 지정하려면

영화 제목 데이터를 TextBlock 개체에 바인딩하려면

영화 아트를 추가하고 배치하려면

영화 아트를 이미지 개체에 바인딩하려면

영화 요약을 추가하고 배치하려면

영화 요약 데이터를 TextBlock 개체에 바인딩하려면

TextBlock의 텍스트에 스타일을 지정하려면

다른 장치 표시 미리 보기

장치 패널에서 표시를 사용하도록 설정하려면

기본 제공 동작 추가

NavigateToPageAction 동작을 단추 컨트롤에 추가

다음 단계

추가 리소스