Nézet váltás

Használjon lapozós nézetet a gyűjtemény képeinek vagy más elemeinek böngészéséhez, mint például egy albumban található fényképek, vagy egy termék részleteinek oldalán található elemek, egyesével. Érintőkijelzős eszközökön az elemek megérintése vagy pöccintése végigmozgatja a gyűjteményt. Egér esetén navigációs gombok jelennek meg az egérmutatón. Billentyűzet esetén a nyílbillentyűk végighaladnak a gyűjteményen.

Ez a megfelelő vezérlő?

A tükrözési nézet a legjobban a képek kis- és közepes gyűjteményekben (legfeljebb 25 elem) történő áttekintéséhez használható. Ilyen gyűjtemények például a termék részleteinek oldalán szereplő elemek vagy a fényképalbumban lévő fényképek. Bár a legtöbb nagy gyűjtemény esetében nem javasoljuk a tükrözési nézet használatát, a vezérlő gyakori a fényképalbum egyes képeinek megtekintéséhez.

Recommendations

• A tükrözési nézetek legfeljebb 25 elemből álló gyűjteményekhez működnek a legjobban.
• Ne használjon tükrözési nézetvezérlőt nagyobb gyűjteményekhez, mivel az egyes elemek átfordításának ismétlődő mozgása fárasztó lehet. Kivételt jelentenek a fényképalbumok, amelyek gyakran több száz vagy több ezer képet. A fényképalbumok szinte mindig átváltanak tükröző nézetre, ha egy fénykép ki van jelölve a rácsnézet elrendezésében. Más nagyméretű gyűjtemények esetén érdemes lehet listanézetet vagy rácsnézetet is létrehozni.

Globalizációs és honosítási ellenőrzőlista

• Kétirányú szempontok: Standard tükrözés használata AZ RTL-nyelvekhez. A vissza és a továbbítás vezérlőinek a nyelv irányán kell alapulnia, ezért AZ RTL-nyelvek esetében a jobb gombbal visszafelé, a bal gombbal pedig előre kell navigálni.

Példák

A vízszintes böngészés, amely a legbaloldalibb elemtől indul és jobbra lapoz, a flip nézet tipikus elrendezése. Ez az elrendezés minden eszközön jól működik álló vagy fekvő tájolásban:

A tükrözött nézet függőlegesen is böngészhető:

Átváltó nézet létrehozása

• Fontos API-k: FlipView osztály, ItemsSource tulajdonság, ItemTemplate tulajdonság

Nyissa meg a WinUI 3 Katalógus alkalmazást, és tekintse meg a FlipView működését

A WinUI 3 Katalógus alkalmazás interaktív példákat tartalmaz a WinUI vezérlőire és funkcióira. Kérje le az alkalmazást a Microsoft Áruházból vagy keresse meg a forráskódot a GitHub webhelyen.

A FlipView egy ItemsControl, így bármilyen típusú elemgyűjteményt tartalmazhat. A nézet feltöltéséhez vegyen fel elemeket az Elemek gyűjteménybe, vagy állítsa az ItemsSource tulajdonságot adatforrásra.

Alapértelmezés szerint egy adatelem jelenik meg tükrözési nézetben annak az adatobjektumnak a sztringképeként, amelyhez hozzá van kötve. A tükrözési nézetben lévő elemek megjelenítésének pontos megadásához hozzon létre egy DataTemplate-et az egyes elemek megjelenítéséhez használt vezérlők elrendezésének meghatározásához. Az elrendezés vezérlői egy adatobjektum tulajdonságaihoz köthetők, vagy beágyazott tartalommal rendelkeznek. A DataTemplate-et a FlipView ItemTemplate tulajdonságához rendelheti.

Elemek hozzáadása az Elemek gyűjteményhez

Az Elemek gyűjteménybe XAML vagy kód használatával adhat hozzá elemeket. Általában akkor ad hozzá elemeket így, ha kevés olyan elem van, amely nem változik, és könnyen definiálható az XAML-ben, vagy ha futtatáskor hozza létre az elemeket a kódban. Íme egy átfordítási nézet, beágyazott elemekkel definiálva.

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

Amikor elemeket ad hozzá egy tükröző nézethez, azok automatikusan egy FlipViewItem-tárolóba kerülnek. Az elem megjelenítésének módosításához stílust alkalmazhat az elemtárolóra az ItemContainerStyle tulajdonság beállításával.

Amikor definiálja az elemeket az XAML-ben, azok automatikusan bekerülnek az Elemek gyűjteménybe.

Az elemek forrásának beállítása

Általában tükrözési nézetet használ egy forrásból, például egy adatbázisból vagy az internetről származó adatok megjelenítéséhez. Ha egy adatforrásból szeretné feltölteni a tükrözési nézetet, az ItemsSource tulajdonságát adatelemek gyűjteményére kell állítania.

Itt a tükrözési nézet ItemsSource-objektuma kódban van beállítva közvetlenül egy gyűjtemény egy példányára.

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

Az ItemsSource tulajdonságot egy XAML-gyűjteményhez is kötheti. További információ: Adatkötés XAML-lel.

Itt az ItemsSource egy CollectionViewSource nevű itemsViewSourceelemhez van kötve.

<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}}"/>

Caution

A tükrözési nézetet feltöltheti úgy, hogy elemeket ad hozzá az Elemek gyűjteményhez, vagy beállítja az ItemsSource tulajdonságát, de egyszerre nem használhatja mindkét módszert. Ha beállítja az ItemsSource tulajdonságot, és hozzáad egy elemet az XAML-ben, a rendszer figyelmen kívül hagyja a hozzáadott elemet. Ha beállítja az ItemsSource tulajdonságot, és kódban ad hozzá egy elemet az Elemek gyűjteményhez, a rendszer kivételt jelez.

Az elemek megjelenésének megadása

Alapértelmezés szerint egy adatelem jelenik meg tükrözési nézetben annak az adatobjektumnak a sztringképeként, amelyhez hozzá van kötve. Általában az adatok részletesebb bemutatását szeretné megjeleníteni. A tükrözési nézetben lévő elemek megjelenítésének pontos megadásához hozzon létre egy DataTemplate-et. A DataTemplate XAML-je határozza meg az egyes elemek megjelenítéséhez használt vezérlők elrendezését és megjelenését. Az elrendezés vezérlői egy adatobjektum tulajdonságaihoz köthetők, vagy beágyazott tartalommal rendelkeznek. A DataTemplate a FlipView vezérlő ItemTemplate tulajdonságához van rendelve.

Ebben a példában a FlipView ItemTemplate elemtáblája beágyazottan van definiálva. A rendszer egy átfedést ad a képhez a kép nevének megjelenítéséhez.

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

Így néz ki az adatsablon által definiált elrendezés.

A tükröző nézet tájolásának beállítása

Alapértelmezés szerint a flip nézet vízszintesen fordul. A függőleges megfordításhoz használjon függőleges tájolású StackPanelt a flip nézet ItemsPaneljeként.

Ez a példa bemutatja, hogyan használható függőleges tájolású verempanel a FlipView ItemsPanel elempaneljeként.

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

A tükröző nézet így néz ki függőleges tájolással.

Környezetjelző hozzáadása

Használjon egy kontextusjelzőt (például PipsPagert vagy filmcsíkot) lapozó nézettel, hogy segítse a felhasználókat a hivatkozási pont biztosításában a tartalomhoz.

Az alábbi képen egy kis fényképgyűjteménnyel használt PipsPagert látható (javasoljuk, hogy a PipsPagert a gyűjtemény alatt középre igazítsa).

Ez a kódrészlet bemutatja, hogyan köthet egy PipsPagert egy FlipView-hoz.

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

Nagyobb gyűjtemények (10 vagy több elem) esetén erősen ajánljuk, hogy használjon környezetfüggő jelzést, például miniatűr képek filmcsíkját. A PipsPagertől, amely pontokat vagy jeleket használ, eltérően minden miniatűr a filmcsíkon a megfelelő kép kisebb, kiválasztható verziójaként jelentkezik.

A környezetjelző FlipView-hoz való hozzáadását bemutató teljes példáért tekintse meg a XAML FlipView-mintát.

Kapcsolódó cikkek

• Listákra vonatkozó irányelvek
• PipsPager
• FlipView osztály