wpf选项卡标题中第一个选项卡标题中的图像

时间:2015-02-23 06:34:25

标签: wpf mvvm prism tabcontrol tabitem

我想在当前完全正常工作的Prism MVVM WPF应用程序中的TabControl的第一个标签页中显示图像。

完整说明如下:

当用户从左侧区域的“类别”列表中选择一个项目时,它会在右侧区域显示“更多详细信息”和“相关产品”。此右侧区域包含UserControl中的TabControl。 第一个选项卡显示“更多类别详细信息”,第二个选项卡显示“相关产品”。数据显示正确。现在,我只想在First标题页中显示类别缩略图和类别名称。

我尝试在First标签上使用HeaderTemplate,如下所示

<TabControl  VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch" >
 <TabItem  Name="tabItemCategoryMoreInfo"  >
  <TabItem.HeaderTemplate>
    <DataTemplate>
      <StackPanel Orientation="Horizontal">
        <Image  x:Name="viewImage" Height="20" Width="20" Margin="0,0,2,0" 
                        Source="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabControl} }, Path=Content.DataContext.SelectedParent.PictureBinary}"/>
        <TextBlock Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type TabItem} }, Path=Content.DataContext.SelectedParent.CategoryName}"
                           VerticalAlignment="Center" FontSize="14" FontWeight="SemiBold" />
      </StackPanel>
      <DataTemplate.Triggers>
        <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type TabItem} }, Path=Content.DataContext.SelectedParent.PictureBinary}" Value="{x:Null}" >
          <Setter TargetName="viewImage" Property="Source" Value="/CatalogModule;component/Images/ItemIcon.png"  />
        </DataTrigger>
      </DataTemplate.Triggers>
     </DataTemplate>
  </TabItem.HeaderTemplate>

  <ContentControl prism:RegionManager.RegionName="CategoryMoreDetailsRegion" />
 </TabItem>
 <TabItem Header="Products" Name="tabItemCategoryProducts">
  <ContentControl prism:RegionManager.RegionName="CategoryProductsRegion" />
 </TabItem>

未显示产品名称或产品图片。但它只显示默认图像,因此触发器看起来很有效。有人可以帮忙吗?

修改

最初我在图像数据路径中使用了TabItem而不是TabControl:

<Image  x:Name="viewImage" Height="20" Width="20" Margin="0,0,2,0" 
                    Source="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabItem} }, Path=Content.DataContext.SelectedParent.PictureBinary}"/>

1 个答案:

答案 0 :(得分:0)

Path中的DataTemplate Binding不同...... 可以解释为什么它不起作用。如果我理解正确,您说Binding Path中的DataTrigger有效,那么可能会更改Binding PathImageSource属性TextBlock.Text可能工作?:

<DataTemplate>
  <StackPanel Orientation="Horizontal">
    <Image  x:Name="viewImage" Height="20" Width="20" Margin="0,0,2,0" 
                    Source="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabItem}}, Path=Content.DataContext.SelectedParent.PictureBinary}"/>
    <TextBlock Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type TabItem}}, Path=Content.DataContext.SelectedParent.CategoryName}"
                       VerticalAlignment="Center" FontSize="14" FontWeight="SemiBold" />
  </StackPanel>
  <DataTemplate.Triggers>
    <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type TabItem}}, Path=Content.DataContext.SelectedParent.PictureBinary}" Value="{x:Null}" >
      <Setter TargetName="viewImage" Property="Source" Value="/CatalogModule;component/Images/ItemIcon.png"  />
    </DataTrigger>
  </DataTemplate.Triggers>
 </DataTemplate>

万一你无法看到差异,你在Image.Source Binding.Path中使用了这个:

AncestorType={x:Type TabControl}