web-dev-qa-db-ja.com

WPF MVVMでの画像のバインド

Imageをビューモデルにバインドするのに問題があります。最終的に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");
        }
    }
c#wpfmvvm
35
kurgaan

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という名前のフォルダーに画像を追加し、それらのBuild ActionをリソースVisual Studioのプロパティウィンドウで...この形式：

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

更新>>>

最後のヒントとして...コントロールが期待どおりに機能しないという問題が発生した場合は、検索エンジンに「WPF」、そのコントロールの名前、次に「クラス」という単語を入力するだけです。この場合、「WPF Image Class」と入力します。最上位の結果は常にMSDNであり、リンクをクリックすると、そのコントロールに関するすべてがわかり、ほとんどのページにもコード例があります。

更新2 >>>

MSDNへのリンクの例に従っても機能しない場合、問題はnotImageコントロールです。私が提案したstringプロパティを使用して、これを試してください：

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

TextBlockにファイルパスが表示されない場合は、おそらくDataContextをビューモデルのインスタンスに設定していない可能性があります。テキストが表示される場合can、ファイルパスに問題があります。

更新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の詳細については、Microsoft Docsの WPFのパックURI ページを参照してください。

74
Sheridan

@Sheridan thx ..両側に「DisplayedImagePath」を使用して例を試すと、表示されているとおりに絶対パスで動作します。

relativeパスについては、これが常に相対パスを接続する方法です。まず、プロジェクトにサブディレクトリ（！）と画像ファイルを含めます。それから〜文字を使用してbin-pathを示します。

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

これはテスト済みです。VS2015のソリューションエクスプローラーを参照してください。

example of image binding in 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>
0
Goodies