flipView and Page indicator UWP

uwp flipview context indicator
uwp listview
flipview android
uwp dialog
uwp popup
uwp pivot
uwp treeview
forms in uwp

I am facing a problem in synchronising the FlipView with the Page Indicator,this is my code:

        <FlipView x:Name="flipView1">
                <DataTemplate >
                    <Grid Background="Transparent">
                            <ColumnDefinition Width="*" />
                            <RowDefinition Height="*" />
                        <Button Grid.Column="0" Grid.Row="0">
                            <Image Source="{Binding Image}"/>
        <ItemsControl ItemsSource="{Binding ItemsSource, ElementName=flipView1}">
                    <StackPanel Orientation="Horizontal" />
                    <Button Style="{StaticResource TextBlockButtonStyle}" 
                        Command="{Binding DataContext.SelectCommand, ElementName=grid, Mode=OneWay}">
                        <Grid Height="30" Width="30" Margin="10,10">
                            <Ellipse Fill="#2c3389" RenderTransformOrigin="0.5,0.5"  >
                                    <CompositeTransform ScaleX="1.25" ScaleY="1.25"/>
                            <Ellipse Fill="Gray" Stroke="#2c3389"  />

and this is how I get the ItemSource to the FlipView in the code behind:

var tests = new List<SampleItem>()
            flipView1.ItemsSource = tests;

I can move from one page to another with my flipView,but the page indicator doesn't work :/ any help please,how can I bound Both the FlipView and the ItemsControl to same collection

thanks for help

You should bind the selectedIndex of your ItemsControl :

<ItemsControl SelectedIndex="{Binding SelectedIndex, ElementName=flipView1}"
 ItemsSource="{Binding ItemsSource, ElementName=flipView1}" >


Guidelines for flip view controls, Use a flip view for browsing images or other items in a collection, such as photos in an album or items in a Example of a page indicator. Create a flip view. 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 flip view as the string representation of the data object it's bound to.

for UWP there is no SelectedIndex event in ItemsControl so I used Gridview instead

 <GridView Grid.Row="1" Grid.Column="0" ItemsSource="{Binding ItemsSource, ElementName=companiesFlipView}" 
                      SelectedIndex="{Binding SelectedIndex, ElementName=companiesFlipView}" VerticalAlignment="Bottom" 
                      HorizontalAlignment="Center" Margin="0,10">
                            <StackPanel Orientation="Horizontal">
                            <Grid Width="10" Height="10">
                                <Ellipse Fill="Black"></Ellipse>

we can improve the styles for selected item :)

How to Context Page indicator to a FlipView #UWP, How to add a context indicator to a FlipView? FlipView with orientation vertical image slider Duration: 5:45 Posted: Jul 2, 2016 Introduction To Universal Windows Platform (UWP) App Development Using Windows 10 And Visual Studio 2015; Reading this article, you can learn how to use FlipViewControl in Universal Windows Apps development with XAML and Visual C#. The following important tools are required for developing UWP, Windows 10 (Recommended)

Aditional style indicator

<Style x:Key="LegendItemContainerStyle" TargetType="GridViewItem">
        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
        <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
        <Setter Property="TabNavigation" Value="Local" />
        <Setter Property="IsHoldingEnabled" Value="True" />
        <Setter Property="HorizontalContentAlignment" Value="Center" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="Margin" Value="0,0,4,4" />
        <Setter Property="MinWidth" Value="15" />
        <Setter Property="MinHeight" Value="{ThemeResource GridViewItemMinHeight}" />
        <Setter Property="Template">
                <ControlTemplate TargetType="GridViewItem">
                        <!--We add the actual control in the container because we need the selection state to change
                        the control's color.-->
                        <Ellipse Width="5" Height="5"
                                 Fill="{Binding IsSelected, RelativeSource={RelativeSource TemplatedParent},
                            Converter={StaticResource SelectedLegendItemToColorConverter}}" />


<FlipView Visibility="Visible" x:Name="flipView" SelectedItem="{Binding SelectedInstructionItem, Mode=TwoWay}"
              Background="#FF494949" ItemsSource="{Binding InstructionItems}">
                        <RowDefinition Height="{StaticResource FirstRowHeight}" />
                        <RowDefinition Height="{StaticResource SecondRowHeight}" />

                    <Grid Grid.Row="0" VerticalAlignment="Bottom">
                            <RowDefinition Height="Auto" />
                            <RowDefinition />
                                <EdgeUIThemeTransition Edge="Left" />

                        <TextBlock Text="{Binding HeaderText}"
                                   Style="{StaticResource TextHeaderStyle}" />

                        <Image Stretch="Uniform" MaxWidth="335" Grid.Row="1"
                               Source="{Binding Image}" Margin="36,0"
                               Visibility="{Binding Image, Converter={StaticResource NullToVisibilityConverter}}" />

                        <Button Content="Get Started" HorizontalAlignment="Center"
                                Visibility="{Binding TargetPage, Converter={StaticResource NullToVisibilityConverter}}"
                                VerticalAlignment="Bottom" Margin="0,32"
                                Style="{StaticResource ColoredButtonStyle}"
                                Command="{Binding DataContext.NavigateToTargetPageCommand,
                                CommandParameter="{Binding}" />

                    <Image Grid.Row="0" Source="/Assets/Welcome/gradient-white.png"
                           Height="26" MaxWidth="500" Stretch="Fill"
                           VerticalAlignment="Bottom" Margin="0,0,0,-10" />

                    <Grid Grid.Row="1" Background="{StaticResource SystemControlBackgroundAccentBrush}">
                        <Grid Style="{StaticResource TextGridStyle}">
                                        <EdgeUIThemeTransition Edge="Bottom" />
                                <TextBlock  Style="{StaticResource TextContentStyle}"
                                           Text="{Binding ContentText}" />


            <RowDefinition Height="{StaticResource FirstRowHeight}" />
            <RowDefinition Height="{StaticResource SecondRowHeight}" />

        <GridView Grid.Row="1" HorizontalAlignment="Center"
                  SelectedItem="{Binding SelectedInstructionItem, Mode=TwoWay}"
                  ItemsSource="{Binding InstructionItems}"
                  ItemContainerStyle="{StaticResource LegendItemContainerStyle}" />


public class SelectedLegendItemToColorConverter : IValueConverter
    public object Convert(object value, Type targetType, object parameter, string language)
        var isSelected = (bool) value;
        return isSelected
            ? Application.Current.Resources["SystemControlForegroundBaseMediumBrush"] as Brush
            : Application.Current.Resources["SystemControlForegroundListMediumBrush"] as Brush;
    public object ConvertBack(object value, Type targetType, object parameter, string language)
        throw new NotImplementedException();

UWP, Download Sample Project on GitHub: https://github.com/IvanResh/FlipView-Page​-Indicator.Duration: 3:02 Posted: Nov 10, 2017 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.

flipView and Page indicator UWP, Hi, I am facing a problem in synchronising the FlipView with the Page Indicator,​this is my code: x:Name = "flipView1" > > Background  Change UWP FlipView Is it possible to change the animation effect when changing images in an UWP Flipview control? Instead of sliding in, I would prefer a cross fade effect. I did not see a way to do it, but I wanted to confirm. Any help is appreciated. Thanks.You shoul

Let's Code: Build your own FlipView Page Indicator, One of the benefits of XAML data binding is that it lets different elements on one UI use the same data. The WinRT-XAML FlipView inherits from  Universal Windows Platform (UWP) Samples. Contribute to jQuery2DotNet/UWP-Samples development by creating an account on GitHub.

Diederik Krols, This article presents a FlipView context indicator control for Windows 8 UI In an app, the maximum size of a flipview is the size of the page. Without some type of page or context indicator, the FlipView is a mystery to the user. And, that’s what we’re after today – building our own page indicator for the FlipView control. On an Apple device, the main screen (the equivalent to the Start Screen on Windows Phone) doesn’t scroll vertically or horizontally.