iOS 테이블 보기 재고

Applies to Windows and Windows Phone

iOS의 UITableView 작업에는 이미 익숙하므로 여기서는 Windows 스토어 앱에서 유사한 컨트롤을 사용하여 데이터 바인딩을 수행하는 방법을 살펴봅니다.

다음 동영상에서는 iOS의 테이블 보기와 Windows 스토어 앱의 목록 보기를 비교합니다.

iOS의 테이블 보기는 연락처 목록, 할 일 또는 쇼핑 항목과 같은 데이터 목록을 표시하는 데 사용됩니다. 여기에서는 ListViewGridView 컨트롤을 사용하여 Windows 8용 Windows 스토어 앱에서 데이터 목록을 만들기 위해 iOS 앱 빌드 기술을 활용하는 방법을 보여 줍니다. Windows 스토어 앱의 목록 보기에 대해 설명하고 데이터를 목록이나 마스터 세부 정보 보기로 구성하는 데 사용되는 iOS UITableView 컨트롤과 비교합니다. 이러한 컨트롤에서 사용하는 데이터는 앱의 일부이거나 로컬 또는 원격 데이터베이스에서 가져오거나 웹에서 다운로드할 수 있습니다.

iOS 테이블 보기 개요

iOS의 테이블 보기는 이러한 데이터 목록을 표시하는 데 자주 사용됩니다. 테이블 보기는 iOS 앱에서 가장 일반적으로 사용되는 사용자 인터페이스 컨트롤 중 하나입니다. 테이블 보기는 섹션으로 구분할 수 있는, 세로로 스크롤하는 단일 항목 열을 제공합니다. 테이블 보기는 다음과 같은 여러 가지 용도로 사용됩니다.

  • 인덱싱된 항목 목록 표시
  • 항목 목록을 사용하여 계층적으로 구조화된 데이터 탐색
  • 시각적으로 구분되는 그룹으로 데이터 구성

다음은 항목 목록을 보여 주는 iOS의 간단한 테이블 보기입니다.

iOS tableview 앱

테이블 보기는 마스터 세부 정보 목록 프로그래밍에 자주 사용됩니다. 아래와 같이 테이블 보기는 분할 보기와 함께 사용되어 각 항목의 세부 정보로 드릴다운할 수 있는 항목 목록을 보여 줍니다.

iOS tableview 앱

Windows 스토어 앱의 ListView

Windows 8 컨트롤 라이브러리는 데이터 목록을 표시하는 데 사용할 수 있는 ListViewGridView 컨트롤을 제공합니다. ListView은 항목을 목록이나 그리드로 표시하도록 사용자 지정할 수 있는 다양한 컨트롤입니다. 다음은 스크롤 가능한 항목 목록을 표시하는 데 사용되는 ListView 컨트롤에 대한 예입니다.

ListView를 사용하는 Windows 8 앱

ListViewGridView 컨트롤은 정적 메모리 목록, 로컬 또는 원격 데이터베이스, XML 문서, 원격 웹 서비스 또는 피드에서 데이터를 소싱할 수 있습니다. ListView 컨트롤은 데이터 바인딩이라는 기술을 사용하여 데이터 원본과 연결할 수 있습니다. 데이터 바인딩을 사용하면 Windows 스토어 앱에서 데이터를 쉽게 표시, 추가, 삭제 또는 관리할 수 있습니다. 자세한 내용은 데이터 바인딩 개요데이터 바인딩 컨트롤을 참조하세요.

또한 ListView 컨트롤을 사용하여 다음과 같이 마스터 세부 정보 목록을 표시할 수 있습니다. 항목 목록은 왼쪽의 ListView 컨트롤을 사용하여 표시되고 세부 정보는 오른쪽의 Label 컨트롤을 사용하여 표시됩니다. 마스터 목록 및 세부 정보를 표시하는 데 사용되는 패널은 GridView 또는 StackPanel 컨트롤을 포함하여 여러 가지 다양한 방법으로 프로그래밍할 수 있습니다.

ListView를 사용하는 Windows 8 앱

iOS UITableView와 달리 ListView 컨트롤을 사용하여 항목을 그리드에 표시하면 사용 가능한 실제 자산을 더 잘 사용할 수도 있습니다. 앞에 표시된 목록 항목은 연속된 항목이 다른 항목 아래에 배치되는 방식으로 그리드에 배치됩니다. 다음과 같이 열의 행 수를 지정하여 그리드의 레이아웃을 제어할 수 있습니다.

ListView를 사용하는 Windows 8 앱

자세한 내용은 빠른 시작: ListView 및 GridView 컨트롤 추가빠른 시작: 레이아웃 정의를 참조하세요.

iOS와 Windows 스토어 앱의 목록 디자인 비교

iOS에서 UITableView를 사용하여 목록 보기를 구현한 경우 Windows 8용 Windows 스토어 앱의 ListView 컨트롤에서 유사한 기능을 제공하는 것을 확인할 수 있습니다. 다음 표에는 앱에서 ListView 컨트롤을 구현하는 데 필요한 다양한 단계가 열거되어 있습니다. 이 표에서는 iOS와 Windows 8에서 해당 단계를 수행할 수 있는 방법을 보여 줍니다. iOS와 Windows 8의 단계 사이에 유사한 매핑이 있음을 확인할 수 있습니다.

단계iOSWindows 8
UI 컨트롤을 만듭니다. UITableView를 사용합니다. ListView 클래스를 사용합니다. 자세한 내용은 목록 보기를 추가하는 방법을 참조하세요.
목록의 모양과 느낌을 정의합니다.UITableViewPlain 또는 UITableViewGrouped를 사용합니다. ItemsPanelTemplate 클래스를 사용하여 ListView 컨트롤의 ItemsPanel 속성을 설정함으로써 레이아웃을 정의합니다. 그룹화된 레이아웃에 대해서는 ListView의 항목을 그룹화합니다. 자세한 내용은 빠른 시작: ListView 및 GridView 컨트롤 추가를 참조하세요. 그룹화된 레이아웃에 대해서는 목록이나 그리드에서 항목을 그룹화하는 방법을 참조하세요.
항목의 모양과 느낌을 정의합니다.고정 스타일에 UITableViewCellStyle을 사용합니다. 사용자 지정 레이아웃의 경우 셀에 대해 사용자 지정 보기를 정의 합니다. 각 항목의 모양과 느낌에 대해 ItemsControl 클래스의 ItemTemplate 속성을 정의합니다. 자세한 내용은 빠른 시작: ListView 및 GridView 컨트롤 추가를 참조하세요.
컨트롤을 데이터 원본에 데이터 바인딩합니다.컨트롤러에 UITableViewDelegate 인터페이스를 구현합니다.ListView 컨트롤의 ItemsSource 속성을 항목 컬렉션으로 설정합니다. 그룹화된 목록의 경우 ItemsSource 속성을 CollectionViewSource 클래스 인스턴스로 설정합니다. 자세한 내용은 빠른 시작: ListView 및 GridView 컨트롤 추가를 참조하세요. 그룹화된 목록에 대해서는 목록이나 그리드에서 항목을 그룹화하는 방법을 참조하세요.

 

ListView 샘플

이제 ListView 컨트롤을 사용하여 사진 목록을 표시하는 간단한 Windows 스토어 앱을 빌드합니다. 원본 iOS 앱은 다음과 같이 표시되며, 테이블 셀에 UITableViewCellStyleSubtitle 스타일이 지정된 UITableView를 사용합니다. 셀 스타일은 제목, 부제목 및 이미지 표시를 허용합니다.

UITableView를 사용하는 iOS 앱

다음은 해당 Windows 스토어 앱의 모양입니다.

앱의 Windows 8 버전

앱 빌드

다음은 이 앱을 만드는 데 필요한 고급 단계입니다.

다음은 데이터 바인딩된 ListView를 사용하여 간단한 앱을 빌드하는 방법입니다.

  • 앱을 만듭니다.

    이 샘플에서는 C# 새 앱 템플릿을 사용하여 앱을 만듭니다.

    • Microsoft Visual Studio를 시작합니다.
    • 파일 메뉴에서 새 프로젝트를 클릭합니다.
    • Windows 스토어가 아직 선택되지 않은 경우 설치됨 > 템플릿 > Visual C#을 확장하고 Windows 스토어를 클릭합니다.
    • 새 앱(XAML)이 아직 선택되지 않은 경우 클릭합니다.
    • 이름위치 상자에 앱의 이름(예: Space Photos)과 위치를 입력하거나 기본값을 그대로 유지합니다.
    • 확인을 클릭합니다.
  • 데이터 원본을 정의합니다.

    Windows 8은 다양한 데이터 원본을 앱에서 사용할 수 있도록 허용합니다. 이 앱에서는 프로그램에 정의되고 메모리에서 인스턴스화된 데이터를 사용합니다. 다른 데이터 원본을 사용하는 방법에 대한 자세한 내용은 데이터 바인딩 개요를 참조하세요.

    이 앱은 사진, 제목 및 각 사진에 대한 설명을 보여 주는 사진 갤러리 앱입니다. 데이터 원본을 정의하려면 먼저 다음 코드에 표시된 대로 클래스를 정의하여 항목 목록을 만듭니다.

    • 프로젝트 메뉴에서 Add Class를 클릭합니다.
    • Name 상자에서 기본 텍스트를 Photo.cs로 바꿉니다.
    • 확인을 클릭합니다.
    • 파일 맨 위에 다음 using 문을 추가합니다.

      using Windows.UI.Xaml.Media;

      using Windows.UI.Xaml.Media.Imaging;

    • class Photo { } 코드를 다음 코드로 바꿉니다.

      
      public class Photo
      {
      
          public Photo(string title,  string description, string imagePath, string category)
          {
              this.Title = title;
              this.Description = description;
              this._imagePath = imagePath;
              this.Category = category;
          }
          public string Title{ get; set; }
          public string Description{ get; set; }
          public string Category { get; set; }
          private ImageSource _image = null;
          private String _imagePath = null;
          public ImageSource Image
          {
              get
              {
                  if (this._image == null && this._imagePath != null)
                  {
                      this._image = new BitmapImage(new Uri(this._imagePath));
                  }
                  return this._image;
              }
          }
      }
      
      

      다음 코드에 표시된 대로 MainPage.xaml.cs 파일의 생성자에서 ListView 컨트롤의 데이터 원본 역할을 할 사진 목록을 만듭니다.

      • Visual Studio의 솔루션 탐색기 창에서 MainPage.xaml을 확장하고 MainPage.xaml.cs를 두 번 클릭합니다.
      • MainPage 클래스에서 MainPage 메서드 앞에 다음 코드 줄을 추가합니다.

        private List<Photo> photos = new List<Photo>();

      • MainPage 메서드에서 다음 코드 줄 앞에

        this.InitializeComponent();

        아래 표시된 코드의 나머지 부분을 추가합니다.
        
        Photo photo1 = new Photo("The Cat's Eye Nebula", "Cat's Eye Nebula (NGC 6543) is revealed in this detailed view from NASA's Hubble Space Telescope.",
            "http://www.nasa.gov/images/content/64883main_image_feature_211_jw4.jpg", "Nebula");
        photos.Add(photo1);
        Photo photo2 = new Photo("Chaos at the Heart of Orion", "The chaos that baby stars are creating 1,500 light years away in a cosmic cloud called the Orion nebula.",
            "http://www.nasa.gov/images/content/162283main_image_feature_693_ys_4.jpg", "Nebula");
        photos.Add(photo2);
        Photo photo3 = new Photo("An Eyeful of Saturn", "Saturn and its rings completely  in this natural color image taken on March 27, 2004.", 
            "http://www.nasa.gov/images/content/59802main_pia05389-516.jpg", "Planets");
        photos.Add(photo3);
        Photo photo4 = new Photo("Jupiter Gets a Close-up", "NASA's Cassini spacecraft took this true color mosaic of Jupiter.",
            "http://www.nasa.gov/images/content/53254main_MM_image_feature_97_jw4.jpg", "Planets");
        photos.Add(photo4);
        Photo photo5 = new Photo("A Long Way From Home", "This image of the Earth and moon in a single frame was recorded by Voyager 1 ",
            "http://www.nasa.gov/images/content/151232main_image_feature_601_ys_4.jpg", "Earth/Moon");
        photos.Add(photo5);
        Photo photo6 = new Photo("Milky Way Neighbor", "Our Sun and solar system are embedded in a broad pancake of stars deep within the Milky Way galaxy.",
            "http://www.nasa.gov/images/content/63375main_image_feature_202_jw4.jpg", "Galaxy");
        photos.Add(photo6);
        Photo photo7 = new Photo("Moon Aglow", "Framed by the Earth's horizon and airglow, the full moon floats in the blackness of space .",
            "http://www.nasa.gov/images/content/111199main_image_feature_290_ys4.jpg", "Earth/Moon");
        photos.Add(photo7);
        
        
        

        List<Photo> 형식의 사진 목록이 C# 일반 목록으로 정의됩니다. 자세한 내용은 C# 일반 사항 소개를 참조하세요.

        • 페이지에 ListView 컨트롤을 추가합니다. 다음과 같이 XAML(Extensible Application Markup Language) 코드를 사용하여 ListView 컨트롤을 앱에 추가합니다. Visual Studio의 솔루션 탐색기 창에서 MainPage.xaml을 두 번 클릭합니다.
        • 다음 코드 줄을 바꿉니다.

          <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"></Grid>

          아래 표시된 코드로 바꿉니다.
          
          // Windows 8
          <StackPanel Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
              <TextBlock Text="NASA/JPL Photos" Style="{StaticResource HeaderTextStyle}"></TextBlock>
              <ListView x:Name="photoListView" ItemsSource="{Binding}" >
              </ListView>
              </StackPanel>
          
          // Windows 8.1
          <StackPanel Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
              <TextBlock Text="NASA/JPL Photos" Style="{StaticResource HeaderTextBlockStyle}"></TextBlock>
              <ListView x:Name="photoListView" ItemsSource="{Binding}" >
              </ListView>
              </StackPanel>
          
          
          

          XAML에서 {Binding..} 구문을 사용하여 데이터 바인딩을 만듭니다. 바인딩의 원본은 ListView 컨트롤의 DataContext 속성을 설정하여 만듭니다. {Binding} 값이 있는 ItemsSource 특성은 목록의 항목이 ListView 컨트롤 자체의 DataContext 속성에 데이터 바인딩되도록 지정합니다. 데이터 바인딩에 대한 자세한 내용은 데이터 바인딩 개요를 참조하세요.

          또한 ListView 컨트롤을 프로그래밍 방식으로 앱에 추가할 수 있습니다. 자세한 내용은 빠른 시작: 컨트롤 추가 및 이벤트 처리를 참조하세요.

    • 목록의 모양과 느낌을 디자인합니다.

      iOS 목록의 모양 및 느낌과 유사한 목록 보기의 기본 모양과 느낌 즉, 스크롤 가능한 목록을 사용합니다. 목록의 모양과 느낌 변경에 대한 자세한 내용은 빠른 시작: ListView 및 GridView 컨트롤 추가를 참조하세요.

    • 목록에 있는 항목의 모양과 느낌을 디자인합니다.

      Visual Studio에서 MainPage.xaml 파일의 여는 <ListView x:Name="photoListView" ItemsSource="{Binding}"> 태그와 닫는 </ListView> 태그 사이에 다음 XAML 코드를 추가합니다.

      
      // Windows 8
      <ListView.ItemTemplate>
          <DataTemplate>
              <Grid Height="110" Margin="6">
                  <Grid.ColumnDefinitions>
                      <ColumnDefinition Width="Auto"/>
                      <ColumnDefinition Width="*"/>
                  </Grid.ColumnDefinitions>
                  <Image Source="{Binding Image}" Stretch="UniformToFill" Grid.Column="0"  Width="110" Height="110"/>
                  <StackPanel Grid.Column="1" VerticalAlignment="Top" Margin="10,0,0,0">
                      <TextBlock Text="{Binding Title}" Style="{StaticResource TitleTextStyle}" TextWrapping="NoWrap"/>
                      <TextBlock Text="{Binding Description}" Style="{StaticResource BodyTextStyle}" MaxHeight="60"/>
                  </StackPanel>
              </Grid>
          </DataTemplate>
      </ListView.ItemTemplate>
      
      // Windows 8.1
      <ListView.ItemTemplate>
          <DataTemplate>
              <Grid Height="110" Margin="6">
                  <Grid.ColumnDefinitions>
                      <ColumnDefinition Width="Auto"/>
                      <ColumnDefinition Width="*"/>
                  </Grid.ColumnDefinitions>
                  <Image Source="{Binding Image}" Stretch="UniformToFill" Grid.Column="0"  Width="110" Height="110"/>
                  <StackPanel Grid.Column="1" VerticalAlignment="Top" Margin="10,0,0,0">
                      <TextBlock Text="{Binding Title}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap"/>
                      <TextBlock Text="{Binding Description}" Style="{StaticResource BodyTextBlockStyle}" MaxHeight="60"/>
                  </StackPanel>
              </Grid>
          </DataTemplate>
      </ListView.ItemTemplate>
      
      
      

      목록에 있는 항목의 모양과 느낌을 지정하려면 XAML 코드를 사용하여 ListView 컨트롤의 ItemsTemplate 속성을 설정하고 DataTemplate 개체를 지정해야 합니다. 추가 정보는 빠른 시작: ListView 및 GridView 컨트롤 추가를 참조하세요. 레이아웃의 컨트롤은 데이터 개체의 속성에 바인딩되거나 콘텐츠가 정의된 인라인을 가질 수 있습니다.

      항목에 대한 템플릿을 ListView 인라인에 정의했습니다. 템플릿은 그리드로 구성되며 왼쪽 열에는 사진이 표시됩니다. 또한 오른쪽 열에는 이미지 제목과 그 아래에 해당 설명이 함께 표시됩니다. 제목과 설명이 위 아래에 표시됩니다.

      Image 개체의 Source 속성은 항목의 백업 Photo 개체 Image 속성에 바인딩되는 {Binding Image}로 지정됩니다. 마찬가지로 두 TextBlock 컨트롤은 각각 항목 백업 Photo 개체의 TitleDescription 속성에 바인딩됩니다.

      Windows 8을 사용하는 경우 두 TextBlock 컨트롤의 스타일은 정적으로 정의된 두 스타일 즉, TitleTextStyleBodyTextStyle을 사용하여 정의됩니다. 이러한 스타일 정의는 프로젝트의 StandardStyles.xaml 파일에 있습니다. 이 파일을 보려면 솔루션 탐색기 창에서 공용 폴더를 확장하고 StandardStyles.xaml을 두 번 클릭합니다.

      Windows 8.1을 사용하는 경우 StandardStyles.xaml 파일이 더 이상 없으므로 기본 제공 스타일인 TitleTextBlockStyleBodyTextBlockStyle을 대신 사용해야 합니다. XAML 템플릿에서 시작하는 Windows 8 및 Windows 8.1 미리 보기(영문)를 참조하세요.

    • 항목 원본을 설정합니다.

      항목 목록을 만든 다음에는 매우 간단하게 항목 원본을 설정할 수 있습니다. Visual Studio에서 MainPage.xaml.cs 파일의 OnNavigatedTo 메서드에 다음에 표시된 코드를 추가합니다.

      
       protected override void OnNavigatedTo(NavigationEventArgs e) 
              {
                  photoListView.ItemsSource = photos;
              }
      
      

      Windows 8 ListView 앱

그리드 레이아웃에서 ListView 컨트롤 사용

Visual Studio에서 MainPage.xaml 파일의 여는 <ListView x:Name="photoListView" ItemsSource="{Binding}"> 태그와 닫는 </ListView> 태그 사이에 다음 XAML 코드를 추가합니다.


<ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapGrid Orientation="Vertical" MaximumRowsOrColumns="-1" />
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>

그러면 ListView 레이아웃이 세로 방향의 WrapGrid 컨트롤로 정의됩니다. MaximumRowsOrColumns 속성에 대한 -1 값은 최대값이 없음을 나타내는 특수 값입니다. 즉, ListView 컨트롤의 높이에 들어갈 만큼 많은 항목이 세로로 표시된다는 의미입니다.

실행 중인 ListView

목록 보기의 그룹화된 레이아웃

iOS의 그룹화된 테이블 보기와 마찬가지로 ListView 컨트롤도 다음에 표시된 대로 항목을 그룹화하는 기능을 제공합니다. 사진은 사진 범주 즉, 지구/달, 은하계, 성운 또는 행성에 따라 그룹화됩니다. 그룹화된 목록 레이아웃에 대한 자세한 내용은 목록이나 그리드에서 항목을 그룹화하는 방법을 참조하세요.

그룹화된 ListView 컨트롤

관련 항목

iOS 개발자용 항목
iOS 개발자용 리소스
iOS 개발자용 Windows 8 컨트롤
iOS 개발자용 Windows 8 도움말
목록 및 그리드 보기 항목
빠른 시작: ListView 및 GridView 컨트롤 추가
목록 보기를 추가하는 방법
Windows 8.1에서 UITableView 같은 간단한 목록 만들기
목록이나 그리드에서 항목을 그룹화하는 방법
빠른 시작: 레이아웃 정의
ListView 클래스
데이터 바인딩 개요
XAML 템플릿에서 시작하는 Windows 8 및 Windows 8.1 미리 보기

 

 

표시:
© 2014 Microsoft