WPF&prism MVVM 和 Tabitem 与图像

Question

我有一个带有选项卡控件的 wpf 应用程序，它在 tabitem 上显示图像而不是文本。 现在我想重写整个事情并使用棱镜。 我找到了一个示例，但只有一个文本属性绑定到 tabitem。 如何通过绑定到视图模型来显示图像 （每个模块都有一个选项卡）。

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

查看

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

上面的代码将在标签标题中显示三 (3) 个带有指定图像的标签。我只用文字对内容进行了虚拟化。