在Silverlight中构建动态TabControl

我想在由对象集合驱动的Silverlight中构建TabControl。我将在下面的代码中展示我试图创建的一个非常基本的设置。在Silverlight中构建动态TabControl

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显示一个动态列表，这些列表将绑定到一个集合（当前实现的标题中的“Tab 1”&“Tab 2”）。当你点击一个Tab时，可能会有一个按钮（为了简单起见），按钮的内容将绑定到TabItem_DataViewModel上的ButtonDescription。这是非常基本的，但是如果我能够得到这个工作，我肯定能够实现我的解决方案的其余部分。

我敢肯定这必须在TabControl的模板上完成，但我只是把它留空，希望有人能够指出我在正确的方向。

任何帮助将不胜感激，谢谢！

来源

2010-07-20 JSprang

我能够通过使用Telerik的RadTabControl按预期工作，如下所示。我使用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>

来源

2010-07-22 13:06:12 JSprang

在Silverlight中构建动态TabControl

回答

相关问题