How to enable FFImageLoading transformation in Xamarin.Forms ListView?
You can use the CachedImage of the FFImageLoading in the SfListView and make a transformation on the image at run time in Xamarin.Forms ListView. You can also refer to the FFImageLoading document from here. Please refer to the steps below to work with CachedImage,
STEP 1: Install the following packages in the shared code project,
STEP 2: Initialize the CachedImageRenderer in each platform.
In Android, initialize the renderer in the MainActivity.cs class.
namespace ListViewXamarin.Droid
{
[Activity(Label = "ListViewXamarin", Icon = "@mipmap/icon", Theme = "@style/MainTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
{
protected override void OnCreate(Bundle savedInstanceState)
{
TabLayoutResource = Resource.Layout.Tabbar;
ToolbarResource = Resource.Layout.Toolbar;
base.OnCreate(savedInstanceState);
FFImageLoading.Forms.Platform.CachedImageRenderer.Init(enableFastRenderer: true);
global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
LoadApplication(new App());
}
}
}
In iOS, initialize the renderer in the AppDelegate.cs class.
namespace ListViewXamarin.iOS
{
// The UIApplicationDelegate for the application. This class is responsible for launching the
// User Interface of the application, as well as listening (and optionally responding) to
// application events from iOS.
[Register("AppDelegate")]
public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate
{
//
// This method is invoked when the application has loaded and is ready to run. In this
// method you should instantiate the window, load the UI into it and then make the window
// visible.
//
// You have 17 seconds to return from this method, or iOS will terminate your application.
//
public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
FFImageLoading.Forms.Platform.CachedImageRenderer.Init();
global::Xamarin.Forms.Forms.Init();
SfListViewRenderer.Init();
LoadApplication(new App());
return base.FinishedLaunching(app, options);
}
}
}
In UWP, initialize the renderer in the App.xaml.cs class.
namespace ListViewXamarin.UWP
{
/// <summary>
/// Provides application-specific behavior to supplement the default Application class.
/// </summary>
sealed partial class App : Application
{
...
protected override void OnLaunched(LaunchActivatedEventArgs e)
{
Frame rootFrame = Window.Current.Content as Frame;
// Do not repeat app initialization when the Window already has content,
// just ensure that the window is active
if (rootFrame == null)
{
// Create a Frame to act as the navigation context and navigate to the first page
rootFrame = new Frame();
rootFrame.NavigationFailed += OnNavigationFailed;
FFImageLoading.Forms.Platform.CachedImageRenderer.Init();
Xamarin.Forms.Forms.Init(e);
if (e.PreviousExecutionState == ApplicationExecutionState.Terminated)
{
//TODO: Load state from previously suspended application
}
// Place the frame in the current Window
Window.Current.Content = rootFrame;
}
...
}
...
}
}
STEP 3: In the model class, declare the Transformation collection which is bound to the CachedImage.Transformations property.
namespace ListViewXamarin
{
public class BookInfo : INotifyPropertyChanged
{
private List<ITransformation> transformations;
public BookInfo()
{
transformations = new List<ITransformation>();
}
public List<ITransformation> Tranformations
{tap
get { return transformations; }
set
{
transformations = value;
this.OnPropertyChanged("Tranformations");
}
}
}
}
STEP 4: Add BlurredTransformation to the model Transformation collection when populating the ListView data.
namespace ListViewXamarin
{
public class BookInfoRepository
{
internal ObservableCollection<BookInfo> GetBookInfo()
{
var bookInfo = new ObservableCollection<BookInfo>();
for (int i = 0; i < BookNames.Count(); i++)
{
var book = new BookInfo()
{
BookName = BookNames[i],
BookDescription = BookDescriptions[i],
BookAuthor = BookAuthers[i],
AuthorImage = ImageSource.FromResource("ListViewXamarin.Images.Image" + i + ".png"),
};
book.Tranformations.Add(new BlurredTransformation() { Radius = 20 });
bookInfo.Add(book);
}
return bookInfo;
}
}
}
STEP 5: Add the CachedImage in the SfListView.ItemTemplate. To work with transformation, bind the model transformation collection to the CachedImage.Transformations property. Use behavior for CachedImage to make the transformation by tapping the image.
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:ListViewXamarin"
xmlns:sync="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms" xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
x:Class="ListViewXamarin.MainPage">
<ContentPage.BindingContext>
<local:ViewModel />
</ContentPage.BindingContext>
<Grid RowSpacing="0" ColumnSpacing="0" Padding="0" Margin="0">
<sync:SfListView x:Name="listView" AutoFitMode="Height" ItemsSource="{Binding BookInfo}" SelectionBackgroundColor="#d3d3d3">
<sync:SfListView.ItemTemplate>
<DataTemplate>
<Grid RowSpacing="0" Padding="0,12,8,0" ColumnSpacing="0" Margin="0">
...
<ffimageloading:CachedImage x:Name="img" HorizontalOptions="Center" VerticalOptions="Center" WidthRequest="90" HeightRequest="100" DownsampleToViewSize="true"
Source = "{Binding AuthorImage}" Transformations="{Binding Tranformations}">
<ffimageloading:CachedImage.Behaviors>
<local:Behavior/>
</ffimageloading:CachedImage.Behaviors>
</ffimageloading:CachedImage>
...
</Grid>
<BoxView Grid.Row="1" HeightRequest="1" Opacity="0.75" BackgroundColor="#CECECE" />
</Grid>
</DataTemplate>
</sync:SfListView.ItemTemplate>
</sync:SfListView>
</Grid>
</ContentPage>
STEP 6: Add the TapGestureRecognizer to the CachedImage and trigger the Tapped event to unblur/blur the image on tap. Update the value of BlurredTransformation.Radius for transformation. Also, reload the image to update the changes in the UI.
namespace ListViewXamarin
{
public class Behavior : Behavior<CachedImage>
{
CachedImage FFImage;
protected override void OnAttachedTo(CachedImage bindable)
{
FFImage = bindable;
var tapGesture = new TapGestureRecognizer();
tapGesture.Tapped += TapGesture_Tapped;
FFImage.GestureRecognizers.Add(tapGesture);
base.OnAttachedTo(bindable);
}
private void TapGesture_Tapped(object sender, EventArgs e)
{
var blurredTransformation = FFImage.Transformations[0] as BlurredTransformation;
if (blurredTransformation.Radius == 20) blurredTransformation.Radius = 0;
else blurredTransformation.Radius = 20;
FFImage.ReloadImage();
}
}
}
Conclusion
I hope you enjoyed learning about how to enable FFImageLoading transformation in Xamarin.Forms ListView.
You can refer to our Xamarin.Forms ListView feature tour page to know about its other groundbreaking feature representations. You can also explore our Xamarin.Forms ListView documentation to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
