如何在flipview中显示多个图像，它在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; } }
}

最终结果：