대칭 이동 보기

이미지 또는 컬렉션의 다른 항목(예: 앨범의 사진 또는 제품 세부 정보 페이지의 항목)을 한 번에 한 항목씩 찾아보려면 대칭 이동 보기를 사용합니다. 터치 장치의 경우, 항목을 스와이프하여 컬렉션을 이동시킵니다. 마우스의 경우, 탐색 버튼이 마우스오버 시에 나타납니다. 키보드의 경우, 컬렉션을 통해 화살표로 이동합니다.

올바른 컨트롤인가요?

대칭 이동 보기는 중소 규모의 컬렉션(최대 25개 정도의 항목)에서 이미지를 정독하는 데 가장 적합합니다. 이러한 컬렉션의 예로는 제품 세부 정보 페이지의 항목 또는 사진 앨범의 사진이 있습니다. 대부분의 큰 컬렉션에 대해서는 대칭 이동 보기를 권장 하지 않지만, 사진 앨범에서 개별 이미지를 보기에 이 컨트롤을 사용하는 것이 일반적입니다.

권장 사항

• 대칭 이동 보기는 최대 25개 정도의 항목 컬렉션에 가장 적합합니다.
• 각 항목을 뒤집는 반복적인 동작이 번거로울 수 있으므로, 더 큰 컬렉션에 대칭 이동 보기 컨트롤을 사용하지 마세요. 수백 또는 수천 개의 이미지가 있는 사진 앨범은 예외입니다. 그리드 뷰 레이아웃에서 사진이 선택되면 사진 앨범은 거의 항상 대칭 이동 보기로 전환됩니다. 다른 큰 컬렉션의 경우 리스트 뷰 또는 그리드 뷰를 고려합니다.

전역화 및 지역화 체크리스트

• 양방향 고려 사항: RTL 언어에 표준 미러링을 사용합니다. 백/포워드 컨트롤은 언어의 방향을 기반으로 해야 하므로, RTL 언어의 경우 오른쪽 버튼이 뒤로 이동해야 하며 왼쪽 버튼이 앞으로 이동해야 합니다.

예제

맨 왼쪽 항목에서 시작하여 오른쪽으로 대칭 이동되는 가로 검색은 대칭 이동 보기의 일반적인 레이아웃입니다. 이 레이아웃은 모든 디바이스에서 세로 또는 가로 방향으로 잘 작동합니다.

대칭 이동 보기를 세로로 탐색할 수도 있습니다.

UWP 및 WinUI 2

Important

이 문서의 정보 및 예제는 Windows 앱 SDK 및 WinUI 3를 사용하는 앱에 최적화되어 있지만 WinUI 2를 사용하는 UWP 앱에도 대체로 적용 가능합니다. 플랫폼별 정보 및 예제는 UWP API 참조를 확인하세요.

이 섹션에는 UWP 또는 WinUI 2 앱에서 컨트롤을 사용하는 데 필요한 정보를 다룹니다.

이 컨트롤용 API는 Windows.UI.Xaml.Controls 네임스페이스에 있습니다.

• UWP API: FlipView 클래스, ItemsSource 속성, ItemTemplate 속성
• WinUI 2 갤러리 앱을 열고 작동 중인 FlipView를 확인합니다. WinUI 2 갤러리 앱에는 대부분의 WinUI 2 컨트롤, 특징, 기능의 대화형 예제가 포함되어 있습니다. Microsoft Store에서 앱을 다운로드하거나 GitHub에서 소스 코드를 가져오세요.

최신 WinUI 2를 사용하여 모든 컨트롤에 적용되는 최신 스타일과 템플릿을 가져오는 것이 좋습니다. WinUI 2.2 이상에는 둥근 모서리를 사용하는 이 컨트롤의 새 템플릿이 포함되어 있습니다. 자세한 내용은 모서리 반경을 참조하세요.

대칭 이동 보기 만들기

• 중요 APIs: FlipView 클래스, ItemsSource 속성, ItemTemplate 속성

WinUI 3 갤러리 앱을 열고 작동 중인 FlipView를 확인합니다.

WinUI 3 갤러리 앱에는 대부분의 WinUI 3 컨트롤, 특징, 기능의 대화형 예제가 포함되어 있습니다. 앱을 Microsoft Store 에서 다운로드하거나 GitHub에서 소스 코드를 가져오세요.

FlipView는 ItemsControl이므로 모든 타입의 항목 컬렉션을 포함할 수 있습니다. 뷰를 채우려면 Items 을 컬렉션에 채우거나 ItemsSource 속성을 데이터 리소스로 설정합니다.

기본적으로 데이터 항목은 바운딩된 데이터 개체의 문자열 표현으로 대칭 이동 보기에 표시됩니다. 대칭 이동 보기에서 항목이 표시되는 방식을 정확하게 지정하려면 DataTemplate 을 만들어 개별 항목을 표시하는데 사용되는 컨트롤 레이아웃을 정의합니다. 레이아웃의 컨트롤은 데이터 객체의 속성에 바운딩되거나, 콘텐츠 정의 인라인을 가질 수 있습니다. DataTemplate을 FlipView의 ItemTemplate 에 할당합니다.

Items 컬렉션에 항목 추가

XAML 또는 코드를 사용하여 Items 컬렉션에 항목을 추가합니다. XAML에서 변경되지 않고 쉽게 정의되는 항목 수가 적은 경우 또는 런타임 시 코드에서 항목을 생성하는 경우 일반적으로 이 방식으로 항목을 추가합니다. 다음은 항목이 인라인으로 정의된 대칭 이동 보기입니다.

<FlipView x:Name="flipView1">
    <Image Source="Assets/Logo.png" />
    <Image Source="Assets/SplashScreen.png" />
    <Image Source="Assets/SmallLogo.png" />
</FlipView>

// Create a new flip view, add content, 
// and add a SelectionChanged event handler.
FlipView flipView1 = new FlipView();
flipView1.Items.Add("Item 1");
flipView1.Items.Add("Item 2");

// Add the flip view to a parent container in the visual tree.
stackPanel1.Children.Add(flipView1);

항목을 대칭 이동 보기에 추가하는 경우, 항목이 자동으로 FlipViewItem 컨테이너에 추가됩니다. 항목 표시 방법을 변경하려면 ItemContainerStyle 속성을 설정하여 항목 컨테이너에 스타일을 적용할 수 있습니다.

XAML에서 항목을 정의하면, 항목 컬렉션에 항목이 자동으로 추가됩니다.

항목 소스 설정

일반적으로 대칭 이동 보기를 사용하여 데이터베이스나 인터넷과 같은 소스의 데이터를 표시합니다. 데이터 소스에서 대칭 이동 보기를 채우려면, ItemsSource 속성을 데이터 항목의 컬렉션으로 설정합니다.

여기서는 대칭 이동 보기의 ItemsSource가 코드에서 바로 컬렉션의 인스턴스로 설정됩니다.

// Data source.
List<String> itemsList = new List<string>();
itemsList.Add("Item 1");
itemsList.Add("Item 2");

// Create a new flip view, add content, 
// and add a SelectionChanged event handler.
FlipView flipView1 = new FlipView();
flipView1.ItemsSource = itemsList;
flipView1.SelectionChanged += FlipView_SelectionChanged;

// Add the flip view to a parent container in the visual tree.
stackPanel1.Children.Add(flipView1);

XAML에서 ItemsSource 속성을 컬렉션에 바인딩할 수도 있습니다. 자세한 내용은 XAML과 데이터 바인딩을 참조하세요.

여기서 ItemsSource가 바인딩되는 CollectionViewSource 는 itemsViewSource라고 명명됩니다.

<Page.Resources>
    <!-- Collection of items displayed by this page -->
    <CollectionViewSource x:Name="itemsViewSource" Source="{Binding Items}"/>
</Page.Resources>

...

<FlipView x:Name="itemFlipView" 
          ItemsSource="{Binding Source={StaticResource itemsViewSource}}"/>

주의

항목을 해당 Items 컬렉션에 추가하거나 ItemsSource 속성을 설정하여 대칭 이동 보기를 채울 수 있지만, 두 방법을 동시에 사용할 수는 없습니다. ItemsSource 속성을 설정하고 XAML에 항목을 추가하면 추가된 항목이 무시됩니다. ItemsSource 속성을 설정하고 코드의 Items 컬렉션에 항목을 추가하면 예외가 throw됩니다.

항목의 모양 지정

기본적으로 데이터 항목은 바운딩된 데이터 개체의 문자열 표현으로 대칭 이동 보기에 표시됩니다. 일반적으로 데이터를 보다 다양하게 표시하려는 경우가 많습니다. 대칭 이동 보기에서 표시되는 방법을 정확히 지정하려면 DataTemplate를 만듭니다. DataTemplate의 XAML은 개별 항목을 표시하는 데 사용되는 컨트롤의 레이아웃 및 모양을 정의합니다. 레이아웃의 컨트롤은 데이터 객체의 속성에 바운딩되거나, 콘텐츠 정의 인라인을 가질 수 있습니다. DataTemplate을 FlipView 컨트롤의 ItemTemplate 속성에 할당됩니다.

이 예제에서는 FlipView의 ItemTemplate이 인라인으로 정의됩니다. 이미지 이름을 표시하기 위해 이미지에 오버레이가 추가됩니다.

<FlipView MaxWidth="400" Height="180" BorderBrush="Black" BorderThickness="1"
          ItemsSource="{x:Bind Items, Mode=OneWay}">
    <FlipView.ItemTemplate>
        <DataTemplate x:DataType="data:ControlInfoDataItem">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Image Width="36" Source="{x:Bind ImagePath}" Stretch="Uniform"
                       VerticalAlignment="Center" />
                <Border Background="#A5FFFFFF" Height="60" Grid.Row="1">
                    <TextBlock x:Name="Control2Text" Text="{x:Bind Title}" Foreground="Black"
                               Padding="12,12" Style="{StaticResource TitleTextBlockStyle}"
                               HorizontalAlignment="Center" />
                </Border>
            </Grid>
        </DataTemplate>
    </FlipView.ItemTemplate>
</FlipView>

데이터 템플릿에서 정의한 레이아웃은 다음과 같습니다.

대칭 이동 보기의 방향 설정

기본적으로 대칭 이동 보기는 가로로 대칭 이동됩니다. 세로로 대칭 이동하려면 세로 방향의 스택 패널을 대칭 이동 보기의 ItemsPanel로 사용합니다.

이 예제에서는 세로 방향의 스택 패널을 FlipView의 ItemsPanel로 사용하는 방법을 보여줍니다.

<FlipView x:Name="flipViewVertical" Width="480" Height="270" 
          BorderBrush="Black" BorderThickness="1">
    
    <!-- Use a vertical stack panel for vertical flipping. -->
    <FlipView.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel Orientation="Vertical"/>
        </ItemsPanelTemplate>
    </FlipView.ItemsPanel>
    
    <FlipView.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Image Width="480" Height="270" Stretch="UniformToFill"
                       Source="{Binding Image}"/>
                <Border Background="#A5000000" Height="80" VerticalAlignment="Bottom">
                    <TextBlock Text="{Binding Name}" 
                               FontFamily="Segoe UI" FontSize="26.667" 
                               Foreground="#CCFFFFFF" Padding="15,20"/>
                </Border>
            </Grid>
        </DataTemplate>
    </FlipView.ItemTemplate>
</FlipView>

세로 방향으로 대칭 이동 보기의 모양은 다음과 같습니다.

컨텍스트 표시기 추가

대칭 전환 보기와 함께 컨텍스트 표시기(예: PipsPager 또는 영화 스트립)를 사용하여 사용자에게 콘텐츠 내에서 참조 지점을 제공할 수 있습니다.

다음 이미지는 작은 사진 갤러리와 함께 사용되는 PipsPager를 보여줍니다(갤러리 아래에 PipsPager를 가운데에 배치하는 것이 좋음).

이 코드 조각은 PipsPager를 FlipView와 바인딩하는 방법을 보여줍니다.

<StackPanel>
  <FlipView x:Name="Gallery" MaxWidth="400" Height="270" ItemsSource="{x:Bind Pictures}">
      <FlipView.ItemTemplate>
          <DataTemplate x:DataType="x:String">
              <Image Source="{x:Bind Mode=OneWay}"/>
          </DataTemplate>
      </FlipView.ItemTemplate>
  </FlipView>

  <!-- The SelectedPageIndex is bound to the FlipView to keep the two in sync -->
  <PipsPager x:Name="FlipViewPipsPager"
      HorizontalAlignment="Center"
      Margin="0, 10, 0, 0"
      NumberOfPages="{x:Bind Pictures.Count}"
      SelectedPageIndex="{x:Bind Path=Gallery.SelectedIndex, Mode=TwoWay}" />
</StackPanel>

더 큰 컬렉션(10개 이상의 항목)의 경우 썸네일의 영화 스트립과 같은 컨텍스트 표시기를 사용하는 것이 좋습니다. 간단한 점이나 문자 모양이 사용되는 PipsPager와 달리, 영화 스트립의 각 썸네일은 해당 이미지의 더 작고 선택 가능한 버전을 보여줍니다.

FlipView에 컨텍스트 표시기를 추가하는 방법을 보여주는 예제 코드는 XAML FlipView 샘플을 참조하세요.

샘플 코드 가져오기

• WinUI 갤러리 샘플 - 대화형 형식으로 모든 XAML 컨트롤을 보여줍니다.

관련된 문서

• 목록에 대한 지침
• PipsPager
• FlipView 클래스