빠른 시작: ListView 추가(HTML)

아티클
03/04/2016

[ 이 문서는 Windows 런타임 앱을 작성하는 Windows 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]

대부분의 앱은 연락처 목록, 갤러리 이미지 또는 메일 받은 편지함의 내용 등과 같은 데이터 목록을 표시합니다. 이러한 목록은 데이터베이스, 웹 또는 JSON 데이터 원본에서 데이터를 가져올 수 있습니다. WinJS는 데이터를 표시하는 데 사용할 수 있는 ListView 컨트롤을 제공합니다.

사전 요구 사항

WinJS 컨트롤을 사용하는 JavaScript로 작성한 기본 Windows 런타임 앱을 만들 수 있어야 합니다. WinJS 컨트롤 시작에 대한 자세한 내용은 빠른 시작: WinJS 컨트롤 및 스타일 추가를 참조하세요.

ListView란?

ListView는 IListDataSource의 데이터를 사용자 지정 가능한 목록이나 그리드에 표시하는 WinJS 컨트롤입니다. WinJS에서는 여러 유형의 IListDataSource 개체를 제공합니다.

List를 사용하여 데이터 배열에서 IListDataSource를 만들 수 있습니다.
StorageDataSource를 사용하여 파일과 디렉터리에 대한 정보에 액세스할 수 있습니다.

웹 서비스 또는 데이터베이스와 같은 일부 다른 유형의 데이터 공급자에 연결되는 사용자 지정 데이터 원본도 만들 수 있습니다. 자세한 내용은 사용자 지정 데이터 원본을 만드는 방법을 참조하세요.

ListView 만들기

Hh465496.wedge(ko-kr,WIN.10).gif ListView를 만들려면

WinJS에 대한 참조를 HTML 파일에 추가합니다(없는 경우).

최신 버전의 WinJS를 사용하려면 다음을 수행합니다.

WinJS 얻기에서 최신 버전을 다운로드하여 앱 또는 웹 사이트의 디렉터리에 복사합니다.
WinJS 기능을 사용하는 앱 또는 웹 사이트의 각 페이지에 WinJS CSS 및 스크립트 참조를 추가합니다.


<!-- WinJS references -->
<link href="/WinJS/css/ui-dark.css" rel="stylesheet">
<script src="/WinJS/js/WinJS.js"></script>

다음 예제에서는 Microsoft Visual Studio에서 새로운 비어 있는 앱 프로젝트를 만들 때 생성되는 default.html 파일의 HTML을 보여줍니다.


<!-- default.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ListViewExample</title>

    <!-- WinJS references -->
    <link href="/WinJS/css/ui-dark.css" rel="stylesheet">
    <script src="/WinJS/js/WinJS.js"></script>

    <!-- ListViewExample references -->
    <link href="/css/default.css" rel="stylesheet">
    <script src="/js/default.js"></script>
</head>
<body>
    <p>Content goes here</p>
</body>
</html>

HTML 파일에서 div 요소를 만들고 data-win-control 속성을 WinJS.UI.ListView로 설정합니다.
```
<div id="basicListView" 
    data-win-control="WinJS.UI.ListView">  
</div>
```

HTML 파일과 함께 제공되는 JavaScript 코드에서 HTML이 로드될 때 WinJS.UI.processAll 함수를 호출합니다.

WinJS.UI.processAll();

다음 예제에서는 새 응용 프로그램 프로젝트를 만들 때 생성된 default.html 파일과 함께 제공되는 default.js 파일을 보여 줍니다.


(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
    WinJS.strictProcessing();

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize
                // your application here.
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }
            args.setPromise(WinJS.UI.processAll());
        }
    };

    app.oncheckpoint = function (args) {
        // TODO: This application is about to be suspended. Save any state
        // that needs to persist across suspensions here. You might use the
        // WinJS.Application.sessionState object, which is automatically
        // saved and restored across suspension. If you need to complete an
        // asynchronous operation before your application is suspended, call
        // args.setPromise().
    };

    app.start();
})();

이 예제는 ListView를 시작 페이지(default.html)에 추가하는 경우에 작동합니다. ListView를 페이지 컨트롤에 추가하는 경우에는 WinJS.UI.processAll을 호출할 필요가 없습니다. 페이지 컨트롤이 자동으로 이 작업을 수행합니다. 사용자 지정 HTML에 ListView를 추가하는 경우 DOMContentLoaded 이벤트를 사용하여 WinJS.UI.processAll을 호출할 수 있습니다. 컨트롤 활성화에 대한 자세한 내용은 빠른 시작: WinJS 컨트롤 및 스타일 추가를 참조하세요.

이 코드는 빈 ListView를 만듭니다. 앱을 실행하면 아직 아무것도 나타나지 않습니다. 다음 섹션에서는 표시할 ListView의 데이터를 만듭니다.

데이터 정의

데이터 원본을 만들 코드를 별도의 JavaScript 파일로 만들면 유지 관리하기가 더욱 수월합니다. 이 섹션에서는 JavaScript 파일을 만드는 방법, List를 만드는 방법 그리고 WinJS.Namespace.define 기능을 사용하여 데이터가 앱의 나머지 부분에 접근성 있도록 만드는 방법을 설명합니다.

Visual Studio를 사용하여 프로젝트에 데이터 파일을 추가합니다. 솔루션 탐색기에서 프로젝트의 js 폴더를 마우스 오른쪽 단추로 클릭하고 추가 > 새 항목을 선택합니다. 새 항목 추가 대화 상자가 나타납니다.
JavaScript 파일을 선택합니다. 파일의 이름을 "dataExample.js"로 지정합니다. 추가를 클릭하여 파일을 만듭니다. Visual Studio에서 dataExample.js라는 비어 있는 JavaScript 파일을 만듭니다.
dataExample.js를 엽니다. 익명 함수를 만들고 strict 모드를 켭니다.

기본 앱 코딩에 설명된 대로 프로그램에서 JavaScript 코드를 익명 함수에 래핑하여 코드를 캡슐화하고 strict 모드를 사용하는 것이 좋습니다.
```
(function () {
    "use strict"; 





})();
```

데이터 배열을 만듭니다. 다음 예제에서는 개체 배열을 만듭니다. 각 개체에 세 가지 속성(title, text 및 image)이 있습니다.

(function () {
    "use strict";

    var dataArray = [
    { title: "Basic banana", text: "Low-fat frozen yogurt", picture: "images/60banana.png" },
    { title: "Banana blast", text: "Ice cream", picture: "images/60banana.png" },
    { title: "Brilliant banana", text: "Frozen custard", picture: "images/60banana.png" },
    { title: "Orange surprise", text: "Sherbet", picture: "images/60orange.png" },
    { title: "Original orange", text: "Sherbet", picture: "images/60orange.png" },
    { title: "Vanilla", text: "Ice cream", picture: "images/60vanilla.png" },
    { title: "Very vanilla", text: "Frozen custard", picture: "images/60vanilla.png" },
    { title: "Marvelous mint", text: "Gelato", picture: "images/60mint.png" },
    { title: "Succulent strawberry", text: "Sorbet", picture: "images/60strawberry.png" }
    ];

})();

참고 코드를 단계별로 수행하면 사진을 로컬 컴퓨터의 파일로 변경하거나, ListView 시작 샘플(동일한 샘플은 아니지만 동일한 이미지를 사용함)을 다운로드하여 사진을 가져올 수 있습니다. 이미지를 추가하지 않고 샘플이 여전히 실행됩니다.

배열을 사용하여 List 개체를 만듭니다.

(function () {
    "use strict";

    var dataArray = [
    { title: "Basic banana", text: "Low-fat frozen yogurt", picture: "images/60banana.png" },
    { title: "Banana blast", text: "Ice cream", picture: "images/60banana.png" },
    { title: "Brilliant banana", text: "Frozen custard", picture: "images/60banana.png" },
    { title: "Orange surprise", text: "Sherbet", picture: "images/60orange.png" },
    { title: "Original orange", text: "Sherbet", picture: "images/60orange.png" },
    { title: "Vanilla", text: "Ice cream", picture: "images/60vanilla.png" },
    { title: "Very vanilla", text: "Frozen custard", picture: "images/60vanilla.png" },
    { title: "Marvelous mint", text: "Gelato", picture: "images/60mint.png" },
    { title: "Succulent strawberry", text: "Sorbet", picture: "images/60strawberry.png" }
    ];

    var dataList = new WinJS.Binding.List(dataArray); 

})();

네임스페이스를 선언하고 List를 공용 멤버로 추가하여 List를 노출합니다.

방금 작성한 코드는 익명 함수 안에 있으므로 공개적으로 액세스할 수 없습니다. 익명 함수를 사용하는 것은 이런 이유 때문이며, 개인 데이터를 비공개로 유지할 수 있습니다. ListView가 List에 액세스할 수 있으려면 공개적으로 접근성 있도록 설정해야 합니다. 한 가지 방법은 WinJS.Namespace.define 함수를 사용하여 네임스페이스를 만들고 List를 멤버 중 하나로 추가하는 것입니다.

WinJS.Namespace.define 함수는 만들 네임스페이스 이름과 하나 이상의 속성/값 쌍을 포함하는 개체라는 두 매개 변수를 사용합니다. 각 속성은 멤버의 공개 이름이고 각 값은 노출할 개인 코드의 기본 변수, 속성 또는 함수입니다.

다음 예제에서는 List를 반환하는 itemList라는 공용 멤버를 노출하는 DataExample이라는 네임스페이스를 만듭니다.

(function () {
    "use strict";

    var dataArray = [
    { title: "Basic banana", text: "Low-fat frozen yogurt", picture: "images/60banana.png" },
    { title: "Banana blast", text: "Ice cream", picture: "images/60banana.png" },
    { title: "Brilliant banana", text: "Frozen custard", picture: "images/60banana.png" },
    { title: "Orange surprise", text: "Sherbet", picture: "images/60orange.png" },
    { title: "Original orange", text: "Sherbet", picture: "images/60orange.png" },
    { title: "Vanilla", text: "Ice cream", picture: "images/60vanilla.png" },
    { title: "Very vanilla", text: "Frozen custard", picture: "images/60vanilla.png" },
    { title: "Marvelous mint", text: "Gelato", picture: "images/60mint.png" },
    { title: "Succulent strawberry", text: "Sorbet", picture: "images/60strawberry.png" }
    ];

    var dataList = new WinJS.Binding.List(dataArray);

    // Create a namespace to make the data publicly
    // accessible. 
    var publicMembers =
        {
            itemList: dataList 
        };
    WinJS.Namespace.define("DataExample", publicMembers); 

})();

ListView에서 액세스할 수 있는 데이터 원본을 만들었습니다. 다음으로 해당 데이터를 ListView에 연결합니다.

데이터를 ListView에 연결

ListView를 포함하는 HTML 파일의 head 섹션에서 방금 만든 데이터 파일(dataExample.js)에 대한 참조를 추가합니다.
```
<head>
    

    
    <script src="/js/dataExample.js"></script>

</head>
```
마지막 섹션에서 만든 데이터를 사용하여 ListView 컨트롤의 itemDataSource 속성을 설정합니다.

itemDataSource 속성은 IListDataSource 개체를 사용합니다. List 개체는 IListDataSource가 아니지만 해당 개체의 IListDataSource 버전을 반환하는 dataSource 속성이 있습니다.

데이터를 연결하려면 ListView 컨트롤의 itemDataSource 속성을 DataExample.itemList.dataSource로 설정합니다.
```
<div id="basicListView"
    data-win-control="WinJS.UI.ListView"
    data-win-options="{ itemDataSource : DataExample.itemList.dataSource }">
</div>  
```

앱을 실행합니다. ListView는 데이터 원본의 속성과 값을 표시합니다.

템플릿 없이 데이터 원본 콘텐츠 표시.

이것이 우리가 원하는 바로 그 모양은 아닙니다. 우리는 제목과 텍스트 필드의 값만 표시하려 하며, 이미지 경로가 아닌 실제 이미지를 표시하려 합니다. 원하는 렌더링을 가져오려면 Template을 정의해야 합니다. 다음은 그 방법입니다.

항목 템플릿 정의

이 시점에서 ListView는 필요한 데이터는 있지만 데이터를 표시하는 방법을 모릅니다. 이런 이유로 각 목록 항목을 표시하는 데 사용할 태그가 포함된 항목 템플릿이 필요합니다. 항목 템플릿에는 대부분의 다른 컨트롤이 포함될 수 있지만(자세한 내용은 대화형 요소 추가 섹션 참조) FlipView 또는 다른 ListView는 포함할 수 없습니다.

템플릿을 만드는 두 가지 방법이 있습니다. 태그를 사용하여 WinJS.Binding.Template을 정의하거나 템플릿 함수를 만들 수 있습니다. 이 예제에서는 태그를 사용하여 템플릿을 만듭니다. 템플릿 함수를 만드는 방법에 대한 자세한 내용은 itemTemplate 속성을 참조하세요.

WinJS.Binding.Template은 쉽게 만들 수 있습니다. 각 목록 항목을 표시할 때 사용할 태그를 정의한 다음 각 데이터 필드가 나타날 위치를 표시합니다.

HTML에서 WinJS.Binding.Template 컨트롤을 만들고 ID를 할당합니다. 다음 예제에서는 ID "mediumListIconTextTemplate"을 사용합니다.
```
    <div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">

    </div>
```
참고 템플릿을 사용하려면 먼저 정의해야 합니다. 따라서 ListView HTML보다 템플릿 HTML을 먼저 추가합니다.
WinJS.Binding.Template에는 하나의 루트 요소만 있어야 합니다. 템플릿의 콘텐츠에 대해 부모 역할을 할 div 요소를 만듭니다.
```
    <div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
        <div>

        </div>
    </div>
```

ListView가 포함하는 각 데이터 항목에 대해 생성할 태그를 만듭니다. 앞 단계에서 만든 데이터에는 이미지 위치, 제목, 텍스트 등이 포함되므로 다음 요소들을 만듭니다.

사진 필드를 표시할 img 요소
제목 필드를 표시할 h4 요소
텍스트 필드를 표시할 h6 요소

    <div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
        <div>

            <!-- Displays the "picture" field. -->
            <img src="#"  />
            <div>

                <!-- Displays the "title" field. -->
                <h4></h4>

                <!-- Displays the "text" field. --> 
                <h6></h6>
            </div>
        </div>
    </div>

레이아웃 문제를 방지하려면 반드시 템플릿의 루트 요소의 크기를 지정하고 템플릿에 포함된 이미지 요소의 크기를 지정합니다.

    <div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
        <div style="width: 150px; height: 100px;">

            <!-- Displays the "picture" field. -->
            <img src="#" style="width: 60px; height: 60px;" />
            <div>

                <!-- Displays the "title" field. -->
                <h4></h4>

                <!-- Displays the "text" field. --> 
                <h6></h6>
            </div>
        </div>
    </div>

데이터를 표시하는 각 요소에서 data-win-bind 특성을 설정합니다. data-win-bind 특성은 다음 구문을 사용합니다.

data-win-bind="propertyName: dataFieldName"

예를 들어 img의 src 속성을 "picture" 필드에 바인딩하려면 다음 구문을 사용합니다.

<img data-win-bind="src : picture" />

여러 속성을 설정하려면 세미콜론으로 구분합니다.

data-win-bind="property1Name: dataField1Name; property2Name: dataField2Name"

이 예제에서는 템플릿의 항목을 해당 데이터 필드에 바인딩합니다.

    <div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
        <div style="width: 150px; height: 100px;">

            <!-- Displays the "picture" field. -->
            <img src="#" style="width: 60px; height: 60px;" 
                 data-win-bind="alt: title; src: picture" />
            <div>

                <!-- Displays the "title" field. -->
                <h4 data-win-bind="innerText: title"></h4>

                <!-- Displays the "text" field. --> 
                <h6 data-win-bind="innerText: text"></h6>
            </div>
        </div>
    </div>

항목 템플릿을 사용하려면 select 구문을 사용하여 ListView의itemTemplate 속성을 항목 템플릿으로 설정합니다.

    <div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
        <div style="width: 150px; height: 100px;">

            <!-- Displays the "picture" field. -->
            <img src="#" style="width: 60px; height: 60px;" 
                 data-win-bind="alt: title; src: picture" />
            <div>

                <!-- Displays the "title" field. -->
                <h4 data-win-bind="innerText: title"></h4>

                <!-- Displays the "text" field. --> 
                <h6 data-win-bind="innerText: text"></h6>
            </div>
        </div>
    </div>       

    <div id="basicListView" data-win-control="WinJS.UI.ListView" 
        data-win-options="{itemDataSource : DataExample.itemList.dataSource, 
            itemTemplate: select('#mediumListIconTextTemplate')}">
    </div>

이제 앱을 실행하면 바인딩된 데이터가 목록에 표시됩니다.

데이터가 바인딩되어 이미지와 텍스트를 표시하는 ListView

ListView 스타일 지정

ListView는 콘텐츠 맞춤을 위해 높이를 동적으로 조정하지 않습니다. ListView를 렌더링하려면 높이 절대값을 지정해야 합니다. WinJS 스타일시트는 ListView 컨트롤의 높이를 400px로 설정하지만 기본 스타일을 고유한 CSS로 재정의하여 해당 높이를 쉽게 지정할 수 있습니다. 이 CSS를 앱의 CSS 파일에 추가하여 ListView의 높이와 너비를 설정하고 경계를 지정합니다.

Windows용 ListView 스타일

.win-listview 
{
    height: 500px; 
    width: 500px; 
    border: 2px solid gray;
}

Windows Phone 8.1용 ListView 스타일

.win-listview 
{
    height: 400px; 
    width: 300px; 
    border: 2px solid gray;
}

win-listview는 WinJS에서 정의한 클래스로, ListView의 스타일을 지정하는 데 사용할 수 있습니다. 다음 예제에는 모든 ListView의 높이, 너비 및 경계를 변경합니다. 한 ListView만 변경하려면 ListView 컨트롤의 호스팅 div 요소 ID를 선택기에 추가합니다.

Windows용 특정 ListView 스타일

#basicListView .win-listview 
{
    height: 500px; 
    width: 500px; 
    border: 2px solid gray;
}

Windows Phone 8.1용 특정 ListView 스타일

#basicListView .win-listview 
{
    height: 400px; 
    width: 300px; 
    border: 2px solid gray;
}

앱을 실행합니다. 이제 ListView가 모든 항목을 표시할 수 있을 만큼 커졌습니다.

500px ListView 컨트롤

WinJS 스타일시트는 WinJS 컨트롤의 모양과 느낌을 사용자 지정하기 위해 재정의할 수 있는 CSS 클래스를 정의합니다. ListView에 사용하는 CSS 클래스는 다음과 같습니다.

win-listview

ListView 자체의 스타일을 지정합니다.
win-container

ListView 또는 FlipView 항목 컨테이너의 스타일을 지정합니다. 각 항목에 해당 컨테이너가 있습니다.
win-progress

ListView에서 항목을 로드할 때 표시되는 진행률 컨트롤의 스타일을 지정합니다.

전체 목록은 ListView reference page를 참조하세요.

다음 예제에서는 ListView에서 각 항목 컨테이너 주변에 여백을 추가하는 스타일을 정의합니다.


#basicListView .win-listview .win-container {
    margin: 10px; 
}

ListView에서 스타일이 지정된 항목

다음 예제에서는 가리킨 상태에서 ListView의 목록 항목에 적용되는 스타일을 정의합니다.

#basicListView .win-listview .win-container:hover {
    color: red;
}

참고

ListView는 왼쪽, 위쪽 및 아래쪽의 여백을 지원하지만 오른쪽 여백은 지정할 수 없습니다. 한 가지 해결 방법은 원하는 여백만큼 넓은 요소를 추가하고 해당 style.visibility 속성을 "none"으로 설정한 다음 이 요소를 ListView의 오른쪽에 추가하는 것입니다.

항목 스타일 지정

앞의 예제에서는 인라인 스타일과 WinJS 클래스를 사용하여 ListView와 해당 항목의 스타일을 지정했습니다. CSS 클래스를 사용하여 항목 템플릿의 스타일을 지정할 수도 있습니다. 다음 예제에서는 항목 템플릿 정의 섹션에서 정의한 템플릿을 업데이트합니다. 정의한 인라인 스타일은 제거하고 일부 CSS 클래스를 추가합니다.

    <div id="mediumListIconTextTemplate" 
         data-win-control="WinJS.Binding.Template" 
         style="display: none">
        <div class="mediumListIconTextItem">
            <img src="#" class="mediumListIconTextItem-Image" data-win-bind="src: picture" />
            <div class="mediumListIconTextItem-Detail">
                <h4 data-win-bind="innerText: title"></h4>
                <h6 data-win-bind="innerText: text"></h6>
            </div>
        </div>
    </div>

이 스타일을 앱의 CSS에 추가합니다.

.mediumListIconTextItem
{
    width: 282px;
    height: 70px;
    padding: 5px;
    overflow: hidden;
    display: -ms-grid;
}

    .mediumListIconTextItem img.mediumListIconTextItem-Image 
    {
        width: 60px;
        height: 60px;
        margin: 5px;
        -ms-grid-column: 1;
    }

    .mediumListIconTextItem .mediumListIconTextItem-Detail
    {
        margin: 5px;
        -ms-grid-column: 2;
    }

ListView의 현재 모양은 다음과 같습니다.

스타일이 지정된 항목이 포함된 ListView

템플릿 스타일을 처음부터 새로 만들 필요는 없습니다. 일반적으로 사용되는 템플릿과 해당 CSS 집합의 경우에는 목록 레이아웃용 항목 템플릿 및 그리드 레이아웃용 항목 템플릿을 참조하세요.

목록, 그리드 및 셀 레이아웃 간 전환

ListView 요소에는 세 가지 레이아웃 모드인 목록, 그리드 및 셀이 있습니다.

목록 레이아웃을 사용하려면 다음과 같이 layout 속성을 WinJS.UI.ListLayout으로 설정합니다.

    <div id="basicListView" 
        data-win-control="WinJS.UI.ListView"
        data-win-options="{ itemDataSource : DataExample.itemList.dataSource, 
            itemTemplate: select('#mediumListIconTextTemplate'), 
            layout: {type: WinJS.UI.ListLayout}}">
    </div>

그리드 레이아웃을 사용하려면 다음과 같이 layout 속성을 WinJS.UI.GridLayout으로 설정합니다.

    <div id="basicListView" 
        data-win-control="WinJS.UI.ListView"
        data-win-options="{ itemDataSource : DataExample.itemList.dataSource, 
            itemTemplate: select('#mediumListIconTextTemplate'), 
            layout: {type: WinJS.UI.GridLayout}}">
    </div>

(Windows만 해당) 셀 레이아웃을 사용하려면 다음과 같이 레이아웃 속성을 WinJS.UI.CellSpanningLayout으로 설정합니다.

    <div id="basicListView" 
        data-win-control="WinJS.UI.ListView"
        data-win-options="{ itemDataSource : DataExample.itemList.dataSource, 
            itemTemplate: select('#mediumListIconTextTemplate'), 
            layout: {type: WinJS.UI.CellSpanningLayout}}">
    </div>

ListView의 레이아웃은 만든 후 언제든지 변경할 수 있습니다.

데이터 그룹화

ListView의 항목을 그룹화할 수 있습니다. 다음 그림은 사전순으로 그룹화된 항목을 보여 줍니다.

그룹화된 항목이 포함된 ListView

그룹화하는 방법은 ListView에서 항목을 그룹화하는 방법을 참조하세요.

항목 템플릿에 대화형 요소 추가

참고 항목 템플릿에는 대부분의 다른 컨트롤이 포함될 수 있지만 FlipView 또는 다른 ListView는 포함할 수 없습니다.

ListView 항목 선택 및 호출

일반적으로 사용자가 요소를 조작할 때 ListView는 이 조작을 캡처하고 사용하여 사용자가 항목을 선택 또는 호출했는지, 아니면 항목 간을 이동 중인지 확인합니다. 컨트롤 등의 대화형 요소가 입력을 받으려면 대화형 요소나 부모 요소 중 하나에 win-interactive CSS 클래스를 연결해야 합니다. 해당 요소와 자식은 조작을 받고 더 이상 ListView에 대한 이벤트를 트리거하지 않습니다.

항목 템플릿의 요소에 win-interactive를 연결하는 경우 요소가 전체 항목을 채우지 않도록 합니다. 그렇지 않으면 사용자가 해당 항목을 선택하거나 호출할 수 없습니다.

항목 템플릿에 대화형 요소를 추가하려면 WinJS.Binding.Template 대신 템플릿 기능을 사용하는 것이 좋습니다. 템플릿 함수에 대한 자세한 내용은 템플릿 함수를 만드는 방법을 참조하세요.

ListView에 순서 다시 매기기, 끌기 및 놓기 기능 추가(Windows만 해당)

ListView 컨트롤을 사용하여 사용자가 개별 항목의 순서를 다시 매기고 개별 항목을 끌어서 놓을 수 있습니다. 예를 들어 ListView의 itemsDraggable 속성을 'true'로 설정하여 끌기 기능을 선언할 수 있습니다. 마찬가지로 ListView 컨트롤에서 사용자가 항목 순서를 다시 매기게 하려면 ListView의 itemsReorderable 속성을 'true'로 설정합니다.

<div id="basicListView" 
        data-win-control="WinJS.UI.ListView"
        data-win-options="{ itemDataSource : DataExample.itemList.dataSource, 
            itemTemplate: select('#mediumListIconTextTemplate'), 
            itemsDraggable: true,
            itemsReorderable: true }">
</div>

itemsDraggable 속성을 사용하여 ListView 컨트롤에서 개별 항목을 눈에 보이게 끌 수 있습니다. 사용자가 ListView에서 항목을 끌면 itemdragstart 이벤트가 발생합니다. 이 이벤트는 순서 다시 매기기 작업이 시작될 때 발생합니다. 항목을 ListView에 놓으면 ListView가 itemdragdrop 이벤트를 발생시킵니다.

ListView 컨트롤에 순서 다시 매기기, 끌기 또는 놓기 기능을 추가하는 방법에 대한 자세한 내용을 보려면 ListView에서 순서 다시 매기기, 끌기 및 놓기를 사용하도록 설정하는 방법을 참조하거나 HTML ListView 끌어서 놓기 및 순서 다시 매기기 샘플을 다운로드하세요.

ListView 샘플

거의 모든 WinJS 컨트롤 및 온라인 편집기의 라이브 코드 예제는 try.buildwinjs.com을 참조하세요.

이러한 추가 샘플은 ListView 컨트롤에 대해 자세히 알아보는 데 도움이 됩니다.

요약 및 다음 단계

ListView를 만들고 데이터에 바인딩하는 방법을 배웠습니다. 항목 템플릿을 만들어 스타일을 지정하는 방법도 배웠습니다.

앱에서 사용할 수 있도록 미리 정의된 항목 템플릿 목록은 목록 레이아웃용 항목 템플릿 및 그리드 레이아웃용 항목 템플릿을 참조하세요. 항목을 그룹화하는 방법은 ListView에서 항목을 그룹화하는 방법을 참조하세요.