실습 정보: CLR 개체 데이터 원본 만들기

Microsoft Expression Blend에서는 XML 데이터 원본 및 CLR(공용 언어 런타임) 개체 데이터 원본을 사용할 수 있습니다. XML 데이터 원본은 작업 방법이 간단하지만 CLR 개체 데이터 원본을 이용한 작업은 훨씬 복잡합니다. 다음 절차에서는 Expression Blend 응용 프로그램에 CLR 데이터 원본의 데이터를 표시하는 방법을 설명합니다. 처음 두 작업에서는 예제 데이터베이스에서 데이터를 가져와 Expression Blend에서 바인딩할 수 있는 형식으로 데이터를 변환합니다. 세 번째 작업에서는 데이터에 바인딩되는 요소가 있는 Expression Blend 프로젝트를 만듭니다.

[!참고]

Silverlight 2 응용 프로그램의 경우 MSDN의 Silverlight 2 데이터 바인딩을 참조하십시오.

[!참고]

이 항목의 절차를 그대로 수행하려면 AdventureWorks 예제 데이터베이스가 설치된 Microsoft SQL Server 2008과 Microsoft Visual Studio 2008이 필요합니다. AdventureWorks 예제를 얻는 방법에 대한 자세한 내용은 MSDN에서 AdventureWorks 예제 및 예제 데이터베이스 설치를 참조하십시오.

필요에 따라, 다른 데이터베이스에서 DataTable 또는 DataSet을 만들 수 있습니다. 이 경우 현재 사용하는 데이터에 맞게 이 항목의 첫 번째 작업과 두 번째 작업을 적용할 수 있습니다. CLR 또는 Microsoft .NET Framework 데이터 원본을 사용하는 한 원칙은 동일합니다.

DataTable 정의 및 채우기

다음 절차에서는 Visual Studio 2008에서 클래스 라이브러리를 만들어 AdventureWorks 예제 데이터베이스의 데이터로 DataTable의 인스턴스를 채우는 방법을 설명합니다.

DataTable 정의 및 채우기

1. Visual Studio 2008의 파일 메뉴에서 새로 만들기를 가리킨 다음 프로젝트를 클릭합니다.

2. 새 프로젝트 대화 상자의 프로젝트 형식에서 **Visual C#**을 클릭합니다. 템플릿에서 클래스 라이브러리를 클릭합니다. 새 프로젝트의 이름을 AWDataSource로 지정한 다음 확인을 클릭합니다.

   Visual Studio에서 새 클래스 라이브러리 프로젝트의 코드가 생성되고 편집할 수 있도록 Class1.cs 파일이 열립니다.

3. Class1.cs 파일에서 공용 클래스 정의의 이름을 Class1에서 좀 더 알아보기 쉬운 ProductPhotosCollection으로 변경합니다.

4. 솔루션 탐색기에서 프로젝트 이름(AWDataSource)을 마우스 오른쪽 단추로 클릭하고 추가를 가리킨 다음 새 항목을 클릭합니다.

5. 새 항목 추가 대화 상자의 템플릿 목록에서 DataSet을 선택하고 항목의 이름을 ProductPhotos.xsd로 지정한 다음 추가를 클릭합니다.

   데이터 집합이 스키마 파일 및 관련 클래스 파일의 형식으로 프로젝트에 추가되고, 스키마 파일이 열려 편집할 수 있습니다.

   [!참고]

   데이터 집합은 응용 프로그램을 실행하기 위해 메모리 내에 데이터를 임시 저장할 수 있는 데이터 테이블이 들어 있는 개체입니다. 자세한 내용은 MSDN에서 Visual Studio의 데이터 집합 개요를 참조하십시오.

6. 서버 탐색기에서 데이터 연결을 마우스 오른쪽 단추로 클릭한 다음 연결 추가를 클릭합니다.

7. 데이터 원본 선택 대화 상자에서 데이터 원본 필드의 목록에 이미 **Microsoft SQL Server (SqlClient)**가 있어야 합니다.

   팁:
   SQL Server 데이터베이스를 사용하지 않으려면 변경 단추를 클릭하여 다른 데이터 원본을 선택합니다. 다음 단계는 Visual Studio의 데이터 원본 선택 대화 상자에 표시되는 항목과 일치하지 않을 것입니다.

8. 서버 이름 필드에 AdventureWorks 데이터베이스가 설치되어 있는 SQL Server 인스턴스의 이름을 입력합니다.

   팁:
   AdventureWorks 데이터베이스가 아닌 다른 SQL Server 데이터베이스를 사용하려면 해당 SQL Server 데이터베이스가 설치된 서버의 이름을 선택합니다.

9. 서버에 로그온에서 SQL 서버의 인스턴스에 로그온하는 데 필요한 인증 방법을 선택합니다. 서버 관리자에게 해당 정보를 문의해야 할 수 있습니다. Windows 인증에서는 현재 로그온 자격 증명을 사용합니다. SQL Server 인증에는 데이터베이스에 액세스할 수 있도록 구성된 계정의 사용자 이름과 암호가 필요합니다.

10. 데이터베이스에 연결에서, 로그온 자격 증명이 올바르고 컴퓨터에 AdventureWorks 데이터베이스가 설치되어 있으며 컴퓨터에서 SQL Server를 실행하는 경우에만 표시되는 AdventureWorks 데이터베이스를 선택합니다.

11. 연결 테스트 단추를 클릭합니다. 연결 테스트에 실패하면 SQL Server 관리자에게 지원을 요청하십시오.

12. 확인을 클릭하여 데이터 연결 만들기를 완료합니다. 서버 탐색기에서 새 연결은 <servername>.AdventureWorks.dbo라는 데이터 연결 노드 아래에 나타납니다. 여기서 <servername>은 서버의 이름입니다.

13. 서버 탐색기에서 새로운 <servername>.AdventureWorks.dbo 연결 노드를 확장하고 Tables 노드를 확장한 다음 ProductPhoto 테이블을 찾습니다. 디자인 화면에 ProductPhotos.xsd 파일이 열리면 서버탐색기에서 디자인 화면으로 ProductPhoto 테이블을 끕니다. 이제 AdventureWorks 데이터베이스에 연결하여 ProductPhoto 테이블의 내용을 반환할 수 있는 형식화된 데이터 집합이 만들어졌습니다.

14. Class1.cs 파일에서 ProductPhotosCollection 클래스에 다음 메서드를 추가합니다.

    private void GetData()
        {
            ProductPhotosTableAdapters.ProductPhotoTableAdapter da =
                new ProductPhotosTableAdapters.ProductPhotoTableAdapter();
            ProductPhotos.ProductPhotoDataTable dt = da.GetData();
        }
    

    ProductPhotosTableAdapters 네임스페이스는 ProductPhotos DataSet을 만들 때 Visual Studio에서 생성된 ProductPhotos.Designer.cs 파일에 정의됩니다. 이제 응용 프로그램이 실행될 때 데이터로 ProductPhotos DataTable의 인스턴스를 채울 메서드가 만들어졌습니다.

15. F6 키를 눌러 프로젝트를 빌드하여 오류가 없는지 확인합니다.

맨 위로 이동

WPF 컬렉션에 데이터 컬렉션 적용

다음 절차에서는 Expression Blend 또는 WPF(Windows Presentation Foundation)를 사용하는 응용 프로그램에서 데이터에 바인딩할 수 있도록 Visual Studio 2008에서 클래스 라이브러리를 만들어 DataTable로부터 ObservableCollection으로 데이터를 변환하는 방법을 설명합니다. ProductPhoto 클래스를 정의하여 테이블 행에 데이터를 표시하고 ProductPhotos의 컬렉션을 전용 멤버로 ProductPhotosCollection에 추가한 다음 public 접근자(get 메서드)를 추가하여 클래스 외부의 코드에서 액세스할 수 있도록 합니다.

팁:
앞서 설명한 이전 절차를 수행한 경우에는 AdventureWorks ProductPhoto 데이터베이스 테이블의 데이터가 들어 있는 DataTable 인스턴스를 사용할 수 있습니다. 다른 원본으로 DataTable 또는 DataSet을 채운 경우에는 다음 단계의 데이터 테이블 이름 및 필드 이름을 현재 사용하는 데이터에 맞게 적용할 수 있습니다.

WPF 컬렉션에 데이터 컬렉션 적용

1. Visual Studio 2008의 솔루션 탐색기에서 프로젝트 이름을 마우스 오른쪽 단추로 클릭한 다음 참조 추가를 클릭합니다. .NET 탭에서 WindowsBase 어셈블리를 선택합니다. WindowsBase 어셈블리 목록이 표시되지 않으면 찾아보기 탭을 클릭하고 %SystemDrive%\Program Files\Reference Assemblies\Microsoft\Framework\v3.0 폴더에서 WindowsBase.dll 어셈블리를 찾습니다.

2. 확인을 클릭합니다. WindowsBase 어셈블리는 System.Collections.Object.ObservableCollection 클래스를 구현합니다.

3. Class1.cs 파일의 맨 위에 다음 문을 추가합니다.

   using System.Collections.ObjectModel;
   

4. 또한 작업에 사용할 수 있도록 Class1.cs 파일의 AWDataSource 네임스페이스에 다음 ProductPhoto 클래스 정의를 추가합니다.

   public class ProductPhoto { }
   

5. ProductPhotosCollection 클래스에 다음 멤버를 추가합니다.

   private ObservableCollection<ProductPhoto> productPhotos =
       new ObservableCollection<ProductPhoto>();
   

6. ProductPhotosCollection 클래스에 다음 접근자 메서드를 추가합니다.

   public ObservableCollection<ProductPhoto> ProductPhotos
   { get { return this.productPhotos; } }
   

   다음 단계에서는 ID, 수정한 날짜 및 사진 두 개를 DataTable에서 ObservableCollection으로 복사합니다.

7. 솔루션 탐색기에서 프로젝트 이름을 마우스 오른쪽 단추로 클릭한 다음 참조 추가를 클릭합니다. PresentationCore 어셈블리에 참조를 추가합니다.

8. Class1.cs 파일의 맨 위에 다음 문을 추가합니다.

   using System.Windows.Media;
   using System.Windows.Media.Imaging;
   

9. 다음과 같이 ProductPhoto 클래스에 멤버를 추가합니다.

   public class ProductPhoto
       {
           // Public Accessors to the private properties.
           public int ID { get { return id; } }
           public ImageSource ThumbNailPhoto { get { return thumbNailPhoto; } }
           public ImageSource LargePhoto { get { return largePhoto; } }
           public DateTime ModifiedDate { get { return modifiedDate; } }
   
           // Constructor.
           public ProductPhoto(int id, byte[] thumbNailPhoto, byte[] largePhoto,
               DateTime modifiedDate)
           {
               this.id = id;
               this.thumbNailPhoto = ByteArrayToImageSource(thumbNailPhoto);
               this.largePhoto = ByteArrayToImageSource(largePhoto);
               this.modifiedDate = modifiedDate;
           }
   
           // Private properties.
           private int id;
           private ImageSource thumbNailPhoto;
           private ImageSource largePhoto;
           private DateTime modifiedDate;
   
           // Supporting method.
           private ImageSource ByteArrayToImageSource(byte[] data)
           {
               BitmapImage image = null;
               if (null != data)
               {
                   image = new BitmapImage();
                   image.BeginInit();
                   image.StreamSource = new System.IO.MemoryStream(data);
                   image.EndInit();
               }
               return image;
           }
       }
   

10. ProductPhotosCollection 클래스의 GetData 메서드 끝에 다음 코드를 추가하여 메서드가 DataTable을 ObservableCollection에 복사하도록 합니다.

    productPhotos.Clear();
       foreach (ProductPhotos.ProductPhotoRow row in dt)
       {
           productPhotos.Add(new ProductPhoto(
               row.ProductPhotoID,
               row.ThumbNailPhoto,
               row.LargePhoto,
               row.ModifiedDate));
       }
    

    이제 ProductsPhotosCollection.GetData 메서드를 편리하게 트리거할 수 있는 명령을 구현합니다.

11. 솔루션 탐색기에서 프로젝트 이름을 마우스 오른쪽 단추로 클릭하고 추가를 클릭한 다음 기존 항목을 클릭합니다.

12. 기존 항목 추가 대화 상자에서 Expression Blend 예제 폴더 %SystemDrive%\Program Files\Microsoft Expression\Blend\Samples\<language>\ColorSwatch에 있는 DelegateCommand.cs 파일을 찾은 다음 추가를 클릭합니다.

13. ColorSwatch의 네임스페이스를 원하는 네임스페이스 이름(AWDataSource)으로 변경합니다. DelegateCommand.cs 파일의 코드를 사용하여 메서드에 명령을 바인딩할 수 있습니다.

14. Class1.cs 파일에서 ProductPhotosCollection 클래스에 다음 멤버를 추가합니다.

    private DelegateCommand getDataCommand;
    

15. ProductPhotosCollection 클래스에 다음 생성자를 추가하여 명령을 초기화합니다.

    public ProductPhotosCollection()
        {
            getDataCommand = new DelegateCommand(delegate() { GetData(); });
        }
    

16. 마지막으로 ProductPhotosCollection 클래스에 다음 접근자 메서드를 추가하여 명령을 표시합니다.

    public DelegateCommand GetDataCommand { get { return getDataCommand; } }
    

17. F6 키를 눌러 프로젝트를 빌드하여 오류가 없는지 확인합니다. 이제 Expression Blend 또는 WPF 응용 프로그램의 데이터 원본으로 사용할 수 있는 클래스가 만들어졌습니다. 이 클래스는 ProductPhotosCollection이거나 직접 정의한 경우에는 해당 클래스가 됩니다.

맨 위로 이동

Expression Blend의 데이터 원본에 바인딩

다음 절차에서는 데이터 원본에 바인딩된 ListBox 컨트롤이 있는 매우 간단한 Expression Blend 응용 프로그램을 만드는 방법을 설명합니다. 응용 프로그램에서는 마스터 세부 정보 보기라는 일반적인 사용자 인터페이스 디자인 패턴을 사용합니다. 왼쪽 마스터 창에는 제품 목록이 포함됩니다. 이 창에서 제품을 선택할 때마다 해당 제품에 대한 세부 정보가 오른쪽 세부 정보 창에 표시됩니다. 다른 창에서 요소를 선택하면 컨트롤 간 데이터 동기화를 사용하여 한 창의 내용이 업데이트됩니다.

Expression Blend의 데이터 원본에 프로젝트 바인딩

1. Expression Blend에서 파일을 클릭한 다음 새 프로젝트를 클릭합니다.

2. 새 프로젝트 만들기 대화 상자에서 WPF 응용 프로그램(.exe) 프로젝트 형식을 선택합니다. 그러면 사용자가 디자인한 대로 빌드하고 실행할 수 있는 Microsoft Windows 기반 응용 프로그램용 프로젝트가 만들어집니다. Windows 기반 응용 프로그램에 사용할 컨트롤을 디자인할 수 있는 WPF 컨트롤 라이브러리 프로젝트를 선택할 수도 있습니다.

3. 이름 텍스트 상자에 AWProductPhotos를 입력합니다. 이 절차에서는 코드를 직접 작성하지 않으므로 언어 설정은 기본값을 그대로 유지합니다.

4. 확인을 클릭합니다. Expression Blend에 새 프로젝트가 로드되고 편집할 수 있도록 표시됩니다.

   팁:
   이미 열려 있는 프로젝트가 있으면 새 프로젝트를 열기 전에 현재 프로젝트를 저장할지 여부를 묻는 대화 상자가 표시될 수 있습니다.

5. 새 프로젝트가 메모리에 로드되면 파일 메뉴에서 모두 저장을 클릭하여 디스크에 저장합니다. 이름 텍스트 상자에 AWProductPhotos라는 이름이 이미 표시되어 있으므로 확인을 클릭합니다.

   주의:
   Expression Blend에서 작업할 때는 하드 디스크가 아닌 메모리에서 변경 작업이 수행되므로 파일을 초기부터 자주 저장해야 합니다. 자세한 내용은 프로젝트 및 파일 관리를 참조하십시오.

6. 프로젝트 메뉴에서 참조 추가를 클릭합니다.

7. 참조 추가 대화 상자에서 앞서 설명한 두 번째 작업이 끌날 때 작성한 AWDataSource.dll 파일에 대한 참조를 찾아 추가합니다. AWDataSource.dll 파일은 AWDataSource 프로젝트의 bin/Debug 폴더에 있을 수 있습니다.

8. 확인을 클릭합니다. 이제 AWDataSource.dll은 프로젝트의 일부입니다. 프로젝트 패널의 파일에서 참조 노드를 확장하면 AWDataSource.dll에 대한 참조가 표시됩니다.

9. 프로젝트 패널의 데이터에서 + CLR 개체 단추를 클릭합니다.

10. CLR 개체 데이터 원본 추가 대화 상자에서 AWDataSource 노드를 확장하고 ProductPhotosCollection을 선택한 다음 확인을 클릭합니다.

    프로젝트 패널의 데이터 아래에서 ProductPhotosCollectionDS라는 데이터 원본이 프로젝트에 추가되었습니다. ProductPhotosCollectionDS 데이터 원본은 참조한 CLR 클래스의 인스턴스 구조를 나타냅니다. ProductPhotosCollectionDS 및 ProductPhotosCollection을 확장하여 구조를 확인합니다. 이 작업의 후반 단계에서는 프로젝트 패널의 데이터 아래에서 아트보드로 데이터를 끌어 새 컨트롤을 만듭니다.

11. 인터랙션 패널의 개체 및 타임라인에서 LayoutRoot를 두 번 클릭하여 활성화합니다. 요소를 활성화하면 요소의 이름 주위에 음영 처리된 경계 상자가 나타납니다.

    팁:
    요소에 자식 요소를 추가하거나 다른 특별한 작업을 수행하려는 경우에는 인터랙션 패널의 개체 및 타임라인에서 부모 요소를 두 번 클릭한 다음 자식 요소를 추가합니다. 이러한 액션을 활성화라고 합니다. 활성화된 요소는 요소 이름 주위의 음영 처리된 경계 상자로 식별됩니다. 요소의 속성을 변경하려면 인터랙션 패널의 개체 및 타임라인에서 요소 이름을 클릭합니다. 이러한 액션을 선택이라고 합니다. 선택된 요소는 강조 표시된 배경색으로 식별됩니다. 요소를 활성화하지 않고도 선택할 수 있습니다.

12. 도구 상자에서 선택 도구 를 클릭합니다. 아트보드에서 LayoutRoot의 맨 위에 있는 두꺼운 눈금자 영역으로 마우스 포인터를 이동합니다. 열 눈금자가 포인터를 따라 이동하며 클릭할 경우 새로운 열 구분선이 배치될 위치를 나타납니다.

13. 왼쪽 열과 오른쪽 열의 너비가 같아지도록 새로운 열 구분선을 클릭하여 만듭니다. 왼쪽 열에는 제품 사진 미리 보기 목록이 포함되고 오른쪽 열에는 선택한 목록 항목을 나타내는 큰 사진이 포함됩니다. 열 구분선이 LayoutRoot 안에 나타납니다.

    팁:
    아트보드에 전체 LayoutRoot 요소를 표시하려면 축소해야 할 수 있습니다. 축소하려면 아트보드의 아래쪽에 있는 텍스트 상자 에 확대/축소 값을 입력하거나, 확대/축소 값 옆에 있는 화살표를 클릭하거나, Ctrl 키를 누른 상태로 마우스 휠을 움직입니다.

14. 아트보드에서 LayoutRoot의 왼쪽에 있는 두꺼운 눈금자 영역 위로 포인터를 이동합니다. 단추가 들어갈 만한 크기로 위쪽 행이 만들어지도록 새로운 행 구분선을 클릭하여 만듭니다. 행을 고정 높이로 잠그려면 위쪽 행 옆에 있는 열린 자물쇠 아이콘 을 클릭합니다.

    팁:

    위 단계에서 설명한 액션의 결과를 확인하려면 인터랙션 패널의 개체 및 타임라인에서 LayoutRoot를 마우스 오른쪽 단추로 클릭하고 XAML 보기를 클릭하여 XAML(eXtensible Application Markup Language)을 표시합니다. 그러면 아트보드가 XAML 보기로 전환되고 LayoutRoot 코드가 강조 표시됩니다. 더 자세히 보려면 창 메뉴에서 패널 숨기기를 클릭하거나 F4 키 또는 Tab 키를 누릅니다. <Grid.ColumnDefinitions> 섹션과 <Grid.RowDefinitions> 섹션이 LayoutRoot를 나타내는 <Grid> 요소에 추가되었습니다. Width 및 Height 특성에서는 열의 크기가 서로 비례하는 배율 크기 조정을 사용합니다. 예를 들어 Width가 2*이면 너비가 *로 설정된 열 크기의 두 배인 열이 생성됩니다. 잠긴 행은 높이가 고정되어 있으므로 배율 크기 조정이 적용되지 않습니다. XAML 코드 확인을 마친 후에는 다시 디자인 보기로 전환하고 F4 키 또는 Tab 키를 눌러 패널을 복원해야 합니다.

15. 프로젝트 패널의 데이터에서 아트보드의 왼쪽 위 모눈 셀로 ProductPhotosCollection의 GetDataCommand를 끕니다.

16. 드롭다운 목록이 표시되면 Button을 클릭합니다.

17. 데이터 바인딩 만들기 대화 상자에서 필드 선택에서 Command를 선택한 다음 확인을 클릭합니다. AWDataSource 클래스의 GetDataCommand 접근자 메서드에 바인딩된 새 단추가 만들어집니다. 런타임에 단추를 클릭하면 ProductPhotosCollection 데이터 원본에서 GetDataCommand가 실행되고 이 항목의 두 번째 작업에서 설명한 것처럼 해당 명령의 구현 과정에서는 GetData 메서드가 호출됩니다.

    팁:
    도구 상자에서 선택 도구를 클릭하고 아트보드 또는 개체 및 타임라인에서 새 단추를 선택한 다음 아트보드의 표시기를 사용하여 아트보드에서 새 단추를 이동하고 크기를 조정할 수 있습니다. 자세한 내용은 개체의 위치 변경 또는 좌표 이동 및 개체의 크기 조정 또는 비율 크기 조정을 참조하십시오.

    팁:
    속성 패널에서 데이터 바인딩에 액세스할 수 있습니다. 데이터 바인딩을 만든 다음 데이터 바인딩 만들기 대화 상자를 다시 열려면 먼저 개체 및 타임라인에서 Button을 선택하고 속성 패널의 기타에서 Command 속성 옆에 있는 고급 속성 옵션  단추를 클릭한 다음 데이터 바인딩을 클릭합니다.

18. 개체 및 타임라인에서 **[Button]**을 선택하고 속성 패널의 공용속성에서 Content 속성을 찾습니다. 제품 사진 가져오기라는 텍스트를 입력하여 Content 속성을 설정한 다음 Enter 키를 누릅니다.

19. 도구 상자에서 선택 도구를 클릭한 다음 아트보드에서 표시기를 사용하여 [Button] 요소를 이동하고 크기를 조정합니다. **[Button]**을 왼쪽 위 모눈 셀에 맞춥니다. 그런 다음 속성 패널의 레이아웃에서 다음 속성을 설정합니다.

    • Width 및 Height 속성을 Auto로 설정합니다.

    • Margin 속성을 0으로 설정합니다.

    • HorizontalAlignment 및 VerticalAlignment 속성을 Center로 설정합니다.

    이렇게 설정하면 단추는 Content 속성의 텍스트에 맞게 크기가 조정되고 모눈 셀의 가운데에 맞춰집니다.

20. 프로젝트 패널의 데이터에서 아트보드의 왼쪽 맨 아래 모눈 셀로 **ProductPhotos (배열)**를 끕니다.

21. 드롭다운 목록이 표시되면 ListBox를 클릭합니다.

22. 데이터 바인딩 만들기 대화 상자에서 필드 선택에서 ItemsSource를 선택한 다음 확인을 클릭합니다.

    팁:
    기본적으로 데이터 템플릿은 데이터에 대한 바인딩을 포함할 수 있는 UI 요소의 트리입니다. 특정 형식의 데이터를 표시해야 할 때마다 적합한 데이터 템플릿을 선택해야 하며, 템플릿에 따라 사용자에게 표시할 업데이트된 데이터까지 포함하는 요소 트리의 새 복사본의 서식이 지정됩니다. ListBox 요소에 표시되는 각 항목은 이 항목의 두 번째 작업에서 구현한 ProductPhoto 형식의 개체입니다.

23. 데이터 템플릿 만들기 대화 상자에서 새 데이터 템플릿 및 표시 필드 라디오 단추를 선택합니다. 이 옵션은 데이터 팔레트에서 끌어 온 데이터 형식의 구조(예: ProductPhoto 개체 컬렉션의 각 요소)를 정의합니다. 이제 일부 데이터 구조에 바인딩할 수 있으므로 데이터 템플릿의 요소 트리 모양을 정의할 수 있습니다. 각 데이터 항목 옆에는 데이터 필드를 나타내는 데 사용할 요소(StackPanel 및 TextBlock 요소)를 결정하는 드롭다운 목록이 있습니다. 그 옆에는 데이터 항목을 바인딩할 요소의 속성을 나타내는 레이블이 있습니다.

24. LargePhoto는 ListBox에만 표시되어야 하므로 해당 옵션의 선택을 취소합니다.

25. ModifiedDate 데이터 필드는 StackPanel 형식이므로 해당 데이터 형식을 표시하는 데 더 적합한 요소 형식으로 컨트롤을 변경해야 합니다. ModifiedDate 옆에 있는 드롭다운 목록에서 TextBlock을 선택합니다. 레이블이 자동으로 Text로 변경됩니다.

26. ThumbNailPhoto 데이터 필드는 ImageSource 형식이므로 해당 데이터 형식을 표시하는 데 더 적합한 요소 형식으로 컨트롤을 변경해야 합니다. ThumbNailPhoto 옆에 있는 드롭다운 목록에서 Image를 선택합니다. 레이블이 자동으로 Source로 변경됩니다.

27. 확인을 클릭합니다. 문서에 새 ListBox가 삽입됩니다.

    팁:
    데이터 템플릿은 리소스입니다. ProductPhotosTemplate 데이터 템플릿을 만든 후 수정하려면 리소스 패널에서 Window1.xaml 노드를 확장하고 Window를 확장한 다음 ProductPhotosTemplate 옆에 있는 단추를 클릭합니다.

28. 인터랙션 패널의 개체 및 타임라인에서 [ListBox] 요소를 선택하고 속성 패널의 레이아웃에서 다음을 수행합니다.

    • Width 및 Height 속성을 Auto로 설정합니다.

    • Margin 속성을 8로 설정합니다.

    • HorizontalAlignment 및 VerticalAlignment 속성을 Center로 설정합니다.

    이렇게 설정하면 ListBox가 왼쪽 아래 모눈 셀을 거의 채우게 됩니다.

29. 도구 상자에서 Image  컨트롤을 선택합니다.

    팁:
    도구 상자에 Image 컨트롤이 표시되지 않으면 자산 라이브러리 단추 를 클릭하여 찾을 수 있습니다. 이 갤러리에서 컨트롤을 선택하면 해당 아이콘이 도구 상자의 자산 라이브러리 단추 위에 나타납니다.

30. 아트보드의 오른쪽 아래 모눈 셀에서 전체 셀을 거의 채우도록 Image를 그립니다.

31. 개체 및 타임라인에서 **[Image]**를 선택하고 속성 패널의 공용 속성에서 Source 속성을 찾습니다. Source 속성의 이름을 클릭한 다음 드롭다운 목록이 나타나면 데이터 바인딩을 선택합니다.

32. [ListBox] 요소의 속성에 데이터를 바인딩해야 하므로 데이터 바인딩 만들기 대화 상자에서 요소 속성 탭을 선택합니다.

33. 장면 요소에서 Window 및 LayoutRoot를 확장하고 ListBox([System.WIndows.Controls.ListBox])를 선택합니다.

34. 표시 드롭다운 목록에서 모든 속성을 선택합니다. 그러면 Source 속성(String)과 데이터 형식이 같은 속성뿐만 아니라 바인딩할 수 있는 모든 속성이 표시됩니다.

35. 속성에서 **SelectedItem : (Object)**를 선택합니다.

36. 사용자 지정 패스 식 사용 확인란을 선택합니다. 기본 식은 SelectedItem입니다. 이 식을 SelectedItem.LargePhoto로 변경하여 현재 선택된 ProductPhoto 개체의 LargePhoto 멤버에 바인딩합니다.

37. 마침을 클릭합니다.

38. 프로젝트 메뉴에서 프로젝트 테스트를 클릭하거나 F5 키를 누릅니다. 응용 프로그램이 시작되면 제품 사진 가져오기를 클릭하여 응용 프로그램을 테스트합니다. 목록 상자에 데이터가 로드되면 해당 항목을 단계별로 실행하고 오른쪽 열에 나타나는 큰 사진을 확인합니다.

완성된 응용 프로그램

맨 위로 이동