FlipView FlipView FlipView FlipView Class


Represents an items control that displays one item at a time, and enables "flip" behavior for traversing its collection of items.

public : class FlipView : Selector, IFlipView, IFlipView2public class FlipView : Selector, IFlipView, IFlipView2Public Class FlipView Inherits Selector Implements IFlipView, IFlipView2// This API is not available in Javascript.
<FlipView .../>
Windows 10 requirements
Device family
Windows 10 (introduced v10.0.10240.0)
API contract
Windows.Foundation.UniversalApiContract (introduced v1)

Inherited Members

Inherited properties

Inherited events

Inherited methods


In this example, the ItemTemplate of a FlipView is defined inline.

<FlipView x:Name="flipView1" Width="480" Height="270" 
          BorderBrush="Black" BorderThickness="1">
                    <Image Width="480" Height="270" Source="{Binding Image}" Stretch="UniformToFill"/>
                    <Border Background="#A5000000" Height="80" VerticalAlignment="Bottom">
                        <TextBlock Text="{Binding Name}" FontFamily="Segoe UI" FontSize="26.667" 
                                   Foreground="#CCFFFFFF" Padding="15,20"/>


Use a FlipView to present a collection of items that the user views sequentially, one at a time. It's useful for displaying a gallery of images or the pages of a magazine.

FlipView is an ItemsControl, so it can contain a collection of items of any type. To populate the view, add items to the Items collection, or set the ItemsSource property to a data source.

By default, a data item is displayed in the FlipView as the string representation of the data object it's bound to. To specify exactly how items in the FlipView are displayed, you create a DataTemplate to define the layout of controls used to display an individual item. The controls in the layout can be bound to properties of a data object, or have content defined inline. You assign the DataTemplate to the ItemTemplate property of the FlipView.

For more info, see these topics:


When a user flips through FlipView content using touch interaction, a SelectionChanged event occurs only when touch manipulations are complete. This means that when a user flips through content quickly, individual SelectionChanged events are not always generated for every item because the manipulation is still occurring.

For more examples, see XAML FlipView sample.

Control style and template

You can modify the default Style and ControlTemplate to give the control a unique appearance. For information about modifying a control's style and template, see Styling controls. The default style, template, and resources that define the look of the control are included in the generic.xaml file. For design purposes, generic.xaml is available in the (Program Files)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP&lt;SDK version>\Generic folder from a Windows Software Development Kit (SDK) installation. Styles and resources from different versions of the SDK might have different values.

Starting in Windows 10, version 1607 (Windows Software Development Kit (SDK) version 10.0.14393.0), generic.xaml includes resources that you can use to modify the colors of a control in different visual states without modifying the control template. In apps that target this software development kit (SDK) or later, modifying these resources is preferred to setting properties such as Background and Foreground. For more info, see the Light-weight styling section of the Styling controls article.

This table shows the resources used by the FlipView control.

Resource keyDescription
FlipViewBackgroundControl background color
FlipViewNextPreviousArrowForegroundButton arrow color
FlipViewNextPreviousArrowForegroundPointerOverButton arrow color on hover
FlipViewNextPreviousArrowForegroundPressedButton arrow color when pressed
FlipViewNextPreviousButtonBackgroundButton background color at rest
FlipViewNextPreviousButtonBackgroundPointerOverButton background color on hover
FlipViewNextPreviousButtonBackgroundPressedButton background color when pressed
FlipViewNextPreviousButtonBorderBrushButton border color at rest
FlipViewNextPreviousButtonBorderBrushPointerOverButton border color on hover
FlipViewNextPreviousButtonBorderBrushPressedButton border color when pressed


FlipView() FlipView() FlipView() FlipView()

Initializes a new instance of the FlipView class.

public : FlipView()public FlipView()Public Sub New()// This API is not available in Javascript.


UseTouchAnimationsForAllNavigation UseTouchAnimationsForAllNavigation UseTouchAnimationsForAllNavigation UseTouchAnimationsForAllNavigation

Gets or sets a value that indicates whether transition animations are always used whether the navigation is touch-based, button-based or programmatic.

public : PlatForm::Boolean UseTouchAnimationsForAllNavigation { get; set; }public bool UseTouchAnimationsForAllNavigation { get; set; }Public ReadWrite Property UseTouchAnimationsForAllNavigation As bool// This API is not available in Javascript.
<FlipView UseTouchAnimationsForAllNavigation="bool" />
PlatForm::Boolean bool bool bool

true if transition animations are always used; false if transition animations are used only for touch navigation. The default is true.


The XAML FlipView control supports three modes of navigation; touch-based, button-based and programmatic. When a user navigates by touch, the FlipView items scroll smoothly into view. When you set this property to true, the same navigation animation occurs whether the navigation is touch-based, button-based and programmatic. If UseTouchAnimationsForAllNavigation is false and the user navigates by mouse, keyboard, or programmatically, the animation doesn't occur and items just pop into view.

Windows 8 In Windows 8, the FlipView navigation animation occurs only when the user navigates by touch. If you recompile an app built for Windows 8 for Windows 8.1 and need to keep the Windows 8 behavior, set this property to false. For example, if you check the HorizontalOffset property value of FlipView 's internal ScrollViewer while the selection is changing, the value is not fixed until the animation is complete. If your app has a dependency on this value, you can set this property to false.

UseTouchAnimationsForAllNavigationProperty UseTouchAnimationsForAllNavigationProperty UseTouchAnimationsForAllNavigationProperty UseTouchAnimationsForAllNavigationProperty

Identifies the UseTouchAnimationsForAllNavigation dependency property.

public : static DependencyProperty UseTouchAnimationsForAllNavigationProperty { get; }public static DependencyProperty UseTouchAnimationsForAllNavigationProperty { get; }Public Static ReadOnly Property UseTouchAnimationsForAllNavigationProperty As DependencyProperty// This API is not available in Javascript.

See Also