WPF & Prisma MVVM und Tabitem mit einem Bild

Question

Ich habe eine WPF-Anwendung mit einem Tab-Steuerelement zeigt Bilder anstelle von Text auf dem Tabitem. Jetzt möchte ich das Ganze neu schreiben und Prisma verwenden. Ich habe ein Beispiel gefunden, aber es gibt nur eine Texteigenschaft, die an das Tabitem gebunden ist. Wie kann ich ein Bild durch Bindung an ein Viewmodel anzeigen (Jedes Modul hat eine Registerkarte).

Answer 1

Wenn Sie die Elemente an das TabControl binden, verwenden Sie ItemsSource. Die ItemTemplate legt fest, was in der Kopfzeile der Registerkarte angezeigt wird. Das ContentTemplate legt fest, was im Registerbereich angezeigt wird.

Ansicht Modelle

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); 
    } 
} 

Ansicht

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

Der obige Code drei (3) Registerkarten mit dem angegebenen Bild in der Registerkarte Kopfzeile zeigen. Ich habe den Inhalt mit nur Text getäuscht.