WPF TabItem - 图片绑定 [英] WPF TabItem - Image Binding

问题描述

我正在尝试将 TabItem 中的图像绑定到我的 TabControlResource 部分，但我似乎无法做到这一点.Header 文本很好，因为 TabItem 有一个 Header 属性，但我无法将图片添加到其中.

I am trying to bind an Image from my TabItem to my TabControlResource section but I cannot seem to do this. The Header text is fine as the TabItem has a Header attribute but there is nothing I can add my image to.

这是我的全部 TabControl 代码:

Here is the whole of my TabControl code:

<TabControl Margin="10" BorderBrush="#c83620" BorderThickness="4" Background="#e37e6e" FontFamily="Segoe UI" FontSize="14" >
        <TabControl.Resources>
            <Style TargetType="TabItem">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="TabItem">
                            <Border Name="Border" BorderThickness="4,4,4,0" BorderBrush="#c83620" CornerRadius="4,4,0,0" Padding="6,4,6,4" Margin="6,0">
                                <StackPanel Orientation="Horizontal" Margin="6,4,6,4">
                                    <Image Name="img" Height="15" Width="15" Margin="0,0,4,0" Source="../Images/delete.png" />
                                    <Label Grid.Row="0" Name="Text" Foreground="Black" Content="{TemplateBinding Header}"/>
                                </StackPanel>
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsSelected" Value="True">
                                    <Setter TargetName="Border" Property="Background" Value="#e37e6e" />
                                    <Setter TargetName="Text" Property="TextBlock.Foreground" Value="White"/>
                                    <Setter TargetName="Text" Property="TextBlock.FontWeight" Value="Bold"/>
                                    <Setter TargetName="Border" Property="Margin" Value="1,1,1,-4"/>
                                    <Setter TargetName="Border" Property="Padding" Value="2"/>
                                </Trigger>
                                <Trigger Property="IsSelected" Value="False">
                                    <Setter TargetName="Text" Property="TextBlock.Foreground" Value="#c83620"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </TabControl.Resources>
        <TabItem Margin="-3,0,0,0" Header="Login">
        </TabItem>
        <TabItem Header="General" >
                <Label Content="Content goes here..." />
        </TabItem>
        <TabItem Header="Security" />
        <TabItem Header="Details" />
    </TabControl>

正如您从下面的部分所看到的，我将标签的内容绑定到 TabItem 的标题，并且它工作正常:

As you can see from the section below I am binding the content of the label to the header of the TabItem and it works fine:

<Border Name="Border" BorderThickness="4,4,4,0" BorderBrush="#c83620" CornerRadius="4,4,0,0" Padding="6,4,6,4" Margin="6,0">
    <StackPanel Orientation="Horizontal" Margin="6,4,6,4">
        <Image Name="img" Height="15" Width="15" Margin="0,0,4,0" Source="../Images/delete.png" />
        <Label Grid.Row="0" Name="Text" Foreground="Black" Content="{TemplateBinding Header}"/>
     </StackPanel>
</Border>

但我想要每个 TabItems 的不同图像.我在哪里可以将图像绑定到 TabItem 上以获得正确的图像?

But I want different images for each of the TabItems. Where can i bind the Image to on the TabItem to get the correct image?

推荐答案

您可以通过使用模板的其他属性来做到这一点，例如 Tag 属性.所以图片绑定应该是这样的.

You can do that by using other properties of the Template, for example Tag property. So the image binding should look like this.

<Image Name="img" Height="15" Width="15" Margin="0,0,4,0" 
  Source="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Tag.Source}" />

你应该在资源中定义所有这样的图像.

And you should define in the resources all images like that.

<Image x:Key="testImage" Source="/WPFTest;component/Images/Reload.png" />

并将其绑定到TabItem的Tag属性.

<TabItem Header="General" Tag="{StaticResource testImage}" >

这篇关于WPF TabItem - 图片绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！