image - 是否可以以 xamarin 形式从文件和 uri 设置图像源？

Question

我正在尝试构建 xamarin 图像上传应用程序。我想在上传到服务器之前显示本地镜像，之后，我想显示来自服务器 url 的图像。如果我使用图像源，它在本地和服务器上都能很好地工作。但是服务器图片缓存出现问题。

<Image Grid.Row="0"
    Source="{Binding Url}"
    Aspect="AspectFill"
    HeightRequest="60"
    BackgroundColor="black"
    WidthRequest="60"/>

因此，为了禁用缓存，我使用了 UriImageSource，它适用于服务器 url，但不显示本地镜像。

<Image Grid.Row="0"
    Aspect="AspectFill"
    HeightRequest="60"
    BackgroundColor="black"
    WidthRequest="60">
    <Image.Source>
        <UriImageSource Uri="{Binding Url}"
                        CachingEnabled="False"/>
        <!--FileImageSource File="{Binding Url}"/-->
    </Image.Source>
</Image>

是否可以在此图像中同时使用文件和 uri 图像源？感谢您的帮助。

Answer 1

选项 1:- 使用绑定(bind) Url

创建转换器(ImageConverter)。以下 ImageConverter 有用于测试的虚拟代码。它使用静态字段(请不要使用静态)。您可以绑定(bind) Url 属性，根据 Url 可以确定图像源是远程 url 还是本地镜像。并返回 UriImageSource 或直接字符串(本地镜像)。在 ViewModel 中，Uri 属性的初始值将是本地镜像，一旦接收到远程图像，将 Uri 设置为远程图像并引发属性更改事件。

//ImageConverter.cs
 public class ImageConverter : IValueConverter
    {
        public static int count = 1;
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            count++;
            var imageUri = System.Convert.ToString(value);
            if (imageUri.Contains("http") && (count % 2 == 0))
            {
                UriImageSource uriImageSource = new UriImageSource();
                uriImageSource.Uri = new Uri(imageUri);
                uriImageSource.CachingEnabled = false;
                return uriImageSource;
            }
            else
            {
                return imageUri;//Local image
            }
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

//Xaml header

xmlns:local="clr-namespace:Monkeys.Converter"

<ContentPage.Resources>
     <ResourceDictionary>
        <local:ImageConverter x:Key="imgConv" />
     </ResourceDictionary>
</ContentPage.Resources>

//Xaml content
<Image Grid.Row="0"
         Source="{Binding  Url, Converter={StaticResource imgConv}}"
         Aspect="AspectFill" HeightRequest="60"
         BackgroundColor="black" WidthRequest="60"
         HorizontalOptions="CenterAndExpand">
</Image>

选项 2:- 使用 ConverterParameter

根据我的调查，xamarin.forms 不支持 ConverterParameter 绑定(bind)。所以，有一个 work around .在 Model/ViewModel IsRemoteUri 中创建一个新的 bool 属性。一旦获取远程图像，初始 IsRemoteUri 将为 false，然后将 IsRemoteUri 更改为 true。将 IsRemoteUri 绑定(bind)到 ConverterParameter。

转换器将如下代码所示。

 public class ImageConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            var imageUri = System.Convert.ToString(value);
            var isRemoteUri = (bool)parameter;
            if (isRemoteUri)
            {
                var uriImageSource = new UriImageSource();
                uriImageSource.Uri = new Uri(imageUri);
                uriImageSource.CachingEnabled = false;
                return uriImageSource;
            }
            else
            {
                return imageUri;//Local image
            }
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

我用过这个code用于测试