Связывание изображения в WPF MVVM

У меня возникают проблемы с привязкой в ​​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>

ViewModel:

 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");
        }
    }

Ответы

Ответ 1

Отображение Image в WPF намного проще. Попробуйте следующее:

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

ОБНОВЛЕНИЕ → >

Как окончательный совет... если у вас когда-либо возникнет проблема с тем, что элемент управления работает не так, как ожидалось, просто введите "WPF", имя этого элемента управления, а затем слово "класс" в поисковую систему. В этом случае вы бы набрали "WPF Image Class". Главный результат всегда будет MSDN, и если вы нажмете на ссылку, вы узнаете об этом контроле, а на большинстве страниц также будут примеры кода.

ОБНОВЛЕНИЕ 2 → >

Если вы следовали примерам из ссылки на MSDN и не работали, то ваша проблема не является элементом управления Image. Используя свойство string, которое я предложил, попробуйте следующее:

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

Если вы не видите путь к файлу в TextBlock, то, вероятно, вы не установили свой DataContext в экземпляр вашей модели представления. Если вы видите текст, проблема связана с вашим файловым пути.

ОБНОВЛЕНИЕ 3 → >

В .NET 4 значения выше Image.Source будут работать. Тем не менее, Microsoft сделала некоторые ужасные изменения в .NET 4.5, которые сломали много разных вещей, и поэтому в .NET 4.5 вам нужно будет использовать полный путь pack следующим образом:

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

Ответ 2

@Sheridan спасибо.. если я попробую ваш пример с "DisplayedImagePath" с обеих сторон, он работает с абсолютным путем, как вы показываете.

Что касается относительных путей, так я всегда связываю относительные пути, я сначала включаю подкаталог (!) и файл изображения в моем проекте.. тогда я использую символ ~ для обозначения пути bin..

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

Это было протестировано, см. ниже мой обозреватель решений в VS2015..

пример привязки изображения в VS2015)

Примечание. Если вы хотите событие Click, используйте тег вокруг изображения,

<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>