2017-03-08 20 views
1

私はできる限りMVVMパターンを使用するWPFプロジェクトを持っています。私はVisual Studio 2010を使用しています。その言語はC#です。WPF BitmapImageが表示されない

私はツリービューを持っています。ツリービューは、次のようになります。

<TreeView Grid.Column="0" Width="Auto" Background="Aquamarine" ItemsSource="{Binding Scenes}" SelectedItemChanged="TreeView_SelectedItemChanged"> 
     <TreeView.DataContext> 
      <viewModels:ScenesViewModel /> 
     </TreeView.DataContext> 
     <TreeView.ItemTemplate> 
      <HierarchicalDataTemplate ItemsSource="{Binding Characters}"> 
       <StackPanel Orientation="Horizontal"> 
        <TextBlock Text="{Binding SceneName}"></TextBlock> 

         <Image Source="{StaticResource ImgWorld}" Margin="0,0,5,0" Width="32" Height="32"/> 

       </StackPanel> 
       <HierarchicalDataTemplate.ItemTemplate> 
        <DataTemplate> 
         <StackPanel Orientation="Horizontal"> 

          <TextBlock Text="{Binding FirstName}"></TextBlock> 
          <Border BorderThickness="1" Background="RoyalBlue"> 
           <Image Source="{Binding ImgIcon}" Margin="2"/> 
          </Border> 
         </StackPanel> 
        </DataTemplate> 
       </HierarchicalDataTemplate.ItemTemplate> 
      </HierarchicalDataTemplate> 
     </TreeView.ItemTemplate> 
    </TreeView> 

競合のポイントは、Image、「ImgIcon」と呼ばれるものに結合しているの源です。これは、 'CharacterViewModel'と呼ばれるビューモデルのプロパティです。何らかの理由で私は画像がどこにあるべきか表示されていません。

最も顕著な問題は、データコンテキストまたはMVVM側が機能しているかどうかです。 「FirstName」というプロパティにバインドされているImageの横にTextBlockがあるので、私はかなり確信しています。このバインディングは正常に動作します。

2つのプロパティがビューモデルでは、もちろん、あり、そしてここで見ることができます:

public String FirstName 
    { 
     get { return Character.FirstName; } 
     set 
     { 
      if (Character.FirstName != value) 
      { 
       Character.FirstName = value; 
       RaisePropertyChanged("FirstName"); 
      } 
     } 
    } 

private BitmapImage _imgIcon = null; 
    public BitmapImage ImgIcon 
    { 
     get { return _imgIcon; } 
     set 
     { 
      _imgIcon = value; 
      RaisePropertyChanged("ImgIcon"); 
     } 
    } 

彼らは、後者は文字クラス内のプロパティを包み込むないという点で若干異なります。

したがって、次に起こる可能性のある障害は、画像のロードです。これは、(現時点では、単に知られている作業ファイル用のテストパスを持っている)、この方法によって達成される:私は「ImgIcon =新しいBitmapImageの(outUri)」の中でブレークポイントを入れて、あなたが見ることができる

public bool LoadIcon() 
    { 
     if (ImgIcon == null) 
     { 
      Uri outUri; 

      if (Uri.TryCreate(@"D:\Pictures\Icons\HCAria01.png", UriKind.Absolute, out outUri)) 
      { 
      } 


      ImgIcon = new BitmapImage(outUri); 
      return true; 
     } 
     else 
      return false; 
    } 

関連情報は pictureです。この画像からは、画像が正常に読み込まれたようです。

明らかに何かが不足していると確信していますが、私はそれが何であるかを言うことができれば私は気になります。私の限られたWPFとXAMLの経験から、画像の欠如を除いては問題なく動作しているようです。

さて、もしあなたが非常に感謝する任意のヘルプを提供することができます。

:2つの説明。 TreeviewのDataContextはScenesViewModelです。これはSceneViewModelのリストを保持し、そのリストは 'シーン'と呼ばれます。各SceneViewModelにはCharacterViewModelのリストが含まれており、これは「文字」と呼ばれます。 These two imagesはこれらのクラスの関連部分を示しているので、うまくいけば階層を理解することができます。各CharacterViewModelにはImgIconが必要です。

+1

イメージがコードでロードされているので、実際にはImgIcon'プロパティを持つオブジェクトであり、FirstNameのプロパティ名とまったく同じプロパティ名を持つ 'Character'オブジェクトではありません。 – TyCobb

答えて

1

ImgIconプロパティは、このクラスで定義されている場合は、ビューモデル(ScenesViewModel)プロパティにバインドすることを確認してください:

<Image Source="{Binding DataContext.ImgIcon, RelativeSource={RelativeSource AncestorType=TreeView}}" Margin="2"/> 

ItemTemplateStackPanelDataContextItemsSourceない項目でありますビューモデル

編集: SceneViewModelオブジェクト用に1つ、CharacterViewModelオブジェクト用に1つのテンプレートを定義する必要があります。あなたは、ツリービューのセクションに暗黙のテンプレートを入れることができます:

<TreeView Grid.Column="0" Width="Auto" Background="Aquamarine" ItemsSource="{Binding Scenes}" 
        SelectedItemChanged="TreeView_SelectedItemChanged"> 
    <TreeView.DataContext> 
     <viewModels:ScenesViewModel /> 
    </TreeView.DataContext> 
    <TreeView.Resources> 
     <HierarchicalDataTemplate DataType="{x:Type local:SceneViewModel}" ItemsSource="{Binding Characters}"> 
      <StackPanel Orientation="Horizontal"> 
       <TextBlock Text="{Binding SceneName}"></TextBlock> 
       <Image Source="{StaticResource ImgWorld}" Margin="0,0,5,0" Width="32" Height="32"/> 
      </StackPanel> 
     </HierarchicalDataTemplate> 
     <DataTemplate DataType="{x:Type local:CharacterViewModel}"> 
      <StackPanel Orientation="Horizontal"> 
       <TextBlock Text="{Binding FirstName}"></TextBlock> 
       <Border BorderThickness="1" Background="RoyalBlue"> 
        <Image Source="{Binding ImgIcon}" Margin="2"/> 
       </Border> 
      </StackPanel> 
     </DataTemplate> 
    </TreeView.Resources> 
</TreeView> 
+0

明確にするために、DataContextは 'ScenesViewModel'と呼ばれています。これには、 'Scene'というSceneViewModelのリストが含まれています。各SceneViewModelには、「文字」というCharacterViewModelのリストが含まれています。それはImgIconがあるCharacterViewModelにあります。 – TheFaithfulLearner

+0

ImgIconはどのクラスに定義されていますか? – mm8

+0

CharacterViewModel。元の質問を編集して階層をクリアしようとしました。 – TheFaithfulLearner

0

この答えは何が起こったかを確認するために探している人のためである - 多分あなたは同じ問題を持っています。

私の問題は実際に私のコードのどこかにありました。 SceneViewModelのデータを取り込むために私のデータベースからシーン(データモデル)をロードしたとき、イメージをロードするために使用したインスタンスを1つ作成し、そのリストに新しいインスタンスを追加しました。したがって、作成され、イメージをロードして使用されなかったインスタンスと、使用された(イメージがロードされていない)インスタンスの2つのインスタンスがありました。基本的には単純な間違いであり、ここに見られるコードには関係しません。すべて正常に機能しました(私はエラーを修正して以来、

回答に時間を割いたすべての人に感謝します。

関連する問題