Geek Answers Handbook

FlipView indicator and UWP pages

I ran into a FlipView sync problem 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 that’s how I get the ItemSource in FlipView in the code behind:

var tests = new List<SampleItem>()
{
    test1,
    test2
};
            flipView1.ItemsSource = tests;
        }

I can move from one page to another using flipView, but the page indicator does not work: / any help, please, how can I link both FlipView and ItemsControl to the same collection

thanks for the help

0
source share
2 answers

You must bind the selected value of your ItemsControl:

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

</ItemsControl>
+3
source

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

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

:)

+2

More articles:


All Articles