Windows 앱
콘텐츠의 테이블 축소
콘텐츠의 테이블 확장

타일 템플릿에 이미지를 추가하는 방법(JavaScript 및 HTML을 사용한 Metro 스타일 앱)

[이 설명서는 임시 설명서로 변경될 수 있습니다.]

이 항목에서는 타일 템플릿에 사용할 로컬 이미지와 웹 이미지를 모두 지정하는 방법에 대해 설명합니다.

알아야 할 사항

기술

  • Windows Runtime

사전 요구 사항

  • 타일 및 알림 용어와 개념에 대한 기본 지식. 자세한 내용은 타일, 배지 및 알림을 참조하세요.
  • Windows 런타임 API를 사용하여 JavaScript로 기본 Metro 스타일 앱을 만들 수 있는 능력

지침

단계 1: 이미지가 포함된 템플릿 지정

다음 코드에서는 단일 와이드 이미지가 포함된 TileWideImageAndText01 템플릿을 사용합니다. 모든 템플릿의 이미지는 크기가 200 KB 미만이고 1024 x 1024 픽셀보다 작아야 합니다.


 var template = Windows.UI.Notifications.TileTemplateType.tileWideImageAndText01;

단계 2: 템플릿의 콘텐츠 검색

TileUpdateManager.getTemplateContent 메서드를 통해 빈 XML 템플릿을 검색합니다.


var tileXml  = Windows.UI.Notifications.TileUpdateManager.getTemplateContent(template);

단계 3: 템플릿에서 이미지 요소 가져오기

이 템플릿에서는 하나의 이미지 슬롯만 사용할 수 있음을 이미 알고 있지만 포함된 이미지 수에 관계없이 모든 템플릿에 다음 코드를 사용할 수 있습니다.


var tileImageAttributes = tileXml.getElementsByTagName("image");

단계 4: 템플릿 요소에 앱 패키지의 로컬 이미지 할당

이 유형의 이미지는 Microsoft Visual Studio 솔루션 파일에 포함되며 앱의 일부로 패키징됩니다. 이러한 이미지는 "ms-appx:///" 접두사를 사용하여 액세스합니다.

여러 이미지 요소가 있는 것처럼 이미지 요소 모음을 탐색하는 대신 이미지를 직접 할당합니다. 모음은 0부터 시작하는 배열입니다. 화면 판독기 등의 접근성 용도로 대체 텍스트도 할당합니다.


tileImageAttributes[0].setAttribute("src", "ms-appx:///images/redWide.png");
tileImageAttributes[0].setAttribute("alt", "red graphic");

단계 5: 템플릿 요소에 앱 로컬 저장소의 로컬 이미지 할당

이 유형의 이미지는 앱의 로컬 저장소에 저장됩니다. 이 위치는 Windows.Storage.ApplicationData.current.localFolder에서 반환된 위치입니다. 이러한 이미지는 "ms-appdata:///local/" 접두사를 사용하여 액세스합니다.

다음 예제에서는 마지막 단계를 반복하지만 ms-appdata:///local/ 프로토콜을 사용하여 앱의 로컬 저장소에 있는 이미지에 액세스합니다.


tileImageAttributes[0].setAttribute("src", "ms-appdata:///local/redWide.png");
tileImageAttributes[0].setAttribute("alt", "red graphic");

단계 6: 템플릿 요소에 웹 이미지 할당

이 예에서는 마지막 단계를 반복하지만 http:// 프로토콜을 사용하여 앱의 로컬 저장소에 있는 이미지에 액세스합니다. https:// 프로토콜을 사용할 수도 있습니다.


tileImageAttributes[0].setAttribute("src", "http://www.microsoft.com/redWide.png");
tileImageAttributes[0].setAttribute("alt", "red graphic");

타일 알림 XML 페이로드의 visual 요소에는 baseUri 특성이 포함되어 있습니다. baseUri 특성의 값은 이미지 src 특성에서 상대 URI(Uniform Resource Identifier)와 결합되는 기본 경로(예: "http://www.microsoft.com/")를 제공합니다. baseUri가 "http://www.microsoft.com/"으로 설정된 경우 이 샘플 코드에서


 tileImageAttributes[0].setAttribute("src", "http://www.microsoft.com/redWide.png");

줄을 다음과 같이 줄일 수 있습니다.


 tileImageAttributes[0].setAttribute("src", "redWide.png");

설명

여러 이미지가 포함된 타일 알림에서는 해당 이미지가 이 예에 표시된 이미지 원본 유형의 모든 조합을 사용할 수 있습니다.

관련 항목

앱 타일 및 배지 샘플
타일 XML 스키마
타일 크기
타일 및 타일 알림 개요
타일에 대한 지침 및 검사 목록
타일을 업데이트할 수 있는지 여부를 확인하는 방법
타일 알림을 지우는 방법
타일 알림 예약 방법
타일에 대해 정기 알림을 설정하는 방법
타일 템플릿을 선택 및 사용하는 방법
동일한 알림에서 정방형 타일과 큰 타일을 지정하는 방법
빠른 시작: Visual Studio 매니페스트 편집기를 사용하여 기본 타일 만들기
타일 템플릿 선택
Windows.UI.Notifications

 

 

표시:
© 2018 Microsoft