如何将嵌入式图像与后面 C# 代码中的字符串指定的变量 ImageSource 绑定？答案

【问题标题】：How to Bind Embedded Image with variable ImageSource that is specified by a string in C# code behind?如何将嵌入式图像与后面 C# 代码中的字符串指定的变量 ImageSource 绑定？
【发布时间】：2021-09-16 14:41:20
【问题描述】：

我想在 Xamarin Forms 中显示变量 Image。我想在 XAML 中绑定 ImageSource。我曾尝试使用文档中提到的IMarkupExtension，但限制是我需要在 XAML 本身中指定整个路径。我想绑定ImageSource，它可以在需要时改变。我不想在 XAML 中指定整个路径。

这是我的工作 XAML 代码：

<Image Source="{local:ImageResource MyProject.Images.photo.jpg}" />

这是 XAML 不起作用的代码：

<Image Source="{Binding imgSource StringFormat=local:ImageResource `MyProject.Images.{0}`" />

【问题讨论】：

标签： c# xaml xamarin xamarin.forms binding

【解决方案1】：

Microsoft 没有在官方文档中提供有关在 XAML 中绑定变量 ImageSource 的信息。您需要IValueConverter 和ImageSource.FromResource() 将string 转换为ImageSource 才能绑定变量Image。

在 Image Properties 中将您的 Image 设置为 Build: EmbeddedResource。

这是转换的扩展

public class EmbeddedToImageSourceConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is string fileName && parameter is string assemblyName)
        {
            try
            {
                Debug.WriteLine("Assembly Name: " + assemblyName);  // Just for reference, remove in Release mode
                var imageSource = ImageSource.FromResource(assemblyName + "." + fileName, typeof(EmbeddedToImageSourceConverter).GetTypeInfo().Assembly);
                return imageSource;
            }
            catch (Exception)
            {
                return value;
            }
        }
        else
            return value;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return value;
    }
}

在您的 XAML 中

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             ...
             xmlns:extensions="clr-namespace:MyProject.Extensions">

    <ContentPage.Resources>
        <extensions:EmbeddedToImageSourceConverter x:Key="imageConverter" />
    </ContentPage.Resources>

    <ContentPage.Content>
        <StackLayout>
            <Image Source="{Binding IconSource, Converter={StaticResource imageConverter}, ConverterParameter='MyProject.Resources.Images'}"
                           HeightRequest="40" WidthRequest="40" Aspect="AspectFit" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

在 C# 代码后面 (xaml.cs)

public string IconSource { get { return "photo.png"; } set { } }

public MainPage()
{
    InitializeComponent();
    BindingContext = this;
}

您可以将 BindingContext 设置为您的 ViewModel 并实现 INotifyPropertyChanged，这会将您的 XAML 中的 IconSource 图像与 C# 代码同步。

注意，我在 StaticResource imageConverter 的起始大括号附近的 <Image Source="{Binding IconSource, Converter={StaticResource imageConverter}, ... 行收到 Intellisense 错误/警告。错误提示 No DataContext found for Binding "。但代码工作正常。任何人都可以解释错误原因或改进示例代码以消除错误非常欢迎。如果找到原因，请编辑答案。

【讨论】：