Przełącz widok

Użyj widoku przerzucania do przeglądania obrazów lub innych elementów w kolekcji, takich jak zdjęcia w albumie lub elementach na stronie szczegółów produktu, jeden element naraz. W przypadku urządzeń dotykowych przesuwanie po elemencie przechodzi przez kolekcję. W przypadku myszy przyciski nawigacji są wyświetlane po najechaniu wskaźnikiem. W przypadku klawiatury przyciski strzałek służą do poruszania się po kolekcji.

Czy jest to właściwa kontrola?

Widok przewijania jest najlepszy do przeglądania obrazów w małych i średnich kolekcjach (do około 25 obrazów). Przykłady takich kolekcji obejmują elementy na stronie szczegółów produktu lub zdjęcia w albumie fotograficznym. Chociaż nie zalecamy widoku przewijania dla większości dużych kolekcji, funkcja jest często używana do wyświetlania pojedynczych obrazów w albumie ze zdjęciami.

Rekomendacje

• Przełączanie widoków działa najlepiej w przypadku kolekcji do około 25 elementów.
• Unikaj używania kontrolki widoku przerzucania dla większych kolekcji, ponieważ powtarzalny ruch przerzucania poszczególnych elementów może być żmudny. Wyjątkiem byłyby albumy fotograficzne, które często mają setki lub tysiące obrazów. Albumy fotograficzne prawie zawsze przełączają się do widoku przerzucania po wybraniu zdjęcia w układzie widoku siatki. W przypadku innych dużych kolekcji rozważ widok listy lub widok siatki.

Lista kontrolna globalizacji i lokalizacji

• zagadnienia dwukierunkowe: użyj standardowego dublowania dla języków RTL. Kontrolki wstecz i do przodu powinny być oparte na kierunku języka, więc w przypadku języków RTL prawy przycisk powinien poruszać się do tyłu, a lewy przycisk powinien przechodzić do przodu.

Przykłady

Przeglądanie w poziomie, zaczynając od najbardziej lewego elementu i przerzucanie w prawo, jest typowym rozwiązaniem widoku przewijania. Ten układ działa dobrze zarówno w orientacji pionowej, jak i poziomej na wszystkich urządzeniach.

Widok przewijania można również przeglądać w pionie.

Utwórz widok przerzucania

• ważne interfejsy API: klasa FlipView, właściwość ItemsSource, właściwość ItemTemplate

Otwórz aplikację Galeria WinUI 3 i zobacz akcję FlipView

Aplikacja Galeria WinUI 3 zawiera interaktywne przykłady większości kontrolek, funkcji i funkcji interfejsu WinUI 3. Pobierz aplikację ze Sklepu Microsoft lub pobierz kod źródłowy w witrynie GitHub

FlipView to ItemsControl, dzięki czemu może zawierać kolekcję elementów dowolnego typu. Aby wypełnić widok, dodaj elementy do kolekcji Items lub ustaw właściwość ItemsSource na źródło danych.

Domyślnie element danych jest wyświetlany w widoku przerzucania jako reprezentacja ciągu obiektu danych, z którą jest powiązany. Aby określić dokładnie sposób wyświetlania elementów w widoku przerzucania, należy utworzyć element DataTemplate w celu zdefiniowania układu kontrolek używanych do wyświetlania pojedynczego elementu. Kontrolki w układzie mogą być powiązane z właściwościami obiektu danych lub mieć zdefiniowaną zawartość w tekście. Element DataTemplate przypisuje się do właściwości ItemTemplate FlipView.

Dodawanie elementów do kolekcji Items

Elementy można dodawać do kolekcji Items przy użyciu języka XAML lub kodu. Zazwyczaj dodajesz elementy w ten sposób, jeśli masz niewielką liczbę elementów, które nie zmieniają się i są łatwo zdefiniowane w języku XAML lub w przypadku generowania elementów w kodzie w czasie wykonywania. Oto widok przerzucania z elementami zdefiniowanymi w tekście.

<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);

Po dodaniu elementów do widoku przerzucania są one automatycznie umieszczane w kontenerze FlipViewItem. Aby zmienić sposób wyświetlania elementu, możesz zastosować styl do kontenera elementów, ustawiając właściwość ItemContainerStyle .

Podczas definiowania elementów w języku XAML są one automatycznie dodawane do kolekcji Items.

Ustawianie źródła elementów

Zazwyczaj używasz widoku przerzucania do wyświetlania danych ze źródła, takiego jak baza danych lub Internet. Aby wypełnić widok przerzucania ze źródła danych, należy ustawić jego właściwość ItemsSource na kolekcję elementów danych.

W tym miejscu element ItemsSource widoku zmiennego jest ustawiany bezpośrednio w kodzie na wystąpienie kolekcji.

// 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);

Właściwość ItemsSource można również powiązać z kolekcją w języku XAML. Aby uzyskać więcej informacji, zobacz Powiązanie danych za pomocą języka XAML.

W tym miejscu źródło elementów jest powiązane z elementem CollectionViewSource o nazwie 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}}"/>

Ostrzeżenie

Widok przewijania można wypełnić, dodając elementy do kolekcji Items lub ustawiając jej właściwość ItemsSource, ale nie można używać obu sposobów jednocześnie. Jeśli ustawisz właściwość ItemsSource i dodasz element w języku XAML, dodany element zostanie zignorowany. Jeśli ustawisz właściwość ItemsSource i dodasz element do kolekcji Items w kodzie, wystąpi wyjątek.

Określanie wyglądu elementów

Domyślnie element danych jest wyświetlany w widoku przerzucania jako reprezentacja ciągu obiektu danych, z którą jest powiązany. Zazwyczaj chcesz pokazać bardziej bogatą prezentację danych. Aby dokładnie określić sposób wyświetlania elementów w widoku przewijania, należy utworzyć DataTemplate. Język XAML w elemencie DataTemplate definiuje układ i wygląd kontrolek używanych do wyświetlania pojedynczego elementu. Kontrolki w układzie mogą być powiązane z właściwościami obiektu danych lub mieć zdefiniowaną zawartość w tekście. Element DataTemplate jest przypisywany do właściwości ItemTemplate kontrolki FlipView.

W tym przykładzie element ItemTemplate elementu FlipView jest zdefiniowany w tekście. Do obrazu zostanie dodana nakładka w celu wyświetlenia nazwy obrazu.

<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>

Oto jak wygląda układ zdefiniowany przez szablon danych.

Ustaw orientację widoku przesuwanego

Domyślnie widok odwracania przerzuca się w poziomie. Aby przerzucić go w pionie, użyj panelu stosu z orientacją pionową jako ItemsPanel widoku przerzucania .

W tym przykładzie pokazano, jak używać StackPanel z orientacją pionową jako ItemsPanel elementu FlipView.

<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>

Oto jak wygląda widok przełączania w orientacji pionowej.

Dodawanie wskaźnika kontekstu

Użyj wskaźnika kontekstu (takiego jak pipsPager lub paska filmowego) z widokiem przerzucania, aby pomóc użytkownikom w zapewnieniu punktu odniesienia w zawartości.

Na poniższej ilustracji przedstawiono narzędzie PipsPager używane z małą galerią zdjęć (zalecamy wyśrodkowanie narzędzia PipsPager poniżej galerii).

Ten fragment kodu demonstruje, jak związać PipsPager z 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>

W przypadku większych kolekcji (co najmniej 10 elementów) zdecydowanie zalecamy użycie wskaźnika kontekstowego, takiego jak pasek filmu miniatur. W przeciwieństwie do narzędzia PipsPager, które używa prostych kropek lub glifów, każda miniatura na tablicy filmowej pokazuje mniejszą, umożliwiającą wybór wersję odpowiedniego obrazu.

Pełny przykład pokazujący sposób dodawania wskaźnika kontekstu do widoku FlipView można znaleźć w przykładzie XAML FlipView.

UwP i WinUI 2

Ważne

Informacje i przykłady w tym artykule są zoptymalizowane dla aplikacji korzystających z Windows App SDK oraz WinUI 3, ale generalnie mają zastosowanie także w aplikacjach UWP używających WinUI 2. Zobacz dokumentację interfejsu API platformy UWP, aby uzyskać informacje i przykłady dotyczące platformy.

Ta sekcja zawiera informacje potrzebne do używania kontrolki w aplikacji platformy UWP lub WinUI 2.

API dla tej kontrolki istnieją w ramach przestrzeni nazw Windows.UI.Xaml.Controls.

• interfejsy API platformy UWP:FlipView,właściwość ItemsSource, właściwość ItemTemplate,
• Otwórz aplikację Galerii WinUI 2 i zobacz FlipView w akcji. Aplikacja z galerii WinUI 2 zawiera interaktywne przykłady większości kontrolek, funkcji i funkcji winUI 2. Pobierz aplikację ze Sklepu Microsoft lub pobierz kod źródłowy w witrynie GitHub.

Zalecamy użycie najnowszej wersji WinUI 2 , aby uzyskać najbardziej aktualne style i szablony dla wszystkich kontrolek. Interfejs WinUI 2.2 lub nowszy zawiera nowy szablon dla tej kontrolki, który używa zaokrąglonych narożników. Aby uzyskać więcej informacji, zobacz Zaokrąglenie narożnika.

Powiązane artykuły

• Wskazówki dotyczące list
• PipsPager (Wyszukiwarka PipsPager)
• klasy FlipView