使用 Caliburn.Micro 将视图模型中的图像加载到视图中答案

【问题标题】：Load image from viewmodel into view with Caliburn.Micro使用 Caliburn.Micro 将视图模型中的图像加载到视图中
【发布时间】：2015-02-02 17:11:20
【问题描述】：

我正在尝试让用户在视图中加载图像。

我的主要观点：

<UserControl x:Class="TestApplication.Views.MainView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             mc:Ignorable="d">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="0.3*" />
        </Grid.ColumnDefinitions>

        <Image
            Grid.Column="0"
            Stretch="Uniform"
            x:Name="Preview">
            <Image.Source>
                <BitmapImage UriSource="pack://application:,,,/Resources/placeholder.jpg" />
            </Image.Source>
        </Image>

        <ContentControl
            Grid.Column="1"
            x:Name="ImageManagement" />

    </Grid>
</UserControl>

我的主视图模型：

namespace TestApplication.ViewModels
{
    using System;
    using System.ComponentModel.Composition;
    using System.Windows.Controls;
    using Caliburn.Micro;
    using PropertyChanged;
    using TestApplication.Events;

    [ImplementPropertyChanged]
    [Export(typeof(MainViewModel))]
    public class MainViewModel : PropertyChangedBase, IHandle<FileSelectedEvent>
    {
        private readonly IEventAggregator events;

        [ImportingConstructor]
        public MainViewModel(IEventAggregator events)
        {
            this.events = events;
            this.events.Subscribe(this);

            this.ImageManagement = new ImageManagementViewModel(events);
        }

        public ImageManagementViewModel ImageManagement { get; set; }

        public Image Preview { get; set; }

        public void Handle(FileSelectedEvent message)
        {
            // load the selected image
        }
    }
}

图像占位符不显示，snoop 甚至看不到它。

此外，当通过实例化BitmapImage 并在Handle 方法中将其设置为Preview.Source 来加载图像时...Preview 属性为空，如果我先初始化它，它永远不会显示要么。

PropertyChanged 是通过 Fody 处理的。

【问题讨论】：

占位符可能是无效的 uri。无法为您调试。预览没有绑定到您包含的代码中的任何内容，所以我不确定这个魔法应该如何工作......
Image 的默认约定位于 Source 属性上，由 Loaded 触发。我敢打赌，您可能需要将 Image 设为 URI 或字符串值，而不是实际的 Image 控件。
我认为@Will 对于 pack uri 是正确的，我认为你不需要它开始。一旦触发属性更改，只需将 Source 设置为 <Image x:Name="Preview" Fill="Uniform" Source="/Resources/placeholder.jpg" />，它应该按照约定绑定。
Will：我正在使用 Caliburn.Micro，它使用 name-based conventions。 mvermef：谢谢，我没有考虑为不同的控件研究不同的绑定约定。我会检查一下。对于作为 Source 的 BitmapImage，我在 SO 上找到了它，但这不是我第一次尝试。

标签： c# wpf mvvm caliburn.micro

【解决方案1】：

感谢@Will 和@mvermef，我找到了答案。

占位符 URL 不是无效的，但如果没有 pack:// 部分，它确实可以工作。不过我喜欢它，因为它明确表明它是资源而不是文件。

真正的问题是，Caliburn.Micro 实际上并没有绑定到控件，而是绑定到Source 属性。切换到这个解决了这个问题：

    <Image
        Grid.Column="0"
        Stretch="Uniform"
        Source="{Binding PreviewUrl}" />

和视图模型：

    [ImportingConstructor]
    public MainViewModel(IEventAggregator events)
    {
        this.events = events;
        this.events.Subscribe(this);

        this.ImageManagement = new ImageManagementViewModel(events);
        this.PreviewUrl = "pack://application:,,,/Resources/placeholder.jpg";
    }

    public String PreviewUrl { get; set; }

    public void Handle(FileSelectedEvent message)
    {
        this.PreviewUrl = message.FilePath;
    }

【讨论】：