将TabItem标题绑定到样式中的Textblock?

时间:2012-04-03 19:09:10

标签: wpf xaml blend

我正在尝试创建一个制表符控件,其中TabItem上的页眉绑定在tabcontrol的controltemplate中的文本框中。我怎么能通过风格的约束来做到这一点?

这是我的代码:

<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>

3 个答案:

答案 0 :(得分:2)

试试这个

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

答案 1 :(得分: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}}"/>

答案 2 :(得分:0)

这不是使用控件模板,而是演示通过视图模型将文本框绑定到选项卡标题。请注意,我正在使用MVVM灯(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; }
}