flipView 和页面指示器 UWP

Question

我在将 FlipView 与页面指示器同步时遇到问题，这是我的代码：

 <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>

这就是我在后面的代码中将 ItemSource 获取到 FlipView 的方式：

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

我可以使用我的 flipView 从一个页面移动到另一个页面，但是页面指示器不起作用：/ 请帮忙，我怎样才能将 FlipView 和 ItemsControl 绑定到同一个集合

感谢帮助

Answer 1

您应该绑定 ItemsControl 的 selectedIndex :

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

</ItemsControl>

Answer 2

对于 UWP，ItemsControl 中没有 SelectedIndex 事件，所以我改用 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>

我们可以改进所选项目的样式:)

Answer 3

附加样式指示器

<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">
            <Setter.Value>
                <ControlTemplate TargetType="GridViewItem">
                    <Grid>
                        <!--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}}" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

FlipView

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

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

                        <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"
                                Grid.Row="1"
                                Visibility="{Binding TargetPage, Converter={StaticResource NullToVisibilityConverter}}"
                                VerticalAlignment="Bottom" Margin="0,32"
                                Style="{StaticResource ColoredButtonStyle}"
                                Command="{Binding DataContext.NavigateToTargetPageCommand,
                                    ElementName=pageRoot}"
                                Click="Button_Click"
                                CommandParameter="{Binding}" />
                    </Grid>

                    <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}">
                            <StackPanel>
                                <StackPanel.ChildrenTransitions>
                                    <TransitionCollection>
                                        <EdgeUIThemeTransition Edge="Bottom" />
                                    </TransitionCollection>
                                </StackPanel.ChildrenTransitions>
                                <TextBlock  Style="{StaticResource TextContentStyle}"
                                           Text="{Binding ContentText}" />
                            </StackPanel>
                        </Grid>
                    </Grid>

                </Grid>
            </DataTemplate>
        </FlipView.ItemTemplate>
    </FlipView>

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

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

转换器

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();
    }
}

flipView 和页面指示器 UWP

flipView and Page indicator UWP

c#

xaml

win-universal-app

windows-10-universal