时间戳

首页 > 解决方案 > Xamarin Forms 绑定来自 Resources/Drawable 文件夹的图像

c# - Xamarin Forms 绑定来自 Resources/Drawable 文件夹的图像

问题描述

我有个问题。我想要做的是从 ViewModel 绑定一个 ImageSource。图像文件名为 ledstrip.png，位于 Resources/Drawable 文件夹中。我正在使用以下 xaml：

<ListView ItemsSource="{Binding knownDeviceList}" SelectionMode="None" RowHeight="90">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <AbsoluteLayout HeightRequest="70" Margin="20,20,20,0">
                    <StackLayout Opacity="0.3" BackgroundColor="White"
                                AbsoluteLayout.LayoutBounds="0,0,1,1" 
                                AbsoluteLayout.LayoutFlags="All" />
                    <StackLayout AbsoluteLayout.LayoutBounds="0,0,1,1" 
                                AbsoluteLayout.LayoutFlags="All">
                        <Grid RowSpacing="0">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="35" />
                                <RowDefinition Height="35" />
                            </Grid.RowDefinitions>

                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="70" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="70" />
                            </Grid.ColumnDefinitions>

                            <Image Source="{Binding DeviceImage}" Grid.RowSpan="2" Grid.Column="0" Margin="5" />

                        </Grid>
                    </StackLayout>
                </AbsoluteLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

在我的 ViewModel 中，我有以下代码：

public class VM_DeviceList : BindableObject
{
    private ObservableCollection<DisplayedDevice> _knownDeviceList;
    public ObservableCollection<DisplayedDevice> knownDeviceList
    {
        get
        {
            return _knownDeviceList;
        }
        set
        {
            if (_knownDeviceList != value)
            {
                _knownDeviceList = value;
                OnPropertyChanged();
            }
        }
    }

    public VM_DeviceList()
    {
        knownDeviceList = new ObservableCollection<DisplayedDevice>();
        MyHandler();
    }

    private async Task LoadKnownDeviceList()
    {
        foreach (KnownDevice device in App.KnownDeviceList)
        {
            DisplayedDevice displayedDevice = new DisplayedDevice();

            displayedDevice.Id = device.Id;
            displayedDevice.Name = device.Name;

            switch (device.Type)
            {
                case "ledstrip":
                    displayedDevice.DeviceImage = "ledstrip.png";
                    break;
                case "triangle":
                    displayedDevice.DeviceImage = "triangle.png";
                    break;
            }

            knownDeviceList.Add(displayedDevice);
        }
    }

    public Task MyHandler()
    {
        return LoadKnownDeviceList();
    }

    public class DisplayedDevice
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string DeviceImage { get; set; }
    }
}

问题是当我在 xaml ImageSource 中键入“ledstrip.png”时，图像会显示出来，但是当我像上面显示的那样绑定它时，屏幕上不会出现图像！

我做错了什么，我该如何解决？

标签： c#xamarinxamarin.formsxamarin.androidxamarin.ios

解决方案

由于您在单独的 for 循环中更改 DisplayImage。您必须通知 UIDisplayImage属性值已更改。

用于INotifyPropertyChanged通知类的DisplayImage属性DisplayedDevice已更改为 UI。

public class DisplayedDevice : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    private string deviceImage;

    public int Id { get; set; }

    public string Name { get; set; }

    public string DeviceImage
    {
        get
        {
            return deviceImage;
        }

        set
        {
            deviceImage = value;
            OnPropertyChanged();
        }
    }
}

推荐阅读