2012-04-03 35 views
0

我想创建一个选项卡控件,其中TabItem上的标题绑定在tabcontrol的控件模板中的文本框中。我如何通过绑定风格来做到这一点?在样式中将TabItem标题绑定到文本块?

这里是我的代码:

<Style x:Key="TabControlTest1" TargetType="TabControl"> 
<Setter Property="Template"> 
    <Setter.Value> 
     <ControlTemplate TargetType="TabControl"> 
      <Grid> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="Auto"/> 
        <ColumnDefinition Width="*"/> 
       </Grid.ColumnDefinitions> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="Auto"/> 
       </Grid.RowDefinitions> 

       <!--Area for TabItems--> 
       <Border Grid.Column="0" 
        Grid.Row="0" 
        > 
        <TabPanel IsItemsHost="True" 
         x:Name="HeaderPanel" 
         Background="Transparent" /> 
       </Border> 

       <!--Content of SelectedItems--> 
       <Border Grid.Column="1" 
        BorderBrush="{DynamicResource TabControlContentPresentBorderBrush}" 
        BorderThickness="0,1,1,1" 
        Background="{DynamicResource TabControlContentPresentBackgroundBrush}" 
        > 
        <Grid> 
         <Grid.RowDefinitions> 
          <RowDefinition Height="Auto"/> 
          <RowDefinition Height="*"/> 
         </Grid.RowDefinitions> 
         <!--///This is Where I want to bind the Header///--> 
         <Label 
          Grid.Row="0" 
          Foreground="AliceBlue" 
          Content="{Binding Header, ElementName=TabItem}"/> 
         <ContentPresenter 
          Grid.Row="1" 
          x:Name="PART_SelectedContentHost" 
          ContentSource="SelectedContent" 
          Margin="5"/> 
        </Grid> 

       </Border> 

    <ControlTemplate x:Key="TabItemControlTemplate" TargetType="{x:Type TabItem}"> 
      <!--Grid Defines Height and also hold content header--> 
      <Grid> 

       <Border Background="{DynamicResource TabItemContentPresentBackgroundBrush}" 
       Margin="0,0,0,5"> 

        <!--Content of TabItem will be rendered--> 
        <ContentPresenter 
         x:Name="ContentSite" 
         Margin="3" 
         HorizontalAlignment="Left" 
         VerticalAlignment="Center" 
         RecognizesAccessKey="True" 
         ContentSource="Header"/> 
       </Border> 
      </Grid> 
     </ControlTemplate> 

      </Grid> 
     </ControlTemplate> 
    </Setter.Value> 
</Setter> 

回答

0

你可以尝试做到这一点无论是使用TemplateBinding或使用的RelativeSource。 TemplateBinding:

<Label Grid.Row="0" 
     Foreground="AliceBlue" 
     Content="{TemplateBinding Header}"/> 

的RelativeSource:

<Label Grid.Row="0" 
     Foreground="AliceBlue" 
     Content="{Binding Path=Header, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=TabItem}}"/> 
+0

这是我想要走的路。我尝试使用相对来源,但它不适用于TabItem。如果我将祖先类型更改为窗口和标题路径,它会正确渲染。不知道为什么它没有显示。 – Farnsworth 2012-04-03 21:08:59

+0

哦,我没有注意到。它不起作用,因为你在TabControl模板中定义它,而不是在TabItems模板中。所以你试图通过FindAncestor从TabControl进行绑定(虽然它是孩子,而不是祖先)。您应该将代码移动到TabItem模板。 – 2012-04-04 05:42:30

0

这不是使用控制模板,但演示通过视图模型绑定一个文本框的标签标头。请注意,我使用的是MVVM light(ViewModelBase和Set()),但如果需要,您可以用您自己的INotifyPropertyChanged支持来替换。

enter image description here

<Grid> 
    <Grid.Resources> 
     <DataTemplate x:Key="ContentTemplate" DataType="{x:Type Samples:TabBindingViewModel}"> 
      <StackPanel> 
       <TextBlock Text="{Binding MyContent}"/> 
       <TextBox Text="{Binding Header}"/> 
      </StackPanel> 
     </DataTemplate> 
    </Grid.Resources> 

    <TabControl 
     ContentTemplate="{StaticResource ContentTemplate}" 
     DisplayMemberPath="Header" 
     ItemsSource="{Binding Items}" /> 
</Grid> 

public class TabContentToHeaderViewModels : ViewModelBase 
{ 
    private readonly ObservableCollection<TabContentToHeaderViewModel> _items; 

    public TabContentToHeaderViewModels() 
    { 
     _items = new ObservableCollection<TabContentToHeaderViewModel> 
        { 
         new TabContentToHeaderViewModel(1), 
         new TabContentToHeaderViewModel(2), 
         new TabContentToHeaderViewModel(3), 
        }; 
    } 

    public IEnumerable<TabContentToHeaderViewModel> Items 
    { 
     get { return _items; } 
    } 
} 

public class TabContentToHeaderViewModel : ViewModelBase 
{ 
    public TabContentToHeaderViewModel() : this(0) 
    { 
    } 

    public TabContentToHeaderViewModel(int n) 
    { 
     Header = "I'm the header: " + n.ToString(CultureInfo.InvariantCulture); 
     MyContent = "I'm the content: " + n.ToString(CultureInfo.InvariantCulture); 
    } 

    private string _header; 
    public string Header 
    { 
     get { return _header; } 
     set { Set(() => Header, ref _header, value); } 
    } 

    public string MyContent { get; set; } 
} 
2

试试这个

<Label Grid.Row="0" 
     Foreground="AliceBlue" 
     Content="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=TabControl} 
     , Path=SelectedItem.Header}"/>