Xamarin ffimageloading 插件点击全屏
Xamarin ffimageloading plugin tap to full screen
下面的代码使用 ffimageloading 组件渲染高度为 200 像素的图像。我需要点击这张图片并全屏显示或缩放它。 ffimageloading 是否可行,或者我需要通过每个平台(android 和 ios)实现它?
查看
<?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(使用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));
}
}
}
首先要做的是向缓存图像添加手势识别器
<ffimageloading:CachedImage.GestureRecognizers>
<TapGestureRecognizer Command="{Binding ViewImageCommand}" />
</ffimageloading:CachedImage.GestureRecognizers>
这使用命令绑定到视图模型中的命令
private Command _viewImageCommand;
public Command ViewImageCommand => _viewImageCommand ?? (_viewImageCommand = new Command(async () => await ViewImage()));
private async Task ViewImage()
{
await CoreMethods.PushPageModel<FullScreenImagePageModel>(imageName, false);
}
这会推送另一个页面以全屏显示图像。
我正在使用 FreshMvvm 将图像名称传递给全屏图像视图模型。
下面的代码使用 ffimageloading 组件渲染高度为 200 像素的图像。我需要点击这张图片并全屏显示或缩放它。 ffimageloading 是否可行,或者我需要通过每个平台(android 和 ios)实现它?
查看
<?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(使用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));
}
}
}
首先要做的是向缓存图像添加手势识别器
<ffimageloading:CachedImage.GestureRecognizers>
<TapGestureRecognizer Command="{Binding ViewImageCommand}" />
</ffimageloading:CachedImage.GestureRecognizers>
这使用命令绑定到视图模型中的命令
private Command _viewImageCommand;
public Command ViewImageCommand => _viewImageCommand ?? (_viewImageCommand = new Command(async () => await ViewImage()));
private async Task ViewImage()
{
await CoreMethods.PushPageModel<FullScreenImagePageModel>(imageName, false);
}
这会推送另一个页面以全屏显示图像。
我正在使用 FreshMvvm 将图像名称传递给全屏图像视图模型。