Search code examples
xamarin.formsffimageloading

Xamarin ffimageloading plugin tap to full screen


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));
        }
    }
}

Solution

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