Question

我在使用Image绑定到我的viewmodel时遇到了一些问题。我终于摆脱了XamlParseException，但图像没有出现。我甚至在ViewModel中对图像进行了硬编码。有人能看出我做错了吗？

查看：

<Image HorizontalAlignment="Left" Margin="0,0,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Bottom" Grid.Row="8" Width="200"  Grid.ColumnSpan="2" >
<Image.Source>
    <BitmapImage DecodePixelWidth="200" UriSource="{Binding Path=DisplayedImage, Mode=TwoWay}" />
</Image.Source>

视图模型：

 string _DisplayedImagePath = @"C:\Users\Public\Pictures\Sample Pictures\Chrysanthemum.jpg";//string.Empty;
    int _DisplayedImageIndex;
    BitmapImage _DisplayedImage = null;
    public BitmapImage DisplayedImage
    {
        get
        {
            _DisplayedImage = new BitmapImage();
            if (!string.IsNullOrEmpty(_DisplayedImagePath))
            {
                _Rail1DisplayedImage.BeginInit();
                _Rail1DisplayedImage.CacheOption = BitmapCacheOption.OnLoad;
                _Rail1DisplayedImage.CreateOptions = BitmapCreateOptions.IgnoreImageCache;
                _Rail1DisplayedImage.UriSource = new Uri(_DisplayedImagePath);
                _Rail1DisplayedImage.DecodePixelWidth = 200;
                _Rail1DisplayedImage.EndInit();
            }
            return _Rail1DisplayedImage;
        }
        set
        {
            _Rail1DisplayedImage = value;
            OnPropertyChanged("DisplayedImage");
        }
    }

Answer 1

在WPF中显示Image比这更容易。试试这个：

<Image Source="{Binding DisplayedImagePath}" HorizontalAlignment="Left" 
    Margin="0,0,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Bottom" 
    Grid.Row="8" Width="200"  Grid.ColumnSpan="2" />

该属性可以是string：

public string DisplayedImage 
{
    get { return @"C:\Users\Public\Pictures\Sample Pictures\Chrysanthemum.jpg"; }
}

虽然您确实应该将图像添加到项目根目录中名为Images的文件夹中，然后将构建操作设置为资源 Visual Studio中的“属性窗口” ...然后您可以使用以下格式访问它们：

public string DisplayedImage 
{
    get { return "/AssemblyName;component/Images/ImageName.jpg"; }
}

更新＆gt;＆gt;＆gt;

作为最后的提示......如果您遇到控件无法正常工作的问题，只需输入“WPF”，该控件的名称，然后在搜索引擎中输入“class”一词。在这种情况下，您将键入“WPF Image Class”。最重要的结果将始终是MSDN，如果您点击链接，您将找到有关该控件的所有信息，大多数页面也都有代码示例。

更新2＆gt;＆gt;＆gt;

如果您按照MSDN链接中的示例操作并且它无法正常工作，那么您的问题是不 Image控件。使用我建议的string属性，试试这个：

<StackPanel>
    <Image Source="{Binding DisplayedImagePath}" />
    <TextBlock Text="{Binding DisplayedImagePath}" />
</StackPanel>

如果您无法在TextBlock中看到文件路径，那么您可能尚未将DataContext设置为视图模型的实例。如果可以看到文本，那么问题在于文件路径。

更新3＆gt;＆gt;＆gt;

在.NET 4中，上述Image.Source值可以正常工作。但是，微软在.NET 4.5中做了一些可怕的改变，打破了很多不同的东西，因此在.NET 4.5中，你需要使用完整的pack路径：

<Image Source="pack://application:,,,/AssemblyName;component/Images/image_to_use.png">

有关包URI的详细信息，请参阅Microsoft Docs上的Pack URIs in WPF页面。

Answer 2

@Sheridan thx ..如果我尝试使用两侧的“DisplayedImagePath”示例，它将在您显示时使用绝对路径。

至于相对路径，这就是我总是连接相对路径的方式，我首先在项目中包含子目录（！）和图像文件..然后我用〜字符来表示仓路径..

    public string DisplayedImagePath
    {
        get { return @"~\..\images\osc.png"; }
    }

这已经过测试，请参阅下面的VS2015中的解决方案资源管理器..

）

注意：如果您想要Click事件，请使用Button tag around the image，

<Button Click="image_Click" Width="128" Height="128"  Grid.Row="2" VerticalAlignment="Top" HorizontalAlignment="Left">
  <Image x:Name="image" Source="{Binding DisplayedImagePath}" Margin="0,0,0,0" />
</Button>

Answer 3

如果您已经有一个生成并返回图像类型的进程，则可以更改绑定，而不必修改任何其他图像创建代码。

在绑定语句中引用图像的“ .Source”。

XAML

<Image Name="imgOpenClose" Source="{Binding ImageOpenClose.Source}"/>

查看模型字段

private Image _imageOpenClose;
public Image ImageOpenClose
{
    get
    {
        return _imageOpenClose;
    }
    set
    {
        _imageOpenClose = value;
        OnPropertyChanged();
    }
}

在WPF MVVM中绑定图像

3 个答案: