WPF - ダイナミックに画像を表示する

Question

.net4-0 C＃アプリケーション私は8x5ボタンのグリッドを持っています。それぞれは画像と1つの文字（プレスするホットキー）を画像（左上隅）に表示する必要があります。画像は自分のデータに依存するため、動的に表示する必要があります。すべての画像は同じサイズ（100×100ピクセル）です。画像はボタンをうまく埋め込むはずです。

これをどのように達成できますか？ これまでのところ、データを読み込んで表示イメージを変更するたびに、イメージとTextBlockを持つStackpanelを手動で作成します。しかし、これはうまく合わない。

Answer 1

あなたがあなたのListBoxになりたいことを指定することができますたとえば、あなたがそのListBox

でデータを表示する方法を指定します次に、あなたがあなた自身のDataTemplateを作成することができListBoxを使用してListBox.ItemSourceへのデータのリストを置きます8x5グリッドで表示されます。これはもちろん、8x5セルのグリッドを常に表示することがわかっているかどうかによって異なります。

具体的には、私はこれと一緒に行くだろうと言ったように、上に手紙が付いたボタンを持っているとします。

<!--Resource--> 
<DataTemplate DataType={x:YourViewModel}> 
    <StackPanel> 
    <TextBlock Content="{binding SomeText}"/> 
    <Button> 
     <Button.Content> 
     <Image Source="{binding YourImageSource}" Width="100px" Height="100px"/> 
     </Button.Content>   
    </Button> 
    </StackPanel> 
</DataTemplate> 

これは、WPFでの作業時推奨非常にであるあなたがMVVMを使用していると仮定しています。

MVVMが何を読んでいるのかわからない場合は、WPFでの開発が非常に良くなるのに役立ちます。

私の例が混乱している場合は、フィードバックをお寄せください。より明確にしていきます。

EDITシンプルMVVM例

のは、我々はタイトルのゲームを表示したいとしましょうと絵

まず我々は

public class Game 
{ 
    private string _title {get; set;} 
    private string _imagepath {get; set;} //We are not getting the image but the imagepath 

    Public string Title {get{return _title;} set{_title = value;} 
    Public string Imagepath set{_imagepath = value;} 
} 

モデルを作成その後、我々が必要としますa ViewModel。通常、データはモデル（多分データベースより）から来る必要がありますので、ViewModelには、新しいデータを作成しませんが、この例のために、私たちはViewModelに

public class GameViewModel 
{ 
    Public ObservableCollection<Game> Games {get; set;} //<--- This is where the View is binding to 
    public GameViewModel 
    { 
     ObservableCollection<Game> Games = new ObservableCollection<Game>(); //ObservableCollection is used to notify if we have added or removed or updated an item in the list. 
     Games.Add(new Game() {Title = "Warcraft 3", Image=//Where you have your images); 
     Games.Add(new Game() {Title = "Overwatch", Image=//Where you have your images); 
     this.Games = Games; 
    } 
} 

そして今、ときにそれを作成します私たちのListBox

<ListBox ItemSource="{Binding Games}"/> 

に

<!--Basic xaml--> 
<!--Resource--> 
<DataTemplate DataType={x:Type local:Game}> 
    <StackPanel> 
    <TextBlock Content="{Binding Title}"/> 
    <Button> 
     <Button.Content> 
     <Image Source="{Binding Imagepath}" Width="100px" Height="100px"/> 
     </Button.Content>   
    </Button> 
    </StackPanel> 
</DataTemplate> 

そして、私たちのXAMLコードでこのビューモデルにバインドするために私たちのビューを持っていますこれを有効にするには、ビューにDatacontextを設定する必要があります。多くの場合、新しいWPFプロジェクトを作成すると、ビューはMainWindowと呼ばれます。XAML

ここ読んで、この

/*Normally you want to avoid doing anything in code-behind with MVVM 
    If you want to avoid that you have to look into DI and IoC But it is way 
    to much to do in this example*/ 

public partial class MainWindow : Window 
{ 
    public MainWindow() 
    { 
     InitializeComponent(); 
     this.DataContext = new GameViewModel(); 
    } 
}