CODEWITHSUNDEEP
c#wpfvisual-studiotabcontrol
Alessio Ricci
Alessio Ricci

Reputation: 19

WPF Tabcontrol Binding

there is my code

     <TabControl x:Name="TabControlSQL" Margin="10,10,10,10" Grid.Row="2" SelectionChanged="TabControlSQL_SelectionChanged" ItemsSource="{Binding}">
            <TabControl.Resources>
                <DataTemplate x:Key="TabHeader" DataType="TabItem">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition></ColumnDefinition>
                            <ColumnDefinition></ColumnDefinition>
                            <ColumnDefinition></ColumnDefinition>
                            <ColumnDefinition></ColumnDefinition>
                            <ColumnDefinition></ColumnDefinition>
                            <ColumnDefinition></ColumnDefinition>
                            <ColumnDefinition></ColumnDefinition>
                            <ColumnDefinition></ColumnDefinition>
                        </Grid.ColumnDefinitions>
                        <TextBlock Text="{Binding SourceImageTab}" FontSize="20" Foreground="Red"></TextBlock>//binding not work
                        <TextBlock Grid.Column="0" Text="[" />
                        <TextBlock Grid.Column="1" Text="{Binding RelativeSource={RelativeSource AncestorType=TabItem }, Path=Header}" />
                        <TextBlock Grid.Column="2" Text="]" />
                        <Button Background="Transparent" BorderBrush="Transparent" Grid.Column="2" Height="15" Width="15" Padding="0" Name="btnUnLock" Click="btnUnLock_Click" Margin="10,0,0,0">
                            <Image HorizontalAlignment="Center" VerticalAlignment="Center" Source="{Binding SourceImageTab}" Height="12" ></Image>//binding not work
                        </Button>
                        <Button Background="Transparent" BorderBrush="Transparent" Grid.Column="3" Height="15" Width="15" Name="btnDelete" Padding="0"  Margin="3,0,0,0" Click="btnDelete_Click" CommandParameter="{Binding RelativeSource={RelativeSource AncestorType={x:Type TabItem}}, Path=Name}">
                            <Image HorizontalAlignment="Center" VerticalAlignment="Center" Source="..//Resources/cancel.png" Height="12" ></Image>
                        </Button>
                    </Grid>
                </DataTemplate>
            </TabControl.Resources>
        </TabControl>
        <TextBlock Text="{Binding SourceImageTab}" FontSize="20" Foreground="Red"></TextBlock>//this work

why only one binding work? the first and the seconds no, why? maybe the problem is tabcontrol binding? i also have added in Window.Inizialized {DataContext=this}, thanks

this is the property

public string SourceImageTab
    {
        get
        {
            return "..//Resources/locked.png";
        }
    }

Upvotes: 0

Views: 115

Answers (1)

BionicCode
BionicCode

Reputation: 28948

You are working with two different scopes: scope of MainWindow and scope of DataTemplate.

Both scopes have different DataContext values: since you have set MainWindow.DataContext to this, the MainWindow.DataContext is the MainWindow itself.
The DataTemplate.DataContext is always the targeted data item, which is in your case the current TabItem.

Since SourceImageTab is defined on MainWindow, the binding in the scope of MainWIndow works. The binding Binding SourceImageTab resolves to the MainWindow.SourceImageTab property. But inside the DataTemplate the same binding expression resolves to TabIte.SourceImageTab, which doesn't exist.

The solution is to adjust the bindings inside the DataTemplate. In order to find the MainWindow you can use Binding.RelativeSource. Also the bindings that are currently having the TabItem as source can be simplified to e.g. `{Binding Header}":

MainWindow.xaml.cs

// TODO::Create a binding source collection which binds to the TabControl
partial class MainWindow : Window
{
  public ObservableCollection<MyTabDataItem> TabItems { get; set; }
  public MainWindow()
  {
    InitializeComponent();
    this.DataContext = this;
  }
}

MainWindow.xaml

<TabControl x:Name="TabControlSQL" ItemsSource="{Binding MyTabDataItem}">
  <TabControl.Resources>
    <DataTemplate x:Key="TabHeader" DataType="TabItem">
      <Grid>
        <Grid.ColumnDefinitions>
          ...
        </Grid.ColumnDefinitions>
        
        <TextBlock Text="{Binding RelativeSource={RelativeSource AncestorType=Window}, Path=SourceImageTab}" FontSize="20" Foreground="Red" /> //binding now works

        ...           

        <TextBlock Grid.Column="1" Text="{Binding Header}" />

        ...

        <Button>
          <Image Source="{Binding RelativeSource={RelativeSource AncestorType=Window}, Path=SourceImageTab}" /> //binding now works
        </Button>
        ...
        <Button CommandParameter="{Binding Name}">
          <Image HorizontalAlignment="Center" VerticalAlignment="Center" Source="..//Resources/cancel.png" Height="12"  />
        </Button>
      </Grid>
    </DataTemplate>
  </TabControl.Resources>
</TabControl>

<TextBlock Text="{Binding SourceImageTab}" FontSize="20" Foreground="Red" /> // this worked before

Upvotes: 2

Related Questions