Dela via

Vänd vy

Använd en bläddringsvy för att bläddra bland bilder eller andra objekt i en samling, till exempel foton i ett album eller objekt på en produktinformationssida, ett objekt i taget. För touch-enheter innebär att svepa över ett objekt att man flyttar sig genom samlingen. För en mus visas navigeringsknappar när muspekaren hovrar över ett element. För ett tangentbord flyttas piltangenterna genom samlingen.

Är det här rätt kontroll?

Vänd vy är bäst för att granska bilder i små till medelstora samlingar (upp till 25 objekt). Exempel på sådana samlingar är objekt på en produktinformationssida eller foton i ett fotoalbum. Även om vi inte rekommenderar växlingsvy för de flesta stora samlingar är kontrollen vanlig för att visa enskilda bilder i ett fotoalbum.

Recommendations

  • Växlingsvyer fungerar bäst för samlingar med upp till cirka 25 objekt.
  • Undvik att använda en flip view-kontroll för större samlingar, eftersom den repetitiva rörelsen att bläddra igenom varje objekt kan vara omständlig. Ett undantag skulle vara för fotoalbum, som ofta har hundratals eller tusentals bilder. Fotoalbum växlar nästan alltid till en flip-vy när ett foto har valts i rutnätsvyns layout. För andra stora samlingar bör du överväga en listvy eller rutnätsvy.

Checklista för globalisering och lokalisering

  • dubbelriktade överväganden: Använd standardspegling för RTL-språk. Kontrollerna för bakåt och framåt bör baseras på språkets riktning, så för RTL-språk bör högerknappen navigera bakåt och den vänstra knappen ska navigera framåt.

Examples

Vågrät bläddring, som börjar längst till vänster och bläddrar åt höger, är det typiska upplägget för en bläddervy. Den här layouten fungerar bra i stående eller liggande orientering på alla enheter:

Exempel på layout för vågrät vy

En växlingsvy kan också bläddras lodrätt:

Exempel på lodrät växlingsvy

Skapa en bläddringsvy

Öppna WinUI 3-galleriappen och se FlipView i praktiken

WinUI 3-galleriappen innehåller interaktiva exempel på de flesta WinUI 3-kontroller, funktioner och funktioner. Hämta appen från Microsoft Store eller hämta källkoden på GitHub

FlipView är en ItemsControl-, så den kan innehålla en samling objekt av vilken typ som helst. Om du vill fylla i vyn lägger du till objekt i samlingen Objekt eller anger egenskapen ItemsSource till en datakälla.

Som standard visas ett dataobjekt i vyn flip som strängrepresentation av det dataobjekt som det är bundet till. Om du vill ange exakt hur objekt i växlingsvyn ska visas skapar du en DataTemplate- för att definiera layouten för kontroller som används för att visa ett enskilt objekt. Kontrollerna i layouten kan bindas till egenskaperna för ett dataobjekt eller ha innehåll som definierats infogat. Du tilldelar DataTemplate till egenskapen ItemTemplate för FlipView.

Lägga till objekt i samlingen Objekt

Du kan lägga till objekt i objekt samling med hjälp av XAML eller kod. Du lägger vanligtvis till objekt på det här sättet om du har ett litet antal objekt som inte ändras och enkelt definieras i XAML, eller om du genererar objekten i kod vid körning. Här är en flip-vy med objekt definierade inline.

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

När du lägger till objekt i en vändvy placeras de automatiskt i en FlipViewItem- container. Om du vill ändra hur ett objekt visas kan du använda ett format på objektcontainern genom att ange egenskapen ItemContainerStyle.

När du definierar objekten i XAML läggs de automatiskt till i samlingen Objekt.

Ange objektkällan

Du använder vanligtvis en växlingsvy för att visa data från en källa, till exempel en databas eller Internet. Om du vill fylla i en växlingsvy från en datakälla anger du dess egenskap ItemsSource till en samling dataobjekt.

Här anges växlingsvyns ItemsSource i kod direkt till en instans av en samling.

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

Du kan också binda egenskapen ItemsSource till en samling i XAML. Mer information finns i Databindning med XAML.

Här är ItemsSource bunden till en CollectionViewSource- med namnet 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}}"/>

Försiktighet

Du kan fylla i en växlingsvy antingen genom att lägga till objekt i samlingen Objekt eller genom att ange dess ItemsSource-egenskap, men du kan inte använda båda sätten samtidigt. Om du anger egenskapen ItemsSource och lägger till ett objekt i XAML ignoreras det tillagda objektet. Om du anger egenskapen ItemsSource och lägger till ett objekt i samlingen Objekt i koden genereras ett undantag.

Ange utseendet på objekten

Som standard visas ett dataobjekt i vyn flip som strängrepresentation av det dataobjekt som det är bundet till. Du vill vanligtvis visa en mer omfattande presentation av dina data. Om du vill ange exakt hur objekt i växlingsvyn ska visas skapar du en DataTemplate-. XAML i DataTemplate definierar layouten och utseendet på kontroller som används för att visa ett enskilt objekt. Kontrollerna i layouten kan bindas till egenskaperna för ett dataobjekt eller ha innehåll som definierats infogat. DataTemplate tilldelas egenskapen ItemTemplate för FlipView-kontrollen.

I det här exemplet definieras ItemTemplate för en FlipView direkt i koden. Ett överlägg läggs till i bilden för att visa bildnamnet.

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

Så här ser layouten som definierats av datamallen ut.

Exempel på en växlingsvy med en datamall

Ange orienteringen för bläddringsvyn

Som standard vänds bläddervyn horisontellt. Om du vill få den att vända lodrätt använder du en stackpanel med lodrät orientering som flippvyns ItemsPanel.

Det här exemplet visar hur du använder en stackpanel med lodrät orientering som ItemsPanel för en 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>

Så här ser växlingsvyn ut med lodrät orientering.

Exempel på bläddringsvy i lodrät orientering.

Lägga till en kontextindikator

Använd en kontextindikator (till exempel en PipsPager eller filmremsa) med en växlingsvy för att ge användarna en referenspunkt i innehållet.

Följande bild visar en PipsPager som används med ett litet fotogalleri (vi rekommenderar att du centrerar PipsPager under galleriet).

En PipsPager med fem vågräta punkter under ett FlipView-fotoalbum. Den tredje punkten är markerad, vilket anger den tredje sidan med innehåll.

Det här kodfragmentet visar hur du binder en PipsPager med en 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>

För större samlingar (10 eller fler objekt) rekommenderar vi starkt att du använder en sammanhangsberoende indikator, till exempel en filmremsa med miniatyrbilder. Till skillnad från en PipsPager som använder enkla punkter eller glyfer, visar varje miniatyrbild i filmremsan en mindre, valbar version av motsvarande bild.

En filmremsa med miniatyrbilder under ett FlipView-fotoalbum.

Ett fullständigt exempel som visar hur du lägger till en kontextindikator i en FlipView finns i XAML FlipView-exempel.

UWP och WinUI 2

Viktigt!

Informationen och exemplen i den här artikeln är optimerade för appar som använder Windows App SDK och WinUI 3, men som är allmänt tillämpliga för UWP-appar som använder WinUI 2. Se UWP API-referensen för plattformsspecifik information och exempel.

Det här avsnittet innehåller information som du behöver för att använda kontrollen i en UWP- eller WinUI 2-app.

API:er för den här kontrollen finns i namnområdet Windows.UI.Xaml.Controls .

Vi rekommenderar att du använder det senaste WinUI 2 för att få de senaste formaten och mallarna för alla kontroller. WinUI 2.2 eller senare innehåller en ny mall för den här kontrollen som använder rundade hörn. För mer information om hörnradien, se .

  • Last updated on