在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

回答

相關問題