Как добавить новый пользовательский элемент управления в TabControl.ContentTemplate?

Question

Я немного застрял в добавлении новых экземпляров usercontrol в TabControl.ContentTemplate?

Моих Xa здесь:

<TabControl ItemsSource="{Binding Tables}"> 
    <TabControl.ItemTemplate> 
     <DataTemplate> 

     </DataTemplate> 
    </TabControl.ItemTemplate> 
    <TabControl.ContentTemplate> 
     <DataTemplate DataType="{x:Type uc:mytest1}"> 
      <uc:mytest1> 

      </uc:mytest1> 
     </DataTemplate> 
    </TabControl.ContentTemplate> 
</TabControl> 

Я связывание TabControl.ItemsSource собственности на ObservableCollection и в шаблоне контента Я добавляю пользовательский элемент управления, но когда это приложение работает я получаю новые элементы, как TabItem с, но на странице содержимого выполняется одно и то же пользовательское управление, но я хочу добавить новые пользовательские элементы управления для каждого нового TabItem.

Я очень новичок в WPF, и, возможно, я делаю очень основную ошибку, любезно направляю меня.

Answer 1

ControlTemplate определяет внешний вид элементов элемента управления вкладки, которые не являются частью отдельных элементов табуляции. ItemTemplate обрабатывает содержимое отдельных элементов табуляции. Кроме того, TabItem является элементом управления содержимым с заголовком, что означает, что он имеет два свойства типа контента Content и Header с двумя отдельными шаблонами ContentTemplate и HeaderTemplate. Чтобы иметь возможность заполнять элементы табуляции с помощью привязки, вам необходимо создать стиль TabItem, используя указанные выше свойства.

Пример:

<Window x:Class="Example.Window2" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Name="Window" 
    Title="Window2" Height="300" Width="300"> 
    <Window.DataContext> 
     <Binding ElementName="Window" Path="VM"/> 
    </Window.DataContext> 
    <Window.Resources> 
     <DataTemplate x:Key="TabItemHeaderTemplate"> 
      <Grid> 
       <TextBlock Text="{Binding Header}"/> 
       <Ellipse Fill="Red" Width="40" Height="40" Margin="0,20,0,0"/> 
      </Grid> 
     </DataTemplate> 
     <DataTemplate x:Key="TabItemContentTemplate"> 
      <Ellipse Fill="Green"/> 
     </DataTemplate> 
     <Style x:Key="TabItemContainerStyle" TargetType="TabItem"> 
      <Setter Property="Header" Value="{Binding}"/> 
      <Setter Property="HeaderTemplate" 
        Value="{StaticResource TabItemHeaderTemplate}"/> 
      <Setter Property="Content" Value="{Binding}"/> 
      <Setter Property="ContentTemplate" 
        Value="{StaticResource TabItemContentTemplate}"/> 
     </Style> 
    </Window.Resources> 
    <Grid> 
     <TabControl ItemsSource="{Binding Items}" 
        ItemContainerStyle="{StaticResource TabItemContainerStyle}"/> 
    </Grid> 
</Window> 

Код позади:

public partial class Window2 : Window 
{ 
    public TabControlVM VM { get; set; } 

    public Window2() 
    { 
     VM = new TabControlVM(); 
     InitializeComponent(); 
    } 
} 

И вид модели классы:

public class TabControlVM 
{ 
    public ObservableCollection<TabItemVM> Items { get; set; } 

    public TabControlVM() 
    { 
     Items = new ObservableCollection<TabItemVM>(); 
     Items.Add(new TabItemVM("tabitem1")); 
     Items.Add(new TabItemVM("tabitem2")); 
     Items.Add(new TabItemVM("tabitem3")); 
     Items.Add(new TabItemVM("tabitem4")); 
    } 
} 

public class TabItemVM 
{ 
    public string Header { get; set; } 

    public TabItemVM(string header) 
    { 
     Header = header; 
    } 
} 

Answer 2

Саурабх, При установке шаблона, обычно DataTemplate, ControlTemplate и т.д., визуальные элементы внутри этих шаблонов повторно используются в WPF с концепцией виртуализации пользовательского интерфейса. TabControl обычно отображает только один элемент за раз, поэтому он не создает новый визуальный элемент для каждого элемента табуляции, вместо этого он только изменяет DataContext и обновляет привязки «Selected Visual Item». Его загруженные/незагруженные события запускаются, но объект всегда такой же.

Вы можете использовать события загрузки/выгрузки и написать свой код соответствующим образом, чтобы ваш «визуальный элемент», который является вашим пользовательским контролем, чтобы элемент управления не был апатридом и не зависел от старых данных. Когда новый DataContext применяется, вы должны обновить все.

События DataContextChanged, Loaded and Unloaded могут помочь вам удалить все зависимости от старых данных.

В противном случае вы создадите новый TabItem вручную с помощью UserControl как своего дочернего элемента и добавьте его в TabControl вместо добавления элементов данных.

Добавление элементов TabItems вручную создаст новый элемент управления для каждого элемента, а в выбранной области будут отображены различные элементы на основе выбора.