Blend를 사용하여 첫 Windows 스토어 앱 만들기, 1부: 마스터 페이지(XAML 및 C#)

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

또한 이 자습서를 완료하는 데 필요한 NuGet을 설치하려면 Microsoft Visual Studio Professional, Premium 또는 Ultimate의 정식 또는 평가판 버전을 사용해야 합니다. NuGet은 Visual Studio Express와 유효한 Windows 스토어 개발자 라이선스에는 사용할 수 없습니다.



PickaFlick 응용 프로그램의 홈 페이지

Blend PickaFlick 응용 프로그램

이 자습서의 1부에서는 응용 프로그램의 홈 페이지를 만듭니다. 그 과정에서 다음과 같은 방법을 배우게 됩니다.

샘플 갤러리에서 이 프로젝트를 다운로드하면 함께 진행하고, 진행할 때 프로젝트를 빌드할 수 있도록 코드를 비롯한 관련 자산을 모두 검토할 수 있습니다.

XAML 또는 C# 사용 경험은 이 자습서를 완료하는 데 필요하지 않습니다. 그러나 Blend를 성공적으로 사용하기 위해서는 중간 수준의 XAML 및 C# 사용 경험이 도움이 됩니다.

Blend 및 Visual Studio에서는 Windows 스토어 앱을 시작하는 데 유용한 동일한 프로젝트 템플릿을 제공합니다. Blend 및 Visual Studio에서 다른 종류의 앱 개발 시 제공하는 템플릿에 대한 자세한 내용은 앱 개발 속도 향상을 위한 템플릿을 참조하세요.

프로젝트를 만들려면

  1. Blend의 파일 메뉴에서 새 프로젝트를 클릭합니다.

    새 프로젝트 대화 상자의 왼쪽에 프로젝트 형식 목록이 표시됩니다. 프로젝트 형식을 클릭하면 해당 프로젝트와 연결된 프로젝트 템플릿이 오른쪽에 표시됩니다.

    Windows 스토어(XAML) 새 프로젝트 대화 상자
  2. 프로젝트 형식 목록에서 XAML(Windows 스토어)을 클릭합니다.

  3. 프로젝트 템플릿 목록에서 새 응용 프로그램(XAML)을 클릭합니다.

  4. 이름 텍스트 상자에 PickaFlick를 입력합니다.

  5. 위치 텍스트 상자에서 프로젝트 위치를 확인합니다.

  6. 언어 목록에서 Visual C#을 클릭합니다.

  7. 버전 목록에서 8.1을 클릭합니다. 확인을 클릭합니다.

Blend의 기본 작업 영역에서는 Windows 스토어 앱을 빌드하는 데 사용할 수 있는 시각적 인터페이스(디자인 화면, 패널, 작업 영역 구성, 제작 보기 및 메뉴)를 제공합니다. 자세한 내용은 Blend 응용 프로그램 작업 영역(XAML)을 참조하십시오.

프로젝트에서 작업하는 경우 응용 프로그램의 한 영역에서 수행된 변경 내용인 인터페이스 전체적으로 반영됩니다.

왼쪽 위에서 프로젝트 탭을 클릭하여 새 응용 프로그램 템플릿에서 프로젝트를 만들 때 자동으로 생성된 폴더 및 파일을 확인합니다.

  • 참조   DLL 파일 등의 프로젝트 참조 및 파일을 포함합니다.

  • 자산   Windows 스토어 앱의 기본 이미지 자산 등의 프로젝트 자산이 포함됩니다.

  • 속성   일반적인 어셈블리 정보를 포함합니다.

  • App.xaml   공유 리소스를 선언하고 전역 응용 프로그램 수준 이벤트를 처리합니다. App.xaml은 사용자 인터페이스를 표시하는 데 필요합니다.

  • MainPage.xaml  응용 프로그램의 기본 시작 페이지입니다.

  • Package.appxmanifest   표시 이름, 로고, 응용 프로그램 설명, 선언, 기능, 배포 패키징 등 응용 프로그램을 설명하는 메타데이터를 포함합니다.

Blend 프로젝트 패널

자세한 내용은 프로젝트 패널(XAML)을 참조하십시오.

프로젝트 패널 아래의 인터페이스 맨 왼쪽에 개체 및 타임라인 패널이 있습니다. 개체 및 타임라인 패널은 MainPage.xaml의 구조체를 보여 줍니다.

개체 및 타임라인 패널에서는 작업 중인 페이지의 개체 계층을 볼 수 있습니다. 개체 및 타임라인 패널에서 직접 작업하여 진행할 때 쉽고 빠르게 개체 계층을 수정할 수 있습니다.

자세한 내용은 개체 및 타임라인 패널(XAML)을 참조하십시오.

분할 뷰에서 프로젝트를 보면 디자인 화면과 MainPage.xaml의 코드를 동시에 모두 볼 수 있습니다. 디자인 화면에 표시되는 요소를 변경하면 코드가 자동으로 업데이트됩니다. MainPage.xaml의 코드가 보이지 않으면 디자인 화면의 오른쪽 위 모퉁이에 있는 분할 보기 아이콘 을 클릭합니다.

이 절차에서는 MainPage.xaml에 배경색을 추가하고, 작업할 때 코드가 업데이트되는지 확인합니다.

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

  1. 개체 및 타임라인 패널에서 모눈을 클릭합니다.

  2. 속성 패널의 브러시 범주에서 단색 브러시 아이콘 Blend - 단색 브러시을 클릭합니다.

  3. 16진수 값 텍스트 상자에 #D5BF9A을 입력한 다음 Enter 키를 누릅니다.

    Blend 속성 패널 - Background 속성

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

PickaFlick 응용 프로그램은 그래픽 디자이너가 만든 이미지로 빌드됩니다. ChickenSprite 이미지는 시각적 효과를 추가할 뿐만 아니라 사용자가 응용 프로그램을 시작하기 위해 클릭하는 단추로도 사용됩니다.

다음 이미지는 샘플 프로젝트와 함께 포함되어 있습니다.

  • ChickenSprite

  • FilmStrip

  • MainLogo

  • SmallLogo-Chicken

  • Temp

다음과 같은 방법으로 프로젝트에 이미지를 추가할 수 있습니다.

  • 프로젝트 메뉴에서 기존 항목 추가 명령 사용

  • 복사하여 붙여넣기

  • 끌어서 놓기

이 예제에서는 이미지를 복사하여 붙여 넣겠습니다.

프로젝트에 이미지를 추가하려면

  1. 샘플 프로젝트를 다운로드한 경우 PickaFlick Assets 폴더를 열고, Ctrl+A를 누른 다음 Ctrl+C를 누릅니다.

  2. Blend에서는 프로젝트 패널에서 Assets 폴더를 마우스 오른쪽 단추로 클릭한 다음 붙여넣기를 클릭합니다.

이제 응용 프로그램에 스타일을 지정하면서 이러한 이미지를 디자인 화면에 추가할 수 있습니다.

MainPage.xaml의 시각적 표시를 구성하는 이미지는 로고(방패), 배경 이미지(녹색 필름스트립), 단추(닭), 세 가지입니다. 각 이미지는 다른 방식으로 구현됩니다. 첫 번째 이미지인 로고(MainLogo.png)는 간단한 Image 컨트롤입니다. 두 번째 이미지인 필름스트립(FilmStrip.png)은 반복되어 훨씬 큰 이미지 모양을 나타내는 좁은 이미지입니다. 필름스트립은 런타임 C# 코드를 사용하여 구현됩니다. 세 번째 이미지인 닭 단추(ChickenSprite.png)는 Image 컨트롤로 시작하지만 컨트롤로 만들기 옵션을 사용하여 Button 컨트롤로 만들어집니다.

앱을 빌드할 때 주로 속성 패널의 디자인 화면에 추가하는 요소에 속성을 적용하여 앱의 모양을 수정합니다. 속성 패널에 있는 속성을 범주별, 이름별 또는 소스별로 정렬할 수 있습니다.

Blend 속성 패널 - 정렬 기준

속성을 범주별로 정렬하는 경우 속성이 사전순으로 정렬된 범주별로 그룹화되어 표시됩니다. 속성을 이름별로 정렬하는 경우 사용 가능한 모든 속성의 목록이 사전순으로 표시됩니다. 속성을 소스별로 정렬하는 경우 속성이 로컬, 바인딩 및 리소스 또는 기타로 그룹화되고 그 범주 내에 사전순으로 정렬됩니다.

다음 절차에서는 Image 컨트롤을 사용하여 PickaFlick 앱에 대한 기본 로고를 추가 및 스타일 지정합니다.

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

  1. 프로젝트 패널에서 MainLogo.png를 두 번 클릭하여 디자인 화면에 추가합니다.

    이미지는 디자인 화면에 나타나고 이미지 컨트롤이 개체 및 타임라인 패널에 추가됩니다.

    Blend 개체 및 타임라인 패널

    속성 패널의 공용 범주에서 이미지 컨트롤의 소스 특성은 Assets/MainLogo.png입니다.

    Blend Image 컨트롤 공용 속성
  2. 기본 로고가 포함된 Image 컨트롤을 더 쉽게 관리하려면 속성 패널의 맨 위에 있는 이름 텍스트 상자에 MainLogo를 입력합니다. 개체 및 타임라인 패널에서 Image 컨트롤의 이름이 MainLogo로 바뀌었습니다.

    Blend - 개체 및 타임라인 패널 - 기본 로고
  3. 속성 패널의 레이아웃 범주에서 여백 오른쪽에 있는 고급 속성 표시기 12e06962-5d8a-480d-a837-e06b84c545bb를 클릭한 다음 다시 설정을 클릭합니다.

    팁

    고급 속성 표시기 레이블은 리소스 및 데이터 바인딩에 따라 변경됩니다. 이 인스턴스에서는 레이블이 로컬입니다.

    Blend 여백 고급 속성
  4. 공용 범주, 늘이기 목록에서 없음을 클릭합니다.

    Blend Stretch 속성 없음

    이제 기본 로고가 디자인 화면의 중앙에 나타납니다.

    Blend PickaFlick MainLogo.png 가운데 정렬

필름스트립(FilmStrip.png)은 반복되어 훨씬 큰 이미지 모양을 나타내는 좁은 이미지입니다. 이미지 바둑판식 배열을 지원하는 속성인 TileBrush.TileMode 속성은 Windows 스토어 앱에서 지원되지 않기 때문에 PickaFlick 앱은 C# 코드를 사용하여 레이아웃 컨테이너에 일련의 Image 컨트롤, 이 경우에는 FilmStrip이라는 모눈 컨트롤을 배열합니다.

Blend는 코드 작업에 최적화되어 있지 않기 때문에 Blend에서 기본 모눈을 만든 다음 Visual Studio로 전환하여 코드를 개발합니다.

필름스트립 이미지 컨테이너를 만들려면

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

    팁

    검색 상자에 Grid를 입력하여 모눈을 찾거나 컨트롤을 열고 패널을 클릭한 다음 모눈을 클릭합니다.

  2. 개체 및 타임라인 패널에서 두 번째 모눈 컨트롤을 클릭한 다음 FilmStrip을 입력하여 이름을 바꿉니다.

    Blend FilmStrip 모눈 - 개체 및 타임라인 패널
  3. FilmStrip을 선택한 상태에서 속성 패널, 레이아웃 범주에서 너비2560으로 설정하고(더 넓은 범위의 장치를 수용하기 위함) 높이218(FilmStrip.png의 높이)로 설정합니다.

    컨트롤 표시기가 디자인 화면의 맨 위 전체에 걸쳐 있습니다.

  4. 레이아웃 범주에서 VerticalAlignment가운데 맞춤 Blend VerticalAlignment 가운데으로 설정합니다.

    이제 컨트롤 표시기가 디자인 화면의 가운데에 있습니다.

필름스트립 모눈을 만들었으므로 Visual Studio로 전환하여 코드를 완료할 준비가 되었습니다.

프로젝트에서 작업하는 동안 Blend와 Visual Studio 간을 간단하게 전환할 수 있습니다. 한 컴퓨터에서 동일한 프로젝트 파일을 Blend와 Visual Studio 모두에서 동시에 열 수도 있습니다. 한 도구에서 파일을 변경하고 저장한 다음 다른 도구로 전환할 때 해당 파일을 다시 로드하기만 하면 프로젝트 보기를 새로 고칠 수 있습니다.

중요 중요

코드를 복사하여 Blend 또는 Visual Studio에 붙여 넣을 수 있습니다. 그러나 Visual Studio는 C# 작성 또는 편집용으로 권장되는 도구입니다. 이 단계에서는 심지어 단일 프로젝트 작업을 할 때에도 얼마나 쉽게 Blend와 Visual Studio 간에 전환할 수 있는지를 보여 줍니다.

Visual Studio에서 작업하는 동안 프로젝트에 새 파일을 추가하는 경우 모두 저장(Ctrl+Shift+S)을 사용하여 프로젝트를 저장하거나 Blend로 다시 전환하기 전에 응용 프로그램을 빌드하고 실행해야 합니다. Blend로 전환할 때 프로젝트를 다시 로드할지를 묻는 메시지가 나타납니다. 를 클릭합니다. 그러면 Blend의 프로젝트에 새 파일이 추가됩니다.

다음으로 Visual Studio로 전환하여 응용 프로그램의 기본 페이지가 로드되면 필름스트립 이미지를 렌더링할 코드를 만듭니다.

이 절차에서는 TileCanvas.cs라는 새 클래스 파일을 만듭니다. 이것은 Blend에서 만든 Grid 컨트롤(FilmStrip)에 포함될 일련의 이미지 컨트롤을 정렬하는 코드입니다.

TileCanvas.cs를 만들려면

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

    Blend - Visual Studio에서 편집
  2. Visual Studio의 솔루션 탐색기에서 프로젝트를 마우스 오른쪽 단추로 클릭하고 추가를 클릭한 다음 클래스를 클릭합니다.

    Visual Studio 클래스 추가
  3. 새 항목 추가 대화 상자에서 클래스를 선택합니다. 이름 텍스트 상자에 TileCanvas.cs를 입력한 다음 추가를 클릭합니다.

    Visual Studio - 새 항목 추가 - 클래스
  4. TileCanvas.cs에서 using System.Threading.Tasks; 뒤에 다음 using 문을 추가합니다.

    using Windows.UI;
    using Windows.UI.Xaml;
    using Windows.UI.Xaml.Controls;
    using Windows.UI.Xaml.Controls.Primitives;
    using Windows.UI.Xaml.Data;
    using Windows.UI.Xaml.Input;
    using Windows.UI.Xaml.Media;
    using Windows.UI.Xaml.Navigation;
    using Windows.UI.Xaml.Media.Imaging;
    using Windows.Foundation;
    
  5. class TileCanvas {}를 삭제하고 다음 코드로 바꿉니다(https://gist.github.com/robfe/3077863#file-tilecanvas-cs에서 확인 가능하고 Apache 2.0 라이선스의 약관에 따른 권한으로 사용되는 Rob Fonseca-Ensor의 TileCanvas.cs에 기반).

    public class TileCanvas : Canvas
        {
            public static readonly DependencyProperty ImageSourceProperty = DependencyProperty.Register("ImageSource", typeof(ImageSource), typeof(TileCanvas), new PropertyMetadata(null, ImageSourceChanged));
    
            private Size lastActualSize;
    
            public TileCanvas()
            {
                LayoutUpdated += OnLayoutUpdated;
            }
    
            public ImageSource ImageSource
            {
                get { return (ImageSource)GetValue(ImageSourceProperty); }
               set { SetValue(ImageSourceProperty, value); }
            }
    
            private void OnLayoutUpdated(object sender, object o)
            {
                var newSize = new Size(ActualWidth, ActualHeight);
                if (lastActualSize != newSize)
                {
                    lastActualSize = newSize;
                    Rebuild();
                }
            }
    
            private static void ImageSourceChanged(DependencyObject o, DependencyPropertyChangedEventArgs args)
            {
                TileCanvas self = (TileCanvas)o;
                var src = self.ImageSource;
                if (src != null)
                {
                    var image = new Image { Source = src };
                    image.ImageOpened += self.ImageOnImageOpened;
                    image.ImageFailed += self.ImageOnImageFailed;
    
                    //add it to the visual tree to kick off ImageOpened
                    self.Children.Add(image);
                }
            }
    
            private void ImageOnImageFailed(object sender, ExceptionRoutedEventArgs exceptionRoutedEventArgs)
            {
                var image = (Image)sender;
                image.ImageOpened -= ImageOnImageOpened;
                image.ImageFailed -= ImageOnImageFailed;
                Children.Add(new TextBlock { Text = exceptionRoutedEventArgs.ErrorMessage, Foreground = new SolidColorBrush(Colors.Red) });
            }
    
            private void ImageOnImageOpened(object sender, RoutedEventArgs routedEventArgs)
            {
                var image = (Image)sender;
                image.ImageOpened -= ImageOnImageOpened;
                image.ImageFailed -= ImageOnImageFailed;
                Rebuild();
            }
    
            private void Rebuild()
            {
                var bmp = ImageSource as BitmapSource;
                if (bmp == null)
                {
                    return;
                }
    
                var width = bmp.PixelWidth;
                var height = bmp.PixelHeight;
    
                if (width == 0 || height == 0)
                {
                    return;
                }
    
                Children.Clear();
                for (int x = 0; x < ActualWidth; x += width)
                {
                    for (int y = 0; y < ActualHeight; y += height)
                    {
                        var image = new Image { Source = ImageSource };
                        Canvas.SetLeft(image, x);
                        Canvas.SetTop(image, y);
                        Children.Add(image);
                    }
                }
                Clip = new RectangleGeometry { Rect = new Rect(0, 0, ActualWidth, ActualHeight) };
            }
        }
    

    Ctrl+S를 눌러 변경 내용을 저장합니다.

페이지에 Windows.UI.Xaml.Media.Imaging 네임스페이스에 대한 참조를 추가하면 URI를 사용하여 이미지 소스를 참조합니다. 이 URI는 FilmStrip.png를 가리킵니다.

Windows.UI.Xaml.Media.Imaging 네임스페이스에 대한 참조를 추가하려면

  • 솔루션 탐색기에서 MainPage.xaml을 확장한 다음 MainPage.xaml.cs를 두 번 클릭하여 엽니다. using Windows.UI.Xaml.Navigation; 뒤에 다음 문을 추가합니다.

    using Windows.UI.Xaml.Media.Imaging;
    

TileCanvas.cs는 FilmStrip 모눈을 Image 컨트롤로 채우는 코드를 제공합니다. Windows.UI.Xaml.Media.Imaging 네임스페이스를 참조하면 특정 이미지 URI를 가리킬 수 있습니다. 코드를 완료하려면 TileCanvas.cs를 호출하고 MainPage.xaml이 로드되면 이미지 URI를 지정하는 Page_Loaded 이벤트를 추가해야 합니다.

MainPage.xaml에 PageLoaded 이벤트를 추가하려면

  1. 솔루션 탐색기에서 MainPage.xaml을 두 번 클릭하여 엽니다.

  2. XAML 뷰에서 페이지의 맨 위에 있는 Page 머리글 안쪽을 클릭합니다. 속성 패널에서 이벤트 단추 Visual Studio 이벤트 처리기 아이콘를 클릭합니다.

  3. 로드됨 텍스트 상자 안쪽을 두 번 클릭하여 MainPage.xaml에 Page_Loaded 이벤트를 추가합니다.

    Visual Studio Page_Loaded 이벤트 처리기

    MainPage.xaml.cs가 열리고 페이지에 다음 코드가 추가됩니다.

    private void Page_Loaded(object sender, RoutedEventArgs e) {}
    
  4. private void Page_Loaded(object sender, RoutedEventArgs e) 뒤에 오는 중괄호 사이에 다음 코드를 붙여 넣습니다.

                TileCanvas tc = new TileCanvas();
                BitmapImage img = new BitmapImage();
                Uri baseUri = new Uri("ms-appx:///");
                img.UriSource = new Uri(baseUri, "Assets/FilmStrip.png");
                tc.ImageSource = img;
                FilmStrip.Children.Add(tc);
    

    Ctrl+Shift+S를 눌러 프로젝트에 모든 변경 내용을 저장합니다.

  5. Blend로 다시 전환합니다. 프로젝트를 다시 로드할지 묻는 메시지가 표시됩니다. 를 클릭합니다.

    Blend 파일 다시 로드 메시지
  6. F5 키를 눌러 프로그램을 빌드하고 실행합니다. 필름스트립은 예상대로 앱 전체에 걸쳐 표시되지만 기본 로고 앞에 있어 잘 보이지 않습니다. Alt+F4를 눌러 응용 프로그램을 닫습니다.

  7. Blend의 개체 및 타임라인 패널에서 FilmStrip이 개체 계층의 MainLogo 아래에 있습니다. XAML 파일에서 개체의 쌓기(ZIndex라고도 알려져 있음)는 계층의 순서에 따라 결정됩니다. FilmStrip을 클릭하고 끌어 계층의 MainLogo 앞에 나타나도록 합니다.

    팁

    또는 속성 패널에서 ZIndex를 설정한 다음 패널의 왼쪽 아래에 있는 Z 순서로 정렬 Blend - Z 순서로 정렬(XAML)을 클릭하여 개체 및 타임라인 패널의 요소를 ZIndex 순서로 표시하도록 선택할 수 있습니다.

    Blend - 개체 순서 - 개체 및 타임라인 패널
    팁

    삽입 지점은 파란색 표시기로 표시됩니다.

  8. F5 키를 눌러 응용 프로그램을 빌드하고 실행합니다. 이제 예상대로 필름스트립이 기본 로고 뒤에 나타납니다. Alt+F4를 눌러 응용 프로그램을 닫습니다.

PickaFlick 앱의 세 번째 이미지는 단추 이미지(ChickenSprite.png)입니다. 디자인 화면에 Image 컨트롤을 추가한 다음 그 이미지를 Button 사용자 컨트롤로 변환하여 이미지에서 단추를 신속하게 만들 수 있습니다. 그런 다음 Button 컨트롤을 만들 때 자동으로 생성되는 단추 템플릿을 수정할 수 있습니다.

다음 절차에서는 디자인 화면에 닭 이미지를 추가한 다음 컨트롤로 만들기 명령을 사용하여 Button 컨트롤로 변환합니다.

ChickenButton 컨트롤을 만들려면

  1. 개체 및 타임라인 패널에서 모눈이 선택되었는지 확인합니다. 프로젝트 패널에서 Assets 폴더를 연 다음 ChickenSprite.png를 두 번 클릭하여 디자인 화면에 추가합니다.

  2. 개체 및 타임라인 패널에서 Image 컨트롤을 클릭한 다음 ChickenSprite를 입력하여 이름을 바꿉니다. Enter 키를 누릅니다.

    Blend - ChickenSprite - 개체 및 타임라인 패널
  3. 도구 메뉴에서 컨트롤로 만들기를 클릭합니다.

    컨트롤로 만들기 대화 상자가 열립니다.

    Blend - 컨트롤로 만들기 대화 상자
  4. 컨트롤로 만들기 대화 상자의 컨트롤 목록에서 단추를 클릭합니다.

  5. 이름(키) 텍스트 상자에 ChickenButton을 입력합니다.

  6. 정의 위치에서 이 문서가 선택되었습니다. 이 문서 드롭다운 목록에 페이지: <이름 없음>이 나타납니다. 확인을 클릭합니다.

이제 ChickenSprite Image 컨트롤이 Button 컨트롤입니다. 이제 개체 및 타임라인 패널(템플릿 편집 모드라고도 함)에 단추 템플릿이 나타납니다. 템플릿은 패널의 맨 위에 호출되고(ChickenButton(단추 템플릿)) 템플릿 개체 계층이 표시됩니다(모눈, ChickenSprite 컨트롤 및 ContentPresenter).

Blend - 단추 템플릿 - 개체 및 타임라인

이제 컨트롤 템플릿을 사용자 지정할 준비가 되었습니다. 먼저 ContentPresenter를 제거합니다(디자인 화면에 "단추"라는 텍스트를 표시하는 컨트롤). 컨테이너 형식을 변경한 다음 컨테이너가 이미지의 위쪽 절반만 표시하도록 표시를 수정합니다. 이미지의 나머지 절반은 숨겨집니다.

단추 템플릿을 수정하려면

  1. ContentPresenter를 제거하려면 개체 및 타임라인 패널에서 [ContentPresenter]를 마우스 오른쪽 단추로 클릭한 다음 삭제를 클릭합니다.

  2. 모눈을 마우스 오른쪽 단추로 클릭한 다음 레이아웃 형식 변경을 클릭한 다음 Viewbox를 클릭하여 레이아웃 컨테이너 형식을 변경합니다.

    Blend - 레이아웃 형식 변경 - ViewBox
  3. Viewbox 의 크기를 이미지 높이의 절반으로 조정하려면 속성 패널의 레이아웃 범주에서 높이180으로 설정합니다.

  4. 이미지의 크기가 Viewbox의 높이에 맞게 조정됩니다. 이 문제를 해결하려면 속성 패널의 모양 범주에서 늘이기없음으로 설정합니다.

    이제 이미지는 Viewbox 컨트롤 너비 전체에 걸쳐 표시되며 이미지의 위쪽 절반만 표시됩니다.

  5. 템플릿 편집을 마쳤으므로 개체 및 타임라인 패널의 맨 위에 있는 범위를 {0}(으)로 되돌립니다. 아이콘 범위 단추로 돌아가기을 클릭하여 템플릿 편집 모드를 종료합니다.

  6. 단추 컨트롤을 디스플레이의 중앙으로 이동하려면 여백 오른쪽에 있는 레이아웃 범주의 고급 속성 아이콘 12e06962-5d8a-480d-a837-e06b84c545bb을 클릭한 다음 다시 설정을 클릭합니다. HorizontalAlignment 옆의 가운데 맞춤 아이콘 Blend - HorizontalAlignment - 가운데을 클릭합니다.

PickaFlick 앱을 실행할 때 ChickenButton은 클릭하면 영화 상세 정보 페이지를 여는 컨트롤입니다. 포인터를 ChickenButton 위로 이동할 때 닭은 이동하는 것처럼 보입니다. 이 양방향 효과는 컨트롤에 적용되는 시각적 상태 변경입니다. 기본적으로 이미지의 위쪽 절반만 표시됩니다. 해당 이미지를 가리키면 이미지의 숨겨진 아래쪽 부분이 표시되어 기본 보기가 대체되고 애니메이션이 시뮬레이션됩니다.

상태 변경을 추가하려면 ChickenButton 템플릿을 편집합니다.

ChickenButton 컨트롤에 시각적 상태 변경을 추가하려면

  1. 개체 및 타임라인에서 단추를 마우스 오른쪽 단추로 클릭하고 템플릿 편집을 가리킨 다음 현재 템플릿 편집을 클릭합니다.

    Blend - 현재 템플릿 편집

    또는 문서 탭 아래의 이동 경로 탐색 막대에서 템플릿을 클릭할 수도 있습니다.

    Blend - 이동 경로 탐색 막대의 단추 템플릿
  2. 개체 및 타임라인 패널에서 ChickenSprite을 클릭합니다.

  3. 상태 패널에서 PointerOver를 클릭합니다.

    Blend - 상태 패널 - PointerOver
  4. 속성 패널의 레이아웃 범주에서 위쪽 여백-179로 설정합니다.

    주의 정보 주의

    위쪽 여백-180으로 설정하면 이미지의 위쪽 및 아래쪽 절반 모두 표시됩니다.

    Blend - 속성 패널 - 위쪽 여백
  5. 문서 탭 아래의 디자인 창에서 기록 모드 표시기 Blend - 기록 모드 표시기를 클릭하여 상태 기록을 끕니다.

    Blend - 상태 기록 해제
  6. 개체 및 타임라인 패널의 위쪽에 있는 범위를 {0}(으)로 되돌립니다. 아이콘 범위 단추로 돌아가기을 클릭하여 템플릿 편집 모드를 종료합니다.

F5 키를 눌러 응용 프로그램을 빌드하고 실행합니다. 닭 이미지를 가리켜 닭 이미지가 상태를 전환하는지 확인합니다. Alt+F4를 눌러 응용 프로그램을 닫습니다.

이제 세부 정보 페이지를 만들 준비가 되었습니다. 계속하려면 Blend를 사용하여 첫 Windows 스토어 앱 만들기, 2부: 세부 정보 페이지(XAML 및 C#)를 참조하십시오.

표시: