C# 如何在flipview中显示多个图像，在windows universal apps中一次只显示一个图像

我尝试了下面的flipview代码

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

它一次只显示一个图像，但我想一次显示多个图像，如下图所示

---

Flipview一次只能显示一张图像。见：

您必须使用列表视图来构建您在图片上显示的结果

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

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

公共密封部分类FlipView:Page，INotifyPropertyChanged
{
私人电影名单；
私人收藏电影；
私有int页=0；
公共事件属性更改事件处理程序属性更改；
公共FlipView（）
{
allMovies=新列表（）
{
新电影《魔兽争霸》http://fr.web.img5.acsta.net/c_150_200/pictures/16/04/06/12/45/574116.jpg"),
新电影《多莉》http://fr.web.img6.acsta.net/c_150_200/pictures/16/03/14/16/21/478890.jpg"),
新电影《内战》http://fr.web.img6.acsta.net/c_150_200/pictures/16/03/11/09/46/182814.jpg"),
新电影（“朱丽叶”http://fr.web.img2.acsta.net/c_150_200/pictures/16/04/14/11/38/428988.jpg"),
新电影《魔术师2》http://fr.web.img6.acsta.net/cx_160_213/pictures/16/05/24/14/59/347673.jpg"),
新电影《野营3》http://fr.web.img1.acsta.net/cx_160_213/pictures/16/05/23/16/37/346720.jpg"),
新电影《忍者神龟2》http://fr.web.img2.acsta.net/cx_160_213/pictures/16/05/06/09/18/171123.jpg"),
新电影《蛇与彩虹》http://fr.web.img2.acsta.net/cx_160_213/pictures/16/05/26/15/05/352817.jpg"),
新电影（“宇宙戏剧”http://fr.web.img2.acsta.net/cx_160_213/pictures/16/06/20/16/52/535528.jpg"),
新电影《历史的漩涡》http://fr.web.img4.acsta.net/cx_160_213/pictures/16/04/07/10/12/045556.jpg"),
新电影《泰山》http://fr.web.img3.acsta.net/cx_160_213/pictures/16/05/30/09/24/466057.jpg"),
新电影《杜鲁门》http://fr.web.img4.acsta.net/cx_160_213/pictures/16/04/07/15/07/463474.jpg"),
新电影（“Hibou”http://fr.web.img5.acsta.net/cx_160_213/pictures/16/05/27/16/07/266461.jpg"),
新电影《斯坦格家》http://fr.web.img2.acsta.net/cx_160_213/pictures/16/05/03/10/18/265733.jpg"),
新电影《万岁》http://fr.web.img1.acsta.net/cx_160_213/pictures/16/06/22/15/10/593696.jpg"),
};
LoadMovies（）；
this.InitializeComponent（）；
}
公开收集电影
{
收到
{
归还这部电影；
}
设置
{
这个。电影=价值；
本.RaisePropertyChanged（“电影”）；
}
}
私有void RaisePropertyChanged（字符串propertyName）
{
var handler=PropertyChanged；
如果（！object.Equals（handler，null））
{
var args=新的PropertyChangedEventArgs（propertyName）；
调用（this，args）；
}
}
公众电影（
{
this.Movies=newobserveCollection（allMovies.GetRange（第5页，第5页））；
}
私有无效按钮预览单击（对象发送者，路由目标）
{
下载电影（假）；
}
私有无效按钮下一步单击（对象发送者，路由目标）
{
下载电影（真实）；
}
私人void LoadMovies（bool nextPage）
{
如果（下一页）
{
page++；
页面=（页面>2）？0：页面；
}否则
{
第页--；
page=（page我添加了一个简单的实现。我让您完成所有的样式设置。您的代码对我有效，，，当我单击n和p按钮时，列表视图没有移动..您能建议我..您必须实现此行为；）重新加载一组新图像。我们可以滚动列表视图魔药吗？更新了示例。现在我已初始化了一个包含15个元素的列表，控件一次只显示5个元素。按钮允许从一页切换到另一页。