WPF 选项卡控件绑定

Question

有我的代码

     <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

为什么只有一个绑定有效？第一和第二没有，为什么？也许问题是 tabcontrol 绑定？我还添加了 Window.Inizialized {DataContext=this}，谢谢

这是属性

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

Answer 1

您正在使用两个不同的范围：MainWindow 的范围和 DataTemplate 的范围。

两个范围有不同的 DataContext 值：由于您已将 MainWindow.DataContext 设置为 this，因此 MainWindow.DataContext 就是 MainWindow 本身。
DataTemplate.DataContext 始终是目标数据项，在您的情况下是当前 TabItem.

由于 SourceImageTab 是在 MainWindow 上定义的，因此 MainWIndow 范围内的绑定有效。绑定 Binding SourceImageTab 解析为 MainWindow.SourceImageTab 属性。但在 DataTemplate 内部，相同的绑定表达式解析为 TabIte.SourceImageTab，它不存在。

解决办法是调整DataTemplate里面的绑定。为了找到 MainWindow，您可以使用 Binding.RelativeSource。此外，当前以 TabItem 作为源的绑定也可以简化为例如`{绑定 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

WPF 选项卡控件绑定

WPF Tabcontrol Binding

c#

wpf

visual-studio

tabcontrol