Skip to content

Latest commit

 

History

History
71 lines (43 loc) · 5.7 KB

flipview.md

File metadata and controls

71 lines (43 loc) · 5.7 KB
-api-id -api-type
T:Windows.UI.Xaml.Controls.FlipView
winrt class

Windows.UI.Xaml.Controls.FlipView

-description

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

-xaml-syntax

<FlipView .../>

-remarks

Tip

For more info, design guidance, and code examples, see Flip view.

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:

Note

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.

If you need to handle pointer events for a UIElement in a scrollable view (such as a ScrollViewer), you must explicitly disable support for manipulation events on the element in the view by calling UIElement.CancelDirectManipulation(). To re-enable manipulation events in the view, call UIElement.TryStartDirectManipulation().

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 locally with the SDK or NuGet package installation.

  • WinUI Styles (recommended): For updated styles from WinUI, see \Users\<username>\.nuget\packages\microsoft.ui.xaml\<version>\lib\uap10.0\Microsoft.UI.Xaml\Themes\generic.xaml.
  • Non-WinUI styles: For built-in styles, see %ProgramFiles(x86)%\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\<SDK version>\Generic\generic.xaml.

Locations might be different if you customized the installation. Styles and resources from different versions of the SDK might have different values.

XAML also includes resources that you can use to modify the colors of a control in different visual states without modifying the control template. Modifying these resources is preferred to setting properties such as Background and Foreground. For more info, see the Light-weight styling section of the XAML styles article. Light-weight styling resources are available starting in Windows 10, version 1607 (SDK 14393).

-examples

Tip

For more info, design guidance, and code examples, see Flip view.

[!div class="nextstepaction"] Open the WinUI 2 Gallery app and see the FlipView in action

The WinUI 2 Gallery app includes interactive examples of most WinUI 2 controls, features, and functionality. Get the app from the Microsoft Store or get the source code on GitHub.

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

[!code-xamlFlipViewItemTemplate]

-see-also

Selector, XAML FlipView sample, Guidelines for flip view controls