Xamarin.Forms 4.4 Controls

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 .

<RefreshView IsRefreshing="{Binding isUpdating}"
Command="{Binding RefreshCommand}">
<CollectionView ItemsSource="{Binding Items}">
<CollectionView.ItemsLayout>
<LinearItemsLayout Orientation="Vertical"/>
</CollectionView.ItemsLayout>
</CollectionView>
</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

public ICommand RefreshCommand {
get;
} //Binded to RefreshView
public ItemViewModel() {
RefreshCommand = new Command(ExecuteRefreshCommand);
}
bool isUpdating; // to show and hide the activity indicator
public bool IsUpdating {
get => isUpdating;
set {
isUpdating = value;
OnPropertyChanged(nameof(IsUpdating));
}
}
//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 .
void ExecuteRefreshCommand() {
//Do The update operation here if its a service call or ypu want to add to the current list
// Stop refreshing
IsUpdating = false;
}

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

Forms.SetFlags("SwipeView_Experimental");

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

<StackLayout HeightRequest="50 " HorizontalOptions="Center" VerticalOptions="Fill">
<SwipeView >
<SwipeView.RightItems>
<SwipeItems>
<SwipeItem Text="Add"
BackgroundColor="Yellow"/>
<SwipeItem Text="Delete"
BackgroundColor="LightPink"/>
</SwipeItems>
</SwipeView.RightItems>
<Grid HeightRequest="60"
WidthRequest="300"
BackgroundColor="LightGray">
<Label Text="Swipe Right"
HorizontalOptions="Center"
VerticalOptions="Center" />
</Grid>
</SwipeView>
</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.

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 .

<SwipeItem Text="Delete"
Command="{Binding DeleteCommand}"
BackgroundColor="LightPink"/>

So here we have command "DeleteCommand" bound from View model.

SwipeItems Mode

2 Modes

Execute: Executes the swipe items.
Reveal :Reveals the Swipe Items.

SwipeItems Behaviour

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 .

<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.

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 :)