FlipView shows one item at a time and flips between them with animated transitions. It derives from Selector, so it is an items control with a selection — ItemsSource, Items, SelectedItem and SelectedIndex all work as usual.

<mah:FlipView Width="230" Height="140" BannerText="The second slide">
    <Grid Background="#FF2E8DEF" />
    <Grid Background="#FF00A600" />
    <Grid Background="#FFBF1E4B" />
</mah:FlipView>

It was inspired by the WinRT control of the same name but shares no code with it.

Navigating

The user flips with the two buttons or with the arrow keys. In code:

Which button is visible is computed, not fixed. DetectControlButtonsStatus hides the back button on the first item and the forward button on the last, unless CircularNavigation is on.

Outside puts the buttons beside the item instead of over it, which costs width — compare the second panel above with the first.

public void HideControlButtons()
{
    this.ExecuteWhenLoaded(() => this.DetectControlButtonsStatus(Visibility.Hidden));
}

Swiping

The item can also be dragged aside, with the mouse, a pen or a finger. Nothing moves until the pointer has gone the drag distance of the system along the Orientation, as with drag and drop, so a click or a tap still reaches the item. A move that goes across first is left alone, since that is somebody scrolling.

Let go past half the item, or with a quick flick the same way, and it flips. Anything less and the item springs back. At an end without CircularNavigation the item only gives a little and never flips. The old item leaves to the side it was dragged to and the next one comes in from the other.

A drag that starts on a button in the item, or on content that scrolls in the same direction itself, stays with that content.

IsNavigationEnabled="False" hides the buttons but leaves swiping on. Set IsSwipeEnabled="False" as well where only code should flip.

Transitions

The animation between items is a TransitioningContentControl, and there is one TransitionType per direction:

Orientation decides which pair is used: Horizontal uses left/right, Vertical uses up/down, and it also moves the buttons.

The banner

The strip along the bottom. It is on by default and slides open and shut.

The banner does not follow the selection on its own. Bind it to the selected item:

<mah:FlipView ItemsSource="{Binding Slides}"
              BannerText="{Binding SelectedItem.Caption, RelativeSource={RelativeSource Self}}" />

<mah:FlipView ItemsSource="{Binding Slides}">
    <mah:FlipView.ItemTemplate>
        <DataTemplate>
            <mah:FlipViewItem BannerText="{Binding Caption}">
                <Image Source="{Binding Image}" />
            </mah:FlipViewItem>
        </DataTemplate>
    </mah:FlipView.ItemTemplate>
</mah:FlipView>

Changing BannerText fades the label out, swaps the text and fades it back in, so the new text does not appear instantly.

The index

A row of dots showing how many items there are and which one is current. It is off by default, and the old documentation never mentioned it.

<mah:FlipView ShowIndex="True" IndexPlacement="TopOverItem" ItemsSource="{Binding Slides}" />

NavigationIndexPlacement has eight values: Left, Right, Top, Bottom, and a …OverItem variant of each. The plain values give the index a strip of its own and shrink the item; the OverItem ones lay it over the item, as in the middle panel above.

The index is a ListBox in the template and it is clickable, so it navigates as well as reports. It shows every page, so with more pages than fit the dots share the row.

The hover border

A border drawn over the item while the mouse is inside, to show the control has focus for the arrow keys.

An automatic slideshow

Increment SelectedIndex on a timer, with CircularNavigation so it wraps and IsNavigationEnabled="False" so the buttons stay away. On develop add IsSwipeEnabled="False" too, or the slides can still be dragged:

<mah:FlipView x:Name="Slideshow"
              CircularNavigation="True"
              IsNavigationEnabled="False"
              ShowIndex="True"
              ItemsSource="{Binding Slides}" />

var timer = new DispatcherTimer { Interval = TimeSpan.FromSeconds(4) };
timer.Tick += (_, _) => this.Slideshow.GoForward();
timer.Start();

GoForward() wraps by itself once CircularNavigation is on, so there is no index arithmetic to get wrong.

The three looks

In both of the newer looks the buttons only show while the pointer is over the flip view, as in WinUI, and they are no tab stops; the arrow keys still flip. There is no hover border, and the index of the Windows 10 look draws the dots of the PipsPager.

What a client is told

A flip view builds nothing for the pages it is not showing, so there is no list of pages to walk. It says which page is up and how many there are, as 1 / 3, and the page itself with its banner is in the tree the way any content is.

Related

FlipViewItem is the container, styled by MahApps.Styles.FlipViewItem. The transitions come from TransitioningContentControl. A PipsPager is the index of the WinUI look and can stand next to any flip view.