xamarin表单图像未显示

如何解决xamarin表单图像未显示

我有一个具有PicListPage（图片列表）的简单应用。 xaml和后面的代码允许从Android仿真器库中选择图片或从图片中获取图片。

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

任何帮助将不胜感激。 MS Xamarin论坛不允许我注册或登录，所以我不能在那里提出问题。

吉姆·德宾 [e-mail]

这是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,10,0">
                <FlexLayout Direction="Row">
                    **<Image x:Name="NewImage"**
                           IsVisible="true"
                           Aspect="AspectFit"
                           Source="{Binding NewImmage,Mode=TwoWay}"
                           Margin="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代码段，该代码段从其中包含5张图片的仿真Gallery中复制图像。

    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;**
        }

解决方法

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

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

秒钟，您的虚拟机NewImage中的类型为Image，这是不正确的。 Image是UI控件，而不是数据类型。请改用string

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

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

NewImage = selectedImageFile.AlbumPath;
  

,

此问题已解决。感谢@Jason和进一步的破解。关键问题是1）绑定中的错字2）绑定需要指向具有数据类型字符串而不是Image UI元素的属性-依次指向文件路径和3）将绑定的字符串设置为指向而不是selectedImageFile.AlbumPath。