在 xamarin 表单上动态绑定图像源

Question

我的问题是，我可以将字符串图像绑定到图像源吗？我有多个图像，图像会根据条件改变。所以：

Xamarin 表单上的 Xaml：

<Image Source="{Binding someImage}" Aspect="Fill" Grid.Row="2"></Image>

C#代码隐藏

   public String someImage;
    public String SomeImage
    {
        set
        {
            if (someImage != value)
            {
                someImage = value;                                        
            }
        }
        get
        {
            return someImage;
        }
    }

初始化组件部分：

if(true)
            {
                someImage = "backgroundListViewGren.png";
            }
            else
            {
                someImage = "backgroundListViewRed.png";
            }

图片位于可移植项目的“Images”文件夹中

但这不起作用，也许我错了，但我不明白。 有什么解决办法吗？

我尝试过使用 ImageSource 而不是字符串，但也不行。

Answer 1

我将在此处发布此答案，因为它是我一直在寻找的答案，而且我怀疑大多数其他人都是（Google 目前将您引导至此处，这目前不是很有帮助）。

如何使用 XAML 绑定图像：

XAML：

<Image>
    <Image.Source>
        <FileImageSource File="{Binding SomeImage}" />
    </Image.Source>
</Image>

然后在 ViewModel 中，C#：

public string SomeImage
{
    get { return string.Format("prefix-{0}-suffix.png", OtherProperty); }
}

您可以使用更新、更好但本质上等效的 c# 来代替上面的：

public string SomeImage => $"prefix-{OtherProperty}-suffix.png";

这当然是最简单的设置方法，IMO :)。

编辑：不言而喻，但图像显然应该在每个平台的项目的Resources 文件夹中。

EDIT2，很久以后：如果不明显，“前缀”、“后缀”只是随机字符串，SomeImage 只需返回图像的路径。 SomeImage 和 OtherProperty 是您的视图模型类的成员，OtherProperty 只是您的图像名称的基础（因为如果您提前知道全名，则不需要这个问题）。

Answer 2

你说：

图像位于可移植项目的“Images”文件夹中

每个平台都有不同的资源和图像方法。 Xamarin 在每个平台上都会处理这个问题，例如 Xamarin.iOS 具有嵌入式资源，而 Xamarin.Android 将 Android 资源用于图像。

您应该将图像放置在每个项目中，以便 Xamarin.Forms 知道在每个平台中的何处查找它们。

更多信息请查看this。

Answer 3

要使用来自 PCL 的图像，请查看 Xamarin documentation 中的此部分。

您应该确保将每个图像的Build action 设置为Embedded Resource。

然后，如果您想在 XAML 中使用它们，请指定一个 MarkupExtension

[ContentProperty ("Source")]
public class ImageResourceExtension : IMarkupExtension
{
  public string Source { get; set; }

  public object ProvideValue (IServiceProvider serviceProvider)
  {
    if (Source == null)
    {
      return null;
    }
    // Do your translation lookup here, using whatever method you require
    var imageSource = ImageSource.FromResource(Source);

    return imageSource;
  }
}

然后您应该能够像这样使用您的图像。

<?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:local="clr-namespace:WorkingWithImages;assembly=WorkingWithImages"
    x:Class="WorkingWithImages.EmbeddedImagesXaml">
  <StackLayout VerticalOptions="Center" HorizontalOptions="Center">
    <!-- use a custom Markup Extension -->
    <Image Source="{local:ImageResource WorkingWithImages.beach.jpg}" />
  </StackLayout>
</ContentPage>

就像在 cmets 中提到的那样，如果您想让它开箱即用，请将它们放在您各自平台项目的 Resources 文件夹中。这样，您还可以利用现有的自动调整大小机制。要了解有关此方法的更多信息，请参阅page。

通过在正确的文件夹中使用正确的命名约定添加它们，您可以简单地引用文件名，Xamarin.Forms 会将其转换为平台的正确格式。

Answer 4

我认为你可以做得更简单一些。这是我的工作。 将图像放在每个平台上的适当位置，例如。 Android 上的资源/可绘制对象

在您的 Xaml 中：

<Image Source="{Binding someImage}" Aspect="Fill" Grid.Row="2"></Image>

在您的视图模型中：

private string _someImage = "icon_eye_hidden";
    public string someImage
    {

        get => this._someImage;
        set
        {

            if (this._someImage == value) return;

            this._someImage = value;
            this.RaisePropertyChanged(() => this.someImage);
        }
    }

然后只需将 someImage 设置为图像的名称（不带扩展名），它应该会更新。

Answer 5

我认为这不是最快的事情，但我找到了一种方法，在共享项目中只包含一次图像资源。

这还有一个优点，即文件在项目中的位置无关紧要，这对我有好处，因为我倾向于相当频繁地移动内容。

这是一个名为EmbeddedSourceror 的类。它基本上只是根据需要查找并返回资源：

public class EmbeddedSourceror
{
    //NOTE: if there are resources *anywhere* with identical names, this will only return the *first* one it finds, so don't duplicate names
    public static Xamarin.Forms.ImageSource SourceFor(string filenameWithExtension)
    {       
        var resources = typeof(EmbeddedSourceror).GetTypeInfo().Assembly.GetManifestResourceNames();

        var resourceName = resources.First(r => r.EndsWith(filenameWithExtension, StringComparison.OrdinalIgnoreCase));

        return Xamarin.Forms.ImageSource.FromResource(resourceName);
    }
 }

用法：

假设在 XAML 中定义为 centerImageElement 的图像元素：

centerImageElement.Source = EmbeddedSourceror.SourceFor("centerimage.png");

...您可以在运行时动态分配它。