自定義TabItem DataTemplate

如何在WPF中爲TabItems創建DataTemplate，並在每個TabItem中自定義其內容？自定義TabItem DataTemplate

我需要這樣的：

<TabControl> 
      <TabControl.ContentTemplate> 
       <DataTemplate> 
        <Label Content="Name" Name="label1" /> 
        <TextBox Name="name" /> 
        ... 
       </DataTemplate> 
      </TabControl.ContentTemplate> 
      <TabItem Header="Add" Name="tabItem1"> 
       <Grid Height="213"> 
        <Button Content="Add" Name="button1" /> 
       </Grid> 
      </TabItem> 
      <TabItem Header="Edit" Name="tabItem2"> 
       <Grid> 
        <Button Content="Edit" Name="button2" /> 
       </Grid> 
      </TabItem> 
</TabControl>

但按鍵不顯示（僅DataTemplate中的內容）。

來源

2013-03-21 Petr Přikryl

所以你想要標籤和文本框和標籤中的按鈕？ – Blachshma

是的，但每個標籤中的按鈕不同。 –

將重現模板的TabControl的資源，然後用ContentPresenter從特定標籤的ContentTemplate引用它：

<TabControl> 
    <TabControl.Resources> 
     <DataTemplate x:Key="TabTemplate"> 
      <Label Content="Name" Name="label1" />     
     </DataTemplate> 
    </TabControl.Resources> 
    <TabItem Header="Add" Name="tabItem1"> 
     <TabItem.ContentTemplate> 
      <DataTemplate> 
       <Grid Height="213"> 
        <Grid.RowDefinitions> 
         <RowDefinition Height="*"/> 
         <RowDefinition Height="*"/> 
        </Grid.RowDefinitions> 
        <Button Content="Add" Name="button1" /> 
        <ContentPresenter Grid.Row="1" ContentTemplate="{StaticResource TabTemplate}"/> 
       </Grid> 
      </DataTemplate> 
     </TabItem.ContentTemplate> 
    </TabItem> 
    <TabItem Header="Edit" Name="tabItem2"> 
     <TabItem.ContentTemplate> 
      <DataTemplate> 
       <Grid Height="213"> 
        <Grid.RowDefinitions> 
         <RowDefinition Height="*"/> 
         <RowDefinition Height="*"/> 
        </Grid.RowDefinitions> 
        <Button Content="Edit" Name="button2" /> 
        <ContentPresenter Grid.Row="1" ContentTemplate="{StaticResource TabTemplate}"/> 
       </Grid> 
      </DataTemplate> 
     </TabItem.ContentTemplate> 
    </TabItem>

除了ContentPresenter一切都可以在每片不同...

來源

2013-03-21 23:48:22 Blachshma

您也可以嘗試使用TabControl ContentTemplateSelector。

在這裏，您可以爲選項卡項定義兩個或多個不同的模板（用戶控件）。而你也可以在運行時使用DataTemplateSelector

這裏決定這是一個包含相同的演示一個博客：mvvm-using-contenttemplateselector-in-tab-control-view/

最後的TabControl會是這個樣子：

<UserControl x:Class="TabControlItemTemplateDemo.View.MyTabControl" 
     xmlns:ViewModel="clr-namespace:TabControlItemTemplateDemo" 
     xmlns:View1="clr-namespace:TabControlItemTemplateDemo.View" mc:Ignorable="d" > 

<UserControl.Resources> 
    <DataTemplate x:Key="MyTabHeaderTemplate"> 
     <Grid> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="*" /> 
      </Grid.ColumnDefinitions> 
      <TextBlock Grid.Column="0" Text="{Binding Header}" Width="80" Height="25" FontWeight="Bold"/> 
     </Grid> 
    </DataTemplate> 

    <DataTemplate x:Key="CountryContentTemplate"> 
     <View1:CountryView DataContext="{Binding CurrentMyTabContentViewModel}"/> 
    </DataTemplate> 

    <DataTemplate x:Key="ContinentsContentTemplate"> 
     <View1:ContinentsView DataContext="{Binding CurrentMyTabContentViewModel}"/> 
    </DataTemplate> 

    <ViewModel:MyViewSelector x:Key="selector" 
             CountryTemplate="{StaticResource CountryContentTemplate}" 
             ContintentsTemplate="{StaticResource ContinentsContentTemplate}" /> 
</UserControl.Resources> 
<DockPanel> 
    <TabControl ItemsSource="{Binding Tabs}" TabStripPlacement="Left" 
       BorderThickness="0" Background="White" 
       ItemTemplate="{StaticResource MyTabHeaderTemplate}" 
       ContentTemplateSelector="{StaticResource selector}"> 
    </TabControl> 
</DockPanel>

來源

2013-08-19 11:33:06

自定義TabItem DataTemplate

回答

相關問題