Post
Ask Question

Xamarin.Forms 4.4 Controls

Introduction 

 
In this article we are going to discuss about the new controls introduced with the Xamarin 4.4 release.
 
The Key Controls are:
  • Carousel View
  • Indicator View
  • Refresh View (Released with 4.3)
  • SwipeView
  • Image with animation.
So we will be discussing Carousel view and indicator view in this article and the remaining controls in the other part of it .
 

Carousel View

 
Carousel view is a control which is used to present the data in scrollable format. The user will swipe to move through the collection of items.
  1. <CarouselView ItemsSource="{Binding Offers}" x:Name="offersCarousel" HeightRequest="185">      
  2.    <CarouselView.ItemTemplate>      
  3.       <DataTemplate >      
  4.          <Image Source="{Binding ImageUrl}"/>      
  5.       </DataTemplate>      
  6.    </CarouselView.ItemTemplate>      
  7. </CarouselView>    
Let's go through the code now and see how the binding happens for CarouselView.
 
So the Item Source is bound to Offers which is a property in View model which is bound to this View.
 
Item Template has image Source which is bound to ImageUrl .
 
Now let’s go through the View Model part of it .
  1. public ObservableCollection<Offer> Offers { get; private set; }// Observable collection which is binded to CarouselView Itemssource.  
Structure for offer model
  1. public class Offer {  
  2.     public string Name {  
  3.         get;  
  4.         set;  
  5.     }  
  6.     public string ImageUrl {  
  7.         get;  
  8.         set;  
  9.     }  
  10. } 
Then we will bind items to offer collection .
  1. void CreateOfferCollection() {  
  2.     source.Add(new Offer {  
  3.         Name = "Offer 1",  
  4.             ImageUrl = "imgcard.png"  
  5.     });  
  6.     source.Add(new Offer {  
  7.         Name = "Offer 2",  
  8.             ImageUrl = "imgcard.png"  
  9.     });  
  10.     source.Add(new Offer {  
  11.         Name = "Offer 3",  
  12.             ImageUrl = "imgcard.png"  
  13.     });  
  14.     source.Add(new Offer {  
  15.         Name = "Offer 4",  
  16.             ImageUrl = "imgcard.png"  
  17.     });  
  18.     source.Add(new Offer {  
  19.         Name = "Offer 5",  
  20.             ImageUrl = "imgcard.png"  
  21.     });  
  22.     source.Add(new Offer {  
  23.         Name = "Offer 6",  
  24.             ImageUrl = "imgcard.png"  
  25.     });  
  26.     Offers = new ObservableCollection < Offer > (source);  
  27. }  
You can even assign the data directly to the observable collection.
 
So we have data bound to our {offer} observable collection which will be used to populate our data with the { ImageUrl } .
 
Xamarin.Forms 4.4 Controls
 
This is how our Carousel View looks.
 
So let's summarize about the carousel view.
 
We have bound the  image with our carousel view. We can change by creating a different data template and even need to change the structure for our item source to match with the new data remplate:
  • ItemsSource - a collection  which is used to generate the item control .
  • DataTemplate - an  XAML which describes how bound data will be displayed.
So here at the top we can see  rounded indicators which are showing the current hightligted item with filled circles .We call it indicator View. So once we have implemented our carousel view let's implement our indicator view which will show the number of items present.
 

Indicator View

 
Indicator view is a control which displays the number of items present and shows their current position .
  1. <Frame Margin="15" Padding="0" VerticalOptions="StartAndExpand" BackgroundColor="White" CornerRadius="5">  
  2.     <StackLayout>  
  3.         <StackLayout VerticalOptions="Center" HorizontalOptions="FillAndExpand" Orientation="Horizontal">  
  4.             <Label Margin="10,10,0,0" Text="OFFERS" FontAttributes="Bold" />  
  5.             <IndicatorView    
  6. IndicatorColor="LightGray"    
  7. SelectedIndicatorColor="Black"    
  8. IndicatorSize="8" VerticalOptions="Center" HorizontalOptions="CenterAndExpand"    
  9. IndicatorView.ItemsSourceBy="offersCarousel"/>  
  10.             <Button HorizontalOptions="End" Margin="10,10,10,0" Style="{StaticResource PrimaryButtonStyle}" HeightRequest="30" WidthRequest="100" Text="See All"/>  
  11.         </StackLayout>  
  12.         <CarouselView ItemsSource="{Binding Offers}" x:Name="offersCarousel" HeightRequest="185">  
  13.             <CarouselView.ItemTemplate>  
  14.                 <DataTemplate >  
  15.                     <Image Source="{Binding ImageUrl}"/>  
  16.                 </DataTemplate>  
  17.             </CarouselView.ItemTemplate>  
  18.         </CarouselView>  
  19.     </StackLayout>  
  20. </Frame>    
Here we have Indicator View positioned above the carousel view. So the output looks like this: 

Xamarin.Forms 4.4 Controls
 
If you want the indicator to be displayed you just need to view indicator view code after the Carousel View.
  1. <IndicatorView    
  2.    IndicatorColor="LightGray"    
  3.    SelectedIndicatorColor="Black"    
  4.    IndicatorSize="8" VerticalOptions="Center" HorizontalOptions="CenterAndExpand"    
  5. IndicatorView.ItemsSourceBy="offersCarousel"/>   
IndicatorColor - Default colors of the indicators.
 
SelectedIndicatorColor-  Indicator color of the element which is presented.
 
IndicatorSize - Total number of circles to be shown.
 
IndicatorView.ItemsSourceBy -Name of the Control which you want to be bound. So in our case we have bound it to carousel view and the x:Name="offersCarousel" for carousel view will be bound to the IndicatorView.ItemsSourceBy; i.e., IndicatorView.ItemsSourceBy="offersCarousel".
 
So with this article we have learned how to design carousel view, bind data to it, and how to create indicator view and associate it with our CarouselView.
 
In part two of our article we will go through Swipe View Image with animation and Refresh View which was released as part of 4.3 .
 
Happy Coding :) 


Similar Articles