The code below render an image with 200px height using ffimageloading component. I need to tap on this image and display the image in a fullscreen or zoom it. Is it posible with ffimageloading or I need implement it by each platform (android and ios)?
View
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
prism:ViewModelLocator.AutowireViewModel="True"
xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
x:Class="Namespace.Views.MyClass">
<Grid Padding="0"
Margin="0"
BackgroundColor="{StaticResource BackgroundColor}">
<Grid.RowDefinitions>
<RowDefinition Height="200" />
</Grid.RowDefinitions>
<ffimageloading:CachedImage
Grid.Row="0"
Source="{Binding ThumbPath}"
Aspect="AspectFill">
<ffimageloading:CachedImage.LoadingPlaceholder>
<OnPlatform
x:TypeArguments="ImageSource"
iOS="logo_header"
Android="logo_header" />
</ffimageloading:CachedImage.LoadingPlaceholder>
<ffimageloading:CachedImage.ErrorPlaceholder>
<OnPlatform
x:TypeArguments="ImageSource"
iOS="noimage"
Android="noimage" />
</ffimageloading:CachedImage.ErrorPlaceholder>
</ffimageloading:CachedImage>
</Grid>
</ContentPage>
ViewModel (using prism)
public class MyClassViewModel : BindableBase, INavigationAware
{
public MyClassViewModel()
{
}
private string _thumbPath;
public PerfilPetDto ThumbPath
{
get
{
return "https://www.google.com.br/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png";
}
set
{
_thumbPath = value;
RaisePropertyChanged(nameof(ThumbPath));
}
}
}
The first thing to do is add a gesture recogniser to the cached image
<ffimageloading:CachedImage.GestureRecognizers>
<TapGestureRecognizer Command="{Binding ViewImageCommand}" />
</ffimageloading:CachedImage.GestureRecognizers>
This uses a command binding to a command in the view model
private Command _viewImageCommand;
public Command ViewImageCommand => _viewImageCommand ?? (_viewImageCommand = new Command(async () => await ViewImage()));
private async Task ViewImage()
{
await CoreMethods.PushPageModel<FullScreenImagePageModel>(imageName, false);
}
This pushes another page to display the image as full screen.
I'm using FreshMvvm to pass the name of the image to the full screen image view model.