是否可以以 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：- 使用绑定 Url

创建转换器 (ImageConverter)。以下 ImageConverter 有用于测试的虚拟代码。它使用静态字段（请不要使用静态）。您可以绑定 Url 属性并根据 Url 您可以找到图像源是远程 url 还是本地图像。而return 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 绑定。所以，有一个work around。在 Model/ViewModel IsRemoteUri 中创建一个新的 bool 属性。一旦获取远程图像，初始 IsRemoteUri 将为 false，然后将 IsRemoteUri 更改为 true。将 IsRemoteUri 绑定到 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进行测试

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

Is it possible to set Image source both from file and uri in xamarin forms?

xaml

caching

image

xamarin