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