WPFとプリズムのMVVMと画像付きのタブアイテム

Question

私はtabitemのテキストの代わりに画像を表示するタブコントロールを持つwpfアプリケーションを持っています。 今、私はすべてを書き直し、プリズムを使用したいと思います。 例が見つかりましたが、タブアイテムにバインドされているテキストプロパティのみがあります。 ビューモデルにバインドして画像を表示する方法 （各モジュールにはタブが1つあります）。

Answer 1

アイテムをTabControlにバインドするときは、ItemsSourceを使用します。 ItemTemplateは、タブの見出しに表示される内容を定義します。 ContentTemplateは、タブ領域に表示される内容を定義します。

ビューモデル

public class ShellViewModel : BindableBase 
{ 
    public ObservableCollection<ItemViewModel> Items 
    { 
     get; 
    } = new ObservableCollection<ItemViewModel>(); 

    public ShellViewModel() 
    { 
     Items.Add(new ItemViewModel { Name = "First", ImageUri = new Uri("http://placehold.it/50x50") }); 
     Items.Add(new ItemViewModel { Name = "Second", ImageUri = new Uri("http://placehold.it/40x40") }); 
     Items.Add(new ItemViewModel { Name = "Third", ImageUri = new Uri("http://placehold.it/30x30") }); 
    } 
} 

public class ItemViewModel : BindableBase 
{ 
    private string _name; 
    private Uri _imageUri; 

    public string Name 
    { 
     get => _name; 
     set => SetProperty(ref _name, value); 
    } 

    public Uri ImageUri 
    { 
     get => _imageUri; 
     set => SetProperty(ref _imageUri, value); 
    } 
} 

上記のコードは、タブヘッダに指定された画像との3つのタブが表示され

<Window x:Class="WpfApp4.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:local="clr-namespace:WpfApp4" 
    xmlns:viewModels="clr-namespace:WpfApp4.ViewModels" 
    mc:Ignorable="d" 
    Title="MainWindow" Height="350" Width="525"> 
<Window.DataContext> 
    <viewModels:ShellViewModel /> 
</Window.DataContext> 
<Grid> 
    <TabControl ItemsSource="{Binding Items}"> 
     <TabControl.ItemTemplate> 
      <DataTemplate> 
       <Image Source="{Binding ImageUri}" Height="20"></Image> 
      </DataTemplate> 
     </TabControl.ItemTemplate> 
     <TabControl.ContentTemplate> 
      <DataTemplate> 
       <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding Name}"></TextBlock> 
      </DataTemplate> 
     </TabControl.ContentTemplate> 
    </TabControl> 
</Grid> 

ビュー。私はちょうどテキストで内容を真似した。