시맨틱 줌Semantic zoom

시맨틱 줌을 사용하면 사용자가 그룹화된 큰 데이터 집합을 빠르게 탐색할 수 있도록 동일한 콘텐츠의 두 가지 보기 간을 전환할 수 있습니다.Semantic zoom lets the user switch between two different views of the same content so that they can quickly navigate through a large set of grouped data.

  • 확대 보기는 기본 콘텐츠 보기입니다.The zoomed-in view is the main view of the content. 개별 데이터 항목을 표시하는 기본 보기입니다.This is the main view where you show individual data items.
  • 축소 보기는 동일한 콘텐츠의 상위 수준 보기입니다.The zoomed-out view is a higher-level view of the same content. 일반적으로 이 보기에서는 그룹화된 데이터 집합에 대해 그룹 헤더가 표시됩니다.You typically show the group headers for a grouped data set in this view.

예를 들어 주소록을 볼 때 사용자는 화면을 축소하여 "W" 문자로 신속하게 이동하거나, 화면을 확대하여 해당 문자와 연결된 이름을 확인할 수 있습니다.For example, when viewing an address book, the user could zoom out to quickly jump to the letter "W", and zoom in on that letter to see the names associated with it.

중요 API: SemanticZoom 클래스, ListView 클래스, GridView 클래스Important APIs: SemanticZoom class, ListView class, GridView class

기능:Features:

  • 축소 보기의 크기는 시맨틱 줌 컨트롤의 범위에 의해 제한됩니다.The size of the zoomed-out view is constrained by the bounds of the semantic zoom control.
  • 그룹 헤더를 탭하면 보기가 전환됩니다.Tapping on a group header toggles views. 보기 간에 전환하는 방법으로 손가락 모으기를 사용할 수 있습니다.Pinching as a way to toggle between views can be enabled.
  • 활성 헤더는 보기 간에 전환합니다.Active headers switch between views.

올바른 컨트롤인가요?Is this the right control?

SemanticZoom 컨트롤은 한두 페이지에 모두 표시할 수 없을 정도로 큰 그룹화된 데이터 세트 그룹을 표시해야 하는 경우에 사용합니다.Use a SemanticZoom control when you need to show a grouped data set that's large enough that it can't all be shown on one or two pages.

시맨틱 줌을 광학 줌과 혼동하지 마세요.Don't confuse semantic zooming with optical zooming. 두 확대 방식은 조작 방식과 기본 동작(확대 축소 비율에 따라 더 많이 또는 더 자세히 표시)은 같지만, 광학 줌은 사진처럼 개체나 콘텐츠 영역에 대해 배율을 조정하는 것을 의미합니다.While they share both the same interaction and basic behavior (displaying more or less detail based on a zoom factor), optical zoom refers to the adjustment of magnification for a content area or object such as a photograph. 광학 줌을 수행하는 컨트롤에 대한 정보는 ScrollViewer 컨트롤을 참조하세요.For info about a control that performs optical zooming, see the ScrollViewer control.

Examples

XAML Controls GalleryXAML Controls Gallery
XAML controls gallery

XAML 컨트롤 갤러리 앱이 설치된 경우 여기를 클릭하여 앱을 열고 SemanticZoom의 기능을 확인합니다.If you have the XAML Controls Gallery app installed, click here to open the app and see the SemanticZoom in action.

XAML 컨트롤 갤러리XAML Controls Gallery

컨트롤 갤러리의 SemanticZoom 섹션에서는 사용자가 컨트롤 형식의 그룹화된 섹션을 빠르게 확대/축소할 수 있는 탐색 환경을 보여줍니다.The SemanticZoom section within the Controls Gallery demonstrates a navigation experience that allows users to quickly zoom in and out of grouped sections of control types.

XAMl 컨트롤 갤러리에서 사용되는 시맨틱 줌 예제

사진 앱Photos app

사진 앱에 사용된 시맨틱 줌은 다음과 같습니다.Here's a semantic zoom used in the Photos app. 사진은 월별로 그룹화됩니다.Photos are grouped by month. 기본 그리드 보기에서 월 머리글을 선택하면 더 빠른 탐색을 위해 월 목록 보기로 화면이 축소됩니다.Selecting a month header in the default grid view zooms out to the month list view for quicker navigation.

사진 앱에 사용된 시맨틱 줌

시맨틱 줌 만들기Create a semantic zoom

SemanticZoom 컨트롤은 자체적인 시각적 표현이 없습니다.The SemanticZoom control doesn't have any visual representation of its own. 콘텐츠 보기를 제공하는 다른 두 컨트롤(일반적으로 ListView 또는 GridView 컨트롤) 간의 전환을 관리하는 호스트 컨트롤입니다.It's a host control that manages the transition between 2 other controls that provide the views of your content, typically ListView or GridView controls. 보기 컨트롤을 SemanticZoom의 ZoomedInViewZoomedOutView 속성으로 설정합니다.You set the view controls to the ZoomedInView and ZoomedOutView properties of the SemanticZoom.

시맨틱 줌에 필요한 3가지 요소는 다음과 같습니다.The 3 elements you need for a semantic zoom are:

  • 그룹화된 데이터 원본.A grouped data source. (그룹은 확대 보기에서 GroupStyle 정의로 정의됩니다.)(Groups are defined by the GroupStyle definition in the zoomed-in view.)
  • 항목 수준의 데이터를 보여 주는 확대 보기A zoomed-in view that shows the item-level data.
  • 그룹 수준의 데이터를 보여 주는 축소 보기A zoomed-out view that shows the group-level data.

시맨틱 줌을 사용하기 전에 그룹화된 데이터를 사용하여 목록 보기를 사용하는 방법을 이해해야 합니다.Before you use a semantic zoom, you should understand how to use a list view with grouped data. 자세한 내용은 목록 보기 및 그리드 보기를 참조하세요.For more info, see List view and grid view.

참고  SemanticZoom 컨트롤의 확대 보기와 축소 보기를 정의하려면 ISemanticZoomInformation 인터페이스를 구현하는 두 개의 컨트롤을 사용할 수 있습니다.Note  To define the zoomed-in view and the zoomed-out view of the SemanticZoom control, you can use any two controls that implement the ISemanticZoomInformation interface. XAML 프레임워크는 이 인터페이스를 구현하는 세 가지 컨트롤(ListView, GridView, Hub)을 제공합니다.The XAML framework provides 3 controls that implement this interface: ListView, GridView, and Hub.

이 XAML은 SemanticZoom 컨트롤의 구조를 보여 줍니다.This XAML shows the structure of the SemanticZoom control. ZoomedInView 및 ZoomedOutView 속성에 다른 컨트롤을 할당합니다.You assign other controls to the ZoomedInView and ZoomedOutView properties.

<SemanticZoom>
   <SemanticZoom.ZoomedInView>
       <!-- Put the GridView for the zoomed in view here. -->   
   </SemanticZoom.ZoomedInView>

   <SemanticZoom.ZoomedOutView>
       <!-- Put the ListView for the zoomed out view here. -->       
   </SemanticZoom.ZoomedOutView>
</SemanticZoom>

다음 예제에서는 XAML UI 기본 사항 샘플의 SemanticZoom 페이지에서 가져온 것입니다.The examples here are taken from the SemanticZoom page of the XAML UI Basics sample. 샘플을 다운로드하여 데이터 원본을 비롯한 전체 코드를 볼 수 있습니다.You can download the sample to see the complete code including the data source. 이 시맨틱 줌은 GridView를 사용하여 확대 보기를 제공하고 ListView를 사용하여 축소 보기를 제공합니다.This semantic zoom uses a GridView to supply the zoomed-in view and a ListView for the zoomed-out view.

확대 보기 정의Define the zoomed-in view

확대 보기의 GridView 컨트롤은 다음과 같습니다.Here's the GridView control for the zoomed-in view. 확대 보기에는 그룹의 개별 데이터 항목이 표시됩니다.The zoomed-in view should display the individual data items in groups. 이 예제에서는 이미지 및 텍스트를 사용하여 항목을 그리드에 표시하는 방법을 보여 줍니다.This example shows how to display the items in a grid with an image and text.

<SemanticZoom.ZoomedInView>
    <GridView ItemsSource="{x:Bind cvsGroups.View}" 
              ScrollViewer.IsHorizontalScrollChainingEnabled="False" 
              SelectionMode="None" 
              ItemTemplate="{StaticResource ZoomedInTemplate}">
        <GridView.GroupStyle>
            <GroupStyle HeaderTemplate="{StaticResource ZoomedInGroupHeaderTemplate}"/>
        </GridView.GroupStyle>
    </GridView>
</SemanticZoom.ZoomedInView>

그룹 헤더의 모양은 ZoomedInGroupHeaderTemplate 리소스에 정의되어 있습니다.The look of the group headers is defined in the ZoomedInGroupHeaderTemplate resource. 항목의 모양은 ZoomedInTemplate 리소스에 정의되어 있습니다.The look of the items is defined in the ZoomedInTemplate resource.

<DataTemplate x:Key="ZoomedInGroupHeaderTemplate" x:DataType="data:ControlInfoDataGroup">
    <TextBlock Text="{x:Bind Title}" 
               Foreground="{ThemeResource ApplicationForegroundThemeBrush}" 
               Style="{StaticResource SubtitleTextBlockStyle}"/>
</DataTemplate>

<DataTemplate x:Key="ZoomedInTemplate" x:DataType="data:ControlInfoDataItem">
    <StackPanel Orientation="Horizontal" MinWidth="200" Margin="12,6,0,6">
        <Image Source="{x:Bind ImagePath}" Height="80" Width="80"/>
        <StackPanel Margin="20,0,0,0">
            <TextBlock Text="{x:Bind Title}" 
                       Style="{StaticResource BaseTextBlockStyle}"/>
            <TextBlock Text="{x:Bind Subtitle}" 
                       TextWrapping="Wrap" HorizontalAlignment="Left" 
                       Width="300" Style="{StaticResource BodyTextBlockStyle}"/>
        </StackPanel>
    </StackPanel>
</DataTemplate>

축소 보기 정의Define the zoomed-out view

이 XAML은 축소 보기의 ListView 컨트롤을 정의합니다.This XAML defines a ListView control for the zoomed-out view. 이 예제에서는 그룹 헤더를 목록의 텍스트로 표시하는 방법을 보여 줍니다.This example shows how to display the group headers as text in a list.

<SemanticZoom.ZoomedOutView>
    <ListView ItemsSource="{x:Bind cvsGroups.View.CollectionGroups}" 
              SelectionMode="None" 
              ItemTemplate="{StaticResource ZoomedOutTemplate}" />
</SemanticZoom.ZoomedOutView>

모양은 ZoomedOutTemplate 리소스에 정의되어 있습니다.The look is defined in the ZoomedOutTemplate resource.

<DataTemplate x:Key="ZoomedOutTemplate" x:DataType="wuxdata:ICollectionViewGroup">
    <TextBlock Text="{x:Bind Group.(data:ControlInfoDataGroup.Title)}" 
               Style="{StaticResource SubtitleTextBlockStyle}" TextWrapping="Wrap"/>
</DataTemplate>

보기 동기화Synchronize the views

확대 보기 및 축소 보기를 동기화해야 하므로 사용자가 축소 보기에서 그룹을 선택하면 동일한 그룹의 세부 정보가 확대 보기에 표시됩니다.The zoomed-in view and zoomed-out view should be synchronized, so if a user selects a group in the zoomed-out view, the details of that same group are shown in the zoomed-in view. CollectionViewSource를 사용하거나 코드를 추가하여 보기를 동기화할 수 있습니다.You can use a CollectionViewSource or add code to synchronize the views.

동일한 CollectionViewSource에 바인딩되는 모든 컨트롤은 항상 현재 항목이 동일합니다.Any controls that you bind to the same CollectionViewSource always have the same current item. 두 보기에서 동일한 CollectionViewSource를 데이터 원본으로 사용하는 경우 CollectionViewSource가 자동으로 보기를 동기화합니다.If both views use the same CollectionViewSource as their data source, the CollectionViewSource synchronizes the views automatically. 자세한 내용은 CollectionViewSource를 참조하세요.For more info, see CollectionViewSource.

CollectionViewSource를 사용하여 보기를 동기화하지 않는 경우 ViewChangeStarted 이벤트를 처리하고 이벤트 처리기에서 다음과 같이 항목을 동기화해야 합니다.If you don't use a CollectionViewSource to synchronize the views, you should handle the ViewChangeStarted event and synchronize the items in the event handler, as shown here.

<SemanticZoom x:Name="semanticZoom" ViewChangeStarted="SemanticZoom_ViewChangeStarted">
private void SemanticZoom_ViewChangeStarted(object sender, SemanticZoomViewChangedEventArgs e)
{
    if (e.IsSourceZoomedInView == false)
    {
        e.DestinationItem.Item = e.SourceItem.Item;
    }
}

권장 사항Recommendations

  • 앱에서 시맨틱 줌을 사용하는 경우 항목 레이아웃 및 이동 방향이 확대/축소 수준에 따라 변경되지 않아야 합니다.When using semantic zoom in your app, be sure that the item layout and panning direction don't change based on the zoom level. 레이아웃 및 이동 조작 방식은 확대/축소 수준이 달라져도 일관되고 예측 가능해야 합니다.Layouts and panning interactions should be consistent and predictable across zoom levels.
  • 시맨틱 줌을 사용하면 콘텐츠로 신속하게 이동할 수 있으므로 축소 모드에서는 페이지/화면 수를 3개 이내로 제한합니다.Semantic zoom enables the user to jump quickly to content, so limit the number of pages/screens to three in the zoomed-out mode. 이동을 너무 많이 하면 시맨틱 줌의 실용성이 떨어집니다.Too much panning diminishes the practicality of semantic zoom.
  • 시맨틱 줌을 사용하여 콘텐츠 범위를 변경하지 않도록 합니다.Avoid using semantic zoom to change the scope of the content. 예를 들어 사진 앨범은 파일 탐색기에서 폴더 보기로 전환되지 않아야 합니다.For example, a photo album shouldn't switch to a folder view in File Explorer.
  • 보기에 필수적인 구조 및 의미 체계를 사용합니다.Use a structure and semantics that are essential to the view.
  • 그룹화된 모음에 포함된 항목에는 그룹 이름을 사용합니다.Use group names for items in a grouped collection.
  • 그룹화되지 않았지만 정렬된 컬렉션에는 정렬 순서(예: 날짜의 경우 시간순 또는 명단의 경우 사전순)를 사용합니다.Use sort ordering for a collection that is ungrouped but sorted, such as chronological for dates or alphabetical for a list of names.

샘플 코드 가져오기Get the sample code