如何在翻转视图中显示多个图像，它在 Windows 通用应用程序中一次只显示一个图像

Question

我尝试了下面的 Flipview 代码

<FlipView x:Name="flpvw">
   <FlipView.ItemTemplate>
      <DataTemplate>
        <TextBlock Text="{Binding}"></TextBlock>
      </DataTemplate>
   </FlipView.ItemTemplate>
</FlipView>

它一次只显示一张图片，但我想一次显示多张图片，如下图所示..

Answer 1

Flipview 一次只能显示一张图片。见：https://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.flipview.aspx

您必须使用 ListView 来构建您在图片上显示的结果。

这是一个基本的实现。您将需要添加实现以在按钮单击时加载新的项目集并修改元素的样式。

xaml 页面：

<Page
    x:Class="App4.FlipView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App4"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    DataContext="{Binding RelativeSource={RelativeSource Self}}">

    <Page.Resources>
        <DataTemplate x:Name="MovieTemplate">
            <StackPanel>
                <TextBlock Text="{Binding Title}" />
                <Image Height="150" Width="80" Source="{Binding Image}" />
            </StackPanel>
        </DataTemplate>
    </Page.Resources>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition Height="200" />
        </Grid.RowDefinitions>
        <TextBlock Text="New releases" />
        <Grid Grid.Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="30" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="30" />
            </Grid.ColumnDefinitions>
            <Button VerticalAlignment="Stretch" Grid.Column="0" Click="ButtonPrev_Click" >Prev</Button>
            <Button VerticalAlignment="Stretch" Grid.Column="2" HorizontalAlignment="Stretch" Click="ButtonNext_Click" >Next</Button>
            <ListView  Grid.Column="1" ItemsSource="{Binding Movies}" ItemTemplate="{StaticResource MovieTemplate}">
                <ListView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal"></StackPanel>
                    </ItemsPanelTemplate>
                </ListView.ItemsPanel>
            </ListView>
        </Grid>
    </Grid>
</Page>

以及用于初始化内容的代码：

public sealed partial class FlipView : Page, INotifyPropertyChanged
{
    private List<Movie> allMovies;
    private ObservableCollection<Movie> movies;
    private int page = 0;

    public event PropertyChangedEventHandler PropertyChanged;

    public FlipView()
    {
        allMovies = new List<Movie>()
        {
            new Movie("Warcraft", "http://fr.web.img5.acsta.net/c_150_200/pictures/16/04/06/12/45/574116.jpg"),
            new Movie("Dory", "http://fr.web.img6.acsta.net/c_150_200/pictures/16/03/14/16/21/478890.jpg"),
            new Movie("Civil War", "http://fr.web.img6.acsta.net/c_150_200/pictures/16/03/11/09/46/182814.jpg"),
            new Movie("Julietta", "http://fr.web.img2.acsta.net/c_150_200/pictures/16/04/14/11/38/428988.jpg"),
            new Movie("Conjuring 2", "http://fr.web.img6.acsta.net/cx_160_213/pictures/16/05/24/14/59/347673.jpg"),
            new Movie("Camping 3", "http://fr.web.img1.acsta.net/cx_160_213/pictures/16/05/23/16/37/346720.jpg"),
            new Movie("Ninja Turtles 2", "http://fr.web.img2.acsta.net/cx_160_213/pictures/16/05/06/09/18/171123.jpg"),
            new Movie("The serpent and the rainbow", "http://fr.web.img2.acsta.net/cx_160_213/pictures/16/05/26/15/05/352817.jpg"),
            new Movie("Cosmodrama", "http://fr.web.img2.acsta.net/cx_160_213/pictures/16/06/20/16/52/535528.jpg"),
            new Movie("Voleur d'histoire", "http://fr.web.img4.acsta.net/cx_160_213/pictures/16/04/07/10/12/045556.jpg"),
            new Movie("Tarzan", "http://fr.web.img3.acsta.net/cx_160_213/pictures/16/05/30/09/24/466057.jpg"),
            new Movie("Truman", "http://fr.web.img4.acsta.net/cx_160_213/pictures/16/04/07/15/07/463474.jpg"),
            new Movie("Hibou", "http://fr.web.img5.acsta.net/cx_160_213/pictures/16/05/27/16/07/266461.jpg"),
            new Movie("The Stangers", "http://fr.web.img2.acsta.net/cx_160_213/pictures/16/05/03/10/18/265733.jpg"),
            new Movie("Viva", "http://fr.web.img1.acsta.net/cx_160_213/pictures/16/06/22/15/10/593696.jpg"),
        };
        LoadMovies();

        this.InitializeComponent();

    }

    public ObservableCollection<Movie> Movies
    {
        get
        {
            return this.movies;
        }
        set
        {
            this.movies = value;
            this.RaisePropertyChanged("Movies");
        }
    }

    private void RaisePropertyChanged(string propertyName)
    {
        var handler = PropertyChanged;
        if (!object.Equals(handler, null))
        {
            var args = new PropertyChangedEventArgs(propertyName);
            handler.Invoke(this, args);

        }
    }

    public void LoadMovies()
    {
        this.Movies = new ObservableCollection<Movie>(allMovies.GetRange(page*5, 5));
    }

    private void ButtonPrev_Click(object sender, RoutedEventArgs e)
    {
        LoadMovies(false);
    }

    private void ButtonNext_Click(object sender, RoutedEventArgs e)
    {
        LoadMovies(true);
    }

    private void LoadMovies(bool nextPage)
    {
        if (nextPage)
        {
            page++;
            page = (page > 2) ? 0 : page;
        } else
        {
            page--;
            page = (page <0) ? 2 : page;
        }
        LoadMovies();
    }
}

public class Movie
{
    Windows.UI.Xaml.Media.Imaging.BitmapImage image;

    public Movie(string title, string uri)
    {
        Title = title;
        image = new BitmapImage(new Uri(uri));

    }

    public string Title { get; set; }
    public Windows.UI.Xaml.Media.Imaging.BitmapImage Image { get { return image; } }
}

最终结果：