CODEWITHSUNDEEP
wpfxamlblend
Farnsworth
Farnsworth

Reputation: 69

Binding TabItem Header to Textblock in Style?

I'm trying to create a tab control in which the Header on the TabItem is binded in a textbox that is in the controltemplate of the tabcontrol. how can i do this through binding in the style?

Here's my code:

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

Upvotes: 0

Views: 2930

Answers (3)

Chitta
Chitta

Reputation: 206

try this

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

Upvotes: 2

Phil
Phil

Reputation: 43011

This isn't using a control template, but demonstrates binding a textbox to the tab header through a view model. Note that I'm using MVVM light (ViewModelBase and Set()), but you can replace with your own INotifyPropertyChanged support if necessary.

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

Upvotes: 0

Dmitry Reznik
Dmitry Reznik

Reputation: 6862

You could try and achieve this either using TemplateBinding or using 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}}"/>

Upvotes: 0

Related Questions