如何在 flipview winrt 中显示多个图像？

Question

我想创建一个翻转视图，但要同时显示多个图像。例子：

就像 windows 商店的情况一样，它有一个滚动查看器到 flipview。我怎样才能实现这样的目标？

目前，我只能在任何给定实例中将一张图像作为源。

编辑：我的代码

<FlipView x:Name="PCFlipview" Background="Black"
                Height="350" Width="620"
                VerticalAlignment="Top"
                Grid.Row="0"
                HorizontalAlignment="Right"
                ItemsSource="{Binding PcScreens}"
                SelectionChanged="FlipView1_SelectionChanged"
                Style="{StaticResource FlipViewStyle1}">
      <FlipView.ItemTemplate>
          <DataTemplate>
              <Grid >
                  <Image Source="{Binding}" Stretch="Uniform" />
              </Grid>
          </DataTemplate>
      </FlipView.ItemTemplate>
  </FlipView>

Answer 1

由于您想要多个项目，请使用中继器作为 FlipView 的 ItemTemplate。这是一个例子：

<FlipView>
    <FlipView.ItemTemplate>
        <DataTemplate>
            <ScrollViewer>
                <ItemsControl>
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Image Source="{Binding Image}"></Image>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </ScrollViewer>
        </DataTemplate>
    </FlipView.ItemTemplate>
</FlipView>

ItemsControl 没有 ScrollViewer 所以你需要明确地使用它，因为你不知道会有多少项目。但是，您可以根据需要使用 ListView 或 GridView。

Answer 2

要在一个 FlipViewItem 中显示多个图像，您可以使用 FlipView.ItemTemplate 例如这样：

<FlipView x:Name="flipView" Grid.Row="0" Background="Transparent">
    <FlipView.ItemTemplate>
        <DataTemplate>
            <Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="5" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="5" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Image Source="{Binding image1}" Grid.Column="0" />
                <Image Source="{Binding image2}" Grid.Column="2" />
                <Image Source="{Binding image3}" Grid.Column="4" />
            </Grid>
        </DataTemplate>
    </FlipView.ItemTemplate>
</FlipView>

后面的代码：

public sealed partial class MainPage : Page
{
    private ObservableCollection<MyFlipViewItem> items;

    public MainPage()
    {
        this.InitializeComponent();
        items = new ObservableCollection<MyFlipViewItem>();
        flipView.ItemsSource = items;            
    }

    protected override void OnNavigatedTo(NavigationEventArgs e)
    {
        items.Clear();
        items.Add(new MyFlipViewItem { image1 = "Assets/1.jpeg", image2 = "Assets/2.jpeg", image3 = "Assets/3.png" });
        items.Add(new MyFlipViewItem { image1 = "Assets/1.jpeg", image2 = "Assets/2.jpeg", image3 = "Assets/3.png" });
        items.Add(new MyFlipViewItem { image1 = "Assets/1.jpeg", image2 = "Assets/2.jpeg", image3 = "Assets/3.png" });
        items.Add(new MyFlipViewItem { image1 = "Assets/1.jpeg", image2 = "Assets/2.jpeg", image3 = "Assets/3.png" });
        items.Add(new MyFlipViewItem { image1 = "Assets/1.jpeg", image2 = "Assets/2.jpeg", image3 = "Assets/3.png" });
    }
}

public class MyFlipViewItem
{
    public string image1 { get; set; }
    public string image2 { get; set; }
    public string image3 { get; set; }
}

增加：但是默认的FlipView底部没有圆点，我们需要手动Add a context indicator。

有一个开源包Callisto可以用来创建这个指标，它可以从 VS2015 的 NuGet 下载并像这样使用：

<Page
    x:Class="MultipleImageInOneFlipView.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MultipleImageInOneFlipView"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:callisto="using:Callisto.Controls"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
      ....
      <callisto:FlipViewIndicator Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Center"
                            FlipView="{Binding ElementName=flipView}">
      </callisto:FlipViewIndicator>
      ...
    </Grid>
</Page>

但是这个指标的样式是这样的：

因此我们可以使用 ListBox 创建一个指标，例如：

<ListBox x:Name="indicator" Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Center" Background="Transparent" 
         SelectedItem="{Binding ElementName=flipView, Path=SelectedItem, Mode=TwoWay}" 
         ItemContainerStyle="{StaticResource ListBoxItemStyle}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Ellipse Width="15" Height="15" Margin="10,0" 
                     Fill="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Foreground}" />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ListBox>

后面的代码：

indicator.ItemsSource = items;

正如你所看到的，我修改了ListBoxItem的样式模板，默认模板可以像这样添加到xaml代码中：

然后我这样修改样式：

<Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem">
    ...
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListBoxItem">
                <Grid x:Name="LayoutRoot" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                    <Grid.Resources>
                        <Style x:Key="BaseContentPresenterStyle" TargetType="ContentPresenter">
                            ...
                            <Setter Property="Foreground" Value="Gray" />
                        </Style>
                        <Style x:Key="BodyContentPresenterStyle" BasedOn="{StaticResource BaseContentPresenterStyle}" TargetType="ContentPresenter">
                            <Setter Property="FontWeight" Value="Normal" />
                            <Setter Property="FontSize" Value="15" />
                        </Style>
                    </Grid.Resources>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Gray" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="PointerOver">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="PressedBackground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Gray" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="PressedBackground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Black" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Selected">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="PressedBackground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Black" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="SelectedUnfocused">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="PressedBackground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Black" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="SelectedPointerOver">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="PressedBackground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Black" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="SelectedPressed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="PressedBackground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Black" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Rectangle x:Name="PressedBackground" Fill="Transparent" Control.IsTemplateFocusTarget="True" />
                    <ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Style="{StaticResource BodyContentPresenterStyle}" TextWrapping="NoWrap" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                    </ContentPresenter>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

这里我写了一个demo来重现你图片中的布局，你也可以看看

更新

我已经更新了我的项目，这是我的演示的渲染图：

如何在 flipview winrt 中显示多个图像？

How to show multiple images in a flipview winrt?

xaml

windows-runtime

win-universal-app