이미지가있는 WPF 및 prism MVVM 및 Tabitem

Question

tabitem의 텍스트 대신 이미지를 보여주는 탭 컨트롤이있는 wpf 응용 프로그램이 있습니다. 이제 모든 것을 다시 작성하고 프리즘을 사용하고 싶습니다. 예제를 발견했지만 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); 
    } 
} 

위의 코드 탭 헤더에 지정된 이미지와 세 (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> 

보기. 나는 단지 텍스트만으로 내용을 다듬었다.