Pagination - FlipView Indicator for Windows 8.1 and Windows phone 8.1

When using Flipview it's not  obvious that user will understand that there are adjacent view or Banner or some other view available, Well Indicator with Flipview is best UX to tell user that there are adjacent views are available.

Now It's easy to implement in Windows 8.1 and Windows phone 8.1 manually, but why manually if there is library available which makes Developer's life more easier.

Let's talk more about library now.

• Get the the library from Nuget.Org
• or use Package manager Console to download and install the library
• Install-Package JISoft.FlipViewIndicator.

• Now when you install this library it will install two more packages which are dependencies to complete library.
• JISoft.FlipView
• JISoft.Collections

• Below code sample will explain how to use this library.

 <Page  
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    
   xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"      
   xmlns:tools="using:JISoft.FlipView"    
   x:Class="App3.MainPage"  
   xmlns:toolkit="using:JISoft.Pagination"  
   mc:Ignorable="d">   
   <Grid x:Name="LayoutRoot">  
     <tools:JFlipView x:Name="flipvw" VerticalAlignment="Top" HorizontalAlignment="Stretch" IncrementalLoadingTrigger="Edge"   
               DataFetchSize="2" ItemsSource="{Binding Images}"  
              IncrementalLoadingThreshold="1" Margin="0,0,0,0" Background="#FF444747" ManipulationMode="All">  
       <tools:JFlipView.ItemTemplate>  
         <DataTemplate>  
           <Image Source="{Binding ImagePath}" Stretch="None"/>  
         </DataTemplate>  
       </tools:JFlipView.ItemTemplate>  
     </tools:JFlipView>  
     <toolkit:FlipViewIndicator x:Name="FlipViewInd" IsSlideShowPlaying="true" IndicatorSource="{Binding Images}" PaginationProvider="{Binding ElementName=flipvw}" VerticalAlignment="Bottom" HorizontalAlignment="Center" Margin="0,0,0,50">  
       <toolkit:FlipViewIndicator.SelectedItemTemplate>  
         <DataTemplate>  
           <Ellipse Stroke="White" StrokeThickness="1" Fill="#f1f1f1" Height="10" Width="10" StrokeDashCap="Round" StrokeEndLineCap="Square" StrokeStartLineCap="Round"/>  
         </DataTemplate>  
       </toolkit:FlipViewIndicator.SelectedItemTemplate>  
       <toolkit:FlipViewIndicator.UnSelectedItemTemplate>  
         <DataTemplate>  
           <Ellipse Stroke="#f1f1f1" Height="6" Width="6"/>  
         </DataTemplate>  
       </toolkit:FlipViewIndicator.UnSelectedItemTemplate>  
     </toolkit:FlipViewIndicator>  
   </Grid>  
 </Page>  

• As you can see in above code i have imported 2 Namespace
•  xmlns:tools="using:JISoft.FlipView" - For Custom Flipview which support easy integration
•  xmlns:tools="using:JISoft.Pagination" - to show Flipview Indicators

• Now this Flipview Indicator support two types of Data Templates as shown in above code.
• Selected Item
• Non-Selected Item 

• The PaginationProvider Property is provided in which JFlipview instance need to bind for seamless integration.
  
  
  
  
  
  

• Well not only this if you want automatic slideshow, provision is made in this library, use the below mention property and methods.
• SlideShowTimeSpan - Sets the slide/view changing duration.
• IsSlideShowPlaying - true/false to Play/Stop slideshow

• Various other property is  availble
• IndicatorMargin - Sets the margin in Indicator container
• IndicatorPadding - Sets the padding of indicator container
• ItemsPanelBackground - Sets the background of Indicator's ItemsPanel's background
• IndicatorBackground - Sets the background of whole container
• SelectedDataTemplate - Sets the view of selected item's indicator
• UnSelectedDataTemplate - Sets the view in Non-Selected items
• SideShowTimeSpan - Sets the duration for Flipview's slideshow
• IsSlideShowPlaying - Play/Stop slideshow 

Please give me the review for library, if you face any issue feel free to contact me by sending youur queries from the below form.
Implement LazyLoading with FlipView See this blog

Flipview With IncementalLoading/LazyLoading support

How to do Incremental loading (LazyLoading) of data you can check from here

Now How to integrate it with FlipView ?

• To do the same u need to download the library from Nuget.org which support Incremental loading in FlipView - JISoft.FlipView
• There is library available to do so. check here
• https://www.nuget.org/packages/JISoft.FlipView
• Install-Package JISoft.FlipView - Use command from Package manager console in VisualStudio.

How to use this library

• Follow the same tutorial to create collection for incremental loading from this blog.
• Integration with JFlipView

 <Page  
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    
   xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    
   xmlns:toolkit="using:JISoft.FlipView"  
   xmlns:LV="using:ExtendedListView"  
   x:Class="App3.MainPage"    
   mc:Ignorable="d">  
  <Grid Background="#3e3e3e" x:Name="LayoutRoot">  
     <toolkit:JFlipView x:Name="flipvw" VerticalAlignment="Top" HorizontalAlignment="Stretch" IncrementalLoadingTrigger="Edge"   
               SelectionChanged="JFlipView_SelectionChanged" DataFetchSize="5" ItemsSource="{Binding TestData}" IncrementalLoadingThreshold="4" Margin="0,0,200,0" Background="#FF444747" ManipulationMode="All">  
       <toolkit:JFlipView.ItemTemplate>  
         <DataTemplate>  
           <Border BorderThickness="1" BorderBrush="#f1f1f1" Margin="5" Width="{Binding Wid}" Height="100" >  
             <TextBlock Text="{Binding data}"/>  
           </Border>  
         </DataTemplate>  
       </toolkit:JFlipView.ItemTemplate>  
     </toolkit:JFlipView>  
  </Grid>  
 </Page>  

• Here your Flipview is ready which can do LazyLoading of data in same way as ListView/GridView do. Check below property to understand LazyLoading
• IncrementalLoadingThreshold - MSDN
• DataFetchSize - MSDN
• IncrementalLoadingThresholdTrigger - MSDN

IncrementalLoading(LazyLoading) in Windows phone 8.1 and Windows 8.1

How to do Incremental loading (LazyLoading) of data in ListView/GridView ?

• In WinRT runtime ListView and GridView implement ISupportIncrementalLoading interface.
• This interface will be called by Listview/Gridview when it reaches to end of list edge and gives callback to load more items.
• There is library available to do so. check here
• https://www.nuget.org/packages/JISoft.Collections
• Install-Package JISoft.Collections - Use command from Package manager console in VisualStudio

How to use this library

• Add this library in your Windows 8.1 or Windows phone 8.1 project from Nuget.
• After adding library reference is already been added to project.
• Now create a collection which implement "IncrementalLoadingCollection" from library this way as mention below.
• Right Click on  IncrementalLoadingList<BookSummaryInfo> and use Implement Abstract class, it will add two methods
•  Task<int> LoadNextItemsAsync () - make it async mehod
• CanLoadMoreItems() - business logic to handle max item to fetch
• See example below

 public class BookCollection :IncrementalLoadingList<BookSummaryInfo>
 {
     private BookSearchDataContext _bookDataContext;
     public BookCollection(BookSearchDataContext bookDataContext)
     {
         this._bookDataContext = bookDataContext;
     }
     protected async override Task<int> LoadNextItemsAsync(int count) //count is passed by ListView/GridView
     {
        if (_bookDataContext != null)
        {
           //Network request and get Data - Pass the no of items require from network - count
           //"count" which is passed from ListView/GridView
           SearchResponse response = await _bookDataContext.SearchBooks(count);    
           if (response != null && response.Search != null && response.Search.Length > 0)
           {
              foreach (var bookinfo in response.Search)
              {
                 //Add data to Collection
                  this.Add(new BookSummaryInfo(bookinfo));
              }
              //return the no of items added
              return response.Search.Length;
           }
       }
       return 0;
     }     
     protected override bool CanLoadMoreItems()
     {
         ////your Own logic - if you have more items make it true else false
        return _bookDataContext.hasMore;
     }
}

• Now Your Collection is Ready next We will use same collection To bind with ListView/GridView
• Now Let's Create ViewModel 

////Your View-Model which contain the IncrementalLoadingCollection   
public class BookDataVM   
{   
    BookSearchDataContext data; bool _IsBusy;   
    public BookDataVM()   
    {   
        data = new BookSearchDataContext();  
        ////Collection with Incremental Loading capability   
        BookCollection = new BookCollection(data);   
    }   
}   

• Now this BookCollection object can be bind to ListView/GridView.
• Scroll to the end of list it will give you call-back "LoadNextItemsAsync" where you can add more items to collection.

See FlipView with IncrementalLoading