flipView and Page indicator UWP

Question

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

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

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

var tests = new List<SampleItem>()
{
    test1,
    test2
};
            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

Answer 1

You should bind the selectedIndex of your ItemsControl :

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

</ItemsControl>