Xamarin.Forms 4.4 Controls - Part Two

Introduction

 
So in the first part of our article we have gone through Carousel View and Indicator View and how to bind our indicator view with the Carousel View. Let's list out the controls which we will learn in this article:
  • Refresh View (Released with 4.3)
  • SwipeView
  • Image with animation.

Refresh View

 
This control was introduced as part of 4.3 with the collection View and it gives us control to add pull to refresh to scrollable controls .
 
Xamarin.Forms 4.4 Controls
  1. <RefreshView IsRefreshing="{Binding isUpdating}"    
  2. Command="{Binding RefreshCommand}">  
  3.     <CollectionView ItemsSource="{Binding Items}">  
  4.         <CollectionView.ItemsLayout>  
  5.             <LinearItemsLayout Orientation="Vertical"/>  
  6.         </CollectionView.ItemsLayout>  
  7.         <!-- Add ItemTemplate -->  
  8.     </CollectionView>  
  9. </RefreshView>     
So here Refresh view command is bound to {RefreshCommand} in view model and IsRefreshing is bound to show and hide the activity indicator.
 
ViewModel
  1. public ICommand RefreshCommand {  
  2.     get;  
  3. //Binded to RefreshView    
  4. public ItemViewModel() {  
  5.     RefreshCommand = new Command(ExecuteRefreshCommand);  
  6. }  
  7. bool isUpdating; // to show and hide the activity indicator     
  8. public bool IsUpdating {  
  9.     get => isUpdating;  
  10.     set {  
  11.         isUpdating = value;  
  12.         OnPropertyChanged(nameof(IsUpdating));  
  13.     }  
  14. }  
  15. //Do the operation and data changes to be reflected after the refresh .So it will be called everytime to do pull to refresh update the data with the service operation or other Ui changes which u want to do and set the IsUpdating property to false which will hide the activity indicator .    
  16. void ExecuteRefreshCommand() {  
  17.     //Do The update operation here if its a service call or ypu want to add to the current list    
  18.     // Stop refreshing    
  19.     IsUpdating = false;  
  20. }  
So let's summarize about the Refresh View.
  • Command - Called everytime we pull to refresh and perform the Ui update 
  • IsRefreshing - Bool to show and hide the indicator View .

SwipeView

 
SwipeView is currently experimental and we need to add the below lines before calling forms.init in MainActivity for Android and AppDelegate for iOS 
  1. Forms.SetFlags("SwipeView_Experimental");  
Xamarin.Forms 4.4 ControlsXamarin.Forms 4.4 Controls
 

Properties 

  • LeftItems
    1. <SwipeView >  
    2.     <SwipeView.LeftItems>  
    3. ///  
    4. </SwipeView.LeftItems>  
    5. </SwipeView>  
    Swipe Items which will be shown when swiped from  the left side .
  • RightItems
    Swipe Items which will be shown when swiped from the  right side .
  • TopItems
    Swipe Items which will be shown when swiped from the top .
  • BottomItems
    Swipe Items which will be shown when swiped from the bottom.
Implementing Swipe View
  1. <StackLayout HeightRequest="50 " HorizontalOptions="Center" VerticalOptions="Fill">  
  2.     <SwipeView >  
  3.         <SwipeView.RightItems>  
  4.             <SwipeItems>  
  5.                 <SwipeItem Text="Add"    
  6. BackgroundColor="Yellow"/>  
  7.                 <SwipeItem Text="Delete"    
  8. BackgroundColor="LightPink"/>  
  9.             </SwipeItems>  
  10.         </SwipeView.RightItems>  
  11.         <!-- Content -->  
  12.         <Grid HeightRequest="60"    
  13. WidthRequest="300"    
  14. BackgroundColor="LightGray">  
  15.             <Label Text="Swipe Right"    
  16. HorizontalOptions="Center"    
  17. VerticalOptions="Center" />  
  18.         </Grid>  
  19.     </SwipeView>  
  20. </StackLayout>    
We have a label with test "Swipe Right" which is inside SwipeView which has two right views, so once we swipe right we will get "Add" & delete.
 
Xamarin.Forms 4.4 Controls
 
We can event bind the items with the command so on add we can add one more label to the grid and on clicking delete we can delete it .
  1. <SwipeItem Text="Delete"  
  2.    Command="{Binding DeleteCommand}"  
  3. BackgroundColor="LightPink"/>  
So here we have command "DeleteCommand" bound from View model.
 
SwipeItems Mode 
 
Xamarin.Forms 4.4 Controls
2 Modes
  1. Execute: Executes the swipe items.
  2. Reveal :Reveals the Swipe Items.
SwipeItems Behaviour
 
Xamarin.Forms 4.4 Controls
 
Auto 
 
Execute Mode: Open after the swiped item is invoked.
 
Reveal Mode: Closes after the swiped item is invoked.
 
Closes 
 
Closes after the swiped item is invoked.
 

RemainOpen 

 
Open after the swiped item is invoked. 
 
So let's summarize about the Swipe View.
  • Mode - Two modes for the Swiped item to execute or reveal.
  • Behavior - The behavior of the Swipe Items after the swiped item is invoked.

Image with animation 

 
GIFs are easy ways to add animations to a image view. So with the Xamarin 4.4 release image view supports source as GIF which has a property to start and stop playback by setting IsAnimationPlaying="True" to start IsAnimationPlaying="False" to stop the animation .
  1. <Image Source="https://cataas.com/cat/gif?type=s" HeightRequest="300" WidthRequest="300" IsAnimationPlaying="True"/>   
So here we have given .GIF to the Source and IsAnimationPlaying is used to start and stop animation.
 
Xamarin.Forms 4.4 Controls
 
So for the image with animation we have gone through the main controls released as part of 4.4 and Refresh view from 4.3 and learned how to implement it .
 
Happy Coding :)