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

Posted 2023-03-25

【中文标题】如何将嵌入式图像与后面 C# 代码中的字符串指定的变量 ImageSource 绑定？

【英文标题】：How to Bind Embedded Image with variable ImageSource that is specified by a string in C# code behind?

【发布时间】：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`" />

【参考方案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 "。但代码工作正常。任何人都可以解释错误原因或改进示例代码以消除错误非常欢迎。如果找到原因，请编辑答案。