Question

我在xaml中有一个图像元素，我想将它与我视图模型中的属性绑定。我有一个xaml Image元素绑定到一个名为MainImage的属性，如下所示。

private Image mainImage_ = new Image();
    public Image MainImage
    {
        get
        {
            return mainImage_;
        }
        set
        {
            if (mainImage_ != value)
            {
                mainImage_ = value;
                OnPropertyChanged("MainImage");
            }                                        
        }
    }

我想通过从计算机上浏览图像来将图像设置为xaml中的图像元素，我就是这样做的。

FileOpenPicker openPicker = new FileOpenPicker();
        openPicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
        openPicker.ViewMode = PickerViewMode.Thumbnail;
        openPicker.FileTypeFilter.Clear();
        openPicker.FileTypeFilter.Add(".bmp");
        openPicker.FileTypeFilter.Add(".png");
        openPicker.FileTypeFilter.Add(".jpeg");
        openPicker.FileTypeFilter.Add(".jpg");
        StorageFile file = await openPicker.PickSingleFileAsync();
        if (file != null)
        {
            IRandomAccessStream fileStream = await file.OpenAsync(FileAccessMode.Read);
            BitmapImage bitmapImage = new BitmapImage();
            bitmapImage.SetSource(fileStream);
            MainImage = bitmapImage;                    
            new MainPage().DataContext = file;                             
        }

MainImage = bitmapImage显示我们无法直接设置的错误。我该如何解决？返回类型的属性应该是字符串（路径）还是图像？如果还有其他更好的方法，请告诉我。

Answer 1

您的视图模型属性应为ImageSource，而不是Image：

private ImageSource mainImage;
public ImageSource MainImage
{
    get { return mainImage; }
    set
    {
        if (mainImage != value)
        {
            mainImage = value;
            OnPropertyChanged("MainImage");
        }                                        
    }
}

现在，您可以将XAML中Image控件的Source属性绑定到您的视图模型，如下所示：

<Image Source="{Binding MainImage}"/>

但是，这需要将Page的DataContext设置为视图模型的实例，例如像

DataContext = new ViewModel();

您不应该在以后将其设置为其他内容，因为您似乎正在进行

行

new MainPage().DataContext = file;

除此之外，还不清楚为什么要在该行中创建新的MainPage实例。

Answer 2

您需要将Image的source属性设置为您的位图。尝试：

            bitmapImage.UriSource = new Uri(img.BaseUri,file.Name);
            MainImage.Source = bitmapImage;

编辑：对不起，我没有看到UWP，试试这个。

将Image元素绑定到uwp中的属性

2 个答案: