Překlopit zobrazení

Zobrazení překlopení slouží k procházení obrázků nebo jiných položek v kolekci, jako jsou fotky v albu nebo položky na stránce s podrobnostmi o produktu, jednu položku najednou. U dotykových zařízení se potáhnutím prstem přes položku prochází kolekcí. U myši se navigační tlačítka zobrazí při najetí myší. U klávesnice klávesy se šipkami posouvají kolekcí.

Je to správná kontrola?

Překlopení zobrazení je nejvhodnější pro prohlížení obrázků v malých až středních kolekcích (až 25 položek). Mezi příklady takových kolekcí patří položky na stránce s podrobnostmi o produktu nebo fotky ve fotoalbu. I když nedoporučujeme překlopit zobrazení u většiny velkých kolekcí, ovládací prvek je běžný pro prohlížení jednotlivých obrázků ve fotoalbu.

Recommendations

• Překlopení zobrazení je nejvhodnější pro kolekce až 25 položek.
• Vyhněte se používání překlápěcího ovládacího prvku u větších kolekcí, protože opakované překlápění každé položky může být zdlouhavé. Výjimkou by bylo fotoalbum, které často obsahují stovky nebo tisíce obrázků. Fotoalba se po výběru fotky v rozložení zobrazení mřížky téměř vždy přepnou na zobrazení překlopení. Pro jiné velké kolekce zvažte zobrazení seznamu nebo zobrazení mřížky.

Kontrolní seznam pro globalizaci a lokalizaci

• Obousměrné úvahy: Používejte standardní zrcadlení pro jazyky RTL. Ovládací prvky zpět a vpřed by měly být založené na směru jazyka, takže pro jazyky RTL by se mělo pravé tlačítko pohybovat vzad a levé tlačítko by mělo přecházet vpřed.

Examples

Horizontální procházení, začínající u položky nejvíce vlevo a přepínající doprava, je typické uspořádání pro flip view. Toto rozložení funguje dobře v orientaci na výšku nebo na šířku na všech zařízeních:

Překlopené zobrazení lze také procházet svisle:

Vytvoření přepínacího zobrazení

• důležitá rozhraní API: vlastnostFlipView, vlastnost ItemsSource, vlastnost ItemTemplate

Otevřete aplikaci Galerie WinUI 3 a podívejte se na flipView v akci.

Aplikace Galerie WinUI 3 obsahuje interaktivní příklady ovládacích prvků a funkcí WinUI. Získejte aplikaci z Microsoft Store nebo vyhledejte zdrojový kód na GitHub.

FlipView je ItemsControl, takže může obsahovat kolekci položek libovolného typu. Pokud chcete zobrazení naplnit, přidejte položky do kolekce s názvem Items, nebo nastavte vlastnost ItemsSource na datový zdroj.

Ve výchozím nastavení se datová položka zobrazí v zobrazení překlopení jako řetězcová reprezentace datového objektu, ke které je vázán. Chcete-li přesně určit způsob, jakým jsou položky v zobrazení typu flip view zobrazeny, vytvoříte DataTemplate k definování rozložení ovládacích prvků použitých k zobrazení jednotlivého prvku. Ovládací prvky v rozložení mohou být vázány na vlastnosti datového objektu nebo mají definovaný obsah. DataTemplate přiřadíte vlastnosti ItemTemplate FlipView.

Přidat položky do kolekce položek

Do kolekce Items můžete přidávat položky pomocí XAML nebo kódu. Položky se obvykle přidávají tímto způsobem, pokud máte malý počet položek, které se nemění a které jsou snadno definované v XAML nebo pokud položky v kódu vygenerujete za běhu. Zde je překlápěcí pohled s položkami definovanými in-line.

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

Když přidáte položky do zobrazení překlopení, automaticky se umístí do kontejneru FlipViewItem . Chcete-li změnit způsob zobrazení položky můžete použít styl pro kontejner položky nastavením ItemContainerStyle vlastnost.

Když definujete položky v XAML, automaticky se přidají do kolekce Items.

Nastavení zdroje položek

Zobrazení typu flip se obvykle používá k zobrazení dat ze zdroje, jako je databáze nebo Internet. Chcete-li naplnit zobrazení překlopení ze zdroje dat, nastavte jeho ItemsSource vlastnost na kolekci datových položek.

V tomto případě je položka ItemsSource zobrazení překlopení nastavena v kódu přímo na instanci kolekce.

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

Vlastnost ItemsSource můžete také svázat s kolekcí v XAML. Další informace najdete v tématu Datová vazba sXAML .

Zde je položka ItemsSource vázána na CollectionViewSource s názvem 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}}"/>

Upozornění

Zobrazení překlopení můžete naplnit buď přidáním položek do kolekce Items, nebo nastavením vlastnosti ItemsSource, ale nemůžete použít oba způsoby současně. Pokud nastavíte vlastnost ItemsSource a přidáte položku v XAML, přidaná položka bude ignorována. Pokud nastavíte vlastnost ItemsSource a přidáte položku do kolekce Items v kódu, vyvolá se výjimka.

Určení vzhledu položek

Ve výchozím nastavení se datová položka zobrazí v zobrazení překlopení jako řetězcová reprezentace datového objektu, ke které je vázán. Obvykle chcete zobrazit bohatší prezentaci dat. Pokud chcete přesně určit, jak se zobrazují položky v zobrazení překlopení, vytvoříte dataTemplate. XAML v DataTemplate definuje rozložení a vzhled ovládacích prvků použitých k zobrazení jednotlivé položky. Ovládací prvky v rozložení mohou být vázány na vlastnosti datového objektu nebo mají definovaný obsah. DataTemplate je přiřazena ItemTemplate vlastnosti ovládacího prvku FlipView.

V tomto příkladu je položka "ItemTemplate" FlipView definována přímo. Do obrázku se přidá překryv, aby se zobrazil název obrázku.

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

Takto vypadá rozložení definované šablonou dat.

Nastavte orientaci překlápěcího zobrazení

Ve výchozím nastavení se režim překlápění překlopí vodorovně. Pokud chcete, aby se překlopil svisle, použijte panel zásobníku se svislou orientací jako zobrazení překlopení ItemsPanel.

Tento příklad ukazuje, jak použít zásobníkový panel s orientací na výšku jako "ItemsPanel" komponenty 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>

Takto vypadá zobrazení otáčení se svislou orientací.

Přidání kontextového indikátoru

Pomocí kontextového indikátoru (například PipsPager nebo filmového pruhu) můžete uživatelům poskytnout bod odkazu v obsahu.

Následující obrázek ukazuje PipsPager používaný s malou fotogalerií (doporučujeme zacentrovat PipsPager pod galerií).

Tento fragment kódu ukazuje, jak svázat PipsPager s 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>

U větších kolekcí (10 nebo více položek) důrazně doporučujeme použít kontextový indikátor, jako je například filmový pruh miniatur. Na rozdíl od PipsPageru, který používá jednoduché tečky nebo glyfy, každá miniatura v pruhu filmu zobrazuje menší, vybratelnou verzi odpovídajícího obrázku.

Úplný příklad znázorňující, jak přidat kontextový indikátor do FlipView, najdete v tématu XAML FlipView ukázka.

Související články

• Pokyny pro seznamy
• pipsPager
• třída FlipView