Создание динамического TabControl в Silverlight

Question

Я хотел бы создать TabControl в Silverlight, который управляется набором объектов. Я покажу код ниже ОЧЕНЬ базовой установки, которую я пытаюсь прототип.

MainPage.xaml

<UserControl x:Class="DataDrivenTabControl.MainPage" 
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:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls" 
xmlns:local="clr-namespace:DataDrivenTabControl" 
mc:Ignorable="d" 
d:DesignHeight="300" d:DesignWidth="400"> 

<UserControl.DataContext> 
    <local:MainPage_ViewModel/> 
</UserControl.DataContext> 

<StackPanel> 
    <controls:TabControl> 
     <!-- What do I need to do here for a Template? --> 
    </controls:TabControl> 
</StackPanel> 

MainPage_ViewModel.cs

public class MainPage_ViewModel : Base_ViewModel 
{ 
    public MainPage_ViewModel() 
    { 
     PopulateCollectionOfTabs(); 
    } 

    public ObservableCollection<TabItem_DataViewModel> CollectionOfTabs 
    { 
     get { return collectionOfTabs; } 
     set 
     { 
      if (collectionOfTabs != value) 
      { 
       collectionOfTabs = value; 
       OnPropertyChanged("CollectionOfTabs"); 
      } 
     } 
    } 
    private ObservableCollection<TabItem_DataViewModel> collectionOfTabs = new ObservableCollection<TabItem_DataViewModel>(); 

    private void PopulateCollectionOfTabs() 
    { 
     this.CollectionOfTabs.Add(
      new TabItem_DataViewModel() 
      { 
       TabDescription = "Tab 1", 
       ButtonDescription = "Button for Tab 1" 
      }); 

     this.CollectionOfTabs.Add(
      new TabItem_DataViewModel() 
      { 
       TabDescription = "Tab 2", 
       ButtonDescription = "Button for Tab 2" 
      }); 
    } 
} 

TabItem_DataViewModel.cs

public class TabItem_DataViewModel : Base_ViewModel 
{ 
    public string TabDescription 
    { 
     get { return tabDescription; } 
     set 
     { 
      if (tabDescription != value) 
      { 
       tabDescription = value; 
       OnPropertyChanged("TabDescription"); 
      } 
     } 
    } 
    private string tabDescription = string.Empty; 

    public string ButtonDescription 
    { 
     get { return buttonDescription; } 
     set 
     { 
      if (buttonDescription != value) 
      { 
       buttonDescription = value; 
       OnPropertyChanged("ButtonDescription"); 
      } 
     } 
    } 
    private string buttonDescription = string.Empty; 
} 

Все, что я действительно пытаюсь сделать в этом примере в получите TabControl для отображения динамического списка вкладок, которые будут привязаны к коллекции («Вкладка 1» & «Вкладка 2» в заголовке текущей реализации). Когда вы нажимаете на вкладку, может быть кнопка (для простоты), где содержимое кнопки будет привязываться к ButtonDescription в TabItem_DataViewModel. Это очень просто, но если я смогу заставить это работать, я обязательно смогу реализовать остальное решение.

Я уверен, что это должно быть сделано с помощью шаблонов в TabControl, но я просто оставил его пустым, надеясь, что кто-то сможет указать мне в правильном направлении.

Любая помощь будет принята с благодарностью, спасибо!

Answer 1

Мне удалось заставить его работать как можно раньше, используя RadTabControl от Telerik, как показано ниже. Я использовал версию Telerik, поскольку ItemSource - это IEnumerable, а не коллекция TabItems.

<telerikNavigation:RadTabControl ItemsSource="{Binding CollectionOfTabs}"> 
     <telerikNavigation:RadTabControl.ItemContainerStyle> 
      <Style TargetType="telerikNavigation:RadTabItem"> 
       <Setter Property="HeaderTemplate"> 
        <Setter.Value> 
         <DataTemplate> 
          <StackPanel> 
           <TextBlock Text="{Binding TabDescription}"/> 
          </StackPanel> 
         </DataTemplate> 
        </Setter.Value> 
       </Setter> 
       <Setter Property="ContentTemplate"> 
        <Setter.Value> 
         <DataTemplate> 
          <Button Content="{Binding ButtonDescription}" Width="100" HorizontalAlignment="Center"/> 
         </DataTemplate> 
        </Setter.Value> 
       </Setter> 
      </Style> 
     </telerikNavigation:RadTabControl.ItemContainerStyle> 
    </telerikNavigation:RadTabControl>