Looping FlipView for UWP

问题:

Is there any way to make a FlipView loop through items? From the last item, to the first and viceversa. I have seen this solution http://blogs.msdn.com/b/synergist/archive/2013/09/21/windows-8-flipview-looping-sample.aspx

It works for W8, OK, but the same code throws under the Windows Universal Platform (Universal App).

回答1:

The solution you've mentioned is right, you can refer to this solution to implement your own.

But the sample linked in the article doesn't work because there is a minor mistake. In the MainPage.xaml, it use following code to use attached property

<FlipView x:Name="FlipView" Synergist:FlipViewExtensions.IsLooping="True">

But the namespace prefix "Synergist" is wrong, it should be "synergist" since it is defined as xmlns:synergist="using:Synergist". So just change "Synergist" to "synergist":

<FlipView x:Name="FlipView" synergist:FlipViewExtensions.IsLooping="True"> 

The sample will work well.

And if you use these code in UWP, it will throw an exception at flipView.ItemsSource = loopingList;.

WinRT information: Cannot complete a collection modification while another modification is in progress.

System.Runtime.InteropServices.COMException (0x8000FFFF): Catastrophic failure

Cannot complete a collection modification while another modification is in progress.

• at Windows.UI.Xaml.Controls.ItemsControl.put_ItemsSource(Object value)
• at Synergist.FlipViewExtensions.Initialize(FlipView flipView)

Although it's hard to say what's wrong here, we can set IsLooping attached property in code-behind after assigning or adding items to FlipView.ItemsSource to avoid this exception. For example:

public MainPage()
{
    this.InitializeComponent();

    var items = new Item[]
    {
        new Item { Name="1"},
        new Item { Name="2"},
        new Item { Name="3"},
        new Item { Name="4"},
        new Item { Name="5"},
        new Item { Name="6"},
        new Item { Name="7"},
        new Item { Name="8"},
        new Item { Name="9"},
        new Item { Name="10"},
    };

    var collection = new ObservableCollection<Item>();

    this.FlipView.ItemsSource = collection;

    foreach (var item in items)
    {
        collection.Add(item);
    }

    Synergist.FlipViewExtensions.SetIsLooping(this.FlipView, true);
}

Please check my Completed sample on Github.

回答2:

It's difficult to make FlipView be looping and keep good experience in UWP.

I implemented a CarouselView using compostion api to solve the problem. See it in Github. The CarouselView have several features:

• supports infinite lopping.
• shows the neighbor images when the screen width is large.

It's easy to use just like the below code.

<carousel:CarouselView x:Name="carousel" ItemWidth="500"
          xmlns:carousel="using:CarouselView.Controls"/>

and then set the ItemImageSource(a List<string> dependency property) in code behind or using Binding

carousel.ItemImageSource = new List<string>()
{
    "https://img1.doubanio.com/view/photo/photo/public/p1204310498.jpg",
    "https://img1.doubanio.com/view/photo/photo/public/p1547743259.jpg",
    "https://img1.doubanio.com/view/photo/photo/public/p2183422782.jpg",
    "https://img1.doubanio.com/view/photo/photo/public/p832662844.jpg",
    "https://img1.doubanio.com/view/photo/photo/public/p752907403.jpg"
};

You can view more details and check the sample in my Github