如何实现嵌入式图像资源的绑定?

Question

1. 我正在尝试将ImageButton源连接到我的主页中的可变字符串属性。我不确定´它的正确的方法。然而，我正试图找到一种方法来绑定两者一起使用绑定表达式。

namespace MyNameSpace
{
public partial class MainPage : ContentPage, INotifyPropertyChanged
{
public new  event PropertyChangedEventHandler PropertyChanged;
public String One => "MyNameSpace.Images.Blue.jpg";
public MainPage()
{
InitializeComponent();
}
protected override void OnPropertyChanged ([CallerMemberName] string name = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
} 
}
}

这是我创建的MarkUpExtension，当我使用嵌入式图像资源时，可以将字符串作为资源。

using System;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace MyNameSpace
{
[ContentProperty("ResourceId")]
public class EmbeddedImage : IMarkupExtension
{
public string ResourceId { get; set;}
public object ProvideValue(IServiceProvider serviceProvider)
{
if (String.IsNullOrWhiteSpace(ResourceId))
return null;
return ImageSource.FromResource(ResourceId);
}
}
}

这就是我试图在xaml中绑定字符串的方式…

<?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:MyNameSpace"
x:Class="MyNameSpace.MainPage"
x:Name = "Main">
<StackLayout
BindingContext="{x:Reference Name=Main }">

<Image

Source="{local:EmbeddedImage ResourceId = {Binding One}}">

</Image>    

</StackLayout>
</ContentPage>

显然它不起作用…我得到错误:

主页。xaml(13,12): [XFC0009]没有找到"ResourceId"的属性，BindableProperty或事件，或值和属性之间的类型不匹配。

也许这不是做这件事的方法…有不同的方法吗?

Answer 1

您有一个可以更改的字符串，该字符串表示嵌入的资源(图像)

我建议使用值转换器

首先，您必须修改string属性，以便在值发生变化时通知UI

private string _one;
public string One
{
get=>_one; 
set{_one=value; NotifyPropertyChanged();}
}

然后你必须为转换器创建一个新类，下面是你的代码，将字符串转换为ImageSource

public class converter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
string ResourceId=value.ToString(); 
if (String.IsNullOrWhiteSpace(ResourceId))
return null;
return ImageSource.FromResource(ResourceId);
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}

然后，像任何其他转换器一样，将其添加到App.xaml中的应用程序资源中。这取决于您的名称类和名称空间

<converters:converter x:Key="myConverter"/>

最后是图像

的代码

<Image Source="{Binding One, Converter={StaticResource myConverter}}"/>

另外，如果应用程序不断增长，请考虑将ViewModel分离到另一个类

Answer 2

不需要编写标记扩展

1. 创建一个ImageSource属性并绑定到xaml.
2. 设置属性使用ImageSource.FromStream方法(并通过嵌入式图像流)。

请看下面的例子。

背后的代码

using System;
using System.IO;
using System.Reflection;
using Xamarin.Forms;
namespace App5
{
public partial class MainPage
{
public MainPage()
{
InitializeComponent();
SetImage();
}
private int Num = 1;
private static readonly Assembly Assembly = typeof(MainPage).Assembly;
private ImageSource _Source;
public ImageSource Source
{
get => _Source;
set
{
_Source = value;
OnPropertyChanged();
}
}
private void SetImage()
{
Source = ImageSource.FromStream(() => GetResourceStream($"{Num}.png"));
}
private void bChange_OnClicked(object sender, EventArgs e)
{
Num = Num == 1 ? 2 : 1;
SetImage();
}
private static Stream GetResourceStream(string filename)
=> Assembly.GetManifestResourceStream($"App5.{filename}");
}
}

XAML

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
x:Class="App5.MainPage"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Name="This">
<StackLayout>
<Button Text="Change" Clicked="bChange_OnClicked" />
<Image x:Name="img" Source="{Binding Source,Source={x:Reference This}}" />
</StackLayout>
</ContentPage>

为了使示例工作，您需要将项目默认名称空间设置为App5，并在根文件夹中嵌入两个文件名为1.png和2.png的图像。