xamarin 表单图像不显示

Question

我有一个简单的应用程序，它有一个 PicListPage（图片列表）。后面的 xaml 和代码允许从 Android 模拟器库或拍照中选择图片。

所选图片（或新图片）未显示在图像控件中。我无法通过网络搜索找到解决方案。此代码是从教程中复制的。在 NewImage.Source 行下断点表明当前图像有一个非空值。

任何帮助将不胜感激。 MS Xamarin 论坛不允许我注册或登录，因此我无法在那里提问。

吉姆·德宾 durbinjw@gmail.com

这里是 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:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="MyStuff.PicListPage">
    <ContentPage.ToolbarItems>
        <ToolbarItem x:Name="selectImageButton"
            Text="Select Image"
            Command="{Binding SelectImageCommand}"/>
        <ToolbarItem x:Name="takePicButton"
            Text="Take Picture"
            Command="{Binding TakePictureCommand}"
            CommandParameter="{Binding NewImage}"/>
        <ToolbarItem x:Name="deleteButton"
            Text="Delete"
            Command="{Binding DeletePictureCommand}"
            CommandParameter="{Binding SelectedImage}"/>
    </ContentPage.ToolbarItems>
    <ContentPage.Content>
            <StackLayout>
                <Label Text="Picture List page"
           HorizontalOptions="Center"
           FontSize="Large"
           FontAttributes="Bold"/>
            <Frame BorderColor="Black"
                   WidthRequest="350"
                   HeightRequest="350"
                   Margin="10,0,10,0">
                <FlexLayout Direction="Row">
                    **<Image x:Name="NewImage"**
                           IsVisible="true"
                           Aspect="AspectFit"
                           Source="{Binding NewImmage, Mode=TwoWay}"
                           Margin="10,0,10,0"
                           WidthRequest="350"
                           HeightRequest="350"
                           HorizontalOptions="CenterAndExpand"
                           VerticalOptions="CenterAndExpand">
                    </Image>
                </FlexLayout>
            </Frame>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

这是后面的代码-首先是选择图片的命令代码

    using System;
using System.Collections.Generic;
using System.Text;
using System.Windows.Input;

namespace MyStuff.ViewModel.Commands
{
    public class SelectImageCommand : ICommand
    {
        private PicListPageVM viewmodel;

        public event EventHandler CanExecuteChanged;

        public SelectImageCommand(PicListPageVM viewmodel)
        {
            this.viewmodel = viewmodel;
        }
        public bool CanExecute(object parameter)
        {
            return true;
        }

        public void Execute(object parameter)
        {
            viewmodel.SelectImage();
        }
    }
}

这里是 ViewModel 代码 sn-p，它从包含 5 张图片的模拟图库中复制图像。

    using MyStuff.Model;
using MyStuff.ViewModel.Commands;
using Plugin.Media;
using Plugin.Media.Abstractions;
using System.Collections.ObjectModel;
using System.ComponentModel;
using Xamarin.Forms;

namespace MyStuff.ViewModel
{
    public class PicListPageVM : INotifyPropertyChanged
    {
        public ObservableCollection<PicList> PicLists { get; set; }
        public TakePictureCommand TakePictureCommand { get; set; }
        public SelectImageCommand SelectImageCommand { get; set; }
        public DeletePictureCommand DeletePictureCommand { get; set; }

        private Image newimage;
        public Image NewImage
        {
            get { return newimage; }
            set
            {
                newimage = value;
                OnPropertyChanged("NewImage");
            }
        }

        public PicListPageVM()
        {
            SelectImageCommand = new SelectImageCommand(this);
            TakePictureCommand = new TakePictureCommand(this);
            DeletePictureCommand = new DeletePictureCommand(this);
            NewImage = new Image();
            NewImage.IsOpaque = false;
        }

        public event PropertyChangedEventHandler PropertyChanged;
        private void OnPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }

            public async void SelectImage()
        {
            await CrossMedia.Current.Initialize();
            if (!CrossMedia.Current.IsPickPhotoSupported)
            {
                await App.Current.MainPage.DisplayAlert("Information", "Can't select pictures on this device", "OK");
                return;
            }
            var mediaoptions = new PickMediaOptions()
            {
                PhotoSize = PhotoSize.Small
            };
            var selectedImageFile = await CrossMedia.Current.PickPhotoAsync(mediaoptions);
            if (selectedImageFile == null)
            {
                await App.Current.MainPage.DisplayAlert("Information", "No image selected.", "OK");
                return;
            }
            **var currentimage = ImageSource.FromStream(() => selectedImageFile.GetStream());
            NewImage.Source = currentimage;**
        }

Answer 1

此问题已解决。感谢@Jason 和进一步的黑客攻击。关键问题是 1) 绑定中的拼写错误 2) 绑定需要指向具有数据类型字符串而不是 Image UI 元素的属性 - 该元素又指向文件路径和 3) 将绑定字符串设置为指向selectedImageFile.Path 而不是 selectedImageFile.AlbumPath。

Answer 2

首先，您在绑定中拼错了属性名称（“NewImage”）（TwoWay 绑定在这里也没有意义）

<Image x:Name="NewImage" Source="{Binding NewImmage, Mode=TwoWay}" .. />

其次，在您的 VM 中，NewImage 的类型为 Image，这是不对的。 Image 是 UI 控件，而不是数据类型。请改用string

    private string newimage;
    public string NewImage
    {
        get { return newimage; }
        set
        {
            newimage = value;
            OnPropertyChanged("NewImage");
        }
    }

最后，当您选择图像时，将 VM 属性设置为图像路径

NewImage = selectedImageFile.AlbumPath;