it-swarm.com.ru

Привязка изображения в WPF MVVM

У меня возникли проблемы с привязкой изображения к моей модели просмотра. Я наконец избавился от 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");
        }
    }
34
kurgaan

Отображение 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 в корне вашего проекта и установить для их Build Action значение Resource в окне Properties в Visual Studio ... вы можете затем получить доступ к ним, используя этот формат:

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

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

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


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

Если вы следовали примерам из ссылки на MSDN, и она не работает, значит, ваша проблема в not элементе управления 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">

Для получения дополнительной информации о URI пакетов см. Страницу Pack URI в WPF на Microsoft Docs.

72
Sheridan

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

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

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

Это было проверено, см. Ниже мой Solution Explorer в VS2015 ..

 example of image binding in VS2015 )

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

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

0
Goodies