다음을 통해 공유

실습 정보: RSS 뉴스 수집기 만들기

  • 아티클

Cc294852.bf9c77b1-ba7a-4f3b-8380-d05728d208d1(KO-KR,Expression.30).png

뉴스 피드나 팟캐스트와 같은 웹 피드에서는 해당 콘텐츠에 XML 형식 파일을 사용하는 경우가 많습니다. 수집기나 어그리게이터와 같은 프로그램을 사용하여 웹 피드에 가입하고 구독할 수 있습니다. 대부분 수집기는 컴퓨터에서 열려 있으며 웹 피드가 업데이트될 때 새 콘텐츠로 자체 업데이트됩니다. 웹 피드의 가장 일반적인 전달 메커니즘을 RSS(Really Simple Syndication)라고 합니다.

다음 절차에서는 Microsoft Expression Blend 및 RSS 피드를 사용하여 간단한 RSS 수집기를 만드는 방법을 설명합니다. RSS 수집기를 사용하여 로컬 파일이나 웹 사이트의 XML 파일을 비롯한 모든 XML 데이터 원본을 읽을 수 있습니다.

[!참고]

다음 절차에서는 인터넷에 실시간으로 연결되어 있다고 가정합니다.

[!참고]

Microsoft Silverlight에서는 XML 데이터 원본을 사용할 수 없습니다. 그러나 MSDN의 Silverlight에서 XML 데이터 구문 분석에서 XML 데이터 작업에 대한 자세한 내용을 찾을 수 있습니다.

데이터 원본 만들기

  1. 데이터 패널에서 라이브 데이터 원본 추가Cc294852.601d2ab6-5e4b-49ab-bb3c-064456dc8184(KO-KR,Expression.30).png를 클릭하고 새 XML 데이터 원본 정의를 클릭합니다.

    새 XML 데이터 원본 정의 대화 상자가 나타납니다.

  2. 데이터 원본 이름 옆에 "rssDS"를 입력합니다.

  3. XML 데이터의 URL 텍스트 상자에 "http://rss.msnbc.msn.com/id/3032127/device/rss/rss.xml"을 입력합니다.

    Cc294852.alert_tip(KO-KR,Expression.30).gif팁:

    XML 데이터의 URL 필드에는 XML 파일의 URL이나 로컬 경로를 사용할 수 있습니다. 다른 RSS 피드를 사용하려는 경우 웹 브라우저에서 공급자의 웹 사이트(예: http://www.msnbc.com)를 열고 해당 RSS 피드에 대한 링크를 검색하여 URL을 찾을 수 있습니다. 일반적으로 웹 사이트에 사용 가능한 피드와 해당 피드에 가입할 때 사용할 수 있는 단추가 나열됩니다. 원하는 피드의 XML 파일에 대한 링크를 찾습니다.

  4. 정의 위치에서 다음 작업 중 하나를 수행합니다.

    • 응용 프로그램의 모든 문서에서 데이터를 사용할 수 있도록 하려면 프로젝트를 선택합니다.

    • 현재 문서에서만 데이터를 사용할 수 있도록 하려면 이 문서를 선택합니다.

  5. 확인을 클릭합니다.

    rssDS라는 데이터 원본이 데이터 패널에 추가됩니다. 노드를 확장하고 데이터 원본의 다른 필드를 검토합니다. 데이터는 표시되지 않고 데이터가 들어 있는 필드의 이름과 구조만 표시됩니다.

    이제 응용 프로그램의 컨트롤을 데이터에 바인딩할 수 있습니다.

    XML 데이터 원본이 추가된 후의 데이터 패널

    Cc294852.8ce5d9eb-ca88-4eb9-8ad1-4719fdc0514e(KO-KR,Expression.30).png

프로젝트 패널에서 데이터 필드를 끌어 바인딩

여러 가지 방법으로 데이터 원본의 항목에 컨트롤을 바인딩할 수 있습니다. 다음 절차에서는 데이터 패널에서 아트보드로 데이터 원본 필드를 끌어 두 개의 새 컨트롤을 만드는 방법을 설명합니다. 기존 컨트롤로 데이터 원본 필드를 끌어 해당 컨트롤의 속성에 데이터를 바인딩할 수도 있습니다.

  1. 도구 패널에서 자산Cc294852.0d8b8d29-1af9-418f-8741-be3097d76eab(KO-KR,Expression.30).png을 클릭합니다.

  2. 자산 패널의 컨트롤 범주에서 모두를 선택합니다.

  3. 컨트롤, 시스템 컨트롤, Image 컨트롤 Cc294852.adb61060-da5f-4279-8c0d-3681bfeb145c(KO-KR,Expression.30).png을 차례로 클릭합니다.

  4. 마우스를 사용하여 아트보드의 왼쪽 위 모퉁이에 100x100픽셀 정도 크기의 Image 컨트롤을 그립니다.

  5. 데이터 패널에서 rss, channel 및 image 노드를 확장합니다. 그런 다음 url : (문자열) 노드를 새 이미지 개체로 끌어 놓습니다.

    이미지 개체가 MSNBC 웹 사이트의 이미지를 표시합니다. 데이터 패널에는 데이터 파트가 컨트롤에 바인딩되었음을 나타내는 노란색 경계 상자가 데이터 원본 주위에 표시됩니다.

    Image 개체가 추가되고 URL 데이터 항목에 바인딩된 후의 아트보드(아트보드 모양은 다를 수 있음)

    Cc294852.eb3b12e1-64d7-4a49-b2a8-fc433a34ca2f(KO-KR,Expression.30).png

  6. 데이터 패널에서 rssDS, rss 및 channel 노드를 확장합니다. 그런 다음 title : (문자열) 노드를 아트보드의 이미지 개체 오른쪽으로 끌어 놓습니다.

    TextBlock 컨트롤이 만들어져 뉴스 피드 제목이 표시됩니다. 선택 도구를 사용하여 텍스트 블록 개체를 이동하고 비율 크기를 조정한 다음 속성 패널의 텍스트 및 브러시 범주에 있는 속성을 사용하여 텍스트 표시 방법을 변경합니다.

    텍스트 블록 개체가 추가되고 제목 데이터 항목에 바인딩된 후의 아트보드(아트보드 모양은 다를 수 있음)

    Cc294852.f5b9f7c7-e622-4f62-a151-1e449c6d4588(KO-KR,Expression.30).png

데이터 컨텍스트를 사용하여 동일한 데이터에 여러 컨트롤 바인딩

데이터 컨텍스트를 부모 개체에 할당하면 모든 자식 개체가 같은 데이터 스냅숏을 사용할 수 있습니다. 이 방법은 목록(마스터 창)의 항목을 클릭하면 해당 항목에 대한 세부 정보가 다른 개체(세부 정보 창)에 나타나는 마스터 세부 정보 디자인을 만들려는 경우에 유용합니다.

  1. 이미지와 제목 아래의 영역을 포함하는 모눈 레이아웃 컨테이너 Cc294852.a87ee957-7fbf-4135-a6ab-6de7e63160aa(KO-KR,Expression.30).png를 만듭니다. 그러면 생성되는 모눈 개체가 부모 개체가 되며, 다음 단계에서 데이터 컨텍스트가 자동으로 설정됩니다.

  2. 개체 및 타임라인 패널에서 새 모눈 개체를 선택하여 자식 개체를 추가할 수 있도록 활성화합니다.

  3. 데이터 패널에서 목록 모드Cc294852.9ad55afc-08ac-4f9a-ab3a-d55d0cf184d3(KO-KR,Expression.30).png가 선택되어 있는지 확인합니다. 목록 모드에서 데이터 패널의 항목을 끌면 마스터 컨트롤이 만들어집니다.

  4. rss, channel 및 item (배열) 노드를 확장합니다. 그런 다음 title : (문자열) 노드를 모눈 개체 왼쪽 위 모퉁이로 끌어 놓습니다.

    ListBox 컨트롤이 만들어지며 item (배열) 컬렉션의 모든 뉴스 방송 제목으로 채워집니다. 모눈 개체를 선택하고 속성 패널을 보면 DataContext 속성이 데이터에 바인딩되었음을 나타내는 노란색 경계 상자가 속성 주위에 나타납니다. ListBox 개체를 선택하는 경우에는 ItemsSource 속성이 데이터에 바인딩됩니다.

    [!참고]

    ItemsSource 속성을 항목의 컬렉션으로 설정할 수 있습니다. 한 번에 ItemsSource 또는 Items 속성 중 하나만 사용할 수 있습니다. 일반적으로 ItemsSource 속성은 생성된 항목의 컬렉션에 바인딩하는 데 사용됩니다. Items 속성은 이 컬렉션의 항목 편집 단추를 사용하여 개별 항목을 수동으로 추가하는 데 사용할 수 있습니다.

    ListBox 개체가 추가되고 Item (배열) 데이터 컬렉션에 바인딩된 후의 아트보드(아트보드 모양은 다를 수 있음)

    Cc294852.6e02aab9-751f-49ee-ac12-65d92eb432ef(KO-KR,Expression.30).png

  5. 데이터 패널에서 세부 정보 모드Cc294852.7786ee28-da1d-41b2-93fd-b4caeb75ab98(KO-KR,Expression.30).png를 클릭합니다.

  6. rss, channel 및 item (배열) 노드를 확장합니다. 그런 다음 description : (문자열) 노드를 모눈 개체 오른쪽으로 끌어 놓습니다.

    선택한 뉴스 방송의 설명을 표시하는 텍스트 블록 개체가 포함된 모눈 개체가 만들어집니다. 텍스트 블록 개체를 선택하고 속성 패널을 보면 Text 속성이 데이터에 바인딩되었음을 나타내는 노란색 경계 상자가 속성 주위에 나타납니다. 데이터 바인딩에 대한 구체적인 정보를 보려면 Text 속성 옆에 있는 고급 속성 옵션Cc294852.e3343378-f63e-4d8f-9847-97c1a58aadc5(KO-KR,Expression.30).png을 클릭한 다음 데이터 바인딩을 클릭합니다.

    TextBlock 개체가 추가되고 설명 데이터 항목에 바인딩된 후의 아트보드(아트보드 모양은 다를 수 있음)

    Cc294852.7e00a38f-ea59-47a3-84cd-3caf57c6d805(KO-KR,Expression.30).png

  7. F5 키를 눌러 응용 프로그램을 실행한 다음 목록 상자의 항목을 클릭하여 다른 뉴스 설명을 읽도록 선택을 변경합니다.

    [!참고]

    일부 항목에 HTML 텍스트가 있을 수 있습니다. Description 문자열에서 HTML 요소를 제거하는 값 변환기를 만든 다음 데이터 바인딩 만들기 대화 상자에서 이 값 변환기를 적용할 수 있습니다. 값 변환기 만들기에 대한 자세한 내용은 실습 정보: 데이터 형식 변환을 참조하십시오.