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）个选项卡，其中包含选项卡标题中的指定图像。我用文字愚弄了内容。

带有图像的{WPF＆amp; prism MVVM和Tabitem

1 个答案: